/*
 * PULSAR — スタイル
 *
 * 画面はほぼ Canvas が占める。CSS の役割は次の3つに限る:
 *   1. Canvas を画面いっぱいに敷く
 *   2. ブラウン管風のオーバーレイ（走査線・周辺減光）を重ねる
 *   3. 最小限の HUD を置く
 */

:root {
  --bg: #04050a;
  --fg: #dfe5f7;
  --dim: rgba(223, 229, 247, 0.45);
  --line: rgba(223, 229, 247, 0.18);
  --accent: #7ad7ff;
  --pad: max(14px, env(safe-area-inset-left));

  /*
   * 画面の大きさに追従する寸法。
   *
   * `0.6vw + 0.6vh` としているのは、縦横どちらかだけを基準にすると
   * 持ち方で破綻するため。縦持ちの携帯では幅が、横向きの画面では
   * 高さが足りなくなるので、両方の平均で決める。
   *
   * 上下は clamp で止める。大きな画面で文字が間延びせず、小さな画面でも
   * 読めない大きさまで縮まない。この2つの値が実質的な設計の幅になる。
   */
  --fs-label: clamp(9px, calc(0.45vw + 0.45vh), 13px);   /* 見出し・単位 */
  --fs-ui: clamp(12px, calc(0.62vw + 0.62vh), 17px);     /* ボタン・本文 */
  --fs-value: clamp(15px, calc(0.78vw + 0.78vh), 23px);  /* 数値 */
  --fs-title: clamp(16px, calc(0.85vw + 0.85vh), 25px);  /* 見出し */

  --gap-ui: clamp(7px, calc(0.5vw + 0.5vh), 14px);
  --pad-ui: clamp(10px, calc(0.62vw + 0.62vh), 18px);

  /*
   * 走行中の数値は別枠で、他の文字の倍近くまで大きくする。
   *
   * 遊んでいる最中は画面の中心を見ているので、視界の端で読むことになる。
   * 設定の文字と同じ大きさでは、目を向け直さないと読み取れない。
   */
  --fs-hud-label: clamp(11px, calc(0.7vw + 0.7vh), 20px);
  --fs-hud-value: clamp(26px, calc(1.5vw + 1.5vh), 44px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  /* タッチ操作をブラウザのスクロールに奪わせない。操作の取りこぼしを防ぐ */
  touch-action: none;
  overscroll-behavior: none;

  /*
   * 文字を選択できないようにする。読み物ではなく操作する画面なので、
   * なぞったときに選択範囲や文字カーソルが出ると壊れて見える。
   */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- ブラウン管風オーバーレイ ------------------------------------ */

.crt,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* 走査線。1px の横縞を繰り返すだけだが、画面の密度が一気に上がる */
.crt {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* 周辺減光。中央へ視線を集める */
.vignette {
  background: radial-gradient(
    ellipse 78% 72% at 50% 50%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* --- HUD ---------------------------------------------------------- */

/*
 * タイトル画面より前に出す。設定（感度・音・背景）と説明は、
 * 遊び始める前にこそ触りたいものなので、タイトルの下に隠れてはいけない。
 */
#hud {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: var(--pad);
  right: var(--pad);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 入りきらないときは折り返す。押せないボタンが画面外に出るのを防ぐ */
  flex-wrap: wrap;
  gap: var(--gap-ui);
  pointer-events: none;
}

/*
 * タイトルでは数値も隠す。
 *
 * 流れているのは自動操縦のデモなので、そこに出るコンボや距離は
 * 遊び手の記録ではない。読ませる意味がないうえ、狭い画面では
 * 作品名とボタンに覆いかぶさってしまう。
 */
body.on-title #panel { display: none; }

/* スコアを左上へ置いたため、作品名は場所を譲って右側のボタン列にまとめる */
.brand {
  flex: 0 0 auto;
  margin-right: auto;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--dim);
  opacity: 0.55;
}

#hud button {
  pointer-events: auto;
  /* 幅が足りないときに縮まないようにする。縮むと、同じ指定でも
     場面によって大きさが違って見える */
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--fs-ui);
  letter-spacing: 0.1em;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: calc(var(--gap-ui) * 0.75) calc(var(--gap-ui) * 1.4);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.2s ease, border-color 0.2s ease;
}

#hud button:hover {
  color: var(--fg);
  border-color: var(--accent);
}

