/* ============================================================
   星渡し — tag-player.css
   The cockpit bottom console, rebuilt as a transparent music dock.
   Cockpit form is kept (struts, reticle, top strip, mono HUD type),
   but the interior is a real player: a NOW-PLAYING transport in the
   centre, a tabbed LOG box (お気に入り/旅のしおり/旅の記憶) on the left,
   and the sector MANIFEST queue on the right.
   Loads AFTER cockpit.css. Only shown while docked.
   ============================================================ */

/* the old beveled console markup is gone; nothing to hide here.
   keep the kanji clear of the taller dock */
#cockpit-host .st-block{ padding:11vh 11vw 31vh; }

/* the dock tints to the docked scene's aura (set by cockpit-tag.js) */
#cockpit{ --aura:216,180,106; }

/* ============================================================ DOCK SHELL */
.dock{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:9;
  width:calc(100vw - 56px); height:178px;
  display:grid; grid-template-columns:1fr 1.42fr 1fr; grid-template-rows:1fr;
  pointer-events:auto; font-family:var(--hud);
  background:linear-gradient(180deg, rgba(10,12,18,.30), rgba(6,7,12,.42));
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(var(--aura),.16);
  border-radius:13px;
  box-shadow:
    0 24px 80px -24px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 80px rgba(0,0,0,.25);
  clip-path:polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  opacity:1; transition:opacity .7s var(--ease), transform .7s var(--ease);
}
/* top hairline + corner ticks for the cockpit read */
.dock::before{
  content:''; position:absolute; left:16px; right:16px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--aura),.5) 18%, rgba(var(--aura),.5) 82%, transparent);
}
/* show the dock only once fully docked (keep it out of the dive) */
body:not([data-mode="dock"]) .dock{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(14px); }

.dpanel{ position:relative; min-width:0; min-height:0; overflow:hidden; padding:14px 18px; display:flex; flex-direction:column; }
.dpanel + .dpanel{ box-shadow:inset 1px 0 0 rgba(var(--aura),.10); }

/* small section header shared by side panels */
.dp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:16px; margin-bottom:9px; }
.dp-title{ font-size:9px; letter-spacing:.32em; color:rgba(var(--aura),.72); }
.dp-count{ font-size:10px; letter-spacing:.1em; color:var(--ink-dim); }

/* ============================================================ LEFT — LOG MENU (縦並び・大きく) */
.log-menu{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.lm-btn{
  -webkit-appearance:none; appearance:none; background:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:13px; padding:10px 13px; border-radius:9px;
  border:1px solid transparent; color:var(--ink-soft); transition:.25s var(--ease);
}
.lm-btn .lm-ico{ width:18px; flex:none; text-align:center; font-size:14px; color:rgba(var(--aura),.85); }
.lm-btn .lm-jp{ font-family:var(--font-jp); font-weight:300; font-size:15.5px; letter-spacing:.2em; white-space:nowrap; }
.lm-btn .lm-n{ font-family:var(--hud); font-size:9.5px; letter-spacing:.08em; color:var(--ink-dim); }
.lm-btn .lm-arr{ margin-left:auto; font-size:10px; color:var(--ink-dim); opacity:0; transform:translateX(-5px); transition:.25s var(--ease); }
.lm-btn:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.lm-btn:hover .lm-arr{ opacity:1; transform:none; }
.lm-btn.on{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.32); background:rgba(var(--aura),.08); }
.lm-btn.on .lm-arr{ opacity:1; transform:none; color:rgb(var(--aura)); }

