/* 「上司から逃げろ」専用のスタイル */

/* 数字・英字の見出し用の字体(Orbitron の Basic Latin を切り出したもの。SIL OFL。自前の配信で、外部へ通信しない。決定 0070) */
@font-face {
  font-display: swap;
  font-family: "NOLITO Display";
  font-style: normal;
  font-weight: 700 900;
  src: url("/assets/fonts/nolito-display.woff2") format("woff2");
}

.game__error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
}

.game__rules {
  margin-block: var(--space-6);
}

.game__rules ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.game-setup__role {
  margin-bottom: var(--space-4);
}

/*
 * プレイ画面(Issue #166。アーケード風)。暗い枠の「ゲーム画面」だけを、中央に大きく出す。
 * 上から: HUD(職種・正解・ミス = 四隅)→ 距離ゲージ → 場面 → セリフ枠(単語)→ 入力欄 → 下の隅に「音」「やめる」。
 * 枠の中は、どのテーマでも暗い(下の .game-play で、意味のあるトークンを、枠の中だけ上書きする)。
 * aside は display: contents にして、HUD(.game-status)と 2 つのボタンを、枠のグリッドに直接置く。
 */
.game-result,
.game-play,
.game-setup {
  --color-bg: var(--arcade-bg);
  --color-surface: var(--arcade-panel);
  --color-soft: var(--arcade-panel-2);
  --color-text: var(--arcade-text);
  --color-text-muted: var(--arcade-text-muted);
  --color-primary: var(--arcade-cyan);
  --color-primary-strong: var(--arcade-cyan);
  --color-on-primary: var(--arcade-on-bright);
  --color-accent: var(--arcade-yellow);
  --color-on-accent: var(--arcade-on-bright);
  --color-border: var(--arcade-cyan);
  --color-focus: var(--arcade-yellow);
  --border-width: 3px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 0;
  --shadow-pop: 0 4px 0 var(--arcade-bg);
  --shadow-pop-sm: 0 2px 0 var(--arcade-bg);
  --shadow-primary: 0 4px 0 var(--arcade-bg);

  padding: var(--space-3);
  background: var(--arcade-bg);
  border: 0.375rem solid var(--arcade-cyan);
  box-shadow:
    0 0 0 0.25rem var(--arcade-bg),
    0 0 0 0.5rem var(--arcade-magenta),
    0 0 2rem 0.5rem var(--arcade-glow);
  color: var(--arcade-text);
  color-scheme: dark;
}

.game-play {
  display: grid;
  grid-template-areas:
    "hud hud"
    "main main"
    "sound quit";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* 狭い画面では、余白を詰めて、単語と入力欄が、画面に収まりやすいようにする */
.game-play__main {
  grid-area: main;
  display: grid;
  gap: var(--space-3);
}

.game-play__side {
  display: contents;
}

.game-play [data-sound-toggle] {
  grid-area: sound;
  justify-self: start;
}

.game-play [data-quit] {
  grid-area: quit;
  justify-self: end;
}

@media (width >= 48rem) {
  .game-result,
  .game-play {
    padding: var(--space-6);
  }

  .game-play {
    gap: var(--space-4);
  }

  .game-play__main {
    gap: var(--space-4);
  }
}

/* 距離ゲージ: 太い、ピクセル風のライフバー。縦の目盛りで、ドットの段に見せる。危ないときは、赤く縞になって、光る */
.gauge {
  position: relative;
  height: 2.5rem;
  overflow: hidden;
  background: var(--arcade-bg);
  border: 0.25rem solid var(--arcade-cyan);
  box-shadow: 0 0 0.75rem var(--arcade-cyan);
}

.gauge__fill {
  width: 0;
  height: 100%;
  background: var(--arcade-green);
  transition: width 0.1s linear;
}

/* ドットの目盛り(飾り) */
.gauge::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 0.625rem,
    var(--arcade-bg) 0.625rem 0.75rem
  );
  content: "";
  pointer-events: none;
}

/* 危険なときは色に加えて縞模様と「あぶない!」の文字でも示す(光は 1.2 秒で 1 周。点滅にしない) */
.gauge.is-danger {
  border-color: var(--arcade-red);
  box-shadow: 0 0 1rem var(--arcade-red);
  animation: gauge-danger 1.2s ease-in-out infinite alternate;
}

.gauge.is-danger .gauge__fill {
  background: repeating-linear-gradient(
    45deg,
    var(--arcade-red) 0 0.75rem,
    var(--arcade-yellow) 0.75rem 1.5rem
  );
}

@keyframes gauge-danger {
  from {
    box-shadow: 0 0 0.25rem var(--arcade-red);
  }

  to {
    box-shadow: 0 0 1.25rem var(--arcade-red);
  }
}

.gauge__label {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-lg);
}

.gauge__danger {
  margin-left: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--arcade-red);
  border: var(--border-width) solid var(--arcade-text);
  border-radius: var(--radius-pill);
  color: var(--arcade-on-bright);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* 特殊ルールの合図(ダッシュ注意・ダッシュ中・ミスで加速中・追い詰め中)。文字と枠で伝える(色だけに頼らない) */
