/* ============================================================
   星渡し — scene-dive.css
   「景色の中へ」 — full-bleed dive into a tag's scenery.
   Phases (driven by scene-dive.js):
     dive   : sparkling word particles fly past, world glimpsed
     black  : everything sinks into darkness
     reveal : .reveal class — very slow fade-in of world + type + UI
   Loads AFTER tag-player.css.
   ============================================================ */

/* ---- the cockpit-top pill becomes the entry button -------- */
.cp-scenery{
  pointer-events:auto; cursor:pointer; background:none; white-space:nowrap;
  transition:.3s var(--ease);
}
.cp-scenery:hover:not([disabled]){
  color:#fff; border-color:rgba(var(--aura),.85);
  box-shadow:0 0 18px -4px rgba(var(--aura),.55);
}
.cp-scenery[disabled]{ opacity:.35; cursor:default; }
.cp-scenery[disabled] .blink{ animation:none; opacity:.4; }

/* ---- while in the scenery, the cockpit sleeps -------------- */
body[data-scene] #cockpit{ opacity:0 !important; pointer-events:none !important; }
body[data-scene] #jOverlay{ opacity:0 !important; transition:opacity .5s; }
body[data-scene] #tagHubHead, body[data-scene] .th-legend{ opacity:0 !important; }
body[data-scene="on"] #cockpit,
body[data-scene="on"] .dock,
body[data-scene="on"] .dock-wing,
body[data-scene="on"] .cp-route,
body[data-scene="on"] .queue-sheet,
body[data-scene="on"] #jOverlay{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ============================================================ SHELL */
#sceneDive{ position:fixed; inset:0; z-index:40; overflow:hidden; }
#sceneDive[hidden]{ display:none; }

/* layer order: veil-back ▸ world ▸ scrim ▸ veil(front) ▸ canvas ▸ type/UI */
.sd-veil-back{ position:absolute; inset:0; background:#020107; opacity:0; }
.sd-world{ position:absolute; inset:0; overflow:hidden; opacity:0; }
.sd-world img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 画面そのものがほんの少し膨らみ、縮む */
#sceneDive.reveal .sd-world{ animation:sdScale 22s ease-in-out infinite; }
@keyframes sdScale{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
#sceneDive.reveal .sd-world img{ animation:sdKen 80s ease-in-out infinite alternate, sdBreath 22s ease-in-out infinite; }
@keyframes sdKen{
  from{ transform:scale(1.14) translateY(-0.7%); }
  to{   transform:scale(1.02) translateY(0.7%); }
}
/* ゆったりと呼吸する画面 — 11秒周期の淡い明滅 */
@keyframes sdBreath{ 0%,100%{ filter:brightness(.97) saturate(1); } 50%{ filter:brightness(1.10) saturate(1.08); } }
/* 呼吸する縁の陯 — 息を吸うとふっと開き、吐くとそっと閉じる */
.sd-breathe{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 6s ease 1.5s; }
#sceneDive.reveal .sd-breathe{ opacity:1; }
.sd-breathe::before{ content:''; position:absolute; inset:-4%;
  background:radial-gradient(118% 92% at 50% 46%, transparent 50%, rgba(2,6,10,.6) 100%);
  animation:sdVig 22s ease-in-out infinite; }
@keyframes sdVig{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.06); opacity:.45; } }
/* 吸気でふくらむ光 */
.sd-breathe::after{ content:''; position:absolute; inset:-4%;
  background:radial-gradient(62% 50% at 50% 44%, rgba(255,250,238,.14), transparent 72%);
  animation:sdGlow 22s ease-in-out infinite; }
