/* ================================================================
   HARDWIRE v2 — PS2期スケートゲーム風デザインシステム
   ================================================================ */

:root {
  /* 地 */
  --void-black:   #0a0a0a;
  --void-ink:     #131313;
  --void-smoke:   #232323;

  /* レーザー赤 (主役) — 実際の値は js/config.js が起動時に上書きする。
     ここは JS 適用前のフラッシュ防止用に config と同じ値を置く */
  --flame-900: #3d0800;
  --flame-700: #8e1206;
  --flame-500: #e42313;
  --flame-300: #ff5233;
  --flame-100: #ffb59e;

  /* クローム */
  --chrome-100: #f4f4f4;
  --chrome-300: #c9c9c9;
  --chrome-500: #8f8f8f;
  --chrome-700: #4a4a4a;
  --chrome-900: #1d1d1d;

  /* テキスト */
  --text-white: #ffffff;
  --text-gold:  #ffb02e;
  --text-dim:   #b5b5b5;

  /* 警告 (HARDWIRE v2) — 実際の値は js/config.js が起動時に上書きする。
     使用は3箇所限定: 封緘トラック / 破損スロット / メーター100%超。
     増やすと警告の意味が薄れるため、これ以外には使わない */
  --hazard: #f2c60a;

  --grad-flame: radial-gradient(ellipse at 50% 30%,
    #ffb59e 0%, #ff5233 30%, #e42313 60%, #8e1206 85%, #3d0800 100%);
  --grad-chrome: linear-gradient(180deg,
    #f4f4f4 0%, #c9c9c9 22%, #6a6a6a 45%, #e8e8e8 55%, #8f8f8f 75%, #3a3a3a 100%);
  --grad-goldtext: linear-gradient(180deg, #ffb59e 0%, #ff5233 45%, #e42313 100%);
  --grad-toxic: linear-gradient(180deg, #ddffb0 0%, #8bff33 45%, #3a9e0e 100%);

  --font-display: 'Tektur', 'Noto Sans JP', sans-serif;
  --font-cond: 'Chakra Petch', 'Noto Sans JP', sans-serif;
  /* 機械側の計器表示 (HARDWIRE v2)。9–12px の小サイズ + tabular-nums 前提 */
  --font-hud: 'JetBrains Mono', monospace;
  --font-body: 'Noto Sans JP', sans-serif;

  /* コンテンツページ = ディスクの中の「2049年のシステム画面」。
     ジャケット (印刷物: 浮いた影・クローム) とは表面の質を変え、
     機械の内側らしく沈んだ面と細い罫で構成する */
  --console:      #0c0c0e;   /* 画面の地 */
  --console-hi:   #141417;   /* 起伏 (行のホバー等) */
  --hair:         rgba(255,255,255,.10);   /* 通常の罫 */
  --hair-soft:    rgba(255,255,255,.06);

  /* 操作の反応速度。押せるもの全部で共通にする —
     要素ごとに .12/.14/.16s とバラつくと、それだけで挙動が不安定に見える */
  --t: .14s ease-out;
}

/* 色の役割 — ページ側でこれを崩さない
   flame (赤) … 状態と主アクション (NOW PLAYING / DATA CORRUPTED / MV / STREAMING)
   gold (琥珀) … 構造 (通し番号・年・セクション見出し・メタ)
   chrome/dim  … 不活性・補足                                            */

/* ================================================================
   HARDWIRE v2 基盤 — ノッチプレート / hw系キーフレーム
   (土台のみ。画面への適用は HW-2 以降)
   ================================================================ */

/* ノッチプレート — 対角2隅を45°に落とした切削板金の輪郭。
   角丸と浮き影を使わない代わりに、この切り欠きで面を工業品に見せる。
   規格は3つだけに絞る: 大20px (パネル) / 中14px (カード) / 小6px (チップ) */
.hw-notch-lg { --hw-notch: 20px; }
.hw-notch-md { --hw-notch: 14px; }
.hw-notch-sm { --hw-notch: 6px; }
.hw-notch-lg, .hw-notch-md, .hw-notch-sm {
  border-radius: 0;
  clip-path: polygon(
    var(--hw-notch) 0, 100% 0,
    100% calc(100% - var(--hw-notch)), calc(100% - var(--hw-notch)) 100%,
    0 100%, 0 var(--hw-notch)
  );
}

/* hw系キーフレーム — モックの演出定義の移植。色はトークン参照で固定しない。
   所要時間・イージングはキーフレーム側で持たず、使用側が指定する:
     hwBlink  1.1s steps(1)                        (LED明滅)
     hwPulse  2.4s ease-in-out                     (警告の脈動)
     hwDisc   2.2s steps(1)                        (ディスク灯)
     hwVram   2.6s ease-in-out (位相差 0/.3/.6/.9s) (VRAMバー)
   (メーター充填/加熱は CSS keyframe を廃し hydrate.js のタイムラインで駆動)
   使用側は既存の prefers-reduced-motion ブロックへ停止規則も併せて登録すること */
@keyframes hwBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
@keyframes hwPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes hwDisc {
  0%, 72%   { opacity: 1;  box-shadow: 0 0 8px var(--flame-300); }
  73%, 100% { opacity: .2; box-shadow: none; }
}
@keyframes hwVram {
  0%, 100% { transform: scaleY(1);   opacity: .9; }
  50%      { transform: scaleY(.55); opacity: .55; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Tektur は可変フォント。Anton の極太感を出すため display 見出しは 900 で固定 */
.spine-cap, .pb-logo, .bk-title span, .page-title span,
.memslot-title,
.video-modal-close { font-weight: 900; }

/* height:100% だと html/body 自身が固定高のスクロールボックスになり、
   縦に長いコンテンツページ (TRACK LIST 等) が折り返し地点で切れて読めなくなる。
   min-height にして文書本体を通常どおりスクロールさせる */
html, body {
  min-height: 100%;
  background: var(--void-black);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
}
body { overflow-x: hidden; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--flame-300);
  outline-offset: 2px;
}

/* ---------------- グレイン ---------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-flicker 3.2s steps(2) infinite;
}
@keyframes grain-flicker {
  0%, 100% { opacity: .04; }
  50%      { opacity: .02; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hw-clock-date, .hw-clock-time { animation: none; }
}
/* MV再生中は裏のグレイン明滅を止め、モーダルのblur再計算を減らす */
body.video-open .grain { animation: none; }

/* ---------------- シーン切替 ---------------- */
#stage { min-height: 100vh; }

.scene { display: none; }
.scene.active {
  display: block;
  animation: rise .2s ease-out;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   ジャケット (3Dフリップ)
   ================================================================ */
#scene-jacket {
  position: relative;
  min-height: 100vh;
}
#scene-jacket.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
#scene-jacket:has(#stage3d:not([hidden])) { padding: 0; }
#scene-jacket:has(.jacket-wrap:not([hidden])) { padding: 24px 12px; }

[hidden] { display: none !important; }

/* ================================================================
   Three.js ステージ
   ================================================================ */
.stage3d {
  position: relative;
  width: 100%;
  height: 100vh;
  touch-action: none;   /* フリックをスクロールに奪わせない */
}
.stage3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hint3d {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vh, 40px);
  transform: translateX(-50%);
  font-family: var(--font-cond);
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--text-dim);
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  text-align: center;   /* 2行に折れた時は左右中央で揃える */
}
/* 各フレーズ内では折らず、フレーズ間だけを改行可能点にする */
.hint3d span { white-space: nowrap; }
.hint3d span + span::before { content: '/'; margin: 0 .6em; }

/* 再生中BGMのHUD表示。トラックリストの ● NOW PLAYING マーカーと同じ語彙・同じ赤の状態表示。
   音声コントロール(右上固定)と対になる左上に置き、操作ヒント(中央下)を避ける。
   SPは上部にコントロール分の帯を空ける(jacket3d.js resize)ので、その帯の左側に収まる。
   停止中/SOUND ON前は main.js が hidden にする */
.np3d {
  position: absolute;
  /* 右上の音声コントロール(right:24px)と左右対称に、同じ top:20px から始める */
  left: 24px;
  top: 20px;
  /* 音声コントロールのタップ箱(44px)と同じ帯に載せ、テキストの光学中心をアイコン列と揃える */
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(70vw, 340px);
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--flame-300);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
/* アイコン(17px)に対して点だけ小さく浮かないよう、LEDは少し大きめに */
.np3d-led { flex: none; font-size: 13px; line-height: 1; animation: hwPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .np3d-led { animation: none; } }
.np3d-label { flex: none; }
.np3d-trk {
  min-width: 0;   /* flex 内で窓を縮められるように */
  color: var(--text-white);
  overflow: hidden;
  white-space: nowrap;
}
/* DISC READ と同じ語彙で、曲名を右→左へ流す (hwDiscMarquee と同じ振る舞い) */
.np3d-trk-name {
  display: inline-block;
  white-space: nowrap;
  animation: np3dMarquee 13s linear infinite;
}
@keyframes np3dMarquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
/* SPは上帯を音声コントロール(スライダー込み)と分け合うので、固定幅の "NOW PLAYING · BGM" を畳み、
   赤いLED点滅+曲名だけに絞って衝突を防ぐ (点滅する赤=再生中の語彙は残る) */
@media (max-width: 640px) {
  .np3d { max-width: 48vw; }
  .np3d-label { display: none; }
}

/* タッチ端末に存在しない「CLICK」操作を出さないための出し分け。
   JSでの分岐だと3D初期化が終わるまで誤ったヒントが一瞬見えるため、CSSで確定させる */
.hint3d--touch { display: none; }
@media (hover: none) {
  .hint3d--pointer { display: none; }
  .hint3d--touch { display: block; }
}

/* キーボード用ナビ: フォーカスされるまで隠す */
.sr-nav {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.sr-nav button {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sr-nav button:focus-visible {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  color: #000;
  background: var(--grad-goldtext);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 5px 14px;
  box-shadow: 2px 3px 0 rgba(0,0,0,.9);
}

/* FXレイヤー: 2D/3D どちらのジャケットにも重なる */
.jacket-wrap {
  --jw: min(94vw, calc(92vh * 0.72));
  --depth: calc(var(--jw) * .085);   /* PS2ケースの厚み比 ≈ 14mm / 138mm */
  position: relative;
  perspective: 1500px;
  width: var(--jw);
}

.jacket {
  position: relative;
  width: 100%;
  aspect-ratio: 0.72;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, 0, .2, 1);
  /* 静止時もわずかに振って、左側の背表紙を覗かせる (平面ではなく「箱」として立たせる) */
  transform: rotateY(-8deg);
}
.jacket.flipped { transform: rotateY(-188deg); }

/* ---------------- 側面 (背表紙 / 前小口) ---------------- */
.side {
  position: absolute;
  top: 0;
  left: calc(50% - var(--depth) / 2);
  width: var(--depth);
  height: 100%;
  border: 1px solid #000;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.spine {
  transform: rotateY(-90deg) translateZ(calc(var(--jw) / 2));
  background: linear-gradient(90deg, #000 0%, #1f1f1f 35%, #131313 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 10px;
}
.spine-cap {
  width: 100%;
  padding: 5px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: calc(var(--depth) * .5);
  line-height: 1;
  color: #000;
  background: var(--grad-chrome);
  border-bottom: 1px solid #000;
}
.spine-cap-s { color: var(--flame-700); }

.spine-pub {
  writing-mode: vertical-rl;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: calc(var(--depth) * .26);
  letter-spacing: .2em;
  color: var(--text-dim);
}
.spine-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.spine-code {
  writing-mode: vertical-rl;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: calc(var(--depth) * .2);   /* 名義(.26)より小さく */
  letter-spacing: .28em;
  color: var(--chrome-500, #8f8f8f);     /* 無彩メタル・金/赤は使わない */
}

/* 前小口: ディスクケースの合わせ目 */
.edge {
  transform: rotateY(90deg) translateZ(calc(var(--jw) / 2));
  background:
    linear-gradient(90deg,
      #000 0%, #3a3a3a 18%, #1a1a1a 30%,
      #0a0a0a 50%,
      #1a1a1a 70%, #3a3a3a 82%, #000 100%);
}

/* ---------------- 回転スピン ---------------- */
/* 1.5回転。90deg 付近で紙のように消え、最後だけ減速して止まる */
.jacket.spinning     { animation: jacket-spin .85s ease-out forwards; }
.jacket.spinning-back{ animation: jacket-spin-back .85s ease-out forwards; }
.jacket.no-anim      { transition: none; }

/* 静止角 -8deg から -540deg 回して 532deg (= 裏面 -188deg) で止める */
@keyframes jacket-spin {
  0%   { transform: rotateY(-8deg)  scale(1)    translateY(0); }
  22%  { transform: rotateY(152deg) scale(1.05) translateY(-10px); }
  48%  { transform: rotateY(322deg) scale(1.07) translateY(-14px); }
  74%  { transform: rotateY(462deg) scale(1.05) translateY(-8px); }
  90%  { transform: rotateY(524deg) scale(1.01) translateY(-1px); }
  100% { transform: rotateY(532deg) scale(1)    translateY(0); }
}
/* 逆回り: -188deg から -540deg 進めて -728deg (= 表 -8deg) で止める */
@keyframes jacket-spin-back {
  0%   { transform: rotateY(-188deg) scale(1)    translateY(0); }
  22%  { transform: rotateY(-348deg) scale(1.05) translateY(-10px); }
  48%  { transform: rotateY(-518deg) scale(1.07) translateY(-14px); }
  74%  { transform: rotateY(-658deg) scale(1.05) translateY(-8px); }
  90%  { transform: rotateY(-720deg) scale(1.01) translateY(-1px); }
  100% { transform: rotateY(-728deg) scale(1)    translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .jacket { transition: none; }
  .jacket.spinning, .jacket.spinning-back { animation: none; }
  .page.active { animation: none; }
  .page.active::before { display: none; }
  .page.active .hw-shell > * { animation: none; }
  .hw-vram-seg, .hw-disc-led { animation: none; }
  /* 流さず先頭固定で表示し、はみ出しは省略記号で収める */
  .hw-disc-track::before, .hw-disc-track-name { animation: none; }
  .hw-disc-track-name { transform: none; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .np3d-trk-name { animation: none; transform: none; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--void-ink);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 表裏を厚みの分だけ前後に押し出して箱にする */
.face.front { transform: translateZ(calc(var(--depth) / 2)); }
.face.back  { transform: rotateY(180deg) translateZ(calc(var(--depth) / 2)); }

/* ---------------- 表ジャケット ---------------- */
.face.front { cursor: pointer; }

.platform-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 16px;
  background: #000;
  border-bottom: 2px solid var(--flame-700);
}
.pb-logo {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.6vh, 24px);
  color: var(--text-white);
  letter-spacing: .04em;
  transform: skewX(-8deg);
}
.pb-sub {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(8px, 1.2vh, 11px);
  letter-spacing: .2em;
  color: var(--text-dim);
}

.front-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.5vh, 26px);
  padding: 12px;
  /* 3D 本番の表ジャケと体験を揃えるため、フォールバックにもキー写真を敷く。
     写真はスタジオ黒背景なので四辺と上下を黒へフェードしてジャケの黒地へ溶かし、
     3D 側 (drawFront) の締め・沈め・グローと同じ合成に寄せる。 */
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 32%),
    linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.92) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(239,140,13,.16) 0%, transparent 55%),
    url('../img/front-jacket.avif') 50% 18% / auto 108% no-repeat,
    var(--void-black);
}

.front-slogan {
  font-family: var(--font-cond);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(12px, 2vh, 18px);
  letter-spacing: .35em;
  color: var(--text-white);
  text-shadow: 2px 3px 0 #000;
}

.emblem { display: block; }
.emblem-hero { width: 92%; max-width: 560px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.9)); }
.emblem-mini { width: clamp(150px, 30%, 230px); filter: drop-shadow(2px 3px 0 rgba(0,0,0,.9)); }

/* 表ジャケ下部の明示的なページ入口。3Dで回せる端末では裏面から入るので不要。
   狭幅の平面フォールバック時だけ下のレスポンシブ節で可視にする */
.front-entries { display: none; }

.front-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(180deg, #2a2a2a, #131313);
  border-top: 1px solid rgba(255,255,255,.25);
}

/* ---------------- 裏ジャケット ---------------- */
.face.back {
  padding: clamp(10px, 2vh, 20px) clamp(12px, 2.5vw, 24px);
  gap: clamp(8px, 1.6vh, 16px);
  justify-content: space-between;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(239,140,13,.10) 0%, transparent 45%),
    var(--void-ink);
}

