/* =====================================================================
   StarPocket のリキッドガラス（glass.css）。決まりの紙: site2-spec.md の 4 章
   - 材料は .ui-glass 1 つ＋形の印 1 つ（--clear・--card・--menu・--text・--bar・--pill）＋色の向き（--dark）
   - 色は「色の 3 つの数」と「濃さ」に分けて持つ（形の印は濃さだけを変える）
   - .ui-glass は position・border-radius・::before・::after を決めない（例外は --pill だけ）
   - 屈折（Chromium だけ）は ui.js が html に ui-lens を付けた時だけ。url() を混ぜた書き方は html.ui-lens の中だけに書く
   - 後ろに置く色の玉（.ui-scene）も、ここに書く
   ===================================================================== */

/* ---- 色の印（明るい）。:root と、いつも明るい所 ---- */
:root{
  --ui-g-tint-1:255 255 255;--ui-g-tint-2:246 247 252;
  --ui-g-spec:radial-gradient(120% 90% at 16% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);
  --ui-g-rim:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -1px 0 rgba(10,11,15,.10);
  --ui-g-glow:inset 0 0 20px rgba(255,255,255,.18);
  --ui-g-edge:0 0 0 1px rgba(10,11,15,.08);
  --ui-g-shadow:0 1px 2px rgba(15,23,42,.10),0 14px 36px -12px rgba(15,23,42,.30);
  --ui-g-solid:#FFFFFF;--ui-g-solid-line:rgba(10,11,15,.28);
  --ui-g-pill-a1:.54;--ui-g-pill-a2:.46;
  --ui-scene-1:rgba(120,170,255,.85);--ui-scene-2:rgba(140,230,200,.64);--ui-scene-3:rgba(255,170,200,.72);--ui-scene-4:rgba(120,170,255,.48);
}
/* ---- 暗い（暗い表示・いつも暗い所・いつも暗いガラス） ---- */
:root[data-theme="dark"],.ui-tone-dark,.ui-glass--dark{
  --ui-g-tint-1:38 39 46;--ui-g-tint-2:10 11 15;
  --ui-g-spec:radial-gradient(120% 90% at 16% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 58%);
  --ui-g-rim:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.30);
  --ui-g-glow:inset 0 0 22px rgba(169,174,211,.10);
  --ui-g-edge:0 0 0 1px rgba(0,0,0,.35);
  --ui-g-shadow:0 1px 2px rgba(0,0,0,.35),0 16px 40px -14px rgba(0,0,0,.55);
  --ui-g-solid:#121318;--ui-g-solid-line:rgba(255,255,255,.40);
  --ui-g-pill-a1:.58;--ui-g-pill-a2:.50;
  --ui-scene-1:rgba(40,90,200,.62);--ui-scene-2:rgba(20,120,100,.45);--ui-scene-3:rgba(150,50,110,.48);--ui-scene-4:rgba(40,90,200,.36);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ui-g-tint-1:38 39 46;--ui-g-tint-2:10 11 15;
    --ui-g-spec:radial-gradient(120% 90% at 16% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 58%);
    --ui-g-rim:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.30);
    --ui-g-glow:inset 0 0 22px rgba(169,174,211,.10);
    --ui-g-edge:0 0 0 1px rgba(0,0,0,.35);
    --ui-g-shadow:0 1px 2px rgba(0,0,0,.35),0 16px 40px -14px rgba(0,0,0,.55);
    --ui-g-solid:#121318;--ui-g-solid-line:rgba(255,255,255,.40);
    --ui-g-pill-a1:.58;--ui-g-pill-a2:.50;
    --ui-scene-1:rgba(40,90,200,.62);--ui-scene-2:rgba(20,120,100,.45);--ui-scene-3:rgba(150,50,110,.48);--ui-scene-4:rgba(40,90,200,.36);
  }
}
/* いつも明るい所（強く入れる） */
.ui-tone-light{
  --ui-g-tint-1:255 255 255;--ui-g-tint-2:246 247 252;
  --ui-g-spec:radial-gradient(120% 90% at 16% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);
  --ui-g-rim:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -1px 0 rgba(10,11,15,.10);
  --ui-g-glow:inset 0 0 20px rgba(255,255,255,.18);
  --ui-g-edge:0 0 0 1px rgba(10,11,15,.08);
  --ui-g-shadow:0 1px 2px rgba(15,23,42,.10),0 14px 36px -12px rgba(15,23,42,.30);
  --ui-g-solid:#FFFFFF;--ui-g-solid-line:rgba(10,11,15,.28);
  --ui-g-pill-a1:.54;--ui-g-pill-a2:.46;
  --ui-scene-1:rgba(120,170,255,.85);--ui-scene-2:rgba(140,230,200,.64);--ui-scene-3:rgba(255,170,200,.72);--ui-scene-4:rgba(120,170,255,.48);
}
/* いつも暗いガラスは、明るい所の中でも暗い（後に書いて勝たせる） */
.ui-glass--dark{
  --ui-g-tint-1:38 39 46;--ui-g-tint-2:10 11 15;
  --ui-g-spec:radial-gradient(120% 90% at 16% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 58%);
  --ui-g-rim:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.30);
  --ui-g-glow:inset 0 0 22px rgba(169,174,211,.10);
  --ui-g-edge:0 0 0 1px rgba(0,0,0,.35);
  --ui-g-shadow:0 1px 2px rgba(0,0,0,.35),0 16px 40px -14px rgba(0,0,0,.55);
  --ui-g-solid:#121318;--ui-g-solid-line:rgba(255,255,255,.40);
  --ui-g-pill-a1:.58;--ui-g-pill-a2:.50;
}