.gauge__cues {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.gauge__cue {
  padding: 0 var(--space-3);
  background: var(--color-soft);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* 実際に速くなっている間(ダッシュ中・ミスで加速中・追い詰め中)は、実線の枠。予告(ダッシュ注意)は、破線 */
.gauge__cue[data-cue="surge"],
.gauge__cue[data-cue="shock"],
.gauge__cue[data-cue="closing"] {
  border-style: solid;
}

/* 打つ語: セリフ枠(フキダシ)風。太い枠と、上の場面に向かう、角ばったしっぽ */
.game-word {
  position: relative;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 0.25rem solid var(--arcade-text);
  border-radius: var(--radius-md);
  box-shadow: 0 0.375rem 0 var(--arcade-panel-2);
  cursor: text;
  text-align: center;
}

.game-word::before {
  position: absolute;
  top: -1.25rem;
  left: 25%;
  border: 0.5rem solid transparent;
  border-top: 0;
  border-bottom: 1rem solid var(--arcade-text);
  content: "";
}

.game-word__japanese {
  margin: 0 0 var(--space-2);
  font-size: clamp(2rem, 9vw, 4rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.game-word__reading {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.game-word__romaji {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.5rem, 6.5vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* 打った分は、明るい黄色・太字・下線。まだの分は、暗い紫がかった色。色だけに頼らない */
.game-word__typed {
  color: var(--arcade-yellow);
  font-weight: var(--font-weight-black);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.2em;
}

.game-word__rest {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.game-input {
  display: grid;
  gap: var(--space-2);
}

.game-input__label {
  font-weight: var(--font-weight-bold);
}

/* 設定の選択欄・成績・プロフィールの欄も、この見た目を使う。16px 以上で、iOS の入力時の自動ズームを防ぐ */
.game-input__field {
  min-height: 3.25rem;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 0.25rem solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-lg);
}

/*
 * プレイ中の入力欄(.game-input の中)だけ、画面には見せない(打った分は、単語の上の色・下線で見える)。
 * ただし、フォーカスは受け取れるまま(display: none にしない。キーボード・スマホの入力を受けるため)。
 * ラベルも、読み上げには残す。同じクラスの選択欄(設定・成績・プロフィール)は、隠さない
 */
.game-input .game-input__label,
.game-input .game-input__field {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.game-input .game-input__field {
  background: transparent;
  color: transparent;
  caret-color: transparent;
}

.game-input__miss {
  min-height: 1.7em;
  margin: 0;
  font-weight: var(--font-weight-black);
}

.game-input__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* HUD: 一覧(dl)ではなく、画面の上の左右の隅に、ラベルと値を並べる。左端が職種、右端がミス */
.game-status {
  grid-area: hud;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  margin: 0;
}

.game-status div {
  display: grid;
  gap: 0;
}

.game-status dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.game-status dd {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* 通知(保存できない・壊れていた など) */
.game__notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* アカウントの案内(未ログインの初回、ダッシュボードにだけ出す。閉じられる) */
.game-account-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.game-account-banner p {
  margin: 0;
}

.game-setup__hint {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* 選んだ役職の、特殊ルールの説明(役職の選択の下) */
.game-setup__rules {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  background: var(--color-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.game-setup__rules-title {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-bold);
}

.game-setup__rules-list {
  margin: 0;
  padding-left: var(--space-6);
}

/* 追跡シーン: 追ってくる人が、距離が減るほど右のあなたに近づく。
   位置(--closeness)は、動きの軽減設定でも、距離に応じて変わる。動き(役職ごとの [data-motion])は、装飾 */
.scene {
  /* 場面は、暗い枠の中の、明るい「窓」。背景の絵が淡い色なので、テーマに関係なく、固定の明るい色にする */
  --color-surface: var(--arcade-scene-bottom);
  --color-soft: var(--arcade-scene-top);
  --color-text: var(--arcade-scene-ink);
  --color-text-muted: var(--arcade-scene-text-muted);
  --color-primary: var(--arcade-scene-primary);
  --color-accent: var(--arcade-scene-accent);
  --color-on-accent: var(--arcade-scene-ink);
  --color-border: var(--arcade-scene-ink);
  --closeness: 0;
  --chaser-w: 8.5rem;
  --player-w: 4.8rem;
  --scene-h: 10.5rem;

  /* 背景の絵(360×112)の、1 枚の幅。横に流す動きは、ちょうど 1 枚分で、つなぎ目が見えない */
  --tile-w: calc(var(--scene-h) * 360 / 112);

  position: relative;
  height: var(--scene-h);
  overflow: hidden;
  background-color: var(--color-surface);

  /* 職種の背景(--scene-bg。view.js が、決まった場所の SVG だけを入れる)を、淡いグラデーションの上に、横に並べる */
  background-image: var(--scene-bg, none), linear-gradient(var(--color-soft), var(--color-surface));
  background-repeat: repeat-x, no-repeat;
  background-position:
    left bottom,
    0 0;
  background-size:
    var(--tile-w) 100%,
    100% 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  isolation: isolate;
  animation: scene-scroll 14s linear infinite;
}

@keyframes scene-scroll {
  from {
    background-position:
      0 100%,
      0 0;
  }

  to {
    background-position:
      calc(var(--tile-w) * -1) 100%,
      0 0;
  }
}

/* 奥行き: 上から差す光と、足元の床の影を、キャラクターの後ろに敷く(飾り。動かない) */
.scene::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(ellipse 60% 70% at 18% 0%, var(--arcade-scene-light), transparent 70%),
    linear-gradient(to bottom, transparent 62%, var(--arcade-scene-shade));
  pointer-events: none;
}

/* 危ないとき(距離が 25% 以下)は、場面の縁を、ゲージと同じ黄色で、ゆっくり脈打たせる(動きを減らす設定では、脈打たず、縁だけが残る) */
.scene.is-danger {
  box-shadow: inset 0 0 0 0.25rem var(--color-accent);
  animation:
    scene-scroll 14s linear infinite,
    scene-danger 1.2s ease-in-out infinite alternate;
}

/* 終わりの演出の間は、背景を止める */
.scene[data-stage="clear"],
.scene[data-stage="over"] {
  animation: none;
}

@keyframes scene-danger {
  from {
    box-shadow: inset 0 0 0 0.15rem var(--color-accent);
  }

  to {
    box-shadow: inset 0 0 0 0.4rem var(--color-accent);
  }
}

@media (width >= 48rem) {
  .scene {
    --chaser-w: 15rem;
    --player-w: 8rem;
    --scene-h: 15.5rem;
  }
}

/* 道の流れる速さは、近づくほど、速くなる */
.scene__road {
  position: absolute;
  right: 0;
  bottom: 0.9rem;
  left: 0;
  height: 0.4rem;
  background: repeating-linear-gradient(
    90deg,
    var(--color-border) 0 1.5rem,
    transparent 1.5rem 3rem
  );
  animation: scene-road calc(0.9s - 0.5s * var(--closeness)) linear infinite;
}

/* 追ってくる人: 外側の枠(.scene__chaser)が位置を、中の絵(.scene__chaser-img)が動きを、受け持つ */
.scene__chaser {
  position: absolute;
  bottom: 1.2rem;
  left: calc((100% - var(--chaser-w) - var(--player-w) - 1rem) * var(--closeness));
  width: var(--chaser-w);
  transition: left 0.1s linear;
}

/* 絵は、6 コマを横に並べた 1 枚(スプライトシート)。枠(overflow: hidden)が 1 コマ分だけ見せ、
   中の絵(.scene__sprite)を、コマ送りでずらす。枠は、位置・演出・大きさの変化(transform など)を受け持つ */
.scene__chaser-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  transform-origin: 50% 100%;
}

.scene__player {
  position: absolute;
  right: 1rem;
  bottom: 1.2rem;
  width: var(--player-w);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.scene__sprite {
  display: block;
  width: 600%;
  max-width: none;
  height: 100%;
  animation: sprite-frames var(--sprite-cycle, 0.6s) steps(6) infinite;
}

/* 危ないとき(.is-danger)は、あなたの表情が、焦った顔(player-panic.svg)に替わる。2 枚とも、最初から読み込んでおく */
.scene__player--panic,
.scene.is-danger .scene__player--calm {
  display: none;
}

.scene.is-danger .scene__player--panic {
  --sprite-cycle: 0.4s;

  display: block;
}

/* 役職ごとの動き(roles.json の scene.motion) */

/* run: 走る(徒歩)。速い上下と、前かがみの揺れ */
.scene[data-motion="run"] .scene__chaser-img {
  animation: scene-run 0.28s ease-in-out infinite alternate;
}

/* pedal: こぐ(自転車)。左右に傾く */
.scene[data-motion="pedal"] .scene__chaser-img {
  --sprite-cycle: 0.9s;

  animation: scene-pedal 0.55s ease-in-out infinite alternate;
}

/* drive: エンジンの細かい振動と、後ろに流れる煙(車) */
.scene[data-motion="drive"] .scene__chaser-img {
  --sprite-cycle: 0.45s;

  animation: scene-drive 0.09s linear infinite alternate;
}

.scene[data-motion="drive"] .scene__chaser::after {
  position: absolute;
  bottom: 0.3rem;
  left: -0.5rem;
  width: 0.9rem;
  height: 0.9rem;
  background: color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: 50%;
  content: "";
  animation: scene-smoke 0.8s ease-out infinite;
}

/* glide: ゆったり滑らかに進み、つやが光る(リムジン) */
.scene[data-motion="glide"] .scene__chaser-img {
  --sprite-cycle: 1.2s;

  animation:
    scene-glide 1.1s ease-in-out infinite alternate,
    scene-gloss 2.4s ease-in-out infinite;
}

/* aura: 浮かんで、オーラをまとう(裏ボス) */
.scene[data-motion="aura"] .scene__chaser-img {
  --sprite-cycle: 1.2s;

  animation: scene-hover 1.6s ease-in-out infinite alternate;
}

.scene[data-motion="aura"] .scene__chaser::before {
  position: absolute;
  z-index: -1;
  inset: -35% -25% -15%;
  background: radial-gradient(
    circle at 50% 55%,
    color-mix(in srgb, var(--color-primary) 55%, transparent),
    transparent 70%
  );
  content: "";
  animation: scene-aura 1.4s ease-in-out infinite alternate;
}

.scene[data-motion="aura"] .scene__chaser::after {
  position: absolute;
  right: 12%;
  bottom: -0.55rem;
  left: 12%;
  height: 0.5rem;
  background: color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: 50%;
  content: "";
  animation: scene-shadow 1.6s ease-in-out infinite alternate;
}

/* 一瞬の演出(main.js が [data-event] を、350ms だけ付ける)。
   miss: 追ってくる人が、ぐっと飛び出し、あなたがのけぞる / gain: すっと引き離し、道が速く流れる */
.scene[data-event="miss"] .scene__chaser {
  animation: scene-lunge 0.32s ease-out;
}

.scene[data-event="miss"] .scene__player {
  animation: scene-flinch 0.32s ease-out;
}

.scene[data-event="gain"] .scene__chaser {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.scene[data-event="gain"] .scene__road {
  animation-duration: 0.25s;
}

@keyframes sprite-frames {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes scene-road {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -3rem 0;
  }
}

@keyframes scene-run {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-0.2rem);
  }
}

@keyframes scene-pedal {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-0.1rem);
  }
}

@keyframes scene-drive {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-0.1rem) rotate(0.3deg);
  }
}

@keyframes scene-smoke {
  from {
    opacity: 0.7;
    transform: translateX(0) scale(0.6);
  }

  to {
    opacity: 0;
    transform: translateX(-1.6rem) scale(1.4);
  }
}

@keyframes scene-glide {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-0.25rem);
  }
}

@keyframes scene-gloss {
  0%,
  70%,
  100% {
    filter: brightness(1);
  }

  85% {
    filter: brightness(1.3);
  }
}

@keyframes scene-hover {
  from {
    transform: translateY(-0.9rem);
  }

  to {
    transform: translateY(-0.5rem);
  }
}

@keyframes scene-aura {
  from {
    opacity: 0.5;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes scene-shadow {
  from {
    transform: scaleX(0.8);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes scene-lunge {
  0% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(1rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scene-flinch {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(0.4rem);
  }

  55% {
    transform: translateX(-0.25rem);
  }
}

/* 追ってくる人の吹き出し(セリフ。飾り)。場面の上に、短い間だけ出る。話している人の名前つき */
.scene__bubble {
  position: absolute;
  top: var(--space-1);
  left: 50%;
  z-index: 3;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  width: max-content;
  max-width: calc(100% - var(--space-4));
  margin: 0;
  padding: var(--space-1) var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  transform: translateX(-50%);
}

.scene__bubble[hidden] {
  display: none;
}

.scene__bubble-name {
  color: var(--color-primary-strong);
  white-space: nowrap;
}

/* 開始・終わりの演出の文字(バナー)。場面の真ん中に出る。文字は、色だけでなく、大きさでも目立たせる */
.scene__banner {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  gap: var(--space-1);
  align-content: center;
  justify-items: center;
  cursor: pointer;
}

.scene__banner[hidden] {
  display: none;
}

.scene__banner-text {
  margin: 0;
  padding: var(--space-1) var(--space-6);
  color: var(--color-on-accent);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
  animation: scene-banner-pop 0.35s ease-out;
}

.scene__banner-hint {
  margin: 0;
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

/* 終わりの演出では、上の吹き出し(セリフ)と重ならないよう、文字を少し小さくし、飛ばし方の案内は出さない */
.scene[data-stage="clear"] .scene__banner-hint,
.scene[data-stage="over"] .scene__banner-hint {
  display: none;
}

.scene[data-stage="clear"] .scene__banner-text,
.scene[data-stage="over"] .scene__banner-text {
  font-size: var(--font-size-xl);
}

@keyframes scene-banner-pop {
  from {
    transform: scale(0.6);
  }

  to {
    transform: scale(1);
  }
}

/* 終わりの演出。クリア: 追ってくる人が遠ざかり、あなたが跳ねて、紙吹雪が降る /
   ゲームオーバー: 追いつかれて、あなたがふらつく。最後の状態で止まる(動きを減らす設定では、最初から、この状態) */
.scene__confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 25%, var(--color-accent) 0 0.3rem, transparent 0.32rem),
    radial-gradient(circle at 22% 60%, var(--color-primary) 0 0.25rem, transparent 0.27rem),
    radial-gradient(circle at 37% 30%, var(--color-border) 0 0.2rem, transparent 0.22rem),
    radial-gradient(circle at 52% 65%, var(--color-accent) 0 0.3rem, transparent 0.32rem),
    radial-gradient(circle at 66% 22%, var(--color-primary) 0 0.25rem, transparent 0.27rem),
    radial-gradient(circle at 80% 55%, var(--color-accent) 0 0.3rem, transparent 0.32rem),
    radial-gradient(circle at 93% 30%, var(--color-border) 0 0.2rem, transparent 0.22rem);
  background-repeat: no-repeat;
}

.scene[data-stage="clear"] .scene__confetti {
  display: block;
  animation: scene-confetti 1.1s ease-in forwards;
}

/* グラフィックを抑える設定(低性能な端末向け。Phase 22 PR3)では、紙吹雪を出さない */
.scene[data-simple-graphics] .scene__confetti {
  display: none;
}

.scene[data-stage="clear"] .scene__chaser {
  animation: scene-outro-back 1.1s ease-in forwards;
}

.scene[data-stage="clear"] .scene__player {
  animation: scene-hop 0.45s ease-out 2;
}

.scene[data-stage="over"] .scene__chaser {
  animation: scene-outro-catch 0.5s ease-in forwards;
}

.scene[data-stage="over"] .scene__player {
  animation: scene-dizzy 0.9s ease-in-out forwards;
}

@keyframes scene-confetti {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes scene-outro-back {
  to {
    opacity: 0.3;
    transform: translateX(-3rem);
  }
}

@keyframes scene-hop {
  50% {
    transform: translateY(-0.7rem);
  }
}

@keyframes scene-outro-catch {
  to {
    transform: translateX(2.5rem);
  }
}

@keyframes scene-dizzy {
  30% {
    transform: rotate(-12deg) translateY(0.2rem);
  }

  60% {
    transform: rotate(10deg) translateY(0.2rem);
  }

  100% {
    transform: rotate(-4deg) translateY(0.3rem);
  }
}

/* 特殊ルールの見せ場(場面の飾り。data-cues に、合図が入る)。
   ダッシュ注意 = 追ってくる人の頭に「!」/ ダッシュ中・ミスで加速中 = 速さの線が流れ、追ってくる人が大きくなる /
   追い詰め中 = 追ってくる人が、少し大きくなる。文字での合図は、ゲージの横(.gauge__cue) */
.scene__speed {
  position: absolute;
  inset: 0 0 1.2rem;
  display: none;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent, var(--color-text-muted)),
    linear-gradient(90deg, transparent, var(--color-text-muted)),
    linear-gradient(90deg, transparent, var(--color-text-muted));
  background-repeat: repeat-x;
  background-size: 5rem 0.125rem;
  background-position:
    0 30%,
    2rem 52%,
    1rem 74%;
}

.scene[data-cues~="surge"] .scene__speed,
.scene[data-cues~="shock"] .scene__speed {
  display: block;
  animation: scene-speed 0.3s linear infinite;
}

@keyframes scene-speed {
  to {
    background-position:
      -5rem 30%,
      -3rem 52%,
      -4rem 74%;
  }
}

.scene__alert {
  position: absolute;
  top: -0.25rem;
  right: 0;
  display: none;
  min-width: 1.5rem;
  padding: 0 var(--space-2);
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-align: center;
}

.scene[data-cues~="surge-warn"] .scene__alert {
  display: block;
  animation: scene-alert 0.6s ease-in-out infinite alternate;
}

@keyframes scene-alert {
  to {
    transform: scale(1.25);
  }
}

/* 追ってくる人の大きさは、動き(transform のアニメーション)と、重ねられるよう、scale で変える */
.scene[data-cues~="closing"] .scene__chaser-img {
  scale: 1.06;
}

.scene[data-cues~="surge"] .scene__chaser-img,
.scene[data-cues~="shock"] .scene__chaser-img {
  scale: 1.12;
}

/* 役職別の、終わりの演出(roles.json の scene.outro。.scene の data-outro に入る)。
   全役職共通の演出(上)を、役職ごとに、上書きする。時間は、共通と同じ(1.2 秒以内)。動くのは、位置・大きさ・傾きと、
   ゆっくり(0.8 秒以上)の不透明度だけ(ちらつかない)。最後の状態で止まる(動きを減らす設定では、最初から、この状態) */

/* 追ってくる人の外側の枠(位置)と、中の絵(動き・傾き)の、両方を使う。共通の動きは、この演出の間、置き換える */

/* クリア: 先輩 = へたり込む */
.scene[data-stage="clear"][data-outro="collapse"] .scene__chaser {
  animation: none;
}

.scene[data-stage="clear"][data-outro="collapse"] .scene__chaser-img {
  animation: scene-collapse 1s ease-out forwards;
}

/* クリア: 係長 = 自転車が転ぶ */
.scene[data-stage="clear"][data-outro="tumble"] .scene__chaser {
  animation: none;
}

.scene[data-stage="clear"][data-outro="tumble"] .scene__chaser-img {
  animation: scene-tumble 0.9s ease-in forwards;
}

/* クリア: 部長 = 車が止まる(少し戻り、揺れて止まる) */
.scene[data-stage="clear"][data-outro="stall"] .scene__chaser {
  animation: scene-stall-slow 1.1s ease-out forwards;
}

.scene[data-stage="clear"][data-outro="stall"] .scene__chaser-img {
  animation: scene-stall-shake 0.8s ease-out forwards;
}

/* クリア: 社長 = ゆっくり去る。金の紙吹雪 */
.scene[data-stage="clear"][data-outro="depart"] .scene__chaser {
  animation: scene-depart 1.1s ease-in-out forwards;
}

.scene[data-stage="clear"][data-outro="depart"] .scene__confetti {
  background-image:
    radial-gradient(circle at 8% 25%, var(--color-accent) 0 0.35rem, transparent 0.37rem),
    radial-gradient(circle at 20% 62%, var(--color-accent) 0 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 35% 30%, var(--color-accent) 0 0.35rem, transparent 0.37rem),
    radial-gradient(circle at 50% 66%, var(--color-accent) 0 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 64% 24%, var(--color-accent) 0 0.35rem, transparent 0.37rem),
    radial-gradient(circle at 78% 58%, var(--color-accent) 0 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 92% 30%, var(--color-accent) 0 0.35rem, transparent 0.37rem);
}

/* クリア: 会長 = ヘリコプターが上昇して去る */
.scene[data-stage="clear"][data-outro="ascend"] .scene__chaser {
  animation: none;
}

.scene[data-stage="clear"][data-outro="ascend"] .scene__chaser-img {
  animation: scene-ascend 1.1s ease-in forwards;
}

/* ゲームオーバー: 先輩 = 飛びつく(共通の「追いつく」に、跳ねを足す) */
.scene[data-stage="over"][data-outro="grab"] .scene__chaser-img {
  animation: scene-grab 0.5s ease-out forwards;
}

/* ゲームオーバー: 係長 = ベルを鳴らして、追い越していく */
.scene[data-stage="over"][data-outro="pass"] .scene__chaser {
  animation: scene-pass 0.7s ease-in forwards;
}

/* ゲームオーバー: 部長 = 急ブレーキで、あなたの前に止まる */
.scene[data-stage="over"][data-outro="skid"] .scene__chaser {
  animation: scene-skid 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.scene[data-stage="over"][data-outro="skid"] .scene__chaser-img {
  animation: scene-skid-tilt 0.6s ease-out forwards;
}

/* ゲームオーバー: 社長 = 目の前で止まり、あなたが輝きに包まれる / 会長 = 頭上に浮かび、オーラが包む */
.scene__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 88% 65%,
    var(--glow, var(--color-accent)) 0,
    transparent 55%
  );
}

/*
 * グラフィックを抑える設定(低性能な端末向け。Phase 22 PR3)では、輝きを出さない。
 * 社長・会長の outro(下)は、詳細度がこのルールより高く display: block を付けるので、
 * !important で確実に上書きする(Phase 21 の「動きを減らす」設定と、同じ考え方。
 * base.css の animation-duration の上書きを参照)。
 */
.scene[data-simple-graphics] .scene__glow {
  display: none !important;
}

.scene[data-stage="over"][data-outro="shine"] .scene__chaser {
  animation: scene-shine-in 0.8s ease-out forwards;
}

.scene[data-stage="over"][data-outro="engulf"] .scene__chaser {
  animation: scene-engulf 0.9s ease-out forwards;
}

.scene[data-stage="over"][data-outro="shine"] .scene__glow,
.scene[data-stage="over"][data-outro="engulf"] .scene__glow {
  display: block;
  animation: scene-glow 1.1s ease-out forwards;
}

.scene[data-stage="over"][data-outro="engulf"] .scene__glow {
  --glow: var(--color-primary);
}

@keyframes scene-collapse {
  40% {
    transform: rotate(-6deg) translateY(0.1rem);
  }

  100% {
    transform: rotate(-16deg) translateY(0.6rem) scaleY(0.88);
  }
}

@keyframes scene-tumble {
  50% {
    transform: rotate(-40deg) translate(0.4rem, -0.5rem);
  }

  100% {
    transform: rotate(-100deg) translate(1.2rem, 0.4rem);
  }
}

@keyframes scene-stall-slow {
  to {
    transform: translateX(-2rem);
  }
}

@keyframes scene-stall-shake {
  25% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(2deg);
  }

  75% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes scene-depart {
  to {
    opacity: 0.3;
    transform: translateX(-6rem);
  }
}

@keyframes scene-ascend {
  to {
    opacity: 0.3;
    transform: translateY(-5.5rem);
  }
}

@keyframes scene-grab {
  40% {
    transform: translateY(-0.6rem) rotate(6deg);
  }

  100% {
    transform: translateY(0) rotate(4deg);
  }
}

@keyframes scene-pass {
  to {
    transform: translateX(11rem);
  }
}

@keyframes scene-skid {
  to {
    transform: translateX(3rem);
  }
}

@keyframes scene-skid-tilt {
  30% {
    transform: rotate(-5deg) translateY(0.1rem);
  }

  100% {
    transform: rotate(2deg);
  }
}

@keyframes scene-shine-in {
  to {
    transform: translateX(2rem);
  }
}

@keyframes scene-engulf {
  to {
    transform: translate(2.2rem, -0.6rem);
  }
}

@keyframes scene-glow {
  to {
    opacity: 0.65;
  }
}

/*
 * 動きを減らす設定: 動く飾り(煙・オーラの脈動)は、静止すると不自然なので、消す。位置と、危ないときの縁は、残る。
 * OSの設定(prefers-reduced-motion)・サイト内の切替(html[data-reduced-motion="reduce"])の、どちらでも働く。
 */
@media (prefers-reduced-motion: reduce) {
  .scene[data-motion="drive"] .scene__chaser::after {
    display: none;
  }
}

:root[data-reduced-motion="reduce"] .scene[data-motion="drive"] .scene__chaser::after {
  display: none;
}

/* プレイヤーのレベル。ゲージと同じ考え(縞模様は付けず、色はトークンから) */
.player-level {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-lg);
}

.player-level__bar {
  height: 0.75rem;
  overflow: hidden;
  background: var(--color-chart-grid);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.player-level__fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 0.2s ease-out;
}

/* ダッシュボードのセクション */
.dash-section {
  margin-top: var(--space-12);
}

.dash-section__note {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.profile-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

@media (width >= 48rem) {
  .profile-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-form__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.profile-form__field label {
  font-weight: var(--font-weight-bold);
}

.profile-form .profile-form__field {
  margin-bottom: 0;
}

.profile-form__actions {
  display: flex;
  align-items: flex-end;
}

@media (width >= 48rem) {
  .profile-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
}

/* ランキング */
.ranking {
  width: 100%;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
}

.ranking[hidden] {
  display: none;
}

.ranking th,
.ranking td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.ranking thead th {
  font-size: var(--font-size-xs);
}

.ranking__rank {
  width: 4rem;
  font-weight: var(--font-weight-black);
  white-space: nowrap;
}

.ranking__name {
  display: block;
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.ranking__title,
.ranking__meta {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.ranking__score {
  text-align: right;
}

.ranking thead th:last-child {
  text-align: right;
}

.ranking__points {
  display: block;
  font-weight: var(--font-weight-black);
}

.ranking tbody tr:last-child th,
.ranking tbody tr:last-child td {
  border-bottom: 0;
}

/* 称号・実績 */
.achievement-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width >= 48rem) {
  .achievement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.achievement {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.achievement.is-locked {
  border-style: dashed;
  color: var(--color-text-muted);
}

.achievement p {
  margin: 0;
}

.achievement__name {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-weight: var(--font-weight-bold);
}

.achievement__text,
.achievement__meta {
  font-size: var(--font-size-xs);
}

/* キーの表示(ミス分析・苦手なキー) */
.key {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-bottom-width: 4px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: center;
}

.key-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

/* 結果 */

/* 結果の画面: 追ってくる人の、最後のセリフ */
.result__quote {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-weight: 700;
}

/* 結果の画面(アーケード風)。「RESULT」の飾りの文字(読み上げない)・黄色い大きな見出し・光るスコア */
.game-result__label {
  margin: 0 0 var(--space-2);
  color: var(--arcade-magenta);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.3em;
}

.game-result h1 {
  color: var(--arcade-yellow);
  text-shadow: 0 0 0.75rem var(--arcade-glow);
}

/* 獲得経験値・レベルアップの知らせ(保存の警告と違い、前向きな見た目。実線・アクセントの色) */
.result-exp {
  display: inline-block;
  margin: 0 var(--space-2) var(--space-4) 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.result-exp--levelup {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.result-score {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
}

.result-score strong {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
}

.game-result .result-score strong,
.result-score__roll {
  color: var(--arcade-yellow);
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-black);
  text-shadow: 0 0 0.75rem var(--arcade-glow);
}

.result-score__roll[hidden] {
  display: none;
}

/* 用語の説明(プレイ中・用語確認)。色だけに頼らず、文字の大きさで、日本語・読みより控えめにする */
.game-word__explanation {
  max-width: 34rem;
  margin: 0 auto var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

/* 用語確認: 追ってくる人・時間の部品は隠し、注意書きを出す */
.game-play__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
}

/* モードの選択・説明の設定 */
.game-setup__option {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-6);
}

/* 選択肢(select)の設定。ラベル・選択・補足を、縦に並べる */
.game-setup__option--field {
  display: grid;
  gap: var(--space-2);
  align-items: start;
}

.game-setup__option--field .game-setup__hint {
  margin: 0;
}

/* チェックボックス+ラベルの行(--field の中に、選択肢の代わりに置く。グラフィックを抑える等) */
.game-setup__checkbox-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* 音量の見出しと、いまの値 */
.game-setup__volume {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.game-setup__volume output {
  font-weight: var(--font-weight-bold);
}

/* 音量のスライダー(チェックボックス用の大きさの指定より、優先する) */
.game-setup__option .game-setup__range {
  width: 100%;
  max-width: 24rem;
  height: var(--tap-size);
  accent-color: var(--color-primary);
}

.game-setup__option input {
  flex: none;
  width: var(--tap-size);
  height: var(--tap-size);
  margin: 0;
}

/* 用語の一覧(今回ミスした語・用語確認の結果)。語・読み・説明を、並べて見せる */
.review-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.review-item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.review-item__term {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0 0 var(--space-2);
}

.review-item__japanese {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.review-item__reading {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.review-item__text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* 関連する語・くわしく(難語の詳細説明・学習ポイント) */
.review-item__related {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.review-item__more {
  margin-top: var(--space-2);
}

.review-item__more summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

/* 開閉の目印(▶ 閉じている・▼ 開いている)。文字の意味は、見出しの「くわしく」で伝わる(装飾) */
.review-item__more summary::before {
  margin-right: var(--space-2);
  font-size: var(--font-size-xs);
  content: "▶";
}

.review-item__more[open] summary::before {
  content: "▼";
}

.review-item__detail {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}

.review-item__points {
  margin-top: var(--space-3);
}

.review-item__points-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.review-item__points ul {
  margin: 0;
  padding-left: var(--space-6);
  overflow-wrap: anywhere;
}

/* 開始前の画面(Issue 173)。結果・プレイ中と同じ暗い枠。見出しは飾り(aria-hidden)で、日本語の見出しは、そのまま残る */
.game-setup {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
}

.game-setup > * {
  min-width: 0;
  margin-block: 0;
}

.game-setup__banner {
  margin: 0;
  color: var(--arcade-yellow);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 0 0.125rem 0 var(--arcade-magenta);
  overflow-wrap: anywhere;
}

.game-setup__mode > legend,
.game-setup__choice > label {
  color: var(--arcade-cyan);
}

.game-setup [data-start] {
  width: 100%;
  min-height: 3.5rem;
  font-size: var(--font-size-lg);
  letter-spacing: 0.2em;
}

/* 開始前の選択(プルダウン。前回の選択は、引き継がれる) */
.game-setup__choices {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0 0 var(--space-4);
}

.game-setup__mode {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.game-setup__mode > legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-bold);
}

.game-setup__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.game-setup__radio {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  gap: var(--space-2);
}

.game-setup__radio input {
  width: 1.25rem;
  height: 1.25rem;
}

.game-setup__choice {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.game-setup__choice > label {
  font-weight: var(--font-weight-bold);
}

.game-setup__select {
  width: 100%;
  min-height: var(--tap-size);
}

.game-setup__choice .game-setup__hint,
.game-setup__choice .game-setup__rules {
  margin: 0;
}

/* くわしい設定は、閉じておく(開始前の設定を、少なく見せる) */
.game-setup__more,
.game__rules {
  margin: 0 0 var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.game__rules > summary,
.game-setup__more > summary {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.game-setup__more[open] > summary,
.game__rules[open] > summary {
  border-bottom: var(--border-width) solid var(--color-border);
}

.game-setup__more > summary:focus-visible,
.game__rules > summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.game-setup__more > :not(summary),
.game__rules > :not(summary) {
  margin-inline: var(--space-4);
}

.game-setup__more > summary + *,
.game__rules > summary + * {
  margin-top: var(--space-4);
}

/* 準備(スペースキーで始まる)。全角の知らせは、文字と太い枠で示す(色だけに頼らない) */
.game-ready {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  text-align: center;
  background: var(--color-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* 準備の画面のキャラクターと吹き出し(飾り。aria-hidden)。絵は、場面と同じ player.svg のコマ送り */
.game-ready__talk {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.game-ready__character {
  flex: none;
  width: 4.8rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.game-ready__bubble {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-align: left;
  overflow-wrap: anywhere;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.game-ready__bubble::before {
  position: absolute;
  top: 50%;
  left: calc(var(--space-2) * -1);
  width: var(--space-3);
  height: var(--space-3);
  content: "";
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  border-left: var(--border-width) solid var(--color-border);
  transform: translateY(-50%) rotate(45deg);
}

.game-ready__bubble:empty {
  display: none;
}

/* 点滅する「PRESS SPACE KEY TO START」。1 周 1.2 秒(光の点滅を避ける)。動きを減らす設定では、見える状態で止まる */
.game-ready__press {
  margin: 0;
  color: var(--arcade-yellow);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
  animation: ready-blink 1.2s ease-in-out infinite;
}

@keyframes ready-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

.game-ready__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.game-ready__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.game-ready__notice {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-bold);
  background: var(--color-surface);
  border: calc(var(--border-width) * 2) dashed var(--color-border);
  border-radius: var(--radius-sm);
}

/* hidden 属性を、クラスの display より優先する(用語確認で隠す部品・出し入れする設定) */
[data-chase-only][hidden],
.game-setup__option[hidden],
.game-setup__choice[hidden],
.game-ready[hidden],
.game-ready__notice[hidden],
.game-word[hidden],
.review-list[hidden] {
  display: none;
}

/* 準備の間(スペースキーを押すまで)は、ステータス・ゲージ・場面を出さない(Issue 173)。「音」「やめる」は残す */
[data-play][data-ready-state] .game-status,
[data-play][data-ready-state] .gauge-block,
[data-play][data-ready-state] .scene {
  display: none;
}

/*
 * プレイ中(用語確認も含む)は、ヘッダー・フッター(ほかのページへのリンク)を隠し、ゲーム画面だけを、広く出す(Issue 166)。
 * 出口は、画面の中の「やめる」。本文へのスキップリンクは、残る。
 */
body:has([data-game] [data-view="play"]:not([hidden])) .site-header,
body:has([data-game] [data-view="play"]:not([hidden])) .site-footer {
  display: none;
}

body:has([data-game] [data-view="play"]:not([hidden])) .main {
  --container-max: 72rem;
}

/*
 * 横向き(landscape)の低い画面(スマホを横に持ったときなど)では、縦の余白・場面の高さを詰めて、
 * 入力欄が画面の外に出ないようにする(Phase 22 PR1)。並び順(距離ゲージ→場面→単語→入力欄)は変えない。
 * ファイルの末尾に置く(上にある、同じ詳細度のルールより、あとに来る必要があるため)。
 */
@media (orientation: landscape) and (height <= 32rem) {
  /*
   * この高さでは、ヘッダーの余白・.main の余白より、入力欄が見えることを優先する。
   * --header-height は tokens.css のトークン(ヘッダーの min-height に使われている)を、
   * この場面だけ上書きする(ロゴ・ハンバーガーボタン自体の大きさは変えない。詰まるのは余白だけ)。
   */
  :root {
    --header-height: var(--tap-size);
  }

  .main {
    padding-block: var(--space-1) var(--space-2);
  }

  .game-play {
    grid-template-areas:
      "hud sound quit"
      "main main main";
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-1);
    padding: var(--space-2);
  }

  .game-play__main {
    gap: var(--space-1);
  }

  .gauge {
    height: 1.5rem;
  }

  .game-status div {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
  }

  .game-status dd {
    font-size: var(--font-size-base);
  }

  .gauge__label {
    margin-top: 0;
    font-size: var(--font-size-xs);
    line-height: 1.2;
  }

  .scene {
    --chaser-w: 4.5rem;
    --player-w: 2.4rem;
    --scene-h: 3.5rem;
  }

  .game-word {
    padding: var(--space-1) var(--space-4);
  }

  .game-word::before {
    display: none;
  }

  .game-word__japanese {
    margin-bottom: 0;
    font-size: clamp(1.125rem, 4vw, 1.75rem);
    line-height: 1.1;
  }

  .game-word__reading {
    margin-bottom: 0;
    font-size: var(--font-size-xs);
    line-height: 1.3;
  }

  .game-word__romaji {
    font-size: var(--font-size-xs);
    line-height: 1.3;
  }

  .game-input {
    gap: var(--space-1);
  }

  .game-input__label {
    font-size: var(--font-size-xs);
  }

  .game-input__field {
    min-height: var(--tap-size);
  }

  .game-input__miss {
    min-height: 1.2em;
  }
}