.bk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.12);
  padding-bottom: clamp(6px, 1.2vh, 12px);
}

/* 見出し 3点セット: 金グラデ塗り + 白フチ黒影 + skew */
.bk-title, .page-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  transform: skewX(-8deg);
  line-height: .95;
  display: flex;
  flex-direction: column;
}
.bk-title .line1, .page-title .line1 { font-size: clamp(15px, 2.6vh, 24px); }
.bk-title .line2, .page-title .line2 { font-size: clamp(26px, 4.6vh, 44px); }
.bk-title.lyric {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: 'Noto Serif JP', serif; transform: none; text-transform: none; line-height: 1.4;
}
.bk-title.lyric .lyric-lead {
  font-size: clamp(11px, 1.3vh, 14px); letter-spacing: .3em;
  color: #8f8f8f; font-weight: 600;
  -webkit-text-fill-color: #8f8f8f; background: none; filter: none; text-shadow: 1px 1px 0 #000;
}
.bk-title.lyric .lyric-line {
  font-size: clamp(15px, 2vh, 22px); letter-spacing: .06em;
  color: #d0d0d0; font-weight: 500;
  -webkit-text-fill-color: #d0d0d0; background: none; filter: none; transform: none;
  text-shadow: 1px 1px 0 #000;
}
.bk-title.lyric .lyric-line:last-child {   /* 最終行＝問い（特大・白） */
  font-size: clamp(30px, 5vh, 58px); letter-spacing: .02em;
  color: #fff; font-weight: 700; margin-top: .18em;
  -webkit-text-fill-color: #fff;
}
.bk-title span, .page-title span {
  background: var(--grad-goldtext);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(2px 3px 0 rgba(0,0,0,.9));
}

.bk-main {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(10px, 2vw, 20px);
  align-items: center;
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(6px, 1.2vh, 12px);
  align-self: stretch;
}
.checklist li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-weight: 700;
  font-size: clamp(11px, 1.6vh, 14px);
  color: var(--text-white);
  text-shadow: 1px 2px 0 #000;
}
.chk-icon {
  flex: 0 0 auto;
  color: var(--text-gold);
  font-size: .8em;
  text-shadow: 1px 1px 0 #000;
}

/* スクリーンショット枠 */
.shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--flame-300);
  outline: 1px solid #000;
  border-radius: 2px;
  background: #000;
  padding: 0;
  overflow: hidden;
  box-shadow: 3px 4px 0 rgba(0,0,0,.85);
  transition: filter var(--t), border-color var(--t);
  image-rendering: pixelated;
}
.shot svg,
.shot canvas { display: block; width: 100%; height: 100%; }
/* 1px 持ち上げると枠が半端な位置に乗ってガタつくので、明度だけで反応させる */
button.shot:hover { filter: brightness(1.15); }

/* .thumb は ABOUT/MEMORY CARD/LINER NOTES の各 shot、.shot-label は LINKS の shot が使うラベル。
   従来 .thumb に位置指定がなく素のテキストとして流れ、LINKS だけ右下バッジ表示とズレていたため統一 */
.shot-label,
.thumb {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--font-cond);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(11px, 1.6vh, 14px);
  letter-spacing: .1em;
  color: #000;
  background: var(--grad-goldtext);
  padding: 2px 10px 2px 14px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

/* .desc は LINKS 側に対応する表示枠がなく未スタイルのまま素のテキストで重なっていたため非表示に統一 */
.shot .desc {
  display: none;
}

.bk-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.6vw, 16px);
}
.shot-col { display: flex; flex-direction: column; gap: 5px; }

.caption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12px, 1.4vh, 13px);
  color: var(--text-gold);
  text-align: center;
  text-shadow: 1px 2px 0 #000;
  line-height: 1.5;
}

/* 法務風フッター */
.bk-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: clamp(6px, 1.2vh, 12px);
}

.back-sticker {
  width: clamp(78px, 12vh, 110px);
}
.back-sticker img {
  display: block;
  width: 100%;
  height: auto;
}

.pub-logos {
  display: flex;
  gap: clamp(10px, 2vw, 22px);
  align-items: baseline;
}
.pub-logo {
  font-family: var(--font-cond);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(10px, 1.5vh, 13px);
  letter-spacing: .14em;
  color: #fff;
  text-shadow: 1px 2px 0 #000;
}

.flip-back {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(10px, 1.5vh, 13px);
  letter-spacing: .12em;
  color: #000;
  background: var(--grad-chrome);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 4px 12px;
  box-shadow: 2px 3px 0 rgba(0,0,0,.85);
  transition: filter var(--t);
}
.flip-back:hover { filter: brightness(1.12); }
.flip-back:active { background: linear-gradient(0deg,
  #f4f4f4 0%, #c9c9c9 22%, #6a6a6a 45%, #e8e8e8 55%, #8f8f8f 75%, #3a3a3a 100%); }

/* 法務帯 — フッター下段の細字ブロック。下辺を締めつつ 3D テクスチャ側と情報量を揃える */
.bk-legal {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: clamp(5px, 1vh, 9px);
  font-family: var(--font-body);
  font-size: clamp(7px, 1.1vh, 9px);
  line-height: 1.45;
  letter-spacing: .01em;
  color: rgba(255,255,255,.4);
}
/* 奥付リンク。文字は細字のまま、当たり判定だけ広げる (SPで押しやすく) */
.bk-author {
  align-self: stretch;              /* テキスト幅でなく行幅いっぱいを当たり判定に */
  display: flex;
  align-items: center;
  gap: .4em;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--t);
}
/* 外部リンクの合図 (出典/LINKS と同じ ▸)。ホバー不可のSPでもタップ可能と伝わる */
.bk-author::after {
  content: '▸';
  color: rgba(255,255,255,.35);
  transition: color var(--t);
}
.bk-author:hover, .bk-author:focus-visible { color: var(--text-gold); text-decoration: underline; }
.bk-author:hover::after, .bk-author:focus-visible::after { color: var(--text-gold); }
/* タッチ端末だけ縦の当たり判定を確保 (見た目の帯サイズは据え置き) */
@media (pointer: coarse) {
  .bk-author { min-height: 44px; }
}

/* ================================================================
   コンテンツページ
   ================================================================ */
.page.active {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  /* 上は固定タイトルバー(40px)+四隅の逃げ分を空ける */
  padding: clamp(56px, 8vh, 76px) clamp(16px, 4vw, 48px) clamp(20px, 5vh, 48px);
  /* MUDOLLYの夜 — 赤いネオンの覗き + 四周のビネットで、戦術HUDが浮かぶ暗い赤の地にする */
  background:
    radial-gradient(120% 72% at 50% -8%, rgba(228,35,19,.07) 0%, transparent 52%),
    radial-gradient(135% 100% at 50% 42%, transparent 50%, rgba(0,0,0,.62) 100%),
    var(--void-black);
  /* .scene.active の rise を、詳細ページ専用のCRTスキャン入場で上書き */
  position: relative;
  /* CRTスキャンの ::before は入場後 top:100%/40vh高で静止するため、visible だと
     コンテンツ下に 40vh の死に余白ができてスクロール域が伸びる。clip で切って締める
     (scanは元々このページ枠内を掃くだけなので枠外は見えず、見た目は変わらない) */
  overflow: clip;
  animation: page-in .3s ease-out both;
}
/* 起動時に上から下へ走る走査線の一閃 */
.page.active::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 40vh;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,178,46,.05) 55%,
    rgba(255,178,46,.35) 92%,
    var(--flame-300) 100%);
  mix-blend-mode: screen;
  animation: page-scan .5s ease-out both;
}
@keyframes page-in {
  0%   { opacity: 0; transform: translateY(12px) scale(.99); filter: brightness(1.7) saturate(1.4); }
  35%  { filter: brightness(1) saturate(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@keyframes page-scan {
  0%   { top: -40vh; opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.page-inner {
  width: min(1040px, 100%);
  display: flex;
  flex-direction: column;
  /* ステータスバーとブラケット枠の間 (コンテンツの間隔は .hw-shell の --gap が持つ) */
  gap: 12px;
  /* LINKS のように中身が短い画面は塊ごと画面中央に置く。
     safe を付けないと、長い画面で上端がはみ出して読めなくなる */
  justify-content: safe center;
}
/* 中身をわずかにずらして順に立ち上げる。シェル (ステータスバー・タブ・枠・フッター) は
   常設の筐体なので入場アニメから外し、差し替わるのは画面の中身だけに見せる */
.page.active .hw-shell > * {
  animation: page-item-in .38s ease-out both;
}
.page.active .hw-shell > .hw-tabs,
.page.active .hw-shell > .hw-shell-foot,
.page.active .hw-shell > .hw-corner { animation: none; }
/* :nth-child(1) はタブ (アニメ無し)。中身は2番目から順に立ち上がる */
.page.active .hw-shell > :nth-child(2) { animation-delay: .05s; }
.page.active .hw-shell > :nth-child(3) { animation-delay: .11s; }
.page.active .hw-shell > :nth-child(4) { animation-delay: .17s; }
.page.active .hw-shell > :nth-child(5) { animation-delay: .23s; }
.page.active .hw-shell > :nth-child(n+6) { animation-delay: .29s; }
@keyframes page-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   永続システムシェル (HARDWIRE v2) — ステータスバー / ブラケット / タブ
   ================================================================ */

/* ステータスバー — 高さ約30pxの計器の一行。プレート化せず、下辺1pxのヘアラインだけで区切る */
/* ウィンドウのタイトルバー — 画面上部に固定して永続させる。中身(下の窓)が切り替わる。
   ページごとに存在するが inactive は .scene{display:none} で隠れるので、実際に見えるのは常に1本 */
.hw-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 音声コントロール(タップ判定44px)ときっちり高さを揃える */
  min-height: 44px;
  /* 右端は音声コントロール(同じ行に同居)のためのスペースを空ける */
  padding: 0 148px 0 16px;
  background: var(--void-black);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* 狭幅では折らずに右端の計器から切る (旧レールと同じ流儀。SP細部調整は別途) */
  white-space: nowrap;
  overflow: hidden;
  /* ジャケット(3Dシーン)では隠し、コンテンツ画面のときだけ出す */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-out;
}
body:has(.page.active) .hw-status {
  opacity: 1;
  pointer-events: auto;
}
.hw-status-region { color: var(--text-gold); }
.hw-status-sep { color: var(--chrome-700); }
.hw-status-locale { color: var(--chrome-500); }
.hw-clock {
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}
/* SP で日付↔時刻を切り替える瞬間の一瞬のグリッチ (計器がチャンネルを切った感)。steps で機械的に */
@keyframes hwClockSwap {
  0%   { opacity: .35; transform: translateX(-1px); }
  50%  { opacity: 1;   transform: translateX(1px); }
  100% { opacity: 1;   transform: none; }
}
.hw-status-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.hw-vram { display: flex; align-items: center; gap: 8px; }
.hw-vram-label { color: var(--chrome-500); font-weight: 500; }
.hw-vram-segs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.hw-vram-seg {
  width: 3px;
  height: 100%;
  background: var(--text-gold);
  transform-origin: bottom;
  animation: hwVram 2.6s ease-in-out infinite;
}
.hw-vram-seg:nth-child(2) { animation-delay: .3s; }
.hw-vram-seg:nth-child(3) { animation-delay: .6s; }
.hw-vram-seg:nth-child(4) { background: var(--flame-700); animation-delay: .9s; }
.hw-vram-seg:nth-child(n+5) { background: var(--chrome-700); animation: none; }
.hw-disc {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--flame-300);
}
.hw-disc-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flame-300);
  animation: hwDisc 2.2s steps(1) infinite;
}
/* 読み出し中の曲名を流すスキャン窓。再生中(.is-active)だけ幅を開き、それ以外は畳んで DISC READ のまま。
   窓は固定幅でクリップし、中の曲名を右→左へ流す。等幅HUD・低明度でラベルより一段沈める */
.hw-disc-track {
  display: none;
  position: relative;
  overflow: hidden;
  max-width: 160px;
  padding-left: 11px;
  color: var(--chrome-500);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: none;
}
.hw-disc-track.is-active { display: block; }
/* 窓の左端で点滅する読み取りヘッドのカーソル */
.hw-disc-track::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: var(--flame-300);
  animation: hwDiscCaret 1s steps(1) infinite;
}
.hw-disc-track-name {
  display: inline-block;
  white-space: nowrap;
  animation: hwDiscMarquee 13s linear infinite;
}
@keyframes hwDiscMarquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
@keyframes hwDiscCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 中間幅 — 音声コントロール(右端固定)とタイトルバーの計器が衝突するのを、計器を段階的に間引いて防ぐ。
   まず VRAM を落とす */
@media (max-width: 920px) {
  .hw-vram { display: none; }
}
/* さらに狭いと REGION:YANDEL CITY と音量スライダーを畳み、確保スペースを詰める。
   タブは1行固定テープ(.hw-tabs)のまま列間だけ詰める */
@media (max-width: 820px) {
  .hw-status-sep,
  .hw-status-locale { display: none; }
  .audio-control { right: 12px; }
  .hw-tabs { gap: 20px; }
  .hw-tabs-sys { padding-bottom: 6px; }
  .hw-tab { padding-bottom: 6px; }
}

/* SP — ロゴ / 時刻 / ● + 再生中トラック名(マーキー) / 音量コントロール。
   §10 の意図どおり右端の計器は DISC READ(VRAM より優先)だが、SP はラベルを省き曲名スクロールのみにする。
   日付(2049.MM.DD)は幅が足りず SP では畳み、時刻(稼働の脈動)のみ残す */