@keyframes sdGlow{ 0%,100%{ opacity:.05; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  #sceneDive.reveal .sd-world img{ animation:none; }
  #sceneDive.reveal .sd-world{ animation:none; }
  .sd-breathe::before, .sd-breathe::after{ animation:none; }
}

/* readability scrims — only breathe in once revealed */
.sd-scrim{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(180deg, rgba(2,4,8,.24), transparent 20%),
    linear-gradient(0deg,   rgba(2,4,8,.30), transparent 26%);
}
#sceneDive.reveal .sd-scrim{ opacity:1; transition:opacity 5s ease 1.1s; }

.sd-veil{ position:absolute; inset:0; background:#020107; opacity:0; }

#sdCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ============================================================ 足跡 — 景色の向こうにひっそり浮かぶ言葉 */
.sd-fp{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}
.sd-fp.is-changing .fp{
  opacity:0 !important;
  transition:opacity 1.1s ease;
}
.sd-fp .fp{
  position:absolute;
  max-width:min(30ch,34vw);
  opacity:0;
  pointer-events:auto;                 /* 文字だけホバーを拾う（景色はクリック可能のまま） */
  cursor:default;
  font-family:var(--font-jp);
  font-weight:400;
  font-size:var(--fp-size,19px);
  letter-spacing:.12em;
  line-height:1.95;
  color:rgba(221,237,253,.97);         /* 神秘的な青白（読める明るさ） */
  text-shadow:
    0 1px 3px rgba(0,8,16,.92),        /* 明るい景色でも読めるよう濃い縁取り */
    0 0 13px rgba(150,195,245,.42),
    0 1px 22px rgba(0,8,16,.7);
  filter:blur(.6px);                   /* ほのかな滲み（読める範囲で） */
  will-change:opacity,transform,filter;
  transition:filter .6s ease, color .6s ease, text-shadow .6s ease;
  animation:fpLife var(--fp-life,30s) cubic-bezier(.4,0,.25,1) forwards;
}
.sd-fp .fp .fp-text{ display:block; }
.sd-fp .fp .fp-meta{
  display:block; margin-top:10px;
  opacity:0; transform:translateY(3px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.sd-fp .fp .fp-by{
  display:block; font-family:var(--font-en); font-style:italic;
  font-size:.6em; letter-spacing:.24em; color:rgba(212,230,252,.72);
}
.sd-fp .fp .fp-on{
  display:block; margin-top:3px; font-family:var(--font-jp); font-weight:400;
  font-size:.66em; letter-spacing:.16em; color:rgba(190,214,245,.62);
}
.sd-fp .fp .fp-on::before{ content:'\266A\2002'; opacity:.7; }   /* ♪ */
/* マウスオーバー — 言霊が一瞬、像を結ぶ。くっきり読める */
.sd-fp .fp:hover{
  filter:none;
  mix-blend-mode:normal;
  color:rgba(234,245,255,.99);
  text-shadow:0 0 8px rgba(170,210,250,.5), 0 1px 22px rgba(0,8,16,.72);
  opacity:1 !important;
  animation-play-state:paused;
  z-index:3;
}
.sd-fp .fp:hover .fp-meta{ opacity:1; transform:none; }
@keyframes fpLife{
  0%  { opacity:0; transform:translate3d(0,16px,0) rotate(var(--fp-r0,0deg)); }
  14% { opacity:var(--fp-max,.5); }
  80% { opacity:var(--fp-max,.5); }
  100%{ opacity:0; transform:translate3d(var(--fp-dx,-44px),-26px,0) rotate(var(--fp-r1,0deg)); }
}
@media (prefers-reduced-motion:reduce){
  .sd-fp .fp{ animation:fpFadeOnly var(--fp-life,30s) ease forwards; transform:none; }
  @keyframes fpFadeOnly{ 0%{opacity:0} 12%{opacity:var(--fp-max,.5)} 82%{opacity:var(--fp-max,.5)} 100%{opacity:0} }
}
@media (max-width:720px){
  .sd-fp .fp{
    max-width:min(24ch,62vw);
    font-size:clamp(14px,var(--fp-size,17px),20px);
    letter-spacing:.08em;
  }
}

/* ============================================================ TYPE — tag name (slow bloom) */
.sd-head{ position:absolute; top:10.5vh; left:0; right:0; z-index:3; text-align:center;
  pointer-events:none; opacity:0; transform:translateY(16px); }
#sceneDive.reveal .sd-head{
  opacity:1; transform:none;
  transition:opacity 3.8s ease 1.9s, transform 4.2s var(--ease) 1.9s;
}
.sd-kicker{ font-family:var(--hud); font-size:10px; letter-spacing:.56em; text-indent:.56em;
  color:rgba(255,255,255,.78); text-shadow:0 1px 12px rgba(0,10,16,.6); }
.sd-tag-jp{ margin-top:20px; font-family:var(--font-jp); font-weight:200;
  font-size:clamp(36px,5vw,62px); letter-spacing:.34em; text-indent:.34em; color:#fff;
  text-shadow:0 2px 34px rgba(0,14,22,.55), 0 1px 10px rgba(0,10,16,.4); }
.sd-tag-en{ margin-top:14px; font-family:var(--font-en); font-size:12px; letter-spacing:.5em;
  text-indent:.5em; color:rgba(255,255,255,.82); text-shadow:0 1px 12px rgba(0,10,16,.55); }
.sd-tag-en::after{ content:''; display:block; width:1px; height:34px; margin:18px auto 0;
  background:linear-gradient(rgba(255,255,255,.65),transparent); }

/* ============================================================ FOOT — track + transport */
.sd-foot{ position:absolute; left:50%; bottom:6vh; z-index:3; width:min(580px,88vw);
  display:flex; flex-direction:column; align-items:center; gap:17px;
  opacity:0; transform:translate(-50%,18px); pointer-events:none; }
#sceneDive.reveal .sd-foot{
  opacity:1; transform:translateX(-50%); pointer-events:auto;
  transition:opacity 3.5s ease 3.1s, transform 4s var(--ease) 3.1s;
}
/* 気配のガラス — 普段はほぼ見えず、カーソルが寄ると凝結して視認性を上げる */
.sd-foot::before{ content:''; position:absolute; z-index:-1; left:0; right:0;
  top:-20px; bottom:-18px; border-radius:24px;
  background:radial-gradient(130% 130% at 50% 100%, rgba(2,6,10,.08), rgba(2,6,10,.02) 72%, transparent);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,0);
  transition:background .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease),
    -webkit-backdrop-filter .7s var(--ease), backdrop-filter .7s var(--ease); }