/* =====================================================================
   4-2. ガラスの材料
   ===================================================================== */
.ui-glass{
  --ui-g-a1:.36;--ui-g-a2:.24;--ui-g-blur:20px;--ui-g-lens-blur:12px;
  background:var(--ui-g-spec),linear-gradient(180deg,rgb(var(--ui-g-tint-1) / var(--ui-g-a1)),rgb(var(--ui-g-tint-2) / var(--ui-g-a2)));
  -webkit-backdrop-filter:blur(var(--ui-g-blur)) saturate(180%) brightness(1.04);
          backdrop-filter:blur(var(--ui-g-blur)) saturate(180%) brightness(1.04);
  box-shadow:var(--ui-g-rim),var(--ui-g-glow),var(--ui-g-edge),var(--ui-g-shadow);
}
/* 形の印（濃さ・ぼかし・屈折の時のぼかし。屈折の強さは ui.js の表） */
.ui-glass--clear{--ui-g-a1:.16;--ui-g-a2:.08;--ui-g-blur:12px;--ui-g-lens-blur:4px}
.ui-glass--card{--ui-g-a1:.36;--ui-g-a2:.24;--ui-g-blur:20px;--ui-g-lens-blur:12px}
/* 暗い札は字を長く置くので、左上の照り返しを白 .12 に弱める（ラベルが照り返しと金の玉の上に重なっても読めるように。2026-10-17） */
.ui-glass--dark.ui-glass--card{--ui-g-spec:radial-gradient(120% 90% at 16% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 58%)}
.ui-glass--menu{--ui-g-a1:.78;--ui-g-a2:.70;--ui-g-blur:24px}
.ui-glass--text{--ui-g-a1:.86;--ui-g-a2:.80;--ui-g-blur:24px}
/* 会社型の上の帯（.spb__glass）。外の縁と影は無し・縁の光は上下の細い線だけ */
.ui-glass--bar{--ui-g-a1:.44;--ui-g-a2:.36;--ui-g-blur:24px;--ui-g-lens-blur:10px;
  --ui-g-rim:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.10);
  box-shadow:var(--ui-g-rim),var(--ui-g-glow)}