@media (max-width: 640px) {
  .hw-status {
    gap: 8px;
    /* フル音声(play+mute+60pxスライダー)分を右端に確保し、DISC READ との間に隙間を残す */
    padding: 0 140px 0 10px;
    /* 基底の 11px を維持し、境界をまたいでも文字サイズを一定に保つ */
  }
  /* REGION 系の装飾計器と区切りを畳む。DISC READ は右端の計器として残す(VRAM 優先の逆) */
  .hw-status-region,
  .hw-status-sep,
  .hw-status-locale { display: none; }
  /* SP は「DISC READ」ラベルを省き、● LED(読み取りヘッド)+ 曲名マーキーだけにする。
     窓が独自に持つスキャンカーソルは LED と重複するため畳み、左余白も詰める */
  .hw-disc-label { display: none; }
  .hw-disc-track { max-width: 110px; padding-left: 0; }
  .hw-disc-track::before { display: none; }
  /* 日付+時刻を並べる幅はないが、片方だけなら収まる。JS が 10秒周期の頭2秒だけ .show-date を付け、
     時刻を主役に日付をちらっと差し込む。切り替えの瞬間だけ計器がチャンネルを切ったような一瞬の
     グリッチを挟む。reduced-motion では JS が切り替えないので時刻固定のまま。字間は僅かに詰める */
  .hw-clock .hw-clock-date { display: none; }
  .hw-clock.show-date .hw-clock-time { display: none; }
  .hw-clock.show-date .hw-clock-date { display: inline; animation: hwClockSwap .16s steps(2) 1; }
  .hw-clock:not(.show-date) .hw-clock-time { animation: hwClockSwap .16s steps(2) 1; }
  .hw-clock { letter-spacing: .06em; }
  .audio-control { right: 8px; }
  /* 狭い画面では page と枠(hw-shell)の水平余白が二重に効いて窮屈になるので、両方詰める */
  .page.active { padding-top: clamp(50px, 8vh, 60px); padding-left: 10px; padding-right: 10px; }
  .hw-shell { padding-left: 10px; padding-right: 10px; }
  /* システムメニュー(タブ) — 1行固定テープのまま、SP では字を詰めて収まりを稼ぐ。
     はみ出しは横スクロール+右端 fade で処理する */
  .hw-tabs { gap: 16px; }
  .hw-tabs-sys { padding-bottom: 6px; font-size: 10px; }
  .hw-tab { font-size: 11px; padding-bottom: 6px; }
}

/* 狭SP(≈iPhone SE〜標準ポートレート) — 曲名マーキーが唯一の右端計器なので畳まず、窓幅だけ詰めて
   時刻・音量コントロールとの競合を避ける。右端は音量コントロールなので右パディングも詰める */
@media (max-width: 480px) {
  .hw-disc-track { max-width: 90px; }
  .hw-status { padding: 0 132px 0 8px; }
}

/* ブラケット枠 — タブ以降のコンテンツを機械の枠として括る。
   四隅は枠(hw-shell)の端に付き、中身は水平パディングで内側へ寄せる(枠に対して ≈×0.9)。
   これで4隅とコンテンツの間に余白が生まれ、タブ等が隅に詰まらない */
.hw-shell {
  --gap: clamp(16px, 3vh, 28px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* 上下は四隅のL字との重なり逃げ、左右は枠と中身の間の余白 */
  padding: 16px clamp(16px, 3.5vw, 46px) 14px;
}
/* コーナーブラケット — コンテンツ側の窓枠(.hw-shell を基準に絶対配置)。
   タブ切替で content ごと入れ替わり、entrance で枠も動くので切替感が出る */
.hw-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.hw-corner-tl { top: 0;    left: 0;  border-top: 2px solid var(--chrome-500);    border-left: 2px solid var(--chrome-500); }
.hw-corner-tr { top: 0;    right: 0; border-top: 2px solid var(--chrome-500);    border-right: 2px solid var(--chrome-500); }
.hw-corner-bl { bottom: 0; left: 0;  border-bottom: 2px solid var(--chrome-500); border-left: 2px solid var(--chrome-500); }
.hw-corner-br { bottom: 0; right: 0; border-bottom: 2px solid var(--chrome-500); border-right: 2px solid var(--chrome-500); }

/* タブナビ — 矩形ボタン・プレートにしない。現在地は白+goldの2px下線だけで示す。
   折り返すと SYSTEM▸ や末尾タブが孤立して崩れるため、1行固定の計器テープにする。
   収まらない分は横スクロールし、右端の fade で「枠外へ続く」ことを示す */
.hw-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 26px;
  padding: 2px 4px 0;
  border-bottom: 1px solid var(--hair);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hw-tabs::-webkit-scrollbar { display: none; }
/* 右端(枠外へ続く側)だけを薄く落とす。左端は固定した SYSTEM▸ が蓋をするので fade 不要。
   末尾(end)まで送ったら続きが無いので右 fade も消す。状態は wireTabScroll が書き換える */
.hw-tabs[data-edge="start"],
.hw-tabs[data-edge="mid"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.hw-tabs-sys {
  display: flex;
  align-items: center;
  /* nowrap テープ内で縮まないよう固定幅。縮むとラベルが2行に割れる */
  flex: 0 0 auto;
  white-space: nowrap;
  /* ラベルは動かさず左端に固定。タブ群だけが後ろを流れる。背景でタブを隠し、
     ::after の短いグラデでタブがラベルの下へ潜り込んで消えるように見せる */
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--void-black);
  gap: 8px;
  padding-bottom: 12px;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-gold);
}
.hw-tabs-sys::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 26px;
  background: linear-gradient(90deg, var(--void-black), transparent);
  pointer-events: none;
}
.hw-tabs-arrow { color: var(--flame-500); }
.hw-tab {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 0 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5a5a5a;   /* 非選択はトーン外の沈んだ灰 (chrome-500/700 の中間) */
  transition: color var(--t);
}
.hw-tab:hover,
.hw-tab:focus-visible { color: var(--text-white); }
.hw-tab.is-current { color: var(--text-white); cursor: default; }
.hw-tab.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* overflow-y:hidden(横スクロール用)で下線が切れないよう枠内に収める */
  bottom: 0;
  height: 2px;
  background: var(--text-gold);
}

/* シェル最下段のフッター — 非公式の断り書きを9pxで刻む。全文が読めるよう折り返す。
   左右の padding は下隅の L 字ブラケットと文字の重なりを避けるための逃げ */
.hw-shell-foot {
  padding: 14px 30px 0;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--font-hud);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--chrome-700);
}

/* シェル左端のワードマーク (ジャケットへの戻り口)。region/locale は機械側の表記で
   階層が違うので、細い縦罫で切ってから並べる。押せることは点灯で示す */
.rail-home {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 12px;
  border-right: 1px solid var(--hair);
  /* 素の白ロゴのままだと機械側の文字組から浮くので、レールのインクとして塗り直す。
     ただし押せない sys/region (chrome-500) と同じ明度まで沈めると戻り口だと気付けない */
  color: rgba(255,255,255,.72);
  transition: color var(--t), filter var(--t);
}
/* ワードマークをレールの文字丈まで詰めた分、見た目を変えずに指で押せる面積を足す */
.rail-home::after {
  content: "";
  position: absolute;
  inset: -10px -12px -10px -8px;
}
/* 白+透過のロゴ画像をそのまま型抜きに使い、currentColor で着色する */
.rail-home-mark {
  display: block;
  height: 10px;                 /* レール文字のキャップハイトに光学合わせ */
  aspect-ratio: 1686 / 284;
  background: currentColor;
  -webkit-mask: var(--rail-home-logo) no-repeat center / contain;
  mask: var(--rail-home-logo) no-repeat center / contain;
}
.rail-home-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: currentColor;
}
.rail-home:hover,
.rail-home:focus-visible {
  color: var(--text-white);
  filter: drop-shadow(0 0 6px var(--flame-500));
}

/* 見出し下は細い罫。赤はタイトルの直下だけを短く走らせて下線にする
   (全幅の赤い罫はパネル左の赤帯と二重になり、画面が赤線だらけになる) */
.page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 14px;
}
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(60px, 14%, 120px);
  height: 2px;
  background: var(--flame-500);
}

/* キッカー — 見出しの上に置く導線の語。先頭の赤いティックで見出し(炎)側の語であることを示す */
.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.page-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--flame-500);
}

.page-title .line1 { font-size: clamp(18px, 3.4vw, 30px); }
.page-title .line2 { font-size: clamp(38px, 8vw, 68px); }

/* ページの締め — 収録曲名・歌詞の一節を置いて画面を閉じる */
/* caption を試験削除して以降、足元は BACK ボタンだけ。旧caption用の上余白は
   空の帯に見えるので持たせず、コンテンツとの間隔は page-inner の gap に任せる */
.page-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* コンソール面 — 「黒地に浮いたカード」ではなく「機械に沈んだ画面」。
   浮いた硬い影はジャケット (印刷物) 側の語彙なので、ここでは使わない */
.panel {
  position: relative;
  background: var(--console);
  border: 1px solid var(--hair-soft);
  border-left: 2px solid var(--flame-700);
  border-radius: 2px;
  padding: clamp(18px, 3.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
/* 走査線。近づかないと見えない程度に留める */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}
.panel > * { position: relative; }

/* 日本語本文は行長を詰め、行間を開けたほうが読める。
   ch は半角0の幅で全角の約半分になるため、行長指定は ic (全角1文字幅) を使う */
.body-jp {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  color: var(--text-white);
  max-width: 34ic;
}

/* トラックリスト */
.tracklist {
  list-style: none;
  counter-reset: trk;
  display: flex;
  flex-direction: column;
}
/* 行は「選択カーソルが走るメニュー」。ホバー/フォーカスで番号溝に再生ヘッドが立つ */
.tracklist li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 6px 9px 18px;
  border-bottom: 1px solid var(--hair-soft);
  transition: background-color var(--t);
}
.tracklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--flame-500);
  transform: scaleY(0);
  transform-origin: top;
  /* ここだけ --t を使わない。カーソルが伸びる動きなので、
     ジャケットの回転と同じイージングに合わせている */
  transition: transform .16s cubic-bezier(.3, 0, .2, 1);
}
.tracklist li:hover { background: var(--console-hi); }
.tracklist li:hover::before { transform: scaleY(1); }
.tracklist li:hover .trk-no { color: var(--text-white); }

/* :focus-within だと MV をクリックした行がマウスを外しても点いたままになる。
   :has(:focus-visible) にしてキーボード操作のときだけ灯す。
   :has 未対応ブラウザで上の :hover ごと無効化されないよう、規則を分けている */
.tracklist li:has(:focus-visible) { background: var(--console-hi); }
.tracklist li:has(:focus-visible)::before { transform: scaleY(1); }
.tracklist li:has(:focus-visible) .trk-no { color: var(--text-white); }

@media (prefers-reduced-motion: reduce) {
  .tracklist li::before { transition: none; }
}

/* 通し番号は構造なので琥珀。等幅数字で桁を揃え、列として立たせる */
.trk-no {
  font-family: var(--font-cond);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-gold);
  font-size: 14px;
  letter-spacing: .08em;
  min-width: 2.2em;
  transition: color var(--t);
}
/* 曲名+feat.のラッパー。PCは横に十分幅があれば横並び、収まらなければ自然にSPと同じ縦積みになる */
.trk-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  min-width: 0;
}
.trk-name {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--text-white);
}
/* ボタンを持つ行は「feat.が2行目 → ボタン縦積み → 曲名が2行」の順で崩す。
   曲名は最後の手段まで1行に固定し(nowrap)、titles を先に縮めて feat. を2行目へ落とす。
   曲名が1行を保つことで、次に幅を譲るのはボタン側になり、縦積みが曲名の折り返しより先に起きる */
.has-mv .trk-titles { flex-shrink: 4; }
.has-mv .trk-name { white-space: nowrap; }
.trk-feat {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-dim);
}
/* SKIT は本編ではないので、枠を持たせず地に沈める。
   ただし右カラムの footprint は .trk-mv (映像チップ) と揃える必要があるため、
   幅と中央揃えだけは合わせる（枠・背景・ボタン化はしない） */
.trk-tag {
  margin-left: auto;
  min-width: 72px;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--chrome-500);
  /* letter-spacing は最終文字の後ろにも入るため、中央揃えの軸が半分ぶん左へずれる。
     その分だけ右にずらして見た目の中心を .trk-mv と合わせる */
  transform: translateX(.15em);
}
.is-skit .trk-name { color: var(--text-dim); }

/* 映像チップ群 — 行の右端に寄せ、横並びは live→MV にする。
   幅が詰まると横並びが入らなくなった時点で flex-wrap により縦積みへ落ちる。
   DOM順は MV, LIVE (縦積み時にこの上→下順にしたいため) なので、
   横並びの見た目だけ row-reverse で反転させて live→MV にする。
   min-width:min-content でチップ1個ぶんを下限にし、曲名(nowrap)より先に幅を譲る */
.trk-actions {
  margin-left: auto;
  /* 単一チップ/縦積みのどちらでもチップ(群)を行の縦中央に置く。
     行の高さは曲名(大きい方)基準なので、baseline や flex-start だとチップが中央より上へズレる */
  align-self: center;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  /* row-reverse では main-start が右端。チップを行の右端へ詰めるには flex-start を指定する。
     flex-end だと main-end=左へ詰まり、折り返し途中の中間幅でチップの右側に空白が残る */
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  min-width: min-content;
}
/* 映像チップ — その行だけが外の映像へ出られる、という状態表示なので赤。
   LIVE/MVで文字数が違っても幅を揃えたいので、長い方(▸ LIVE)が収まる幅をmin-widthで下限にし、
   短い方(▸ MV)はtext-alignで中央寄せして同じ幅に見せる。
   縦積み時(2チップ)が曲名+feat.の2行ぶんの高さに収まるよう、上下のpaddingは詰めている */
.trk-mv {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--flame-300);
  border: 1px solid var(--flame-700);
  border-radius: 2px;
  padding: 1px 10px;
  min-width: 72px;
  text-align: center;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--t), background-color var(--t), border-color var(--t);
}
.trk-mv:hover {
  color: #000;
  background: var(--flame-500);
  border-color: var(--flame-500);
}

/* スタッフロール */
.credits-roll {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 28px;
  row-gap: 10px;
  padding: 18px 0;
}
.credit-role {
  font-family: var(--font-cond);
  font-weight: 800;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--text-gold);
  text-align: right;
  text-shadow: 1px 2px 0 #000;
  align-self: baseline;
}
.credit-name {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--text-white);
  text-shadow: 1px 2px 0 #000;
  align-self: baseline;
}

/* ライナーノーツ風の技術クレジット */
/* トラックリストと同じ左端に揃える (中央寄せだと列がずれて見える) */
.credits-prod {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-soft);
}
.prod-role {
  font-family: var(--font-cond);
  font-weight: 900;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--text-gold);
  text-transform: uppercase;
  text-shadow: 1px 2px 0 #000;
  margin: 18px 0 6px;
}
.prod-role:first-child { margin-top: 0; }
.prod-list {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: baseline;
}
.prod-name {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--text-white);
}
.prod-name-studio {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, .5);
}
.prod-trk {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
  text-align: right;
  white-space: nowrap;
}
/* 名前列(1fr)は nowrap のトラック列に押し潰される。最長の名前 "The Anticipation Illicit Tsuboi" が
   1行に収まる下限は実測で約500pxなので、スクロールバーとフォント差の余裕を見て540pxを閾値にする。
   これ以下では名前・所属・トラックを縦積みにして名前の途中改行と担当トラックの右端切れを防ぎ、
   幅制限も外してtracklistと揃える */