.sd-foot:hover:not(:has(.sd-fav:hover))::before,
.sd-foot:focus-within:not(:has(.sd-fav:focus))::before{
  background:
    linear-gradient(168deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 34%, transparent 62%),
    rgba(4,10,14,.08);
  -webkit-backdrop-filter:blur(7px) saturate(1.05); backdrop-filter:blur(7px) saturate(1.05);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 10px 30px -18px rgba(0,0,0,.30); }
.sd-track{ text-align:center; }
.sd-t-title{ font-family:var(--font-jp); font-weight:300; font-size:clamp(16px,1.6vw,20px);
  letter-spacing:.14em; color:#fff; text-shadow:0 1px 16px rgba(0,10,16,.65), 0 0 4px rgba(0,8,14,.75); }
.sd-t-sub{ margin-top:7px; font-family:var(--font-en); font-style:italic; font-size:11px;
  letter-spacing:.2em; color:rgba(255,255,255,.78); text-shadow:0 1px 10px rgba(0,10,16,.6), 0 0 3px rgba(0,8,14,.7); }

.sd-transport{ display:flex; align-items:center; gap:12px; }
.sd-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.34);
  background:
    linear-gradient(165deg, rgba(255,255,255,.14), transparent 60%),
    rgba(4,8,12,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:.25s var(--ease);
}
.sd-btn svg{ width:19px; height:19px; }
.sd-btn:hover{ border-color:rgba(255,255,255,.85); background:rgba(8,14,20,.34); transform:scale(1.06); }
.sd-btn.big{ width:60px; height:60px; border-color:rgba(255,255,255,.55); }
.sd-btn.big svg{ width:24px; height:24px; }
.sd-btn.sm{ width:40px; height:40px; }
.sd-btn.sm svg{ width:17px; height:17px; }
.sd-fav.on{ color:#fff; border-color:rgba(255,255,255,.7); }
/* 再生ボタンも同じ周期で呼吸 */
#sceneDive.reveal .sd-btn.big{ animation:sdHalo 22s ease-in-out infinite; }
@keyframes sdHalo{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 0 26px -4px rgba(255,255,255,.4); } }
@media (prefers-reduced-motion:reduce){ #sceneDive.reveal .sd-btn.big{ animation:none; } }

/* ============================================================ 透明プレイヤー — シーク */
.sd-seek{ display:flex; align-items:center; gap:11px; width:min(420px,72vw); }
.sd-time{ font-family:var(--hud); font-size:9.5px; letter-spacing:.05em; min-width:30px;
  color:rgba(255,255,255,.82); text-shadow:0 1px 8px rgba(0,10,16,.6), 0 0 3px rgba(0,8,14,.75); }
.sd-time.cur{ text-align:right; } .sd-time.dur{ text-align:left; }
.sd-bar{ flex:1; height:16px; position:relative; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.sd-bar::before{ content:''; position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:rgba(255,255,255,.26); }
.sd-bar .fill{ position:absolute; left:0; height:2px; width:0; border-radius:2px;
  background:rgba(255,255,255,.9); box-shadow:0 0 10px rgba(255,255,255,.55); }
.sd-bar .knob{ position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px rgba(255,255,255,.8);
  transform:translate(-50%,-50%) scale(0); transition:transform .2s; }
.sd-bar:hover .knob{ transform:translate(-50%,-50%) scale(1); }

/* ============================================================ 透明メニュー & パネル */
.sd-menu{ position:absolute; right:30px; bottom:6vh; z-index:4;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  opacity:0; pointer-events:none; }
#sceneDive.reveal .sd-menu{ opacity:1; pointer-events:auto;
  transition:opacity 3.5s ease 5.2s; }
.sd-mbtn{ -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family:var(--hud); font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.85);
  background:
    linear-gradient(165deg, rgba(255,255,255,.13), transparent 55%),
    rgba(4,8,12,.08);
  border:1px solid rgba(255,255,255,.30); border-radius:999px;
  padding:8px 16px; white-space:nowrap; text-shadow:0 0 3px rgba(0,8,14,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:.25s var(--ease); }
.sd-mbtn:hover, .sd-mbtn.on{ color:#fff; border-color:rgba(255,255,255,.85); background:rgba(8,14,20,.28); }

.sd-panel{ position:absolute; right:30px; bottom:calc(6vh + 96px); z-index:5;
  width:min(320px,86vw); max-height:46vh; display:flex; flex-direction:column; overflow:hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 38%, transparent 66%),
    rgba(5,9,13,.16);
  border:1px solid rgba(255,255,255,.28); border-radius:14px;
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset -1px 0 0 rgba(255,255,255,.07); }
.sd-panel[hidden]{ display:none; }
.sd-panel header{ display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px 10px; flex:none;
  font-family:var(--hud); font-size:10px; letter-spacing:.26em; color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.12); }