/* スクロールで濃くなる層（今の帯の JS が 0〜120px で濃さ 0→1 にする）。重ねると約 72% */
.ui-glass--bar > .spb__dense{background:rgb(var(--ui-g-tint-2) / .5)}
/* 規約型の上の浮いた帯（.top-bar）。すりガラスは ::after、縁は ::before、本体は外の縁と影だけ */
.ui-glass.ui-glass--pill{--ui-g-a1:var(--ui-g-pill-a1);--ui-g-a2:var(--ui-g-pill-a2);--ui-g-blur:20px;--ui-g-lens-blur:8px;
  position:relative;z-index:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--ui-g-edge),var(--ui-g-shadow)}
.ui-glass--pill::before,.ui-glass--pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.ui-glass--pill::after{z-index:-2;
  background:var(--ui-g-spec),linear-gradient(180deg,rgb(var(--ui-g-tint-1) / var(--ui-g-a1)),rgb(var(--ui-g-tint-2) / var(--ui-g-a2)));
  -webkit-backdrop-filter:blur(var(--ui-g-blur)) saturate(180%) brightness(1.04);
          backdrop-filter:blur(var(--ui-g-blur)) saturate(180%) brightness(1.04)}
.ui-glass--pill::before{z-index:-1;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none;box-shadow:var(--ui-g-rim)}

/* 屈折（Chromium だけ。ui.js が条件を見て html に ui-lens を付け、作れた物に data-ui-lens-on と --ui-lens を付ける） */
html.ui-lens .ui-glass[data-ui-lens-on]{
  -webkit-backdrop-filter:blur(var(--ui-g-lens-blur)) var(--ui-lens,) saturate(180%) brightness(1.04);
          backdrop-filter:blur(var(--ui-g-lens-blur)) var(--ui-lens,) saturate(180%) brightness(1.04)}
html.ui-lens .ui-glass.ui-glass--pill[data-ui-lens-on]{-webkit-backdrop-filter:none;backdrop-filter:none}
html.ui-lens .ui-glass--pill[data-ui-lens-on]::after{
  -webkit-backdrop-filter:blur(var(--ui-g-lens-blur)) var(--ui-lens,) saturate(180%) brightness(1.04);
          backdrop-filter:blur(var(--ui-g-lens-blur)) var(--ui-lens,) saturate(180%) brightness(1.04)}

/* すりガラスが使えないブラウザ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ui-glass{background:rgb(var(--ui-g-tint-2) / .94)}
  .ui-glass.ui-glass--pill{background:transparent}
  .ui-glass--pill::after{background:rgb(var(--ui-g-tint-2) / .94)}
}

/* =====================================================================
   4-3. 後ろに置く色の玉（紺紫・青緑・金・白藤）。動かすのは transform だけ
   1 周 44〜58 秒のゆっくりした動きの頭だけを動かし、5 秒以内に止める（回数 --ui-n は、長さ × 回数 が 5 秒を越えない数。止まった所でそのまま）
   ===================================================================== */
.ui-scene-host{position:relative;isolation:isolate}
.ui-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ui-scene > i{position:absolute;display:block;aspect-ratio:1;height:auto;border-radius:50%;
  background:radial-gradient(closest-side,var(--ui-c),transparent);
  animation:ui-drift var(--ui-t) ease-in-out var(--ui-n) forwards}