@media (max-width: 540px) {
  .credits-prod {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .prod-list {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .prod-trk {
    text-align: left;
    white-space: normal;
    margin-bottom: 10px;
  }
}

/* ここまでの幅で feat. は2行目・ボタンは縦積みになっている。
   最終段階として、この幅を下回ったら曲名の折り返しを解禁する(上の幅では nowrap で1行を保つ) */
@media (max-width: 360px) {
  .has-mv .trk-name { white-space: normal; }
}
.credits-copyright {
  max-width: 620px;
  margin: 20px auto 0;
  font-family: var(--font-cond);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .42);
  text-align: center;
}

/* LINER NOTES — HARDWIRE v2 アーカイブ/ログビューア (仕様 §4-3)。
   左=区分インデックス(sticky) / 右=ログ本体の2カラム。旧 ref-* パネル
   (skew見出し・角丸左罫panel・chromeナビ) は廃し、console 地 + hw-notch +
   ヘアラインの v2 規律で組む。色は既存トークンのみ (新色を持ち込まない) */

/* 見出しプレート — [SYS://] ラベル + タイトル + 区分数バッジ。上辺だけ flame */
.ln-plate {
  background: linear-gradient(180deg, var(--console-hi) 0%, var(--console) 100%);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--flame-500);
  padding: 18px 22px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.ln-plate-main { flex: 1 1 auto; }
.ln-plate-sys {
  display: block;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--text-gold);
}
.ln-plate-title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 60px);
  line-height: .95;
  letter-spacing: .02em;
  color: var(--text-white);
}
.ln-plate-badge {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--void-black);
  background: var(--chrome-500);
  padding: 3px 10px;
}

/* イントロ — ログの前書き。プレート単体の下に浮かせるとどの面にも属さない
   孤立行になるため、タイトルのサブラインとしてプレート内に収める。
   > プレフィックスは JS 側で付ける */
.ln-intro {
  margin: 10px 0 0;
  font-family: var(--font-hud);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-dim);
  max-width: 60ic;
}

/* 2カラム — sidebar パターン。約660px 未満で index が上段へ回り込み1カラム化 */
.ln-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

/* INDEX — sticky な区分索引。上辺は無彩 chrome (プレートの flame と主従を分ける) */
.ln-index {
  flex: 1 1 190px;
  max-width: 100%;
  position: sticky;
  /* 固定タイトルバー(40px)の裏に潜らないよう、その下に貼り付ける */
  top: 52px;
  background: var(--console);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--chrome-700);
  padding: 14px 14px 16px;
}
.ln-index-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .28em;
}
.ln-index-mark { color: var(--text-gold); }
.ln-index-filter { color: var(--chrome-700); }
.ln-index-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.ln-ix {
  flex: 1 1 150px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid var(--chrome-700);
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text-dim);
  transition: color var(--t), background var(--t), border-color var(--t);
}
.ln-ix-num { font-size: 9px; letter-spacing: .1em; color: var(--chrome-700); }
.ln-ix:hover,
.ln-ix:focus-visible { background: var(--console-hi); color: var(--text-white); }
/* 現在地 — gold 文字 + flame 2px 左罫 + 起伏面 (SPEC §4-3) */
.ln-ix.is-current {
  background: var(--console-hi);
  border-left-color: var(--flame-500);
  color: var(--text-gold);
}
.ln-ix.is-current .ln-ix-num { color: var(--text-gold); }
.ln-index-reading {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--font-hud);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--chrome-700);
}
.ln-reading-label { color: var(--text-dim); }

/* LOG — 章ごとのコンソール面 */
.ln-log {
  flex: 999 1 min(100%, 480px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.ln-sec {
  background: var(--console);
  border: 1px solid var(--hair);
  padding: 24px clamp(18px, 3vw, 30px);
  /* index からのジャンプ着地時、固定タイトルバー(40px)分を避けて見出しを出す */
  scroll-margin-top: 52px;
}
/* セクション見出し — [TAG] + ヘアライン + 補助ラベル + 開閉マーク。
   畳み(開閉)は SP のみ。PC は全章を開いたまま出すので見出しは非interactive、
   開閉マークも出さない (SP のスタイルは下記メディアクエリで足す) */
.ln-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: default;
  text-align: left;
  color: inherit;
  font: inherit;
}
.ln-sec.is-open .ln-sec-head { margin-bottom: 18px; }
.ln-sec-toggle {
  display: none;
  font-family: var(--font-hud);
  font-size: 12px;
  color: var(--text-gold);
  transition: transform var(--t);
}
.ln-sec.is-open .ln-sec-toggle { transform: rotate(90deg); }
.ln-sec-body { display: none; }
.ln-sec.is-open .ln-sec-body { display: block; }
.ln-sec-tag {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--text-gold);
}
.ln-sec-line {
  flex: 1;
  min-width: 20px;
  height: 1px;
  background: var(--hair);
}
.ln-sec-sub {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--chrome-500);
}
.ln-sec-sub.is-hud {
  font-family: var(--font-hud);
  letter-spacing: .2em;
}

/* TIMELINE ログ — 年・日付は等幅 gold の刻印 + ─ */
.ln-timeline {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 12px;
}
.ln-year {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 3px;
  white-space: nowrap;
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--text-gold);
}
.ln-year-dash { color: var(--chrome-700); }
.ln-year-body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-white);
  text-wrap: pretty;
  max-width: 34ic;
}

/* 要約ノート — 本文列は 34ic 相当で頭打ち。左罫は chrome (引用は「印」であって状態ではない) */
.ln-note {
  padding: 4px 0 4px 18px;
  border-left: 1px solid var(--chrome-700);
  margin-bottom: 24px;
  max-width: 36ic;
}
.ln-note:last-child { margin-bottom: 0; }
.ln-note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.ln-note-by {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text-dim);
}
.ln-note-ref {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-gold);
}
.ln-note-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-white);
  text-wrap: pretty;
}

/* 引用 — 記事本文の抜粋。Serif JP + chrome 左罫で要約と質感を分ける */
.ln-quote {
  margin-top: 14px;
  border-left: 2px solid var(--chrome-500);
  background: var(--hair-soft);
  padding: 12px 16px;
}
.ln-quote-label {
  display: block;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--chrome-500);
  margin-bottom: 6px;
}
.ln-quote-text {
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-white);
}
.ln-cta {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--flame-300);
  text-decoration: none;
  transition: color var(--t);
}
.ln-cta:hover,
.ln-cta:focus-visible { color: var(--text-gold); }

/* SOURCES — REFERENCED FILES マニフェスト。番号/出典名/日付/▸ の4カラム */
.ln-src-list { display: flex; flex-direction: column; }
.ln-src {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) max-content 18px;
  gap: 12px;
  align-items: baseline;
  padding: 9px 4px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--t), background var(--t);
}
.ln-src:hover,
.ln-src:focus-visible { color: var(--text-white); background: var(--console-hi); }
.ln-src-no {
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-gold);
}
.ln-src-date {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--chrome-500);
  white-space: nowrap;
}
.ln-src-arrow {
  font-family: var(--font-hud);
  color: var(--flame-300);
  text-align: right;
}

/* 狭幅では章が既定で畳まれ全体を一望できるため、索引の使い道がない。
   全幅で縦に居座るだけになるので INDEX ごと畳んで隠す */
@media (max-width: 640px) {
  .ln-index { display: none; }
  /* SP は畳み表示。見出しを押せる状態にし開閉マークを出す */
  .ln-sec-head { cursor: pointer; }
  .ln-sec-head:hover .ln-sec-tag,
  .ln-sec-head:focus-visible .ln-sec-tag { color: var(--text-white); }
  .ln-sec-toggle { display: inline; }
  /* SOURCES は狭幅で日付列が窮屈になる。番号+タイトルの行の下へ日付を落として2行に組む */
  .ln-src {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    grid-template-areas:
      "no label arrow"
      "no date  date";
    row-gap: 2px;
    align-items: start;
  }
  .ln-src-no { grid-area: no; }
  .ln-src-label { grid-area: label; }
  .ln-src-date { grid-area: date; }
  .ln-src-arrow { grid-area: arrow; }
  /* 年代と内容の横並びは狭幅で窮屈。年代(─付き)を見出し行にして内容を下へ積む */
  .ln-timeline { grid-template-columns: 1fr; row-gap: 4px; }
  .ln-year { padding-top: 0; }
  .ln-year-body { max-width: none; margin-bottom: 18px; }
  .ln-year-body:last-child { margin-bottom: 0; }
}

/* RETURNS — 概要文とCAMPFIRE導線を横並びに配置 */
/* ================================================================
   RETURNS v2 — MISSION REPORT / 突破メーター / RECOVERED ASSETS (§4-4)
   旧Y2K語彙(skew見出し・chrome-btn・角丸)を排し、計器盤の規律に統一
   ================================================================ */

/* 見出しプレート */
.rt-plate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 12px;
}
.rt-tag {
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--text-gold);
}
.rt-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--text-white);
}
.rt-status {
  margin-left: auto;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--flame-300);
  animation: hwPulse 2.4s ease-in-out infinite;
}

/* 主HUD — 大ノッチプレート (巨大数値 + メーター) */
.rt-hud {
  background: var(--console);
  border: 1px solid var(--hair);
  border-top: 1px solid var(--hair-soft);
  padding: clamp(20px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 34px);
}
.rt-readout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.rt-big-wrap { display: flex; align-items: baseline; gap: 14px; }
.rt-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 13vw, 132px);
  line-height: .82;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--chrome-100);
  text-shadow: 3px 4px 0 #000;      /* サイト共通のスタンプ調オフセット影 (ネオングローは使わない) */
}
.rt-big-unit { font-size: .4em; margin-left: .04em; }
.rt-big-label {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--text-white);
  align-self: flex-end;
  padding-bottom: .55em;
}
/* 巨大数値の色は加熱ロジックで連動: 冷えたクローム → 着火(赤) → 超過(金)。影は共通のオフセットのまま */
.rt-hud[data-stage="over"]     .rt-big { color: var(--text-gold); }
.rt-hud[data-stage="cleared"]  .rt-big { color: var(--flame-300); }
.rt-hud[data-stage="charging"] .rt-big { color: var(--chrome-300); }

/* 突破メーター */
.rt-meter-wrap { position: relative; }
.rt-meter-top {
  position: relative;
  height: 15px;
  margin-bottom: 6px;
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .14em;
}
.rt-target-label { position: absolute; transform: translateX(-50%); color: var(--text-white); white-space: nowrap; }
.rt-limit { position: absolute; right: 0; color: var(--flame-300); }

.rt-meter {
  position: relative;
  height: 30px;
  background: #111114;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.rt-ticks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rt-ticks i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.16); }
.rt-target-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-white); z-index: 3; }
.rt-fill {
  position: relative;
  height: 100%;
  width: 100%;                      /* 全幅 = rate%。フィルは常に全幅、演出時のみ 0→100% */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(100% / var(--fp, 1)) 100%;   /* 色域はバー全幅に固定し、伸びた分だけ表に出す */
  /* 外周光は加熱度(--heat)に比例して連続的に強まる。点火点では最小、限界で最大 */
  box-shadow: 0 0 calc(4px + 26px * var(--heat, 1)) rgba(228, 35, 19, calc(.12 + .5 * var(--heat, 1)));
}
.rt-fill::after {                   /* 先端の白熱チップ — 目標超過ぶんだけ灯る live burn tip */
  content: '';
  position: absolute;
  top: -1px; bottom: -1px; right: -1px;
  width: 3px;
  background: linear-gradient(#fff, var(--flame-100));
  box-shadow: 0 0 12px 1px var(--flame-100), 0 0 5px #fff;
  opacity: var(--heat, 1);
  pointer-events: none;
}
.rt-fill-val {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  color: #000;
}
.rt-meter-foot {
  position: relative;
  height: 14px;
  margin-top: 6px;
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--chrome-500);
}
.rt-foot-0 { position: absolute; left: 0; }
.rt-foot-target { position: absolute; transform: translateX(-50%); color: var(--text-gold); white-space: nowrap; }
.rt-foot-over { position: absolute; right: 0; color: var(--flame-300); }
/* SP幅ではバー全幅に対するTARGET位置(=100/rate)が小さくなり、中央寄せの
   TARGETラベルが左端の0%と衝突する。0%はバー左端で自明なため狭幅では省く */
@media (max-width: 640px) {
  .rt-foot-0 { display: none; }
}

/* 充填演出(バー幅・斜線・巨大数値)は hydrate.js が表示時に 1 本のタイムラインで駆動する。
   クラファン推移を思わせる緩急を境界(100/200%)に合わせるため CSS animation ではなく JS 制御。
   reduced-motion 時も JS 側で即最終値にするので、ここでの停止規則は不要。 */

/* reduced-motion: 脈動を止める (充填は JS 側で分岐) */
@media (prefers-reduced-motion: reduce) {
  .rt-status { animation: none; }
}

/* 下段 4スタッツ — 1px 目地のセグメント。
   auto-fit だと SP 中間幅(~590px以下)で3列に割れ4つ目が単独行になり右に空きが出るため、
   returns-grid と同じ 4→2→1 の段組みで常に埋まるようにする */
.rt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border: 1px solid var(--hair);
  background: var(--hair);
}
@media (max-width: 640px) {
  .rt-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 340px) {
  .rt-stats { grid-template-columns: 1fr; }
}
.rt-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--console);
  padding: 14px 16px;
}
.rt-stat-key {
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--text-gold);
}
.rt-stat-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  font-variant-numeric: tabular-nums;
  color: var(--chrome-100);
}

/* 概要文 (CAMPAIGN LOG) — 独立した浮き帯をやめ、HUD 内・巨大数値とメーターの間に
   置く。周囲(数値/バー/スタッツ)が全て接地する中このブロックだけ素の黒地に浮いて
   いたのを、grounded な HUD パネルの一員として取り込むことで解消する */
.rt-intro-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 52em;
}
.rt-intro-eyebrow {
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--text-gold);
}
.rt-intro-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-dim);
  text-wrap: pretty;
}
/* CTA は readout 行(巨大数値)の右下に据える。#214 で status badge が抜けた空き */
.rt-cta {
  flex: 0 0 auto;
  align-self: flex-end;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  color: #000;
  background: var(--flame-500);
  padding: 15px 26px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background var(--t);
}
.rt-cta:hover, .rt-cta:focus-visible { background: var(--flame-300); }
/* SP: 数値の下へ回り込んだら全幅のタップ標的にする (右下の半端な位置に浮かせない) */
@media (max-width: 640px) {
  .rt-cta { width: 100%; text-align: center; }
}