#hud button.on {
  color: var(--accent);
  border-color: var(--accent);
}

/* 合図の最中など、押しても意味がないときは触れないことを見せる */
#hud button:disabled {
  opacity: 0.35;
  cursor: default;
  color: var(--dim);
  border-color: var(--line);
}

/*
 * メニューはタイトルのスタートと同じ見た目にする。
 *
 * どちらも「ここを押す」場所であり、走行中に出ている唯一の入口でもある。
 * 触れる前から押す場所だと分かるよう、常に塗っておく。
 *
 * セレクタを `#hud button#menuBtn` と長くしているのは、詳細度を上げるため。
 * `#menuBtn` だけでは `#hud button` に負ける（id は同数で、あちらは要素名を
 * 1つ多く含むため）。実際これを見落としていて、`.on` が付いたときだけ
 * 指定が通り、「開いた後だけ大きくなる」状態になっていた。
 *
 * 上の `#hud button.on` より後ろに置くこと。前に置くと、開いている間だけ
 * 文字色が上書きされ、塗りと同じ色になって読めなくなる。
 */
#hud button#menuBtn,
#hud button#menuBtn.on {
  font-family: "Consolas", "Hiragino Sans", system-ui, sans-serif;
  /* 大きさは他のボタンに合わせ、目立たせるのは色だけに任せる。
     塗ってあれば、小さくても押す場所だと分かる */
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: calc(var(--gap-ui) * 0.75) calc(var(--gap-ui) * 1.5);
  color: #04121c;
  background: var(--accent);
  border-color: var(--accent);
  /* ほのかに光らせて、明るい絵の上でも沈まないようにする */
  box-shadow: 0 0 18px rgba(122, 214, 255, 0.28);
}

#hud button#menuBtn:hover,
#hud button#menuBtn.on:hover {
  color: #04121c;
  background: #9ce2ff;
  border-color: #9ce2ff;
}

/* 合図の最中は押せない。塗ったままだと押せそうに見えるので戻す */
#hud button#menuBtn:disabled {
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  box-shadow: none;
}

/* --- タイトル画面 --------------------------------------------------- */

/*
 * 背後でデモを流したまま重ねる。塗りつぶさず、中央だけを軽く落として
 * 文字を読ませる。デモが見えていることが、この作品の第一印象になる。
 */
#title[hidden] { display: none; }

/*
 * 背後のデモを覆わない。作品の第一印象は動いている絵そのものなので、
 * 暗幕を掛けるとその印象を殺してしまう。
 * 文字は影と発光で浮かせ、明るい絵の上でも読めるようにする。
 */
#title {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  padding: var(--pad);
  cursor: pointer;
  animation: titleIn 0.8s ease both;
}

@keyframes titleIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.titleInner {
  text-align: center;
  pointer-events: none;
}

.titleLogo {
  margin: 0;
  font-family: "Consolas", "Impact", system-ui, monospace;
  font-size: clamp(52px, 15vw, 128px);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--fg);
  /* 色収差ふうの縁取りに加え、黒い影で明るい背景からも切り離す */
  text-shadow:
    -3px 0 0 rgba(122, 215, 255, 0.75),
     3px 0 0 rgba(255, 110, 200, 0.75),
     0 0 42px rgba(122, 215, 255, 0.45),
     0 4px 24px rgba(0, 0, 0, 0.75);
  margin-bottom: 34px;
}

/* 開放済みのステージぶんだけ並ぶ開始ボタン */
.stageSelect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
}

.startBtn {
  pointer-events: auto;
  min-width: clamp(190px, calc(12vw + 12vh), 300px);
  font-family: "Consolas", "Hiragino Sans", system-ui, sans-serif;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: var(--pad-ui) calc(var(--pad-ui) * 1.8);
  color: var(--fg);
  background: rgba(10, 14, 26, 0.72);
  border: 1px solid rgba(122, 215, 255, 0.45);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.startBtn:hover {
  color: #04121c;
  background: #9ce2ff;
  border-color: #9ce2ff;
}

/* 最初のステージだけは、押す場所として目立たせる */
.startBtn.primary {
  color: #04121c;
  background: var(--accent);
  border-color: var(--accent);
  animation: startPulse 1.9s ease-in-out infinite;
}

@keyframes startPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 215, 255, 0.5); }
  50% { box-shadow: 0 0 0 18px rgba(122, 215, 255, 0); }
}