.sd-pclose{ -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.55); font-size:12px; padding:2px 4px; transition:.2s; }
.sd-pclose:hover{ color:#fff; }
.sd-plist{ list-style:none; margin:0; padding:6px 8px 10px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent; }
.sd-plist::-webkit-scrollbar{ width:3px; }
.sd-plist::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); border-radius:3px; }
.sd-row{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:8px;
  cursor:pointer; color:rgba(255,255,255,.88); transition:.2s; }
.sd-row:hover{ background:rgba(255,255,255,.1); }
.sd-row .n{ flex:1; min-width:0; font-family:var(--font-jp); font-weight:300; font-size:13px;
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-row .m{ flex:none; font-family:var(--hud); font-size:9.5px; color:rgba(255,255,255,.6); }
.sd-row .h{ -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer;
  flex:none; color:rgba(255,255,255,.85); font-size:13px; padding:1px 3px; transition:.2s; }
.sd-row .h:hover{ color:#fff; transform:scale(1.2); }
.sd-empty{ padding:16px 10px; font-family:var(--hud); font-size:10px; letter-spacing:.14em;
  line-height:2; color:rgba(255,255,255,.55); }
.sd-pbody{ padding:12px 14px 14px; overflow-y:auto; }
.sd-shmeta{ font-family:var(--font-jp); font-weight:300; font-size:12px; letter-spacing:.04em;
  color:rgba(255,255,255,.92); }
.sd-shmeta b{ font-weight:400; color:#fff; }
.sd-shline{ margin-top:8px; font-family:var(--font-jp); font-weight:200; font-size:12px;
  line-height:2; letter-spacing:.08em; color:rgba(255,255,255,.75); }
.sd-shacts{ margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.sd-shacts button, .sd-shacts a{ -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family:var(--hud); font-size:9px; letter-spacing:.16em; color:rgba(255,255,255,.85);
  background:none; border:1px solid rgba(255,255,255,.3); border-radius:999px;
  padding:6px 12px; text-decoration:none; line-height:1.3; transition:.25s; }
.sd-shacts button:hover, .sd-shacts a:hover{ color:#fff; border-color:rgba(255,255,255,.9); }

/* ============================================================ EXITS */
/* 旅の中の移動（操縦席へ / 星図へ）は左上に並べる。右上は「劇場に戻る」専用。 */
.sd-exits{ position:absolute; top:26px; left:30px; z-index:4; display:flex; gap:10px; }
.sd-exit{
  cursor:pointer;
  font-family:var(--hud); font-size:10px; letter-spacing:.24em;
  color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.3); border-radius:3px;
  padding:8px 15px; background:rgba(4,8,12,.25); white-space:nowrap;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:color .3s, border-color .3s, background .3s;
}
#sceneDive.reveal .sd-exit{
  opacity:1; pointer-events:auto;
  transition:opacity 3.5s ease 5.6s, color .3s, border-color .3s, background .3s;
}
.sd-exit:hover{ color:#fff; border-color:rgba(255,255,255,.9); background:rgba(8,14,20,.4); }

/* ============================================================ 安らぎモード
   触れないでいると UI が眠り、呼吸する風景だけが残る */
#sceneDive.awake .sd-head, #sceneDive.awake .sd-foot, #sceneDive.awake .sd-exit,
#sceneDive.awake .sd-menu, #sceneDive.awake .sd-panel, #sceneDive.awake .sd-scrim{ transition:opacity 2.2s ease; }
#sceneDive.rest{ cursor:none; }
#sceneDive.rest .sd-head, #sceneDive.rest .sd-foot, #sceneDive.rest .sd-exit,
#sceneDive.rest .sd-menu, #sceneDive.rest .sd-panel{
  opacity:0; pointer-events:none; transition:opacity 4.5s ease; }
#sceneDive.rest .sd-scrim{ opacity:0; transition:opacity 7s ease; }

@media (max-width:820px){
  .sd-exits{ top:16px; left:16px; }
  .sd-head{ top:13vh; }
  .sd-foot{ bottom:5vh; }
  .sd-tablet{ padding:16px 28px 14px; gap:11px; }
  .sd-menu{ right:16px; bottom:16px; flex-direction:row; }
  .sd-panel{ right:16px; bottom:64px; }
}

/* ============================================================ 透明プレイヤー — 音量 */
.sd-vol{ display:flex; align-items:center; gap:9px; width:min(230px,52vw); }
.sd-vico{ -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer;
  width:22px; height:22px; display:grid; place-items:center; flex:none;
  color:rgba(255,255,255,.8); transition:.2s; }
.sd-vico:hover{ color:#fff; }
.sd-vico svg{ width:15px; height:15px; filter:drop-shadow(0 1px 6px rgba(0,10,16,.6)); }
.sd-vbar{ flex:1; height:16px; position:relative; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.sd-vbar::before{ content:''; position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:rgba(255,255,255,.26); }
.sd-vbar .fill{ position:absolute; left:0; height:2px; width:0; border-radius:2px;
  background:rgba(255,255,255,.9); box-shadow:0 0 10px rgba(255,255,255,.55); }
.sd-vbar .knob{ position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px rgba(255,255,255,.8);
  transform:translate(-50%,-50%) scale(0); transition:transform .2s; }
.sd-vbar:hover .knob{ transform:translate(-50%,-50%) scale(1); }

/* 曲のリストパネル — 再生中の行 */
.sd-row.playing{ background:rgba(255,255,255,.14); color:#fff; }
.sd-row.playing .n{ color:#fff; }

/* ============================================================ LICENSE FUNNEL — 景色の中 */
/* 「商用ライセンスを取得」(すりガラスのプレイヤー内) */
.sd-lic{
  -webkit-appearance:none; appearance:none; cursor:pointer; background:none;
  border:1px solid rgba(255,255,255,.32); border-radius:999px;
  font-family:var(--hud); font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.85);
  padding:7px 15px; transition:.25s; text-shadow:0 1px 8px rgba(0,10,16,.6);
}
.sd-lic:hover{ color:#fff; border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); }

/* favパネル: 「☐ 申請」(ラベル付きで用途を自明に) */
.sd-row .chk{
  flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:3px 8px 3px 6px; border-radius:999px;
  border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.05); transition:.2s;
}
.sd-row .chk:hover{ border-color:rgba(255,255,255,.8); }
.sd-row .chk:has(input:checked){ background:rgba(255,255,255,.2); border-color:#fff; }
.sd-row .chk input{
  -webkit-appearance:none; appearance:none; cursor:pointer; margin:0;
  width:13px; height:13px; border-radius:4px;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.06);
  display:grid; place-items:center; transition:.2s;
}
.sd-row .chk input:checked{ background:#fff; border-color:#fff; }
.sd-row .chk input:checked::after{ content:'✓'; font-size:9px; font-weight:700; color:#0a1016; line-height:1; }
.sd-row .chk .ck-txt{ font-family:var(--hud); font-size:8.5px; letter-spacing:.14em; color:rgba(255,255,255,.8); }

/* favパネルの説明文 */
.sd-phint{
  flex:none; padding:9px 14px 0; font-family:var(--font-jp); font-weight:300; font-size:11px;
  letter-spacing:.06em; line-height:1.8; color:rgba(255,255,255,.72);
}
.sd-phint b{ font-weight:400; color:#fff; }

/* ライセンス申請ボタン (favパネル下部) */
.sd-license{
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:none;
  margin:4px 12px 12px; padding:10px 18px;
  border:1px solid rgba(255,255,255,.6); border-radius:999px;
  background:rgba(255,255,255,.12);
  font-family:var(--hud); font-size:10px; letter-spacing:.2em; color:#fff;
  transition:.25s; text-shadow:0 1px 8px rgba(0,10,16,.5);
}
.sd-license:hover:not(:disabled){ background:rgba(255,255,255,.24); box-shadow:0 0 20px -6px rgba(255,255,255,.5); }
.sd-license:disabled{ opacity:.5; cursor:default; }
.sd-license[hidden]{ display:none; }

/* ============================================================ PIN — この曲で星巡り */
.sd-trow{ display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; }
.sd-pin{
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:none;
  background:rgba(4,8,12,.1); border:1px solid rgba(255,255,255,.32); border-radius:999px;
  font-family:var(--hud); font-size:8.5px; letter-spacing:.16em; color:rgba(255,255,255,.82);
  padding:4px 10px; transition:.25s; white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,10,16,.6);
}
.sd-pin:hover:not(:disabled){ color:#fff; border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.1); }
.sd-pin:disabled{ opacity:.4; cursor:default; }
.sd-pin.on{
  color:#0a1016; background:#fff; border-color:#fff; text-shadow:none;
  box-shadow:0 0 16px -2px rgba(255,255,255,.7);
}


/* ── 足跡を残す（投稿フォーム） ───────────────────────────── */
.sd-fp-form{ display:flex; flex-direction:column; gap:12px; padding:4px 2px 2px; }
.sd-fp-note{ margin:0; font-size:13px; line-height:1.7; color:rgba(255,255,255,.74); }
.sd-fp-note small{ color:rgba(255,255,255,.5); font-size:11.5px; }
.sd-fp-form textarea, .sd-fp-form input{
  width:100%; box-sizing:border-box; font-family:inherit; color:#fff;
  background:rgba(8,14,20,.5); border:1px solid rgba(255,255,255,.28); border-radius:12px;
  padding:12px 14px; font-size:15px; resize:vertical; }
.sd-fp-form textarea:focus, .sd-fp-form input:focus{ outline:none; border-color:rgba(255,255,255,.72); }
.sd-fp-form textarea::placeholder, .sd-fp-form input::placeholder{ color:rgba(255,255,255,.4); }
.sd-fp-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sd-fp-msg{ font-size:12.5px; color:rgba(255,255,255,.7); line-height:1.5; }
.sd-fp-msg.err{ color:#f6b8a0; }
.sd-fp-msg.ok{ color:#bfe6c8; }
.sd-fp-submit{ -webkit-appearance:none; appearance:none; cursor:pointer; white-space:nowrap;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5); border-radius:999px;
  color:#fff; font-family:inherit; font-size:14px; padding:11px 22px; transition:.25s var(--ease); }
.sd-fp-submit:hover{ background:rgba(255,255,255,.26); }
.sd-fp-submit:disabled{ opacity:.5; cursor:default; }