.ui-scene > i:nth-child(1){--ui-c:var(--ui-scene-1);width:62%;left:-14%;top:-38%;--ui-t:44s;--ui-n:.1;--ui-dx:12%;--ui-dy:18%;--ui-ds:1.12}
.ui-scene > i:nth-child(2){--ui-c:var(--ui-scene-2);width:46%;right:-10%;top:-20%;--ui-t:52s;--ui-n:.09;--ui-dx:-14%;--ui-dy:16%;--ui-ds:.92}
.ui-scene > i:nth-child(3){--ui-c:var(--ui-scene-3);width:52%;left:22%;bottom:-46%;--ui-t:58s;--ui-n:.08;--ui-dx:16%;--ui-dy:-14%;--ui-ds:1.08}
.ui-scene > i:nth-child(4){--ui-c:var(--ui-scene-4);width:38%;right:12%;bottom:-30%;--ui-t:48s;--ui-n:.1;--ui-dx:-12%;--ui-dy:-16%;--ui-ds:1.14}
@keyframes ui-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(var(--ui-dx),var(--ui-dy),0) scale(var(--ui-ds))}
}
/* 規約型のページの後ろ全体（画面に固定） */
/* ページ全体の後ろ（画面に固定）。Pocket Desk の app.css の .pd1-backdrop と同じ 3 つの玉（46vw・40vw・44vw、ぼかし 70px）と色（青・桃／赤紫・青緑） */
.ui-scene--fixed{position:fixed;inset:0;height:auto}
.ui-scene--fixed > i{background:var(--ui-c);filter:blur(70px)}
.ui-scene--fixed > i:nth-child(1){--ui-c:var(--ui-scene-1);width:54vw;left:-10vw;top:-14vw;right:auto;bottom:auto}
.ui-scene--fixed > i:nth-child(2){--ui-c:var(--ui-scene-3);width:48vw;right:-12vw;top:16vh;left:auto;bottom:auto}
.ui-scene--fixed > i:nth-child(3){--ui-c:var(--ui-scene-2);width:52vw;left:28vw;bottom:-24vw;top:auto;right:auto}
.ui-scene--fixed > i:nth-child(4){display:none}
@media (max-width:760px){.ui-scene--fixed > i:nth-child(1){width:110vw;left:-36vw;top:-24vw}.ui-scene--fixed > i:nth-child(2){width:96vw;right:-40vw;top:26vh}.ui-scene--fixed > i:nth-child(3){width:110vw;left:4vw;bottom:-46vw}}
/* 止める: 画面の外（ui.js の ui-off・会社型の .spb-off）と ⏸ */
.ui-scene.ui-off > i,.ui-scene.spb-off > i{animation-play-state:paused}
html.motion-off .ui-scene > i{animation-play-state:paused}
.spb-off .ui-scene > i{animation-play-state:paused}
/* 狭い幅と、動きを減らす設定では動かさない（止まった絵） */
@media (max-width:760px),(prefers-reduced-motion:reduce){.ui-scene > i{animation:none}}
@media print{.ui-scene{display:none}}

/* =====================================================================
   4-5. 透明を減らす・コントラストを上げる・強制の色（最後に書く）
   ===================================================================== */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .ui-glass,.ui-glass--pill::after{background:var(--ui-g-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .ui-glass{box-shadow:inset 0 0 0 1px var(--ui-g-solid-line),var(--ui-g-shadow)}
  .ui-glass--bar{box-shadow:inset 0 -1px 0 var(--ui-g-solid-line)}
  /* 浮いた帯は無地の ::after が本体の縁を隠すので、縁の線は上の ::before に描く（2026-10-17） */
  .ui-glass--pill::before{box-shadow:inset 0 0 0 1px var(--ui-g-solid-line)}
  .ui-scene{display:none}
}
@media (prefers-contrast:more){ .ui-glass{box-shadow:inset 0 0 0 1px var(--ui-g-solid-line)} }
/* コントラストを上げる: 無地の縁を .6 に（白い地の上で約 1.9:1 しかなかったため。ui.css の --ui-line と同じ濃さ。2026-10-17） */
@media (prefers-contrast:more){
  :root{--ui-g-solid-line:rgba(10,11,15,.6)}
  :root[data-theme="dark"],.ui-tone-dark{--ui-g-solid-line:rgba(255,255,255,.6)}
  .ui-tone-light{--ui-g-solid-line:rgba(10,11,15,.6)}
  .ui-glass--dark{--ui-g-solid-line:rgba(255,255,255,.6)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ui-g-solid-line:rgba(255,255,255,.6)}
  .ui-tone-light{--ui-g-solid-line:rgba(10,11,15,.6)}
  .ui-glass--dark{--ui-g-solid-line:rgba(255,255,255,.6)}
}
@media (forced-colors:active){
  .ui-glass,.ui-glass--pill::after{background:Canvas!important;color:CanvasText;border:1px solid CanvasText;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* 浮いた帯は本体の縁だけにする（::after にも縁を付けると線が 2 本に見える） */
  .ui-glass--pill::before,.ui-glass--pill::after{border:0;box-shadow:none}
  .ui-scene{display:none}
}