/* RECOVERED ASSETS 見出し */
.rt-assets-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 8px;
  font-family: var(--font-hud);
}
.rt-assets-title { font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--text-white); }
.rt-assets-count { font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--text-gold); }

/* RETURNS — リターン品グリッド。PC=3カラム、SP=2、極狭=1 で揃える */
.returns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3vw, 22px);
}
@media (max-width: 640px) {
  .returns-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 340px) {
  .returns-grid { grid-template-columns: 1fr; }
}
.return-item { margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* 品名は回収物のラベル。HUD の刻印として chrome-300 の細字に */
.return-item .caption {
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--chrome-300);
  text-align: left;
  text-shadow: none;
}
/* 枠は flame-deep で普段沈め、触れたときだけ flame に灯す (角丸ゼロ)。
   6枚すべてが明赤枠だと、色が「選択されている」意味を失う */
.return-shot {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid var(--flame-700);
  border-radius: 0;
  /* 抜き背景の実写(YC2.5 アートブック等、被写体も黒い)は console 一色の地だと
     輪郭が消え「未読込の空スロット」に見える。上方へ弱い光を灯した地にして、
     透過部から差す光で暗い被写体のシルエットを起こす。不透明写真は地を覆うため無害 */
  background: radial-gradient(115% 82% at 50% 20%, var(--console-hi) 0%, var(--console) 62%);
  overflow: hidden;
  transition: border-color var(--t), filter var(--t);
  cursor: zoom-in;
}
.return-shot:hover,
.return-shot:focus-visible { border-color: var(--flame-500); filter: brightness(1.08); }
/* スロット内縁に chrome の反射光を一筋。暗い実写でも「枠に収まった像」だと縁で読ませる。
   状態色の赤は使わず微光のみ。明るい写真では内容に埋もれて目立たない (badge は z2 で上に残す) */
.return-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 201, 201, .09);
}
/* 回収物の連番バッジ — gold 地黒字、左上に重ねる */
.rt-item-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  color: #000;
  background: var(--text-gold);
  padding: 3px 8px;
  pointer-events: none;
}
/* 横長のロゴ/資料は cover だと左右が切れて商品が読めない。contain で全体を見せ、台座(console)に載せる */
.return-shot img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }

/* ベタ塗りロゴ(KAMUI HOUSE)や平面カードは、写真タイルの中でだけ明度と質感が浮く。
   地を console 側へ沈め、パネル共通の走査線と縁の暗がりを重ねて「筐体内のカード」として揃える。
   新規の実物写真アセットが用意できれば差し替えが本筋だが、既存素材のみで馴染ませる枠内トリートメント */
.return-shot.is-encased { position: relative; }
.return-shot.is-encased img { filter: brightness(.82) contrast(1.05) saturate(.9); }
.return-shot.is-encased::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.45) 100%);
}

/* リターン詳細 — 回収物を「資産レコード」として開く。RETURNS の計器盤と同じ HUD 世界に収める */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;                  /* 音量コントロール(1000)を覆い、MVモーダルと同じ被せ方にする */
  overflow-y: auto;               /* 縦に溢れても必ずスクロールで全部見られる */
  padding: clamp(16px, 5vw, 56px);
  background: rgba(0,0,0,.9);
  cursor: zoom-out;
}
/* 走査線＋周辺減光で「筐体内の画面を覗く」地に (RETURNS タイルの is-encased と同じ作り) */
.lightbox::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 38%, transparent 55%, rgba(0,0,0,.6) 100%);
}
/* min-height で「収まるときは中央・溢れたら上から」を両立(中央寄せで上が切れる事故を防ぐ) */
.lightbox-inner {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 記録パネル本体 — console 面に flame の天板と硬い影。触っても閉じない(閉じは外余白と×) */
.lightbox-panel {
  width: min(940px, 100%);
  margin: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--console-hi) 0%, var(--console) 100%);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--flame-500);
  box-shadow: 8px 10px 0 rgba(0,0,0,.65);
  cursor: default;
}
/* パネル見出し — 左に SYS パス、右に回収ステータス (MISSION REPORT プレートと語彙を揃える) */
.lightbox-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-hud);
}
.lightbox-sys { font-weight: 500; font-size: 11px; letter-spacing: .22em; color: var(--text-gold); }
.lightbox-status { font-weight: 700; font-size: 11px; letter-spacing: .2em; color: var(--flame-300); }
.lightbox-media { padding: clamp(14px, 3vw, 26px); }
/* 画像は横1列。複数枚でも折り返して縦積みにせず、必ず画面内へ収める */
.lightbox-imgs {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.lightbox-inner img {
  display: block;
  min-width: 0;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border: 2px solid var(--flame-300);
  outline: 1px solid #000;
  box-shadow: 4px 5px 0 rgba(0,0,0,.9);
}
/* 2枚(Kamuiカード等)は横1列のまま、幅を等分(gap 14px を差し引き)、高さも抑える */
.lightbox-imgs[data-count="2"] img { max-width: calc((100% - 14px) / 2); max-height: 60vh; }
/* 3枚(私物リターン)は2段組み。1段目=ミミッキュ(先頭)、2段目=残り2枚。全て同じ高さで表示 */
.lightbox-imgs[data-count="3"] {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
}
.lightbox-imgs[data-count="3"] img {
  height: 30vh;
  width: auto;
  max-width: min(46vw, 100%);
  max-height: none;
}
.lightbox-imgs[data-count="3"] img:first-child {
  grid-column: 1 / -1;   /* ミミッキュを単独で1段目に置く */
  max-width: min(70vw, 100%);
}
/* 説明はパネル下段の readout。左に flame の指標帯、上に HUD ラベル、本文は cond の左寄せ */
.lightbox-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--hair);
  border-left: 3px solid var(--flame-500);
  background: rgba(0,0,0,.35);
  text-align: left;
}
.lightbox-cap[hidden] { display: none; }   /* display:flex は [hidden] の UA 規則を上書きするため明示 */
.lightbox-cap-label {
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--chrome-500);
}
.lightbox-cap-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--text-gold);
}
.lightbox-cap-body {
  white-space: pre-line;   /* desc の \n を改行として尊重し、文節で折る */
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--chrome-300);
}
/* MV表示時の閉じるボタン(.video-modal-close)と揃え、ビューポート右上の角に固定。
   ライトボックス(z-index 2000)が音量コントロールを覆うので角でも被らない */
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  text-shadow: 2px 2px 0 #000;
  padding: 0 10px;
}
.lightbox-close:hover {
  color: var(--flame-300);
  transform: scale(1.1);
}
/* sp は狭い分だけ画像を小さくして画面内に収める(2枚は横1列、3枚は2段組みを維持) */
@media (max-width: 640px) {
  .lightbox-imgs[data-count="2"] img { max-height: 48vh; }
  .lightbox-imgs[data-count="3"] img { height: 22vh; max-width: min(43vw, 100%); }
}

/* ===== HW-4 MEMORY CARD ===== */
/* セーブデータ選択画面。並び(破損→稼働中→過去)と各スロットの「状態」を主役にする */

/* 見出しプレート — 左に SYS パスと題字、右端に入力待ちプロンプト */
.memhead {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--console-hi) 0%, var(--console) 100%);
  border: 1px solid var(--hair-soft);
  border-top: 2px solid var(--flame-500);
}
.memhead-lead { flex: 1 1 auto; }
.memhead-sys {
  display: block;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--text-gold);
}
.memhead-title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 7vw, 64px);
  line-height: .95;
  color: var(--text-white);
}
.memhead-prompt {
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--flame-300);
}
.memhead-caret { animation: hwBlink 1.1s steps(1) infinite; }

/* スロットは1カラムで1枚ずつ積み上げる。各カードはサムネ左・情報右の横型 */
.memcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.memslot {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  column-gap: 22px;
  align-items: start;
  background: var(--console);
  border: 1px solid var(--hair-soft);
  padding: 16px 20px 18px;
  grid-template-areas:
    "img head"
    "img title"
    "img status"
    "img note";
}
.memslot img {
  grid-area: img;
  width: 100%;
  /* ジャケは正方形(1:1)なので枠も正方形にし、cover でも上下が見切れないようにする */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--chrome-700);
}
.memslot-head { grid-area: head; }
.memslot-title { grid-area: title; margin-top: 6px; }
.memslot-status { grid-area: status; }
.memslot-note { grid-area: note; }
/* 狭幅ではサムネ上・情報下の縦型に戻す */
@media (max-width: 540px) {
  .memslot {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "head" "title" "status" "note";
  }
  .memslot img { aspect-ratio: 1 / 1; margin-bottom: 6px; }
}
.memslot-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .24em;
}
.memslot-slot { color: var(--text-dim); }
.memslot-flag { color: var(--chrome-500); }
.memslot-title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--chrome-300);
}
.memslot-artist {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--chrome-500);
}
.memslot-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--chrome-500);
}
/* セーブ日時。ステータスの脇に控えめに刻む */
.memslot-date {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.memslot-note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text-dim);
}

/* 破損データ — 目立ち過ぎないよう黄黒ストライプ帯は撤去し、左罫の細い hazard 警告だけに留める。
   画像のグレースケール化と「⚠ CORRUPTED」表示で破損は十分伝わる */
.memslot[data-state="corrupted"] {
  border-color: var(--hair-soft);
  border-left: 2px solid var(--hazard);
}
.memslot-stripe { display: none; }
.memslot[data-state="corrupted"] .memslot-slot { color: var(--hazard); }
.memslot[data-state="corrupted"] img { filter: grayscale(1) contrast(1.1) brightness(.7); }
/* chrome-700 は console 地で 2.21:1 と大文字AA(3.0) も未達。破損の沈んだ質感は残しつつ 3.4:1 まで持ち上げる */
.memslot[data-state="corrupted"] .memslot-title { color: #666; }
.memslot[data-state="corrupted"] .memslot-status { color: var(--hazard); }

/* 稼働中データ — ここだけが灯っている。左罫と LED の脈動が現行を指す */
.memslot[data-state="active"] {
  background: var(--console-hi);
  border-left: 2px solid var(--flame-500);
}
.memslot[data-state="active"] .memslot-flag { color: var(--flame-300); }
.memslot-led { display: inline-block; animation: hwPulse 2.4s ease-in-out infinite; }
.memslot[data-state="active"] img { border-color: var(--flame-700); }
.memslot[data-state="active"] .memslot-title { color: var(--text-gold); }
.memslot[data-state="active"] .memslot-status { color: var(--flame-300); }

/* 過去データ — 無彩に沈める。彩度も光量も少し落とす */
.memslot[data-state="archived"] { border-left: 2px solid var(--chrome-700); }
.memslot[data-state="archived"] img { filter: brightness(.85) saturate(.8); }

@media (prefers-reduced-motion: reduce) {
  .memhead-caret, .memslot-led { animation: none; }
}
/* ===== /HW-4 MEMORY CARD ===== */

/* ================================================================
   LINKS (HW-7) — ネットワーク接続。リンクの階層を「面積と塗り」で示す。
   左=リンクノード群 / 右=LIVE SIGNAL。色数は増やさず塗りと面積でランクを付ける
   ================================================================ */
.links-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
  gap: clamp(16px, 2.6vw, 28px);
}
/* 稼働ノード数 — 見出しプレート右端の計器。脈動で「機械が繋がっている」ことを示す */
.links-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--text-gold);
}
.links-status-dot {
  color: var(--flame-300);
  animation: hwPulse 2.4s ease-in-out infinite;
}

.links-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ノード共通 — 沈んだ面 + HUDアドレス。角丸・金属グラデは使わずノッチプレートで統一する */
.link-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  min-height: 44px;
  text-decoration: none;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.node-addr {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .24em;
  opacity: .75;
}
.node-label {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
}
.node-state {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .2em;
}

/* 主ノード — flame塗り・黒字。押す先が最上位であることを塗りと面積で示す */
.link-node-primary {
  background: var(--flame-500);
  color: #000;
}
.link-node-primary .node-addr { color: rgba(0,0,0,.72); opacity: 1; }
.link-node-primary .node-label { font-size: clamp(20px, 2.8vw, 24px); }
.link-node-primary .node-label::before { content: "▸ "; }
.link-node-primary .node-state { color: rgba(0,0,0,.78); }
.link-node-primary:hover { background: var(--flame-300); }

/* Discography — 枠のみ。幅は主ノードと揃え、塗らないことで一段沈める */
.link-node-wide {
  background: var(--console);
  border: 1px solid var(--hair);
  color: var(--text-dim);
}
.link-node-wide .node-addr { color: var(--text-gold); }
.link-node-wide .node-label { font-size: 18px; color: var(--text-white); }
.link-node-wide:hover {
  background: var(--console-hi);
  border-color: var(--chrome-500);
  color: var(--text-white);
}

/* SNS 2×2 — 最小面積のチップ。塗らず枠のみで最下位のランクに置く */
.links-sns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.link-node-sns {
  gap: 4px;
  padding: 14px 16px;
  background: var(--console);
  border: 1px solid var(--hair);
}
.link-node-sns .node-addr { font-size: 9px; color: var(--chrome-300); }
.link-node-sns .node-label { font-size: 20px; font-weight: 700; color: var(--text-white); }
.link-node-sns:hover {
  background: var(--console-hi);
  border-color: var(--chrome-500);
}

.links-signal { min-width: 0; }

@media (max-width: 680px) {
  .links-grid { grid-template-columns: 1fr; }
  .links-status { justify-content: flex-start; order: 1; }
  /* SPでは縦積みになるため、LIVE SIGNAL (Spotify) を主ノードより上に出す (HW-7r) */
  .links-signal { order: 2; }
  .links-col { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .links-status-dot, .embed-sig { animation: none; }
}

/* コンタクト (汎用リンクボタン — RETURNS の CTA / 音声オーバーレイ等で継続使用) */
.contact-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* 副次リンク: 枠だけの静かなボタン。押せることは分かるが、主役は奪わない */
.chrome-btn {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--text-dim);
  background: var(--console);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 11px 26px;
  min-width: 90px;
  text-align: center;
  transition: color var(--t), border-color var(--t), background-color var(--t);
}
/* :not() で主ボタンを外す。外さないと、後段の .chrome-btn-primary:hover が
   指定しなかった background がこちらから降ってきて主ボタンが暗転する */
.chrome-btn:not(.chrome-btn-primary):hover {
  color: var(--text-white);
  border-color: var(--chrome-500);
  background: var(--console-hi);
}

/* 聴く導線だけが赤。このページで唯一の主アクション */
.chrome-btn-primary {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  color: #000;
  background: var(--grad-goldtext);
  border: 1px solid var(--flame-700);
  padding: 15px 32px;
  min-width: 0;
  /* 地はグラデーションのまま固定し、明度だけ動かす。
     グラデーション→単色に切り替えると background-image が補間できず瞬時に消え、
     background-color が透明から立ち上がる 0.14 秒だけ下地が透けて明滅する */
  transition: filter var(--t), border-color var(--t);
}
.chrome-btn-primary:hover {
  filter: brightness(1.12);
  border-color: var(--flame-300);
}