/* ============================================================ 八角形のビジョン — 風防中央への投影 */
.cp-vision{
  position:absolute; left:50%; top:45%; z-index:30;
  width:min(620px,58vw); height:min(540px,62vh);
  transform:translate(-50%,-52%) scale(.965);
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 0 38px rgba(var(--aura),.2)) drop-shadow(0 26px 50px rgba(0,0,0,.55));
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.cp-vision.show{ opacity:1; transform:translate(-50%,-52%) scale(1); pointer-events:auto; }
.cv-oct{
  width:100%; height:100%; padding:1px;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  background:linear-gradient(180deg, rgba(var(--aura),.55), rgba(var(--aura),.14) 60%, rgba(var(--aura),.3));
}
.cv-in{
  width:100%; height:100%;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  background:rgba(7,10,9,.78);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  display:flex; flex-direction:column; align-items:center;
  padding:36px 13% 26px;
}
.cv-head{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.cv-kicker{ font-family:var(--hud); font-size:9px; letter-spacing:.42em; text-indent:.42em; color:rgba(var(--aura),.75); }
.cv-title{ font-family:var(--font-jp); font-weight:300; font-size:21px; letter-spacing:.32em; text-indent:.32em; color:var(--ink); }
.cv-head::after{ content:''; width:120px; height:1px; margin-top:4px;
  background:linear-gradient(90deg, transparent, rgba(var(--aura),.5), transparent); }
.cv-body{ position:relative; flex:1; min-height:0; width:100%; margin-top:16px; }
.cp-vision .row{ padding:9px 11px; border-radius:8px; }
.cp-vision .row .r-name{ font-size:14px; }
.cp-vision .row .r-meta{ font-size:10.5px; }
.cp-vision .list-empty{ font-size:11.5px; text-align:center; padding-top:42px; }
.cv-close{
  -webkit-appearance:none; appearance:none; background:none; cursor:pointer; margin-top:16px;
  border:1px solid var(--line,rgba(243,236,221,.14)); border-radius:999px;
  font-family:var(--hud); font-size:9.5px; letter-spacing:.22em; color:var(--ink-dim);
  padding:8px 22px; transition:.25s var(--ease);
}
.cv-close:hover{ color:var(--ink); border-color:rgba(var(--aura),.55); }

.dp-body{ flex:1; min-height:0; position:relative; }
.log-list, .queue-list{
  list-style:none; margin:0; padding:0 4px 2px 0; overflow-y:auto;
  display:flex; flex-direction:column; gap:1px;
  mask:linear-gradient(180deg, transparent 0, #000 7px, #000 calc(100% - 9px), transparent 100%);
  scrollbar-width:thin; scrollbar-color:rgba(var(--aura),.28) transparent;
}
.log-list{ position:absolute; inset:0; }
.queue-list{ flex:1; min-height:0; }
.log-list::-webkit-scrollbar, .queue-list::-webkit-scrollbar{ width:3px; }
.log-list::-webkit-scrollbar-thumb, .queue-list::-webkit-scrollbar-thumb{ background:rgba(var(--aura),.28); border-radius:3px; }
.log-list[hidden]{ display:none; }

/* a row in any list */
.row{
  display:flex; align-items:center; gap:9px; padding:5px 7px; border-radius:6px;
  cursor:pointer; transition:background .18s, color .18s; color:var(--ink-soft); position:relative;
}
.row:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.row.playing{ background:rgba(var(--aura),.12); color:rgb(var(--aura)); }
.row .r-eq{ width:11px; height:11px; flex:none; display:flex; align-items:flex-end; gap:1.5px; opacity:0; }
.row.playing .r-eq{ opacity:1; }
.row .r-eq i{ width:2px; background:rgb(var(--aura)); border-radius:1px; height:30%; animation:eqBar .9s ease-in-out infinite; }
.row .r-eq i:nth-child(2){ animation-delay:.25s; } .row .r-eq i:nth-child(3){ animation-delay:.5s; }
@keyframes eqBar{ 0%,100%{ height:25%; } 50%{ height:100%; } }
.row .r-idx{ width:14px; flex:none; font-size:9px; letter-spacing:.05em; color:var(--ink-dim); text-align:center; }
.row.playing .r-idx{ display:none; }
.row:not(.playing) .r-eq{ display:none; }
.row .r-name{ flex:1; min-width:0; font-family:var(--font-jp); font-weight:300; font-size:12px; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .r-meta{ flex:none; font-size:9.5px; letter-spacing:.04em; color:var(--ink-dim); }
.row .r-fav{ flex:none; width:16px; height:16px; display:grid; place-items:center; color:var(--ink-dim);
  opacity:0; transition:.18s; cursor:pointer; }
.row:hover .r-fav, .row .r-fav.on{ opacity:1; }
.row .r-fav.on{ color:rgb(var(--aura)); }
.row .r-fav:hover{ transform:scale(1.18); color:rgb(var(--aura)); }
.row .r-fav svg{ width:13px; height:13px; }

/* itinerary (旅のしおり) rows carry a colour chip */
.row .r-chip{ width:7px; height:7px; flex:none; border-radius:50%; box-shadow:0 0 7px currentColor; }

/* empty state */
.list-empty{ font-size:10px; letter-spacing:.12em; color:var(--ink-faint,rgba(243,236,221,.22));
  padding:14px 7px; line-height:1.9; }

/* ============================================================ CENTRE — NOW PLAYING */
.dock-player{ align-items:stretch; text-align:center; padding:13px 22px 15px; }
.np-meta{ display:flex; align-items:center; justify-content:space-between; height:16px; }
.np-sector{ font-size:9px; letter-spacing:.3em; color:rgba(var(--aura),.78); }
.np-state{ font-size:9px; letter-spacing:.26em; color:var(--ink-dim); display:flex; align-items:center; gap:7px; }
.np-state .dot{ width:5px; height:5px; border-radius:50%; background:rgb(var(--aura)); box-shadow:0 0 8px rgb(var(--aura)); }
.np-state.paused .dot{ background:var(--ink-dim); box-shadow:none; }

.np-main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:0; padding:4px 0; }
.np-title{ font-family:var(--font-jp); font-weight:400; font-size:clamp(17px,1.5vw,21px); letter-spacing:.05em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.np-sub{ font-family:var(--font-en); font-style:italic; font-size:11px; letter-spacing:.16em; color:rgba(var(--aura),.8); }

/* seek bar */
.np-seek{ display:flex; align-items:center; gap:11px; }
.np-time{ font-size:10px; letter-spacing:.05em; color:var(--ink-dim); min-width:30px; }
.np-time.cur{ text-align:right; } .np-time.dur{ text-align:left; }
.np-bar{ flex:1; height:14px; display:flex; align-items:center; cursor:pointer; position:relative; touch-action:none; }
.np-bar .track{ position:absolute; left:0; right:0; height:3px; border-radius:3px; background:rgba(255,255,255,.13); overflow:hidden; }
.np-bar .buf{ position:absolute; left:0; height:3px; border-radius:3px; background:rgba(255,255,255,.10); width:0; }
.np-bar .fill{ position:absolute; left:0; height:3px; border-radius:3px; width:0;
  background:linear-gradient(90deg, rgba(var(--aura),.55), rgb(var(--aura))); box-shadow:0 0 10px rgba(var(--aura),.55); }
.np-bar .knob{ position:absolute; top:50%; left:0; width:10px; height:10px; border-radius:50%; background:rgb(var(--aura));
  transform:translate(-50%,-50%) scale(0); transition:transform .18s; box-shadow:0 0 12px rgba(var(--aura),.9); }
.np-bar:hover .knob, .np-bar.drag .knob{ transform:translate(-50%,-50%) scale(1); }

/* transport */
.np-transport{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:11px; }
.np-btn{ -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer; color:var(--ink-soft);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; transition:.2s var(--ease); position:relative; }
.np-btn svg{ width:17px; height:17px; }
.np-btn:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.np-btn.sm{ width:30px; height:30px; } .np-btn.sm svg{ width:15px; height:15px; }
.np-btn.on{ color:rgb(var(--aura)); }
.np-btn.on::after{ content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:rgb(var(--aura)); box-shadow:0 0 6px rgb(var(--aura)); }
.np-play{ width:46px; height:46px; color:#0b0c12; background:rgb(var(--aura));
  box-shadow:0 0 0 1px rgba(var(--aura),.4), 0 6px 22px -6px rgba(var(--aura),.7); }
.np-play svg{ width:20px; height:20px; }
.np-play:hover{ color:#0b0c12; background:rgb(var(--aura)); filter:brightness(1.08); transform:scale(1.04); }
.np-repeat-one{ position:relative; }
.np-repeat-one::before{ content:'1'; position:absolute; top:50%; left:50%; transform:translate(-50%,-44%);
  font-size:7px; font-weight:700; }

/* ============================================================ RIGHT — MANIFEST QUEUE */
.dock-queue .queue-list .row .r-idx{ color:rgba(var(--aura),.5); }

/* LICENSE — quiet, on row hover, manifest only */
.row .r-lic{ display:none; flex:none; font-family:var(--hud); font-size:8px; letter-spacing:.14em;
  color:var(--ink-dim); border:1px solid rgba(243,236,221,.16); border-radius:3px; padding:2px 6px;
  text-decoration:none; opacity:0; transition:.18s; line-height:1.2; }
.dock-queue .row .r-lic{ display:inline-block; }
.dock-queue .row:hover .r-lic{ opacity:1; }
.row .r-lic:hover{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.55); }
.dock-queue .row:hover .r-meta{ display:none; }

/* 違う余韻へ — drift within this star */
.q-drift{ -webkit-appearance:none; appearance:none; margin:7px auto 0; align-self:center;
  font-family:var(--hud); font-size:9px; letter-spacing:.22em; color:var(--ink-dim);
  background:none; border:1px solid rgba(243,236,221,.12); border-radius:999px; padding:5px 16px;
  cursor:pointer; transition:.3s var(--ease); white-space:nowrap; }
.q-drift:hover{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.5); }

/* ============================================================ DOCK WINGS
   左右の拡張エリア — ドックの両肩から立ち上がるグラスパネル。
   外側の縁は画面端(ドック外縁)に揃い、内側はコックピットの
   斜めストラットと同じ角度で中央へ落ちる。中身は後日。 */
.dock-wing{
  position:fixed; bottom:197px; z-index:8;
  width:clamp(300px, 22vw, 560px); height:min(150px, 17vh);
  pointer-events:auto;
  opacity:1; transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.dock-wing.l{ left:28px; }
.dock-wing.r{ right:28px; }
/* inner glass — 透明度は低く、輪郭は別レイヤーで */
.dw-in{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,18,.14), rgba(6,7,12,.24));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}
.dock-wing.l .dw-in{ clip-path:polygon(0 10%, 4.5% 0, 58% 0, 100% 100%, 0 100%); }
.dock-wing.r .dw-in{ clip-path:polygon(42% 0, 95.5% 0, 100% 10%, 100% 100%, 0 100%); }
/* 縁取り — オーラ色のアウトライン (中身は塗らない) */
.dw-edge{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.dw-edge polygon{ fill:none; stroke:rgba(var(--aura),.65); stroke-width:1.5;
  vector-effect:non-scaling-stroke; stroke-linejoin:miter; transition:stroke .3s; }
.dock-wing:has(.wing-btn:hover:not([disabled])) .dw-edge polygon{ stroke:rgb(var(--aura)); }
/* ---- WING BUTTONS — 主役級の2アクション ---- */
.wing-btn{ -webkit-appearance:none; appearance:none; position:absolute; inset:0; border:none; background:none;
  cursor:pointer; font-family:var(--hud); text-align:left;
  display:flex; flex-direction:column; justify-content:center; gap:7px; padding:4px 30% 8px 26px;
  transition:.3s var(--ease); }

/* 左ウィング: タグの前後送り (TAG TRANSIT) */
.wing-transit{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:7px; padding:4px 30% 14px 26px; font-family:var(--hud); pointer-events:none; }
.wing-transit::before{ content:''; position:absolute; inset:0; opacity:.6; transition:opacity .35s var(--ease);
  background:radial-gradient(120% 95% at 18% 100%, rgba(var(--aura),.22), transparent 62%); pointer-events:none; }
.dock-wing.l:has(.wt-arrow:hover) .wing-transit::before{ opacity:1; }
.dock-wing.l:has(.wt-arrow:hover) .dw-edge polygon{ stroke:rgb(var(--aura)); }
.wing-transit .wb-main{ margin-bottom:2px; }
.wt-nav{ display:flex; flex-direction:column; gap:7px; pointer-events:auto; }
.wt-arrow{ -webkit-appearance:none; appearance:none; display:flex; align-items:center; gap:9px;
  background:rgba(8,14,20,.30); border:1px solid rgba(var(--aura),.42); border-radius:11px;
  color:var(--ink-soft); cursor:pointer; padding:9px 13px; min-height:42px; max-width:230px;
  font-family:var(--font-jp); font-size:14px; letter-spacing:.02em; transition:.25s var(--ease); }
.wt-arrow.prev{ opacity:.82; font-size:13px; min-height:38px; }
.wt-arrow:hover{ border-color:rgb(var(--aura)); color:#fff; background:rgba(8,14,20,.52);
  box-shadow:0 0 20px rgba(var(--aura),.42); opacity:1; }
.wt-arrow:active{ transform:scale(.97); }
.wt-chev{ font-size:16px; line-height:1; color:rgb(var(--aura)); }
.wt-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){ .wt-arrow{ max-width:none; font-size:13px; } }
.dock-wing.r .wing-btn{ align-items:flex-end; text-align:right; padding:4px 26px 8px 30%; }
/* aura wash that breathes up from the dock */
.wing-btn::before{ content:''; position:absolute; inset:0; opacity:.6; transition:opacity .35s var(--ease);
  background:radial-gradient(120% 95% at 18% 100%, rgba(var(--aura),.24), transparent 62%); }
.dock-wing.r .wing-btn::before{ background:radial-gradient(120% 95% at 82% 100%, rgba(var(--aura),.24), transparent 62%); }
.wing-btn:hover:not([disabled])::before{ opacity:1; }

/* 景色の中へ — ボタン背景にその星の景色をうっすら */
.wing-btn .wb-scene{ position:absolute; inset:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s var(--ease);
  filter:saturate(.85) brightness(.72);
  -webkit-mask-image:linear-gradient(270deg, #000 30%, transparent 96%);
  mask-image:linear-gradient(270deg, #000 30%, transparent 96%); }
.wing-btn .wb-scene.show{ opacity:.26; }
.wing-btn:hover:not([disabled]) .wb-scene.show{ opacity:.5; }

.wb-kicker{ position:relative; font-size:8.5px; letter-spacing:.32em; color:rgba(var(--aura),.78);
  display:flex; align-items:center; gap:8px; }
.wb-kicker::before{ content:''; width:5px; height:5px; border-radius:50%; background:rgb(var(--aura));
  box-shadow:0 0 8px rgb(var(--aura)); animation:cpBlink 1.6s infinite; }
.wb-main{ position:relative; font-family:var(--font-jp); font-weight:400; font-size:clamp(17px,1.45vw,21px);
  letter-spacing:.14em; color:var(--ink); text-shadow:0 0 18px rgba(var(--aura),.35); transition:.3s var(--ease); }
.wb-sub{ position:relative; font-size:9px; letter-spacing:.2em; color:var(--ink-dim); transition:.3s var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.wing-btn:hover:not([disabled]) .wb-main{ color:#fff; text-shadow:0 0 24px rgba(var(--aura),.85); }
.wing-btn:hover:not([disabled]) .wb-sub{ color:rgba(var(--aura),.95); }
.wing-btn:active:not([disabled]) .wb-main{ transform:scale(.985); }
/* 景色が未準備の星では静かに眠る */
.wing-btn[disabled]{ cursor:default; }
.wing-btn[disabled]::before{ opacity:.14; }
.wing-btn[disabled] .wb-main{ color:var(--ink-dim); text-shadow:none; }
.wing-btn[disabled] .wb-kicker{ color:var(--ink-dim); }
.wing-btn[disabled] .wb-kicker::before{ animation:none; background:var(--ink-dim); box-shadow:none; }
/* ドックと同じ表示ゲート */
body:not([data-mode="dock"]) .dock-wing{ opacity:0; pointer-events:none; transform:translateY(14px); }

/* ============================================================ 航路 (cp-route) */
.cp-route{ position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:9;
  display:flex; align-items:center; pointer-events:none;
  font-family:var(--hud); font-size:9px; letter-spacing:.2em; color:var(--ink-dim);
  opacity:0; transition:opacity .9s var(--ease) .3s; max-width:86vw; overflow:hidden; }
body[data-mode="dock"] .cp-route{ opacity:1; }
.cp-route .rt-node{ white-space:nowrap; }
.cp-route .rt-node.on{ color:rgb(var(--aura)); text-shadow:0 0 10px rgba(var(--aura),.5); }
.cp-route .rt-node.tr{ font-family:var(--font-jp); font-weight:300; font-size:11px; letter-spacing:.08em;
  color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; max-width:16em; }
.cp-route .rt-dash{ flex:none; width:30px; height:1px; margin:0 10px;
  background:repeating-linear-gradient(90deg, rgba(var(--aura),.4) 0 4px, transparent 4px 9px); }

/* ============================================================ 旅のしおり (left tab) */
.sh-meta{ padding:4px 5px 0; font-family:var(--font-jp); font-weight:300; font-size:11px;
  letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-meta b{ font-weight:400; color:rgb(var(--aura)); }
.sh-meta i{ font-style:normal; color:var(--ink-dim); margin:0 7px; }
.sh-line{ padding:5px 5px 9px; font-family:var(--font-jp); font-weight:200; font-size:11px;
  line-height:1.8; letter-spacing:.1em; color:var(--ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-actions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 5px; }
.sh-act{ -webkit-appearance:none; appearance:none; display:inline-block;
  font-family:var(--hud); font-size:9px; letter-spacing:.14em; color:var(--ink-soft);
  background:none; border:1px solid rgba(243,236,221,.13); border-radius:999px; padding:5px 11px;
  cursor:pointer; text-decoration:none; transition:.25s var(--ease); white-space:nowrap; line-height:1.3; }
.sh-act:hover{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.55); }
.sh-act.primary{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.35); }
.sh-act[disabled]{ opacity:.38; cursor:default; }
.sh-act[disabled]:hover{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.35); }

/* ============================================================ 旅の記憶 (left tab) */
.mem-h{ font-family:var(--hud); font-size:8.5px; letter-spacing:.3em; color:rgba(var(--aura),.6);
  padding:7px 7px 3px; }
.log-list .mem-h:first-child{ padding-top:2px; }
.mem-prev{ margin:7px 5px 3px; }

/* ============================================================ RESPONSIVE */
@media (max-width:900px){
  .dock{ grid-template-columns:1fr; height:auto; width:calc(100vw - 28px); bottom:12px; }
  .dock-player{ order:-1; }
  .dpanel.dock-log, .dpanel.dock-queue{ display:none; }
  .cp-vision{ display:none; }
  .dock-wing{ display:none; }
  .dpanel + .dpanel{ box-shadow:none; }
  .cp-route{ display:none; }
}

/* ============================================================ QUEUE SHEET
   「この星の音楽リスト」: dock 内の小さなリストの代わりに、開くボタン →
   dock の上にせり上がる読みやすいリスト。トーンは dock と同じ
   (すりガラス・aura の縁・コーナーカット)。 */

/* 開くボタン — dock 右パネルの主役 */
.q-open{
  -webkit-appearance:none; appearance:none; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:2px 0 0; padding:10px 12px; cursor:pointer;
  background:linear-gradient(180deg, rgba(var(--aura),.07), rgba(var(--aura),.03));
  border:1px solid rgba(var(--aura),.28); border-radius:9px;
  color:var(--ink-soft); transition:.25s var(--ease);
  clip-path:polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.q-open:hover{
  color:var(--ink); border-color:rgba(var(--aura),.55);
  background:linear-gradient(180deg, rgba(var(--aura),.13), rgba(var(--aura),.05));
  box-shadow:0 0 24px -8px rgba(var(--aura),.5);
}
.q-open .qo-label{ font-family:var(--font-jp); font-weight:400; font-size:12.5px; letter-spacing:.1em; }
.q-open .qo-arr{ font-size:9px; color:rgba(var(--aura),.75); transition:transform .25s var(--ease); }
.q-open:hover .qo-arr{ transform:translateY(-2px); }
.q-open[aria-expanded="true"] .qo-arr{ transform:rotate(180deg); }
.q-open .qo-eq{ width:12px; height:12px; display:flex; align-items:flex-end; gap:1.5px; }
.q-open .qo-eq i{ width:2.5px; background:rgba(var(--aura),.85); border-radius:1px; height:30%;
  animation:eqBar 1.1s ease-in-out infinite; }
.q-open .qo-eq i:nth-child(2){ animation-delay:.25s; } .q-open .qo-eq i:nth-child(3){ animation-delay:.5s; }

/* シート本体 — dock 右上にせり上がる */
.queue-sheet{
  position:fixed; right:28px; bottom:212px; z-index:11;
  width:min(460px, calc(100vw - 56px));
  max-height:min(54vh, 480px);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:var(--hud);
  background:linear-gradient(180deg, rgba(10,12,18,.62), rgba(6,7,12,.74));
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(var(--aura),.22); border-radius:13px;
  box-shadow:0 24px 80px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  clip-path:polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.queue-sheet.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.queue-sheet[hidden]{ display:none; }

.qs-head{
  display:flex; align-items:center; gap:10px; padding:13px 16px 10px;
  border-bottom:1px solid rgba(var(--aura),.14);
}
.qs-kicker{ font-size:9px; letter-spacing:.32em; color:rgba(var(--aura),.72); }
.qs-title{ font-family:var(--font-jp); font-weight:400; font-size:14px; letter-spacing:.1em; color:var(--ink); }
.qs-count{ font-size:10px; letter-spacing:.1em; color:var(--ink-dim); margin-left:auto; }
.qs-close{
  -webkit-appearance:none; appearance:none; background:none; cursor:pointer;
  border:1px solid rgba(243,236,221,.18); border-radius:6px; padding:4px 9px;
  font-family:var(--hud); font-size:9.5px; letter-spacing:.14em; color:var(--ink-dim); transition:.2s;
}
.qs-close:hover{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.5); }

/* シート内のリスト: dock 内の極小リストと違い、読める大きさに */
.queue-sheet .queue-list{
  flex:1; min-height:0; overflow-y:auto; padding:8px 10px 12px;
  list-style:none; margin:0;
}
.queue-sheet .queue-list::-webkit-scrollbar{ width:3px; }
.queue-sheet .queue-list::-webkit-scrollbar-thumb{ background:rgba(var(--aura),.28); border-radius:3px; }
.queue-sheet .row{ gap:11px; padding:9px 10px; border-radius:8px; }
.queue-sheet .row .r-idx{ width:20px; font-size:11px; color:rgba(var(--aura),.5); }
.queue-sheet .row .r-name{ font-size:15px; letter-spacing:.04em; }
.queue-sheet .row .r-meta{ font-size:11px; }
.queue-sheet .row .r-lic{ display:inline-block; font-size:9px; padding:3px 8px; }
.queue-sheet .row:hover .r-lic{ opacity:1; }
.queue-sheet .row:hover .r-meta{ display:none; }
.queue-sheet .row .r-fav svg{ width:15px; height:15px; }
.queue-sheet .list-empty{ font-size:11px; padding:18px 12px; }

@media (max-width:900px){
  .queue-sheet{ right:14px; left:14px; width:auto; bottom:auto; top:10vh; max-height:60vh; }
}

/* ============================================================ VOLUME — cockpit */
.np-vol{ position:absolute; right:20px; bottom:24px; display:flex; align-items:center; gap:8px; width:82px; }
.nv-ico{ -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer;
  width:22px; height:22px; display:grid; place-items:center; color:var(--ink-dim); transition:.2s; flex:none; }
.nv-ico:hover{ color:rgb(var(--aura)); }
.nv-ico svg{ width:15px; height:15px; }
.nv-bar{ flex:1; height:14px; display:flex; align-items:center; cursor:pointer; position:relative; touch-action:none; }
.nv-bar .track{ position:absolute; left:0; right:0; height:3px; border-radius:3px; background:rgba(255,255,255,.13); }
.nv-bar .fill{ position:absolute; left:0; height:3px; border-radius:3px; width:0;
  background:linear-gradient(90deg, rgba(var(--aura),.55), rgb(var(--aura))); box-shadow:0 0 8px rgba(var(--aura),.45); }
.nv-bar .knob{ position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%; background:rgb(var(--aura));
  transform:translate(-50%,-50%) scale(0); transition:transform .18s; box-shadow:0 0 10px rgba(var(--aura),.8); }
.nv-bar:hover .knob, .nv-bar.drag .knob{ transform:translate(-50%,-50%) scale(1); }
@media (max-width:1100px){ .np-vol{ display:none; } }

/* ============================================================ LICENSE FUNNEL — cockpit */
/* 「商用ライセンスを取得」(dock 左下、音量バーと対称) */
.np-lic{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  position:absolute; left:20px; bottom:22px;
  width:96px; max-width:calc(50% - 84px); box-sizing:border-box;
  background:none; border:1px solid rgba(var(--aura),.35); border-radius:999px;
  font-family:var(--hud); font-size:9px; letter-spacing:.08em; color:rgba(var(--aura),.85);
  padding:7px 10px; transition:.25s var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np-lic:hover{ color:rgb(var(--aura)); border-color:rgba(var(--aura),.7);
  background:rgba(var(--aura),.08); box-shadow:0 0 18px -6px rgba(var(--aura),.5); }
@media (max-width:1100px){ .np-lic{ display:none; } }

/* お気に入り行の「☐ 申請」(ライセンス申請の選曲 — ラベル付きで用途を自明に) */
.row .r-check{
  flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:3px 8px 3px 6px; border-radius:999px;
  border:1px solid rgba(var(--aura),.3); background:rgba(255,255,255,.03); transition:.2s;
}
.row .r-check:hover{ border-color:rgba(var(--aura),.7); box-shadow:0 0 10px -2px rgba(var(--aura),.4); }
.row .r-check:has(input:checked){ background:rgba(var(--aura),.16); border-color:rgb(var(--aura)); }
.row .r-check input{
  -webkit-appearance:none; appearance:none; cursor:pointer; margin:0;
  width:13px; height:13px; border-radius:4px;
  border:1px solid rgba(var(--aura),.5); background:rgba(255,255,255,.04);
  display:grid; place-items:center; transition:.2s;
}
.row .r-check input:checked{ background:rgb(var(--aura)); border-color:rgb(var(--aura)); }
.row .r-check input:checked::after{ content:'✓'; font-size:9px; font-weight:700; color:#0b0c12; line-height:1; }
.row .r-check .rc-txt{ font-family:var(--hud); font-size:8.5px; letter-spacing:.14em; color:rgba(var(--aura),.8); }
.row .r-check:has(input:checked) .rc-txt{ color:rgb(var(--aura)); }

/* お気に入りビジョンの説明文 (チェックの意味を常設で示す) */
.cv-hint{
  margin:8px 0 2px; font-family:var(--font-jp); font-weight:300; font-size:11px;
  letter-spacing:.08em; line-height:1.8; color:var(--ink-soft); text-align:center;
}
.cv-hint b{ font-weight:400; color:rgb(var(--aura)); }
.cv-hint[hidden]{ display:none; }

/* ライセンス申請ボタン (とじるの上) */
.cv-license{
  -webkit-appearance:none; appearance:none; cursor:pointer; margin-top:14px;
  border:1px solid rgba(var(--aura),.6); border-radius:999px;
  background:linear-gradient(180deg, rgba(var(--aura),.16), rgba(var(--aura),.06));
  font-family:var(--hud); font-size:10px; letter-spacing:.2em; color:rgb(var(--aura));
  padding:10px 26px; transition:.25s var(--ease);
}
.cv-license:hover:not(:disabled){ background:rgba(var(--aura),.26); color:var(--gold-warm,#f5d896);
  box-shadow:0 0 24px -6px rgba(var(--aura),.6); }
.cv-license:disabled{ opacity:.45; cursor:default; }
.cv-license + .cv-close{ margin-top:9px; }

/* ============================================================ PIN — この曲で星巡り */
.np-trow{ display:flex; align-items:center; justify-content:center; gap:10px; max-width:100%; min-width:0; }
.np-pin{
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:none;
  background:none; border:1px solid rgba(var(--aura),.3); border-radius:999px;
  font-family:var(--hud); font-size:8.5px; letter-spacing:.16em; color:rgba(var(--aura),.75);
  padding:4px 10px; transition:.25s var(--ease); white-space:nowrap;
}
.np-pin:hover:not(:disabled){ color:rgb(var(--aura)); border-color:rgba(var(--aura),.7); background:rgba(var(--aura),.07); }
.np-pin:disabled{ opacity:.35; cursor:default; }
.np-pin.on{
  color:#0b0c12; background:rgb(var(--aura)); border-color:rgb(var(--aura));
  box-shadow:0 0 16px -4px rgba(var(--aura),.7);
}