/*
 * 作者と版。画面のいちばん下、中央に小さく置く。
 *
 * タイトルの文字組み（.titleInner）の外に出している。中に入れると
 * ロゴとボタンの塊に引きずられて中央へ寄り、署名ではなく案内の
 * 一部に見えてしまう。背後で流れているデモを邪魔しないよう、
 * 濃さは控えめにしてある。
 */
.titleFoot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: max(12px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: clamp(10px, calc(0.45vw + 0.45vh), 13px);
  letter-spacing: 0.14em;
  color: rgba(214, 226, 255, 0.5);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.titleHint {
  margin: 20px 0 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}

/* --- 走行パネル ----------------------------------------------------- */

/*
 * 視線はトンネルの中心に集まる。情報はその真上に横一列で置き、
 * 目を大きく動かさずに読めるようにする。
 *
 * 置くのは GOAL と TIME だけ。数字でしか分からないものに絞り、
 * 勢いや場所は絵と音に任せている。
 */
#panel {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--pad));
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   * 一列に収まらない画面では折り返す。数字を小さくして無理に1行へ
   * 詰めるより、2行になっても大きいまま読めた方がよい。
   */
  flex-wrap: wrap;
  gap: calc(var(--gap-ui) * 0.6) calc(var(--gap-ui) * 1.8);
  padding: calc(var(--gap-ui) * 0.8) calc(var(--gap-ui) * 1.8);
  border: 1px solid var(--line);
  /* 2行になったときは、丸すぎると間が抜けて見える */
  border-radius: calc(var(--pad-ui) * 1.6);
  background: rgba(4, 5, 10, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Consolas", "SF Mono", monospace;
  white-space: nowrap;
  pointer-events: none;
  /* 絵の邪魔をしないよう、出入りは静かに */
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* 消えるときは、真ん中に置いたまま上へ抜ける */
#panel.hidden {
  opacity: 0;
  transform: translate(-50%, -10px);
}

/* 見出しと数値は横に並べる。縦に積むと一列の高さが増えてしまう */
.stat {
  display: flex;
  align-items: baseline;
  gap: calc(var(--gap-ui) * 0.7);
}

.statLabel {
  font-size: var(--fs-hud-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(223, 229, 247, 0.55);
}

/*
 * 数値は等幅の書体で出す（#panel で指定済み）。
 *
 * 加えて桁数そのものを固定している（`000 / 800` のように 0 で埋める）。
 * 等幅でも桁が増えれば幅は変わるので、書体だけでは足りない。
 * 走っている最中に数字が横へずれると、視界の端では読み取れなくなる。
 */
.statValue {
  font-size: var(--fs-hud-value);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/*
 * 桁を埋めるための 0。
 *
 * 見せたいのは数字の位置であって 0 そのものではない。`visibility` で
 * 消せば、場所は取ったまま見えなくなる（`display: none` だと詰まる）。
 * 読み上げにも乗らない。
 */
.pad {
  font-style: normal;
  visibility: hidden;
}

/* 区切りと目標も同じ白さ・同じ大きさで出す。薄くすると読み取れない */
.statSep {
  margin: 0 0.15em;
  font-size: var(--fs-hud-value);
  font-weight: 400;
  color: var(--fg);
}

.statSub {
  font-size: var(--fs-hud-value);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* 立体を取って時間が延びた瞬間の反応 */
@keyframes timeGain {
  0%   { transform: scale(1); color: var(--fg); }
  20%  { transform: scale(1.3); color: #ffce6e; }
  100% { transform: scale(1); color: var(--fg); }
}

.statValue.gain { animation: timeGain 0.6s ease-out; }

/* --- FPS 表示（調整用） -------------------------------------------- */

#fps[hidden] { display: none; }

/*
 * 何よりも手前に置く。グレアのにじみも、メニューのぼかしも通さない。
 * 押せてしまうと絵に触れられなくなるので、当たり判定は持たせない。
 */
#fps {
  position: fixed;
  left: var(--pad);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  pointer-events: none;
  padding: calc(var(--gap-ui) * 0.7) var(--gap-ui);
  border-radius: 10px;
  background: rgba(4, 5, 10, 0.72);
  font-family: "Consolas", "SF Mono", monospace;
  font-size: calc(var(--fs-value) * 0.9);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #dfe5f7;
  white-space: nowrap;
}

/* --- メニュー（走行中は一時停止を兼ねる） -------------------------- */

#menu[hidden] { display: none; }

#menu {
  position: fixed;
  inset: 0;
  /* 説明や確認より奥、HUD より手前 */
  z-index: 14;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 5, 10, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.menuPanel {
  width: min(340px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-ui);
  padding: calc(var(--pad-ui) * 1.4);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(9, 11, 20, 0.94);
}

/* 走行中だけ見出しの上に出る、今のステージ */
.menuStage[hidden] { display: none; }

.menuStage {
  margin: 0;
  font-family: "Consolas", "Hiragino Sans", system-ui, sans-serif;
  font-size: var(--fs-value);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-align: center;
}

.menuPanel h2 {
  margin: 0;
  font-family: "Consolas", monospace;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.34em;
  color: rgba(223, 229, 247, 0.55);
  text-align: center;
}

/*
 * 設定は縦一列に積む。横に並べると、名前が長いものだけ折り返して
 * 行の高さが揃わず、読み取りにくくなる。
 */
.menuList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menuList button {
  width: 100%;
  padding: var(--gap-ui) calc(var(--gap-ui) * 1.3);
  font-family: inherit;
  font-size: var(--fs-ui);
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--fg);
  background: rgba(223, 229, 247, 0.05);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}

.menuList button:hover { background: rgba(223, 229, 247, 0.1); }

/* 取り消せない操作なので、色で他の設定と区別する */
#resetBtn { color: rgba(255, 145, 160, 0.9); }
#resetBtn:hover { background: rgba(255, 145, 160, 0.12); }

/* --- 単体テストの結果 ---------------------------------------------- */

#tests[hidden] { display: none; }

#tests {
  position: fixed;
  inset: 0;
  /* あそびかたと同じ高さに置く */
  z-index: 16;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 5, 10, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.testsPanel {
  width: min(760px, 100%);
  height: min(80vh, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--gap-ui);
  padding: calc(var(--pad-ui) * 1.3);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(9, 11, 20, 0.96);
}

.testsPanel h2 {
  margin: 0;
  font-family: "Consolas", monospace;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.34em;
  color: rgba(223, 229, 247, 0.55);
  text-align: center;
}

/* 結果は別の文書として読み込む。作品側の状態に触れさせないため */
#testsFrame {
  flex: 1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.testsFooter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.testsFooter button {
  padding: var(--gap-ui) calc(var(--gap-ui) * 2);
  font-family: inherit;
  font-size: var(--fs-ui);
  letter-spacing: 0.1em;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.testsFooter button:hover { border-color: var(--accent); }

/* 設定を変えていることが一目で分かるようにする */
.menuList button.on {
  color: var(--accent);
  border-color: rgba(122, 214, 255, 0.55);
}

.menuFooter {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.menuFooter button {
  flex: 1;
  padding: var(--gap-ui) calc(var(--gap-ui) * 0.9);
  font-family: inherit;
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.menuFooter button.primary {
  color: #04121c;
  background: var(--accent);
  border-color: transparent;
  font-weight: 700;
}

.menuFooter button.primary:hover { background: #9ce2ff; }
.menuFooter button:not(.primary):hover { background: rgba(223, 229, 247, 0.08); }

/* タイトルでは走行中にしか意味のない項目を隠す */
body.on-title #titleBtn { display: none; }

/* --- 知らせ（STAGE CLEAR など） ------------------------------------ */

#banner[hidden] { display: none; }

#banner {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  text-align: center;
  font-family: "Consolas", monospace;
  font-size: clamp(30px, 7.5vw, 74px);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ffd76e;
  text-shadow: 0 0 50px rgba(255, 215, 110, 0.65), 0 6px 30px rgba(0, 0, 0, 0.85);
  background: rgba(4, 5, 10, 0.45);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes bannerPop {
  0%   { transform: scale(0.72); opacity: 0; }
  22%  { transform: scale(1.06); opacity: 1; }
  34%  { transform: scale(1); }
  85%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.04); opacity: 0.9; }
}

#banner.pop { animation: bannerPop 2s ease-out; }

/*
 * 合図に添える小さい行（STAGE 2 など）。
 *
 * 主役はあくまで下の大きな文字なので、こちらは控えめにする。
 * 同じ大きさで2行並べると、どちらを読めばよいのか迷う。
 */
.signHead[hidden] { display: none; }

.signHead {
  display: block;
  margin-bottom: 0.4em;
  font-family: "Consolas", monospace;
  font-size: clamp(16px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.3em;
  /* 字間を空けた分だけ右に寄るので、その半分を戻して中央に見せる */
  text-indent: 0.3em;
  color: rgba(223, 229, 247, 0.8);
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.85);
}

/* --- カウントダウン ------------------------------------------------ */

#countdown[hidden] { display: none; }

/*
 * 暗幕は画面いっぱいに固定し、拡大アニメーションは中の数字だけに掛ける。
 * 外枠ごと拡大すると、暗幕の縁が画面内に見切れてしまう。
 */
#countdown {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(4, 5, 10, 0.45);
  /* 文字として選択できると、カーソルや選択範囲が見えてしまう */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

#countdownNum {
  font-family: "Consolas", monospace;
  font-size: clamp(90px, 22vw, 190px);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 60px rgba(122, 215, 255, 0.6), 0 6px 30px rgba(0, 0, 0, 0.8);
}

/* READY と START は字数があるぶん小さくする */
#countdownNum.word {
  font-size: clamp(38px, 11vw, 96px);
  letter-spacing: 0.24em;
  /* 字間を空けると右に余白が寄るので、その分だけ戻して中央に見せる */
  text-indent: 0.24em;
}

/* 数字が変わるたびに一度だけ弾ませる */
@keyframes countTick {
  0%   { transform: scale(1.5); opacity: 0; }
  30%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0.75; }
}

#countdownNum.tick { animation: countTick 0.7s ease-out; }

/* --- 確認ダイアログ ------------------------------------------------ */

#confirm[hidden] { display: none; }

#confirm {
  position: fixed;
  inset: 0;
  z-index: 17;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(4, 5, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.confirmPanel {
  width: min(360px, 100%);
  padding: calc(var(--pad-ui) * 1.7) calc(var(--pad-ui) * 1.5);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(12, 15, 26, 0.96);
  text-align: center;
}

.confirmPanel h2 {
  margin: 0 0 22px;
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: 0.08em;
  /* 2行になることがあるので、行の間を空けて読みやすくする */
  line-height: 1.7;
  color: var(--fg);
}

.confirmButtons {
  display: flex;
  gap: 8px;
}

.confirmButtons button {
  flex: 1 1 0;
  padding: var(--gap-ui) calc(var(--gap-ui) * 0.9);
  font: inherit;
  font-size: var(--fs-ui);
  letter-spacing: 0.1em;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.confirmButtons button:hover { border-color: var(--accent); }

.confirmButtons .primary {
  color: #04121c;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

/* --- リザルト ------------------------------------------------------ */

#result[hidden] { display: none; }

#result {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(4, 5, 10, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.resultPanel {
  width: min(420px, 100%);
  padding: calc(var(--pad-ui) * 1.8) calc(var(--pad-ui) * 1.6);
  border: 1px solid rgba(122, 215, 255, 0.3);
  border-radius: 16px;
  background: rgba(12, 15, 26, 0.95);
  text-align: center;
}

.resultPanel h2 {
  margin: 0;
  font-family: "Consolas", monospace;
  font-size: calc(var(--fs-title) * 1.6);
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--accent);
}

.resultLead {
  margin: 8px 0 22px;
  font-size: var(--fs-label);
  color: var(--dim);
}

/* 全ステージ踏破のときだけ、見出しと一言を祝いの色にする */
.resultPanel h2.clear {
  color: #ffd76e;
  text-shadow: 0 0 26px rgba(255, 215, 110, 0.55);
}

.resultLead.clear {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: #ffd76e;
}

.resultStats {
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid rgba(223, 229, 247, 0.1);
}

.resultStats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(223, 229, 247, 0.1);
}

.resultStats dt {
  font-family: "Consolas", monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: rgba(223, 229, 247, 0.45);
}

.resultStats dd {
  margin: 0;
  font-family: "Consolas", monospace;
  font-size: calc(var(--fs-value) * 1.15);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.resultNote {
  margin: 0 0 20px;
  min-height: 1.2em;
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--accent);
}

.resultButtons {
  display: flex;
  gap: 8px;
}

.resultButtons button {
  flex: 1 1 0;
  padding: var(--gap-ui) calc(var(--gap-ui) * 0.9);
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.resultButtons button:hover { border-color: var(--accent); }

.resultButtons .primary {
  color: #04121c;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.resultButtons .primary:hover { background: #9ce2ff; }

/* --- 操作説明 ------------------------------------------------------ */

/*
 * `hidden` 属性による非表示は、この要素の `display: grid` に負けてしまう。
 * 属性セレクタで明示的に打ち消す（これが無いとダイアログが閉じない）。
 */
#help[hidden] { display: none; }

#help {
  position: fixed;
  inset: 0;
  z-index: 16;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(4, 5, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}

.helpPanel {
  width: min(520px, 100%);
  max-height: calc(100vh - 2 * var(--pad));
  overflow-y: auto;
  padding: calc(var(--pad-ui) * 1.7);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(12, 15, 26, 0.94);
}

.helpPanel h2 {
  margin: 0 0 14px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--accent);
}

.helpPanel h3 {
  margin: 22px 0 8px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(223, 229, 247, 0.5);
}

.helpLead {
  margin: 0;
  font-size: var(--fs-ui);
  line-height: 1.8;
  color: var(--fg);
}

.helpLead strong { color: var(--accent); }

.helpTable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  line-height: 1.7;
}

.helpTable th {
  width: 8.5em;
  padding: 8px 12px 8px 0;
  text-align: left;
  vertical-align: top;
  font-weight: 600;
  color: var(--fg);
  border-top: 1px solid rgba(223, 229, 247, 0.1);
  white-space: nowrap;
}

.helpTable td {
  padding: 8px 0;
  vertical-align: top;
  color: var(--dim);
  border-top: 1px solid rgba(223, 229, 247, 0.1);
}

.helpList {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--fs-ui);
  line-height: 1.9;
  color: var(--dim);
}

.helpList strong { color: var(--fg); font-weight: 600; }


#helpClose {
  width: 100%;
  margin-top: 24px;
  padding: var(--gap-ui);
  font-size: var(--fs-ui);
  letter-spacing: 0.1em;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

#helpClose:hover { border-color: var(--accent); }

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-ui);
}

/*
 * 画面が狭いときだけの調整。
 *
 * 文字や余白の大きさは `:root` の寸法が画面に合わせて縮めるので、
 * ここでは「並べ方を変える」ことだけを書く。同じ数値を二度書くと、
 * 片方を直し忘れて食い違う。
 */
@media (max-width: 560px) {
  /* 作品名は場所を譲る。ボタンの方が先に必要になる */
  .brand { display: none; }

  /* 横幅が足りず、メニューのボタンと重なるので下へ落とす */
  #panel { top: calc(max(12px, env(safe-area-inset-top)) + 44px); }

  /* 説明の表は、見出しと中身を縦に積む */
  .helpTable th { width: auto; display: block; padding-bottom: 0; border-top: none; }
  .helpTable td { display: block; padding-top: 2px; }
  .helpTable tr { display: block; padding: 8px 0; border-top: 1px solid rgba(223, 229, 247, 0.1); }

  /* 小さい画面では走査線が潰れて汚くなるため薄くする */
  .crt { opacity: 0.35; }
}