/* TuneCore等: 赤は聴く導線だけの専有色にしたいので流用せず、chrome-btnの無彩トーンのまま
   Streamingと同じ全幅・サイズ感だけ揃える */
.chrome-btn-wide {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  padding: 15px 32px;
  min-width: 0;
}

/* 外部プレイヤー (LIVE SIGNAL) — 他所のUIをそのまま置くと機械面から浮くので、
   左罫で囲ったノッチプレートに収め、稼働ランプ付きの見出しで機器の一部に見せる。
   罫と稼働ランプは赤(flame)ではなく無彩メタル+アンバーにする: 赤は左の主ノード
   (STREAM) 専有色。ここを赤で縁取ると大面積の赤ブロックが2つ競合し主従が割れる */
.embed-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--console-hi);
  border-left: 2px solid var(--chrome-700);
  padding: 14px;
}
.embed-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .18em;
}
/* ● 稼働ランプ — アンバーの脈動。信号が生きていることを静かに主張する。
   赤は主ノード専有なので、ここはHUD計器と同じ text-gold にして従に置く */
.embed-sig {
  color: var(--text-gold);
  letter-spacing: 0;
  animation: hwPulse 2.4s ease-in-out infinite;
}
.embed-siglabel { font-weight: 700; color: var(--text-gold); }
.embed-label { margin-left: auto; font-weight: 700; color: var(--text-white); }
/* 排他再生の注意書き。封緘系の警告なのでハザード色・小サイズで下段に置く */
.embed-warn {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--hazard);
}
/* Spotify iFrame API がこの中の mount を iframe に差し替える。角丸は内側iframeに委ね、
   幅だけ揃える (iframe側は width:100% 指定で生成) */
.embed-frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 2px;
}
.embed-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* 戻る導線は移動であって主アクションではないので、赤は使わず罫の上に置く */
.back-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(11px, 3.2vw, 13px);
  letter-spacing: .18em;
  color: var(--text-dim);
  padding: 8px 0;
  transition: color var(--t);
}
.back-btn:hover { color: var(--text-gold); }
/* letter-spacing の末尾余白ぶんだけ字面を右に寄せて、矢印との中心を揃える */
.back-label { text-indent: .18em; }
.back-arrow {
  color: var(--flame-500);
  font-size: .9em;
  line-height: 1;
  transition: color var(--t);
}
.back-btn:hover .back-arrow { color: var(--flame-300); }

.page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 14px);
  flex-wrap: wrap;
  border-top: 1px solid var(--hair-soft);
}

/* コンテンツ間ナビ — 前(左)/次(右)の入口へ直接飛ぶ。罫の上に据え、back to jacket をこの下・中央に置く。
   inter-nav がある画面では、罫はこちらが担い、直下の page-nav の罫は畳んで二重線を避ける */
.page-inter-nav {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 4vw, 24px);
  border-top: 1px solid var(--hair-soft);
  padding-top: 14px;
}
.page-inter-nav + .page-nav {
  border-top: none;
}
/* 前後リンクを左右均等の半幅にし、各自の半分の中で中央寄せする。
   これで文字数に依らず左右対称に見える */
.inter-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: .14em;
  color: var(--text-dim);
  transition: color var(--t);
}
.inter-link:hover { color: var(--text-gold); }
.inter-link:hover .inter-arrow { color: var(--flame-300); }
.inter-arrow {
  flex-shrink: 0;
  color: var(--flame-500);
  transition: color var(--t);
}
.inter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ================================================================
   レスポンシブ
   ================================================================ */
/* 中間幅 (〜992px) では、幅が広がったパッケージが右上固定の音声コントロールに食い込む。
   縦長画面ほど箱の背が高くなり上端も浅くなるので、被りは幅・高さ両方で起きる。
   上部に帯を空けてパッケージをその下へ収める。3D側はキャンバスを全面のまま(=帯も描画面)に
   保ち箱だけ下げるので (js/jacket3d.js の resize)、回しても箱が切れない。
   DOM版は回転が無い(reduced-motion/非WebGL専用)ので padding で帯を空けるだけでよい */
@media (max-width: 992px) {
  /* align-items:center のままだと画面が高い端末ほど余った縦幅が上下に均等配分され、
     帯(72px)の下にさらに黒い余白が積み上がる。DOM版(非3D)は上寄せにして
     帯のすぐ下に収める。3D版は .stage3d が height:100vh 固定で align-items の影響を
     受けないため、ここでの変更は不要 */
  #scene-jacket.active { align-items: flex-start; }
  #scene-jacket:has(.jacket-wrap:not([hidden])) { padding-top: 72px; }
  .jacket-wrap { --jw: min(94vw, calc((92dvh - 72px) * 0.72)); }
}

@media (max-width: 640px) {
  .jacket-wrap { --jw: 94vw; }
  .jacket { aspect-ratio: auto; }
  .jacket, .face { position: relative; min-height: 0; }
  .face { display: none; }
  .jacket:not(.flipped) .face.front { display: flex; transform: none; }
  .jacket.flipped .face.back { display: flex; transform: none; }
  .jacket { transition: none; transform: none; }
  .jacket.flipped { transform: none; }
  .jacket.spinning, .jacket.spinning-back { animation: none; }
  .side { display: none; }

  .face.front { min-height: 88vh; }

  /* 平面フォールバックのページ入口 — 主役の下に据え、回せない端末をここから各画面へ通す。
     表記は system rail / bk-footer と同じ機械側の語彙 (条件書体・字間・フレーム罫) に寄せる */
  .front-entries {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(10,10,10,.92));
    border-top: 1px solid var(--flame-700);
  }
  .front-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .16em;
    color: var(--text-white);
    text-align: left;
    background: var(--console);
    border: 1px solid var(--hair);
    border-left: 2px solid var(--flame-500);
    border-radius: 2px;
    padding: 12px 14px;
    transition: color var(--t), border-color var(--t), background-color var(--t);
  }
  .front-entry:hover,
  .front-entry:active {
    color: var(--text-gold);
    border-color: var(--chrome-500);
    border-left-color: var(--flame-300);
    background: var(--console-hi);
  }
  .front-entry-arrow { flex-shrink: 0; color: var(--flame-500); }

  .bk-main { grid-template-columns: 1fr; }
  .bk-shots { grid-template-columns: 1fr; }
  .bk-footer { flex-wrap: wrap; }

  /* 固定表示の BGM コントロールがシステムレールに被らないよう上を空ける */
  .page.active { padding-top: 56px; }

  /* 3カラムに「Instagram」が収まらないので、余白と字間を詰める */
  .chrome-btn { padding: 11px 8px; min-width: 0; letter-spacing: .06em; }
  .chrome-btn-primary { padding: 15px 12px; }
  .chrome-btn-wide { padding: 15px 12px; }
}

/* ================================================================
   Audio Control
   ================================================================ */
/* 音声コントロールは全シーン共通(3Dジャケットでも音量調整に要る)。
   既定はジャケットを邪魔しない控えめな浮遊ウィジェット。
   コンテンツ画面(タイトルバーがある)でだけ、バー右端に統合する(下の :has 分岐)。 */
.audio-control {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 70;
  display: flex;
  align-items: center;
  /* ボタンは44pxのタップ判定込みの箱で余白を内包するので、gapは0にし詰めは箱の重なり(下のmargin)で作る */
  gap: 0;
  background: transparent;
  padding: 0;
  border: none;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.audio-control:hover { opacity: 1; }
/* タッチ端末は hover で復帰できないので、常時見える濃さにする */
@media (hover: none) {
  .audio-control { opacity: 0.75; }
}
/* コンテンツ画面のときだけタイトルバー(44px高)の右端に同居させ、バーと高さをきっちり揃える(SPEC §10) */
body:has(.page.active) .audio-control {
  top: 0;
  right: 16px;
  height: 44px;
  opacity: 1;
  /* 大文字テキストの視覚中心は行ボックス中心より僅かに上。アイコンを1px上げて光学的に揃える */
  transform: translateY(-1px);
}
.audio-control button {
  font-size: 16px;
  color: var(--text-white);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* アイコンは24px、タップ判定は箱を44px相当に広げて確保する */
  min-width: 44px;
  min-height: 44px;
  /* 44pxの箱に生じる左右の余白を、隣の箱と重ねて相殺し実アイコン間を詰める(タップ判定は維持) */
  margin-inline: -6px;
}
/* SVGは24pxハードコードだが、ステータスバーの計器(3〜11px)に対して大きく浮くので視覚サイズを詰める */
.audio-control button svg { width: 17px; height: 17px; }
.audio-control button:hover {
  color: var(--flame-300);
}
.audio-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  /* 見た目のトラックは擬似要素側の2pxのまま、要素自体の高さだけ広げてタップ判定を確保する */
  height: 44px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.audio-control input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--flame-300) 0%,
    var(--flame-300) var(--val, 20%),
    rgba(255, 255, 255, 0.3) var(--val, 20%),
    rgba(255, 255, 255, 0.3) 100%
  );
}
.audio-control input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--flame-300) 0%,
    var(--flame-300) var(--val, 20%),
    rgba(255, 255, 255, 0.3) var(--val, 20%),
    rgba(255, 255, 255, 0.3) 100%
  );
}
.audio-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  /* webkitはつまみ上端をトラック上端に合わせるため、2pxトラックの中心に載せる補正 (2-12)/2 */
  margin-top: -5px;
  background: var(--flame-300);
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
.audio-control input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--flame-300);
  border-radius: 50%;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* ================================================================
   HUD チップ — 画面下に追従する常設ボタンの共通規格
   隣り合わなくても寸法の差は目につくので、余白・書体・アイコン寸法をここに集約する。
   ユーティリティの TOP は右下 (Back to top の慣習) に置く。
   ブート中はオーバーレイ(z-index上位)が覆う
   ================================================================ */
.hud-chip {
  position: fixed;
  bottom: clamp(12px, 3vw, 28px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 12px;
  /* アイコンはラベルより大きく見せたい。行の高さを長さで固定しておけば
     子の font-size に関わらず行箱が伸びず、チップの高さが左右で揃う */
  line-height: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-gold);
  text-decoration: none;
  background: var(--console);
  border: 1px solid var(--chrome-700);
  border-radius: 2px;
  cursor: pointer;
  transition: opacity var(--t), transform var(--t), color var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}

/* 最上部へ戻る — 長い LINER NOTES で章ナビがビューポート外へ流れたときだけ現れる
   (JS が .show を付け外し)。.page も .panel も overflow を持ち、body の
   overflow-x:hidden も相まって内側の sticky/fixed は効かないため body 直下に置く */
.ref-top {
  right: clamp(12px, 3vw, 28px);
  /* 補助UI。ラベルを持たない小さな正方形チップに格下げする */
  width: 36px;
  height: 36px;
  padding: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.ref-top.show { opacity: 1; transform: none; pointer-events: auto; }
.ref-top:hover,
.ref-top:focus-visible { border-color: var(--flame-500); background: var(--console-hi); }
.ref-top-arrow { font-size: 13px; }

/* ================================================================
   Audio Overlay
   ================================================================ */
.audio-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.audio-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
/* HW-8 AUDIO SETTING — 起動ゲートを v2 (SYSTEM SHELL) の語彙へ。
   中ノッチプレート + HUD見出し + 45°ノッチのゴーストボタン(chrome-btn 廃止) */
.audio-overlay-content {
  width: min(92%, 420px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px clamp(20px, 5vw, 34px) 30px;
  background: #0c0c0e;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--flame-500);
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.gate-kicker {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--text-gold);
}
.gate-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text-white);
}
.gate-prompt {
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--flame-300);
}
.gate-caret { animation: hwBlink 1.1s steps(1) infinite; }

/* スピナーとボタンを同じグリッドセルに重ね、切り替え時にパネル高さが変わらないようにする */
.audio-overlay-status {
  display: grid;
  margin-top: 4px;
}
.audio-overlay-status > * {
  grid-area: 1 / 1;
}
.audio-overlay-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  visibility: hidden;
}
.audio-overlay-btns.is-ready {
  visibility: visible;
}
.gate-btn {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--flame-300);
  background: transparent;
  border: 1px solid var(--flame-900);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.gate-btn:hover,
.gate-btn:focus-visible {
  color: #0a0a0a;
  background: var(--flame-500);
  border-color: var(--flame-500);
}
/* 準備中(jacketReady 前): INITIALIZING… + VRAM風6セグの流れる点滅。完了で is-done → 非表示 */
.audio-overlay-spinner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.audio-overlay-spinner.is-done {
  visibility: hidden;
}
.gate-init {
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--chrome-500);
}
.gate-segs { display: flex; align-items: flex-end; gap: 3px; height: 12px; }
.gate-segs i {
  width: 4px;
  height: 100%;
  background: var(--flame-700);
  transform-origin: bottom;
  animation: hwVram 2.6s ease-in-out infinite;
}
.gate-segs i:nth-child(2) { animation-delay: .3s; }
.gate-segs i:nth-child(3) { animation-delay: .6s; }
.gate-segs i:nth-child(4) { animation-delay: .9s; background: var(--flame-500); }
.gate-segs i:nth-child(5) { animation-delay: 1.2s; }
.gate-segs i:nth-child(6) { animation-delay: 1.5s; }

/* ================================================================
   Loading Screen
   ================================================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--void-black);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.loading-screen.active {
  opacity: 1;
  pointer-events: auto;
}
/* LOGIN待ちはタップ/キーで即抜けできる。カーソルと導線でそれを示す(点滅開始=SOUND選択後のみ) */
.loading-screen.blinking { cursor: pointer; }
/* LOADING (LOGIN) — 電源投入後のディスク起動。HUD書体で `> LOGIN_` + ACCESSING 行 */
.loading-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.loading-text {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: .12em;
  color: var(--flame-300);
}
.loading-access {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--chrome-500);
}
/* カーソルは SOUND 選択(=.blinking)後に点滅開始。それまでは静止 */
.loading-screen:not(.blinking) .gate-caret { animation: none; opacity: 1; }

.loading-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vh, 40px);
  transform: translateX(-50%);
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
/* 導線は少し遅れて滲み出す。再訪の即入場(短い待ち)では出ないよう遅延を持たせる */
.loading-screen.blinking .loading-hint {
  opacity: .7;
  transition-delay: .8s;
}
/* タッチ端末に無い「CLICK」を出さないための出し分け(hint3dと同方針) */
.loading-hint--touch { display: none; }
@media (hover: none) {
  .loading-hint--pointer { display: none; }
  .loading-hint--touch { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-caret, .gate-segs i { animation: none; }
}

/* ================================================================
   Glitch Transition Effect
   ================================================================ */
body.glitch-active #stage {
  animation: crt-glitch 0.5s steps(2, end) forwards;
}
body.glitch-subtle-1 #stage { animation: crt-glitch-subtle-1 0.15s steps(2, end) forwards; }
body.glitch-subtle-2 #stage { animation: crt-glitch-subtle-2 0.2s steps(2, end) forwards; }
body.glitch-subtle-3 #stage { animation: crt-glitch-subtle-3 0.3s steps(3, end) forwards; }

body.glitch-active::after,
body.glitch-subtle-1::after,
body.glitch-subtle-2::after,
body.glitch-subtle-3::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.2) 0px,
      rgba(0, 255, 0, 0.2) 2px,
      rgba(0, 0, 255, 0.2) 4px
    );
  mix-blend-mode: color-dodge;
  animation: noise-flicker 0.1s infinite;
}
/* 弱いグリッチ時はノイズを薄く */
body.glitch-subtle-1::after { opacity: 0.15; }
body.glitch-subtle-2::after { opacity: 0.3; }
body.glitch-subtle-3::after { opacity: 0.5; }

/* 長文ページ(REFERENCE)は可読性優先。レベル3・4はJS側で発生させず、
   残るレベル1・2もオーバーレイの強度をさらに落とす */
body.glitch-calm.glitch-subtle-1::after { opacity: 0.06; }
body.glitch-calm.glitch-subtle-2::after { opacity: 0.12; }

/* 派手めな初回グリッチ */
@keyframes crt-glitch {
  0% { transform: scale(1.1) translate(-20px, 15px) skewX(12deg); filter: brightness(2) contrast(2.5) hue-rotate(90deg) blur(2px); }
  15% { transform: scale(0.9) translate(25px, -10px) skewX(-15deg); filter: invert(1) contrast(3) blur(0); }
  30% { transform: scale(1.15) translate(-30px, 5px) skewY(10deg); filter: brightness(0.2) contrast(4) sepia(1) hue-rotate(180deg); }
  45% { transform: scale(1) translate(15px, 20px) skewX(-10deg); filter: invert(0.5) hue-rotate(-90deg) saturate(3); }
  60% { transform: scale(1.05) translate(-10px, -20px); filter: brightness(1.5) saturate(4) blur(1px); }
  75% { transform: scale(0.95) translate(10px, 10px) skewX(8deg); filter: invert(0.2) hue-rotate(45deg); }
  90% { transform: scale(1.02) translate(-5px, 0); filter: brightness(1.3); }
  100% { transform: scale(1) translate(0); filter: none; }
}

/* 弱い定期グリッチ (Level 1: 微細なブレ) */
@keyframes crt-glitch-subtle-1 {
  0% { transform: translate(-2px, 1px) skewX(1deg); filter: brightness(1.1) hue-rotate(5deg); }
  50% { transform: translate(2px, -1px); filter: none; }
  100% { transform: translate(0); filter: none; }
}

/* 弱い定期グリッチ (Level 2: 色反転や大きめのブレ) */
@keyframes crt-glitch-subtle-2 {
  0% { transform: translate(-4px, 3px) skewX(3deg); filter: brightness(1.3) contrast(1.5) hue-rotate(20deg); }
  33% { transform: translate(3px, -2px) skewX(-2deg); filter: invert(0.2) hue-rotate(-20deg); }
  66% { transform: translate(-2px, 4px); filter: sepia(0.5); }
  100% { transform: translate(0); filter: none; }
}

/* 弱い定期グリッチ (Level 3: 初回に近い派手さで一瞬) */
@keyframes crt-glitch-subtle-3 {
  0% { transform: scale(1.05) translate(-8px, 6px) skewX(6deg); filter: brightness(1.5) contrast(2) invert(0.4); }
  33% { transform: scale(0.96) translate(8px, -4px) skewX(-8deg); filter: hue-rotate(180deg) saturate(3); }
  66% { transform: scale(1.02) translate(-4px, 4px); filter: brightness(0.6) contrast(3); }
  100% { transform: translate(0); filter: none; }
}

@keyframes noise-flicker {
  0% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-5px); opacity: 0.4; }
  100% { transform: translateY(5px); opacity: 0.9; }
}

/* ================================================================
   動画モーダル
   ================================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.video-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.video-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

/* ================================================================
   no-JS フォールバック (index.html の noscript)
   ================================================================ */
/* fixed でジャケットのレイアウトに干渉せず、操作不能な要素の上に重ねて案内する */
.noscript-info {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(92%, 480px);
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.noscript-title {
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .06em;
}
.noscript-note {
  font-size: 12px;
  color: var(--text-dim);
}
.noscript-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  font-family: var(--font-cond);
}
.noscript-links a { color: var(--flame-300); }
.video-modal-content {
  position: relative;
  width: 90%;
  /* プレイヤーを小さめに抑える。合成ピクセルが減り、YouTubeも小サイズには
     低解像度ストリームを配すことがあるためデコード負荷も下がる (SPは元々90%で小さいので影響なし) */
  max-width: 640px;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.video-modal.active .video-modal-content {
  transform: translateY(0) scale(1);
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ビューポート右上の角に固定。.video-modal(inset:0)直下に置き、
   transform の効いた .video-modal-content を基準にしないようにする */
.video-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 32px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  text-shadow: 2px 2px 0 #000;
  padding: 0 10px;
}
.video-modal-close:hover {
  color: var(--flame-300);
  transform: scale(1.1);
}

/* ================================================================
   Glitch Scatter Effect (HTML要素がバラバラに弾け飛ぶ特別エフェクト)
   ================================================================ */
body.glitch-scatter #stage {
  animation: crt-glitch-subtle-2 0.25s steps(2, end) forwards;
}
body.glitch-scatter::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: 
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.15) 0px,
      rgba(0, 255, 0, 0.15) 5px,
      rgba(0, 0, 255, 0.15) 10px
    );
  mix-blend-mode: color-dodge;
  opacity: 0.8;
}

/* 要素のトランジションを無効にして即座にバラバラにする */
body.glitch-scatter .face > * {
  transition: none !important;
}

/* ジャケットの各要素を別々の方向にバラけさせる */
body.glitch-scatter .face > *:nth-child(1) {
  transform: translate(-15px, 10px) skewX(12deg) scale(1.05) !important;
  filter: drop-shadow(4px 0 0 red) !important;
  opacity: 0.9;
}
body.glitch-scatter .face > *:nth-child(2) {
  transform: translate(25px, -15px) scale(1.1) !important;
  filter: drop-shadow(-4px 0 0 blue) !important;
  opacity: 0.85;
}
body.glitch-scatter .face > *:nth-child(3) {
  transform: translate(-10px, -25px) rotate(-3deg) !important;
  filter: drop-shadow(3px 3px 0 lime) !important;
  opacity: 0.9;
}
body.glitch-scatter .face > *:nth-child(4) {
  transform: translate(20px, 20px) skewY(-8deg) !important;
  filter: drop-shadow(-3px -3px 0 magenta) !important;
}

/* コンテンツページ内の中身もバラけさせる (シェルの枠ごと歪む) */
body.glitch-scatter .hw-shell > :nth-child(odd) {
  transform: translate(-15px, 10px) skewX(5deg) !important;
  filter: drop-shadow(3px 0 0 red) !important;
  transition: none !important;
}
body.glitch-scatter .hw-shell > :nth-child(even) {
  transform: translate(15px, -10px) skewX(-5deg) !important;
  filter: drop-shadow(-3px 0 0 blue) !important;
  transition: none !important;
}

/* ===== HW-3 TRACK LIST ===== */
/* TRACK LIST — 機械読み出し表 (HARDWIRE v2 §4-1)。
   SYS://見出しプレート / 読み出し表 / CREW MANIFEST の3枚の板金を縦に積む。
   .tracklist / .trk-* / .is-hidden-track のクラス名は main.js の配線
   (封緘トグル・MVモーダル) が参照するため残し、見た目はここで上書きする */
.hw-track-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 見出しプレート — border-top の flame 2px が「通電中の面」を示す */
.hw-plate {
  background: linear-gradient(180deg, #141418 0%, var(--console) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 2px solid var(--flame-500);
  padding: 18px 22px;
  display: flex;
  align-items: flex-end;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.hw-plate-main { flex: 1 1 auto; min-width: 0; }
.hw-plate-sys {
  display: block;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--text-gold);
}
/* display は Tektur で確定。太字白・非斜体 */
.hw-plate-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(38px, 7vw, 64px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--text-white);
  margin-top: 6px;
}
.hw-plate-meta {
  text-align: right;
  font-family: var(--font-hud);
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .12em;
}
.hw-plate-rec { color: var(--flame-300); }
.hw-plate-dot {
  display: inline-block;
  animation: hwPulse 2.4s ease-in-out infinite;
}
.hw-plate-coords { color: var(--chrome-500); }

/* 読み出し表 — REC_ID / TITLE / ARMAMENT の機械グリッド。
   TIME 列はデータが無いため出さない (曲情報の格子は 88px / 1fr / 148px) */
.hw-recs {
  background: var(--console);
  border: 1px solid var(--hair);
  padding: clamp(12px, 2.6vw, 22px);
}
.hw-rec-head,
.hw-recs .tracklist li {
  display: grid;
  /* REC_ID は2桁数字のみ。封緘行はハザード帯(.hw-seal)で表現するためこの列は使わず、
     数字が収まる最小幅まで詰めて余りをTITLE列(1fr)へ回す */
  grid-template-columns: 34px minmax(0, 1fr) 148px;
  /* row-gap は使わない。閉じたクレジット行(高さ0)との間に余白が残るため列方向だけに限定し、
     開いたときの間隔は .trk-credit-inner の margin-top が担う。
     ベース .tracklist li の gap:14px が row-gap も張るため明示的に 0 で打ち消す */
  column-gap: 14px;
  row-gap: 0;
}
.hw-rec-head {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-hud);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--chrome-500);
}
.hw-rec-head span:last-child { text-align: right; }
.hw-recs .tracklist li {
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair-soft);
}
/* 旧演出の無効化 — 赤い選択カーソルは HARDWIRE v2 では使わない */
.hw-recs .tracklist li::before { content: none; }
.hw-recs .trk-no {
  min-width: 0;
  font-family: var(--font-hud);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-gold);
}
/* REC_ID は構造 (琥珀) のままにする。hover で白へ振る旧規則を打ち消す */
.hw-recs .tracklist li:hover .trk-no,
.hw-recs .tracklist li:has(:focus-visible) .trk-no { color: var(--text-gold); }
.hw-recs .trk-titles { position: relative; }
.hw-recs .trk-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}
/* グリッドで TITLE 列の幅が確定するため nowrap は不要 (狭幅でのはみ出しを防ぐ) */
.hw-recs .has-mv .trk-name { white-space: normal; }
.hw-recs .trk-feat {
  font-family: var(--font-hud);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--chrome-500);
}

/* 封緘トラック — ハザード帯を steps(3) で「機械的に」剥がす。曲名は帯の下に常在。
   剥がしている間ずっと下の曲名がRGBズレを起こし続ける (常時ループ・強め) */
.hw-recs .is-hidden-track .trk-name,
.hw-recs .is-hidden-track .trk-feat {
  position: relative; /* ゴースト擬似要素(inset:0)のアンカー */
  opacity: 1;
  transition: none;
  text-shadow: none;
}
/* ゴースト擬似要素は既定で不可視・停止。reveal 中は常時グリッチさせる */
.hw-recs .is-hidden-track .trk-name::before,
.hw-recs .is-hidden-track .trk-name::after,
.hw-recs .is-hidden-track .trk-feat::before,
.hw-recs .is-hidden-track .trk-feat::after {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: none;
  clip-path: inset(50% 0 50% 0);
}
.hw-recs .is-hidden-track .trk-name::before,
.hw-recs .is-hidden-track .trk-feat::before {
  color: #00e6f6;
  mix-blend-mode: screen; /* 実体の白に重ねてもRGB分離が飛ぶよう加算寄りに */
}
.hw-recs .is-hidden-track .trk-name::after,
.hw-recs .is-hidden-track .trk-feat::after {
  color: #ff013c;
  mix-blend-mode: screen;
}
/* グリッチ発動中だけレイヤー昇格する。静止中の will-change 焼き付きは
   封緘トラックの数だけ無駄なGPUレイヤーを常駐させ、スクロールを重くしていた */
@media (hover: hover) {
  .hw-recs .is-hidden-track:hover .trk-name::before,
  .hw-recs .is-hidden-track:hover .trk-name::after,
  .hw-recs .is-hidden-track:hover .trk-feat::before,
  .hw-recs .is-hidden-track:hover .trk-feat::after { will-change: transform, clip-path; }
  .hw-recs .is-hidden-track:hover .trk-name::before,
  .hw-recs .is-hidden-track:hover .trk-feat::before { animation: hidden-glitch-cyan .5s steps(2, end) infinite; }
  .hw-recs .is-hidden-track:hover .trk-name::after,
  .hw-recs .is-hidden-track:hover .trk-feat::after { animation: hidden-glitch-magenta .5s steps(2, end) infinite; }
}
.hw-recs .is-hidden-track.is-revealed .trk-name::before,
.hw-recs .is-hidden-track.is-revealed .trk-name::after,
.hw-recs .is-hidden-track.is-revealed .trk-feat::before,
.hw-recs .is-hidden-track.is-revealed .trk-feat::after { will-change: transform, clip-path; }
.hw-recs .is-hidden-track.is-revealed .trk-name::before,
.hw-recs .is-hidden-track.is-revealed .trk-feat::before { animation: hidden-glitch-cyan .5s steps(2, end) infinite; }
.hw-recs .is-hidden-track.is-revealed .trk-name::after,
.hw-recs .is-hidden-track.is-revealed .trk-feat::after { animation: hidden-glitch-magenta .5s steps(2, end) infinite; }
@keyframes hidden-glitch-cyan {
  0%   { opacity: .95; clip-path: inset(0 0 74% 0);   transform: translate(-11px, -2px); }
  14%  { opacity: .7;  clip-path: inset(58% 0 12% 0); transform: translate(8px,  2px); }
  28%  { opacity: 1;   clip-path: inset(26% 0 46% 0); transform: translate(-13px, 3px); }
  42%  { opacity: .6;  clip-path: inset(4% 0 70% 0);  transform: translate(10px, -3px); }
  57%  { opacity: .95; clip-path: inset(46% 0 22% 0); transform: translate(-9px,  1px); }
  71%  { opacity: .75; clip-path: inset(14% 0 60% 0); transform: translate(12px,  2px); }
  85%  { opacity: 1;   clip-path: inset(68% 0 6% 0);  transform: translate(-12px, -2px); }
  100% { opacity: .95; clip-path: inset(0 0 74% 0);   transform: translate(-11px, -2px); }
}
@keyframes hidden-glitch-magenta {
  0%   { opacity: .95; clip-path: inset(6% 0 68% 0);  transform: translate(11px,  2px); }
  14%  { opacity: .7;  clip-path: inset(62% 0 8% 0);  transform: translate(-9px, -2px); }
  28%  { opacity: 1;   clip-path: inset(30% 0 42% 0); transform: translate(13px, -3px); }
  42%  { opacity: .6;  clip-path: inset(0 0 76% 0);   transform: translate(-10px, 3px); }
  57%  { opacity: .95; clip-path: inset(50% 0 18% 0); transform: translate(9px,  -1px); }
  71%  { opacity: .75; clip-path: inset(18% 0 56% 0); transform: translate(-12px,-2px); }
  85%  { opacity: 1;   clip-path: inset(72% 0 2% 0);  transform: translate(12px,  2px); }
  100% { opacity: .95; clip-path: inset(6% 0 68% 0);  transform: translate(11px,  2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-recs .is-hidden-track .trk-name::before,
  .hw-recs .is-hidden-track .trk-name::after,
  .hw-recs .is-hidden-track .trk-feat::before,
  .hw-recs .is-hidden-track .trk-feat::after { animation: none !important; opacity: 0 !important; }
}
.hw-seal {
  position: absolute;
  top: -4px;
  bottom: -4px;
  /* REC_ID列(34px)+gap(14px)ぶん左へ伸ばし、ハザード帯だけ行の左端まで届かせる。
     同じ量をpadding-leftに戻すことでタグ文字は他トラックと同じTITLE列先頭から始まる */
  left: -48px;
  /* TITLE列だけだと帯がARMAMENT列手前で途切れて中途半端に見えるため、
     ARMAMENT列(148px)+gap(14px)ぶん右へ伸ばし、ヘッダーやMV/LIVEチップと同じ右端まで届かせる */
  right: -162px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 48px;
  background: repeating-linear-gradient(45deg, var(--hazard) 0 9px, #0a0a0a 9px 18px);
  cursor: crosshair;
  transition: opacity .18s steps(3);
}
.hw-seal-tag {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .24em;
  color: #0a0a0a;
  background: var(--hazard);
  padding: 2px 8px;
  white-space: nowrap;
}
/* PC は hover で剥がす。タップ端末は main.js が is-revealed をトグルする */
@media (hover: hover) {
  .hw-recs .is-hidden-track:hover .hw-seal { opacity: 0; }
}
.hw-recs .is-hidden-track.is-revealed .hw-seal { opacity: 0; }

/* ARMAMENT — 45°小ノッチのゴーストボタン (◢ MV ◤ / ◢ LIVE ◤)。
   色相 (flame文字+flame枠 → hoverで塗り+黒字) は既存 .trk-mv を継承する */
.hw-recs .trk-actions {
  margin-left: 0;
  flex-direction: row;
  justify-content: flex-end;
  gap: 6px;
}
.hw-recs .trk-mv {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 7px;
  min-width: 68px;
  border-radius: 0;
}
/* スキットは武装なし — SKIT 表記で沈める。
   margin-left/text-align/transform は .trk-tag (基本スキン) の値を継承し、
   min-width だけ .trk-mv (MV/LIVEチップ) と揃えて footprint を一致させる */
.hw-recs .trk-tag {
  min-width: 68px;
  font-family: var(--font-hud);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--chrome-700);
}

/* 行クリックのクレジット開閉 — 技術クレジット(Mix/Master)を行(REC)単位で feat/Mix/Master
   として展開する。行自体が role=button のトグル。開閉可否はホバー/フォーカスと aria-expanded で
   示し、キャレット等のアイコンは出さない */
.hw-recs .tracklist li.is-expandable { cursor: pointer; }
.hw-recs .tracklist li.is-open { background: var(--console-hi); }
.hw-recs .tracklist li.is-expandable:focus-visible {
  outline: 1px solid var(--flame-500);
  outline-offset: -1px;
}

/* BGMトラック — サイト全体でループ再生するプレイリスト内の曲 (config.bgmPlaylist)。理由不明の点灯に
   見えないよう、状態を示す左バー + NOW PLAYING マーカーで「再生中」と明示する (ホバーの全面塗りとは別物の細い縦線)。
   再生中 (main.js が付ける .is-playing) の1行だけ点灯させる。ミュート/音量0はトランスポートが回っている
   ので表示のまま、停止/MV・Spotify退避中は消す。デフォルト非表示=初期状態 (SOUND ON 前) と一致する */
.hw-recs .tracklist li.is-bgm.is-playing { box-shadow: inset 2px 0 0 var(--flame-500); }
.trk-now {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .28em;
  color: var(--flame-300);
}
.is-bgm.is-playing .trk-now { display: flex; }
.trk-now-led { animation: hwPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .trk-now-led { animation: none; } }

.trk-credit { grid-column: 1 / -1; }
/* 高さ(max-height)と透明度を両方向へアニメさせる。overflow:hidden の inner を畳む。
   閉じ切ってから visibility:hidden で AT からも外す (アニメ中は可視のまま) */
.trk-credit-inner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 0;
  padding: 0 14px;
  background: rgba(0, 0, 0, .28);
  box-shadow: inset 2px 0 0 var(--flame-500), inset 0 0 0 1px var(--hair);
  transition: max-height .24s ease, opacity .2s ease, margin-top .24s ease,
    padding .24s ease, visibility 0s linear .24s;
}
.hw-recs .tracklist li.is-open .trk-credit-inner {
  max-height: 320px;
  opacity: 1;
  visibility: visible;
  margin-top: 10px;
  padding: 12px 14px;
  transition: max-height .24s ease, opacity .2s ease .04s, margin-top .24s ease,
    padding .24s ease, visibility 0s;
}
.trk-credit-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--hair-soft);
}
.trk-credit-row:first-of-type { border-top: none; }
.trk-credit-key {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--chrome-500);
}
.trk-credit-val {
  font-size: 12px;
  color: var(--text-white);
}
@media (prefers-reduced-motion: reduce) {
  .trk-credit-inner,
  .hw-recs .tracklist li.is-open .trk-credit-inner { transition: none; }
}
@media (max-width: 540px) {
  .trk-credit-row { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
}

/* 狭幅 — REC_ID 列を詰め、ARMAMENT は内容幅 (右端揃えは 1fr が吸収) */
@media (max-width: 640px) {
  .hw-rec-head,
  .hw-recs .tracklist li {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    column-gap: 10px;
  }
  .hw-rec-head { padding: 0 8px 10px; }
  .hw-recs .tracklist li { padding: 10px 8px; }
  .hw-recs .trk-actions { align-items: flex-end; gap: 4px; }
  .hw-seal-tag { font-size: 9px; letter-spacing: .14em; }
  /* ARMAMENT列がauto幅(空行では0近く)になるため、デスクトップ用の右伸長分は不要。
     REC_ID列(30px)+gap(10px)に合わせて左伸長とpadding-leftを詰める */
  .hw-seal { right: -8px; left: -40px; padding-left: 40px; }
}
/* MV+LIVE両方持つ行(track06)はここまで横並びのままだが、TITLE列がこれ以上詰まると
   ARMAMENT(auto)がチップ2個ぶんの幅を要求してTITLE列を圧迫し、曲名が縦積みより
   かえって折り返す(行が余計に伸びる)。ここから先はゴーストボタンを縦積みにして
   ARMAMENT幅をチップ1個ぶんに戻し、TITLE列の折り返しを1個持ちの行と揃える */
@media (max-width: 380px) {
  .hw-recs .trk-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-plate-dot { animation: none; }
  .hw-seal { transition: none; }
}

/* ================================================================
   HARDWIRE v2.5 — OFF-GRID CHASSIS
   整列した1枚板の画面を、非対称な工業筐体に据え直す treatment 層。
   色規律 (flame=状態 / gold=構造 / chrome=不活性 / hazard=警告3箇所) と語彙
   ([ SYS://… ]・封緘・計器) は一切変えず、格子割り / 層 / ノイズだけを筐体側に足す。
     - 背面プレーン(.hw-chassis): 青焼き格子 + 走査線 + 左ゲージレール(番地 SYS.0N)
     - 前面(.hw-ghost): 巨大ゴースト番地を HUD 投影として薄く重ねる (層の可視化)
     - 見出し銘板(.hw-plate / .ln-plate / .memhead): 枠を割る特大タイトル + 見当ズレ + リベット
     - パネル: 浮いた影を使わず inset ベベルで沈め、微走査線を敷く
   ================================================================ */

/* content を1層持ち上げ、下に筐体を敷く。isolation で z-index:-1 をシェル内に閉じ込め、
   ページ地の上・content の下に置く。--hw-scan はパネルへ継承させる微走査線 */
.page.active .hw-shell {
  isolation: isolate;
  --hw-scan: repeating-linear-gradient(180deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
}
/* デスクトップは左に番地レールのゲージ幅を空け、格子を右へずらす (中央対称を崩す=格子割り) */
@media (min-width: 760px) {
  .page.active .hw-shell { padding-left: 64px; }
}
/* 筐体レイヤーは常設。差し替わる中身の入場アニメからは外す */
.page.active .hw-shell > .hw-chassis,
.page.active .hw-shell > .hw-ghost { animation: none; }

/* --- 背面プレーン --- */
.hw-chassis {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* 青焼き格子 — 番地(右上)ほど濃く、content 側へ抜けるほど消えて層の奥行きを出す */
.hw-chassis::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 43px, rgba(201,201,201,.038) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(201,201,201,.038) 43px 44px);
  /* ゴースト番地(右上)には格子を薄めて数字側へ場を譲り、左〜下へ向けて濃くする */
  -webkit-mask-image: radial-gradient(150% 120% at 100% -10%, transparent 0%, #000 42%, #000 60%, transparent 78%);
          mask-image: radial-gradient(150% 120% at 100% -10%, transparent 0%, #000 42%, #000 60%, transparent 78%);
}
/* 走査線 — 筐体全面にうっすら。パネルの隙間・左ゲージ帯で層が覗く */
.hw-chassis::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.018) 2px 3px);
}

/* 左ゲージレール — この画面の番地(SYS.0N)を縦に刻む計器。5px 目盛り + 右ヘアライン */
.hw-chassis-rail {
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--chrome-500) 30%, transparent) 0 1px, transparent 1px 9px)
    right / 6px 100% no-repeat;
  border-right: 1px solid var(--hair-soft);
}
.hw-chassis-callsign {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chrome-300) 68%, transparent);
  white-space: nowrap;
}
.hw-chassis-addr {
  writing-mode: vertical-rl;
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--flame-300);
}

/* --- 前面ゴースト番地 --- 上帯だけに掛かる薄い HUD 投影。screen 合成で不透明パネル越しにも
   層として見える。本文の可読性を守るため、下 6 割はマスクで抜く */
.hw-ghost {
  position: absolute;
  top: clamp(-58px, -5vw, -22px);
  right: -.03em;
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(160px, 27vw, 380px);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  /* 細く精密な輪郭 (攻殻のワイヤーフレーム読み出し)。太い縁は「ポップ」に寄るので落とす */
  -webkit-text-stroke: 1.25px var(--chrome-500);
  opacity: .16;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%);
          mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%);
}

/* --- 見出し銘板 — 筐体に打ち込まれた銘板。走査線を地に重ね、四隅にリベット、inset で沈める --- */
.hw-plate, .ln-plate, .memhead {
  position: relative;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.55);
}
.hw-plate { background: var(--hw-scan), linear-gradient(180deg, #141418 0%, var(--console) 100%); }
.ln-plate,
.memhead  { background: var(--hw-scan), linear-gradient(180deg, var(--console-hi) 0%, var(--console) 100%); }
/* 四隅のリベット (chrome の小さな打ち込み) */
.hw-plate::after, .ln-plate::after, .memhead::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle, var(--chrome-500) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, var(--chrome-500) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, var(--chrome-500) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, var(--chrome-500) 0 1.1px, transparent 1.7px);
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

/* 特大タイトル — padding を割って左へ食み出し、赤の版ズレ(ポスターの赤アウトライン見出し)を纏う */
.hw-plate-title, .ln-plate-title, .memhead-title {
  position: relative;
  margin-left: -.06em;
  text-shadow:
    .03em 0 0 color-mix(in srgb, var(--flame-500) 52%, transparent),
    -.022em 0 0 color-mix(in srgb, var(--chrome-100) 34%, transparent);
}
/* デスクトップは銘板の padding を割って左のゲージ帯へ食み出させる (格子割りの主動作) */
@media (min-width: 760px) {
  .hw-plate-title, .ln-plate-title, .memhead-title { margin-left: -.14em; }
}

/* --- パネル — 「機械に沈んだ画面」。浮いた影は使わず inset ベベルで沈め、微走査線を敷く --- */
.hw-recs, .ln-sec, .memslot, .rt-hud {
  background-image: var(--hw-scan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.5);
}

/* モバイル — 番地レールは細い目盛り帯だけ残し、縦ラベルは畳む。ゴーストも抑える */
@media (max-width: 759px) {
  .hw-chassis-rail { width: 16px; top: 30px; bottom: 30px; }
  .hw-chassis-callsign { display: none; }
  .hw-ghost { font-size: clamp(110px, 38vw, 200px); }
}

/* ================================================================
   SIGNAL — コンテンツ画面の冷たい信号レイヤー
   OFF-GRID CHASSIS の骨格はそのまま、体温を下げて「張り詰めた静けさ」に振る。
   冷たい静止グレイン + ゆっくり降りるシステムスキャン1本。動きは最小限に絞る。
   ================================================================ */

/* 冷たいデータ空間の気配 — コンテンツ画面だけに掛ける。ジャケット面は自前の焼き込みノイズがある */
.hw-signal {
  position: fixed;
  inset: 0;
  z-index: 60;              /* パネルより上・タイトルバー(65)より下 */
  pointer-events: none;
  visibility: hidden;
  /* 静止グレイン (映像の粒子)。動かさず、張り詰めた静けさのまま置く */
  mix-blend-mode: overlay;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
body:has(.page.active) .hw-signal { visibility: visible; }
/* システムスキャン — 冷たい細線が画面をゆっくり降りる。潜行の「間」。速さも明度も抑える */
.hw-signal::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  top: -2%;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(240,240,240,.5) 25%, rgba(240,240,240,.5) 75%, transparent);
  box-shadow: 0 0 12px rgba(228,35,19,.22);
  opacity: .5;
  animation: hwDive 11s linear infinite;
}
@keyframes hwDive {
  0%   { top: -2%;  opacity: 0; }
  8%   { opacity: .5; }
  92%  { opacity: .5; }
  100% { top: 102%; opacity: 0; }
}

/* 信号の侵入 — 整列した走査線がたまに横へ datamosh する (規律が壊れる/侵入/精神の歪み)。
   ただし色は足さず単色 (overlay)、変位も小さく、間隔も長い。派手ではなく「不穏」に留める */
.hw-signal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0 3px,
    rgba(255,255,255,.05) 3px 4px,
    transparent 4px 14px,
    rgba(0,0,0,.4) 14px 16px,
    transparent 16px 30px);
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 30%, #000 50%, transparent 74%);
          mask-image: linear-gradient(180deg, transparent 10%, #000 30%, #000 50%, transparent 74%);
  animation: hwIntrude 9.3s steps(1, end) infinite;
}
@keyframes hwIntrude {
  0%, 86%, 100% { opacity: 0;   transform: translateX(0); }
  87% { opacity: .34; transform: translateX(-7px); }
  89% { opacity: .22; transform: translateX(5px); }
  91% { opacity: .3;  transform: translateX(-3px); }
}

/* 動画再生中は信号層を止めてコストを抜く (既存grain停止の方針に合わせる) */
body.video-open .hw-signal { visibility: hidden; }
/* reduced-motion — スキャン・侵入の動きは断つ。冷たい静止グレインだけ残す */
@media (prefers-reduced-motion: reduce) {
  .hw-signal::before,
  .hw-signal::after { animation: none; opacity: 0; }
}