/*
 * デモゲーム「早押しクエスト」の見た目。16 ビット機の戦闘画面のつもり。
 *
 * 検証画面（web/style.css）のトークンには依存しない自立したスタイルシート。
 * 素材は web/game/assets/（Kenney の CC0 パック + PixelMplus）。出どころは
 * web/game/assets/LICENSES.md に書いてある。
 *
 * ドット絵を潰さないため、画像を伸ばすところには必ず image-rendering: pixelated を置く。
 * 文字サイズは PixelMplus12 の素の大きさ（12px）の整数倍だけを使う。
 *
 * 縦は 1920×1080 の画面（ブラウザの UI を引いて 1920×950 とみなす）でフィールドと
 * 戦闘がスクロールなしで収まるように詰めてある。ステージの高さ（26vh）・ウィンドウの
 * 余白・「つぎへ」の大きさ・タイトル以外での footer 非表示がその調整。
 */

@font-face {
  font-family: "PixelMplus12";
  src: url("./assets/PixelMplus12-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 明るい昼の空。黒い画面にはしない。 */
  --sky-top: #8fd3ff;
  --sky-bottom: #d8f1ff;
  --ink: #3b2a1c;
  --ink-soft: #6b5947;
  --paper: #fffaf0;
  --wood: #b3a077;
  --hit: #d6453c;
  --heal: #4aa64f;
  --gold: #f0b429;
  --shadow: #2b1f16;

  --px: 12px;
}

* {
  box-sizing: border-box;
}

/* hidden 属性は必ず効かせる（.btn などの display 指定に負けないように）。 */
[hidden] {
  display: none !important;
}

html {
  background: var(--sky-bottom);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "PixelMplus12", "MS Gothic", monospace;
  font-size: var(--px);
  line-height: 2;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.18) 0 4px,
      rgb(255 255 255 / 0) 4px 8px
    ),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 62%, #eaf6d9 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

img {
  image-rendering: pixelated;
}

.cabinet {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px;
}

/* ---------- 上のバー ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.product-name {
  padding: 0 12px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 4px 4px 0 rgb(59 42 28 / 0.25);
}

.topbar-title {
  color: var(--ink);
}

/* 「トップへ」「よくある質問」「正誤判定基準ガイド」は常に隣り合わせにし、折り返すときはまとめて次の行へ落とす。
   margin-left: auto で右端に寄せる（1 行に収まらないときは次の行の右端）。 */
.topbar-links {
  display: flex;
  gap: 12px;
  margin-left: auto;
  white-space: nowrap;
}

.topbar-link,
a {
  color: #1d6fb8;
  text-decoration: none;
  border-bottom: 2px dotted currentcolor;
}

.topbar-link:hover,
a:hover {
  color: var(--hit);
}

/* ---------- 画面 ---------- */

.screen {
  display: grid;
  gap: 24px;
}

.screen[hidden] {
  display: none;
}

h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.25;
  font-weight: 400;
  text-shadow: 4px 4px 0 var(--paper);
}

h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 400;
}

.kicker {
  margin: 0;
  color: var(--hit);
  letter-spacing: 4px;
}

.pitch {
  margin: 0;
  max-width: 64ch;
  font-size: 24px;
  line-height: 1.75;
}

.pitch.small {
  font-size: var(--px);
  line-height: 2;
}

code {
  font-family: inherit;
  padding: 0 4px;
  background: rgb(255 255 255 / 0.7);
  border-bottom: 2px solid var(--wood);
}

strong,
b {
  font-weight: 400;
  color: var(--hit);
}

/* ---------- 9 スライスの部品 ---------- */

.card {
  padding: 24px;
  border-style: solid;
  border-width: 24px;
  border-image-source: url("./assets/panel-beige.png");
  border-image-slice: 12 fill;
  border-image-width: 24px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

.card > * {
  image-rendering: auto;
}

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 60px;
  padding: 6px 24px;
  font-family: inherit;
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink);
  background: none;
  border-style: solid;
  border-width: 16px;
  border-image-source: url("./assets/button.png");
  border-image-slice: 8 fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  cursor: pointer;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn:active:not(:disabled) {
  border-image-source: url("./assets/button-pressed.png");
  transform: translateY(4px);
}

.btn:disabled {
  filter: grayscale(0.6) brightness(1.1);
  cursor: not-allowed;
}

.btn .key {
  font-size: var(--px);
  line-height: 1;
  color: var(--ink-soft);
}

.btn-big {
  justify-self: start;
}

/* ---------- タイトル ---------- */

.banner {
  position: relative;
  padding: 24px 24px 0;
}

.banner-monsters {
  display: flex;
  /* ドラゴンが横に広いので、狭い画面では折り返して横スクロールを出さない。 */
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  margin-top: 12px;
}

.banner-monsters img {
  height: 140px;
  transform-origin: bottom center;
  animation: bob 1.6s steps(2, end) infinite;
}

.banner-monsters img:nth-child(2) {
  animation-delay: 0.4s;
}
.banner-monsters img:nth-child(3) {
  animation-delay: 0.8s;
}
.banner-monsters img:nth-child(4) {
  animation-delay: 1.2s;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.rules {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rules b {
  min-width: 72px;
  padding: 0 8px;
  text-align: center;
  color: var(--paper);
  background: var(--hit);
}

.title-set {
  background-clip: padding-box;
}

.voice-note:empty {
  display: none;
}

.loading {
  margin: 0;
  color: var(--ink-soft);
}

.loading.trouble {
  color: var(--hit);
}

/* ---------- 戦闘：ステージ ---------- */

.battle {
  gap: 12px;
}

.stage {
  position: relative;
  aspect-ratio: 5 / 3;
  width: 100%;
  /* 高さ 29vh（1920×950 で約 275px）。敵の絵とゲージの倍率はビューポートではなく
     ステージの実寸で決める（game.js の watchStageScale が data-scale を付ける）。
     枠込みで 270px 以上なら 2 倍、それより低い（1366×768 など）なら 1 倍。 */
  max-width: calc(29vh * 5 / 3);
  margin: 0 auto;
  background-image: url("./assets/bg-meadow.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 rgb(43 31 22 / 0.25);
  overflow: hidden;
}

.stage-hud,
.stage-foot {
  position: absolute;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 12px;
  background: rgb(255 250 240 / 0.86);
  border: 3px solid var(--ink);
  image-rendering: auto;
}

.stage-hud {
  top: 12px;
  /* 敵の絵（140px）を下の HP パネルの上に収めるぶん、上下の余白を詰めて 50px に。 */
  padding: 4px 12px;
}

/*
 * 自分の HP / MP。フィールドの `.party` と同じく 1 行に横並びにして、
 * 敵の絵に使える高さを稼ぐ（padding を詰めて全体で 48px）。
 */
.stage-foot {
  bottom: 12px;
  max-width: none;
  flex-wrap: nowrap;
  padding: 3px 12px;
}

.stage-foot .hp {
  /* 狭いステージでも折り返さないように、ゲージ側を縮ませる。 */
  min-width: 0;
}

.unit-name {
  margin: 0;
  white-space: nowrap;
}

.hp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
}

/*
 * ゲージ。bar-back.png / bar-red.png などは 36×18 px で左右のキャップが 9 px。
 * 高さ 36 px・キャップ 18 px = ぴったり 2 倍。縦横の倍率をそろえないとドット絵が潰れるので、
 * 高さを変えるときはキャップ幅も同じ倍率にすること。
 */
.hp-track {
  position: relative;
  display: block;
  flex: 1;
  height: 36px;
  border-style: solid;
  border-width: 0 18px;
  border-image-source: url("./assets/bar-back.png");
  border-image-slice: 0 9 fill;
  border-image-width: 0 18px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

/*
 * 塗りは枠の border box にぴったり重ねる（inset の左右が負なのは、絶対配置の基準が
 * 枠の padding box = キャップの内側だから）。こうすると塗りのキャップと枠のキャップが
 * 同じ位置に来るので、満タンのときに左右とも丸い端になる。
 * 残量は幅ではなく clip-path で右から削る。幅を変えるとキャップまで縮んでしまう。
 */
.hp-fill {
  position: absolute;
  inset: 0 -18px;
  border-style: solid;
  border-width: 0 18px;
  border-image-source: url("./assets/bar-red.png");
  border-image-slice: 0 9 fill;
  border-image-width: 0 18px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.28s steps(6, end);
}

.hp-player .hp-fill {
  border-image-source: url("./assets/bar-green.png");
}

.hp-value {
  white-space: nowrap;
}

.hp-value b {
  color: var(--ink);
}

/* ボス */

.boss-art {
  position: absolute;
  left: 50%;
  /*
   * 敵の絵は 4 体とも高さ 140px（元 70px の 2 倍）のキャンバスに下揃えで入っている。
   * 体格の差はキャンバスの中の位置で出しているので、どの敵も同じ高さで置ける。
   * `top` は枠の内側からの距離。HUD が 12px〜62px を使うので、その下端に付けると
   * 足元の地面は 202px。1920×950 では HP パネルの上端が 207px なので重ならない。
   */
  top: 62px;
  transform: translateX(-50%);
}

.boss-art img {
  display: block;
  /* 素材を焼いたままの原寸（最近傍 2 倍）。拡大も縮小もしないのでドットは 2×2 のまま。 */
  height: 140px;
  width: auto;
  filter: drop-shadow(0 6px 0 rgb(43 31 22 / 0.25));
  animation: boss-idle 1.4s steps(2, end) infinite;
}

@keyframes boss-idle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.boss-art.hit img {
  animation: boss-hit 0.4s steps(1, end) 3;
}

@keyframes boss-hit {
  0% {
    transform: translate(-8px, 0);
    filter: brightness(2.4) saturate(0.2);
  }
  50% {
    transform: translate(8px, 0);
    filter: none;
  }
  100% {
    transform: translate(0, 0);
  }
}

.boss-art.attack img {
  animation: boss-attack 0.32s steps(2, end) 2;
}

@keyframes boss-attack {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(16px) scale(1.08);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* ダメージ数字 */

.damage-float {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  font-size: 36px;
  line-height: 1;
  color: var(--gold);
  text-shadow:
    -3px 0 var(--shadow),
    3px 0 var(--shadow),
    0 -3px var(--shadow),
    0 3px var(--shadow);
  animation: float-up 1.1s steps(6, end) forwards;
  pointer-events: none;
}

.damage-float-player {
  left: auto;
  right: 24px;
  top: -48px;
  transform: none;
  color: #ff7a6b;
}

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translate(-50%, 12px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48px);
  }
}

.damage-float-player {
  animation-name: float-up-player;
}

@keyframes float-up-player {
  0% {
    opacity: 1;
    transform: translateY(12px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

/* ---------- 戦闘：メッセージウィンドウ ---------- */

.window {
  --win-bg: #2f5fa8;
  --win-ink: #fff9ec;
  --win-soft: #b9d0ee;
  --win-accent: #ffd34d;
  padding: 6px 24px 12px;
  color: var(--win-ink);
  background: var(--win-bg);
  border-style: solid;
  border-width: 24px;
  border-image-source: url("./assets/window.png");
  border-image-slice: 12;
  border-image-width: 24px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgb(43 31 22 / 0.2));
}

.window > * {
  image-rendering: auto;
}

.q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--win-soft);
}

.q-sep {
  width: 8px;
  height: 8px;
  background: var(--win-soft);
}

.q-gap {
  flex: 1;
}

.live b {
  color: var(--win-accent);
}

/*
 * 問題文の欄。見えない全文（.q-ghost）と読み上げ中の文字（.q-shown）を同じセルに重ねる。
 * 高さはゴーストが決めるので、出題の最初からその問題の全文が収まる高さになり、
 * 1 文字ずつ流れても、判定のあと全文を出しても、下の帯やボタンが動かない。
 * 両方とも同じ幅・同じ字で折り返すので、改行の位置もそろう。
 * min-height は短い問題でも欄が小さくなりすぎないためのもので、行の高さ（36px）の倍数にする。
 */
.question {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 4px 0;
  min-height: 72px;
  font-size: 24px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.q-ghost,
.q-shown {
  grid-area: 1 / 1;
  min-width: 0;
}

.q-ghost {
  visibility: hidden;
}

.caret {
  display: inline-block;
  width: 12px;
  height: 24px;
  margin-left: 2px;
  vertical-align: -4px;
  background: var(--win-accent);
  animation: blink 0.8s steps(1, end) infinite;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* 倍率の帯 */

.rail {
  position: relative;
  height: 24px;
  margin: 4px 0;
  background: rgb(255 255 255 / 0.12);
  border: 3px solid var(--win-ink);
}

.rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgb(255 211 77 / 0.3);
}

.rail-bands {
  position: absolute;
  inset: 0;
  display: flex;
}

.rail-bands .band {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 3px solid var(--win-ink);
  color: var(--win-soft);
}

.rail-bands .band:last-child {
  border-right: 0;
}

.rail-bands .band.live {
  color: var(--ink);
  background: var(--win-accent);
}

.rail-marker {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 4px;
  margin-left: -2px;
  background: var(--win-ink);
}

/* 押す・答える */

.action {
  display: grid;
  /* 列を minmax(0, 1fr) にして、中身の固有幅（解答欄の input など）で列が
     画面より広がらないようにする。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  justify-items: start;
}

.btn-buzz {
  width: 100%;
  min-height: 84px;
  font-size: 36px;
}

.answer {
  width: 100%;
  margin: 0;
}

.answer-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.window .btn {
  color: var(--ink);
}

.window .btn .key {
  color: var(--ink-soft);
}

/* input は size 属性ぶんの固有幅（約 280px）を持つので、幅 0 から伸ばす形にして
   狭い画面ではマイクと時計を残して縮むようにする。 */
.answer input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: 12px;
  font-family: inherit;
  font-size: 24px;
  color: var(--ink);
  background: #fff;
  border: 4px solid var(--ink);
}

.answer input:focus {
  outline: 4px solid var(--gold);
  outline-offset: 0;
}

.clock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  font-size: 36px;
  color: var(--ink);
  background: var(--win-ink);
}

.clock.urgent {
  color: var(--paper);
  background: var(--hit);
  animation: blink 0.5s steps(1, end) infinite;
}

.answer-hint {
  margin: 8px 0 0;
  color: var(--win-soft);
}

.answer-hint b {
  color: var(--win-accent);
}

/*
 * 発声で答えるボタン。解答欄の横に置く入 / 切 のトグル。
 * 画像を足さずに四角だけでマイクを描き、ドット絵の粒立ちに合わせる。
 */

.mic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 0;
  color: var(--ink-soft);
  background: var(--paper);
  border: 4px solid var(--ink);
  cursor: pointer;
}

.mic:hover:not(:disabled) {
  filter: brightness(1.06);
}

.mic:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 入れているあいだは赤く点ける（「録音中」の印を兼ねる）。 */
.mic.on {
  color: var(--win-ink);
  background: var(--hit);
}

/* 頭（12×20）・支柱（4×8）・台（20×4）の 3 つの四角でマイクにする。 */
.mic-art {
  display: block;
  width: 20px;
  height: 36px;
  background:
    linear-gradient(currentcolor 0 0) 4px 0 / 12px 20px no-repeat,
    linear-gradient(currentcolor 0 0) 8px 24px / 4px 8px no-repeat,
    linear-gradient(currentcolor 0 0) 0 32px / 20px 4px no-repeat;
}

/* 聞いているあいだだけマイクが点滅する。 */
.mic.listening .mic-art {
  animation: mic-pulse 1.1s steps(1, end) infinite;
}

@keyframes mic-pulse {
  50% {
    opacity: 0.2;
  }
}

.voice-hint {
  color: var(--win-accent);
}

.voice-hint[hidden] {
  display: none;
}

/* 判定のあとは自動で進まない。押されるまで「つぎへ」を出しておく。 */

.btn-advance {
  min-width: 240px;
  min-height: 48px;
  padding: 0 24px;
}

/* 判定 */

.verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  width: 100%;
  padding: 8px;
  color: var(--ink);
  border: 4px solid var(--ink);
  background: #f6efdd;
}

.verdict[hidden] {
  display: none;
}

.verdict.correct {
  background: #e4f7d9;
}

.verdict.close {
  background: #fdf3d4;
}

.verdict.incorrect,
.verdict.review {
  background: #fbe2dd;
}

.v-mark {
  grid-row: span 2;
  align-self: center;
  padding: 6px 12px;
  font-size: 24px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--paper);
  background: var(--ink-soft);
}

.v-mark.correct {
  background: var(--heal);
}

.v-mark.close {
  background: var(--gold);
  color: var(--ink);
}

.v-mark.incorrect,
.v-mark.review {
  background: var(--hit);
}

.v-headline {
  grid-column: 2;
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.v-detail {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
}

.answer-was {
  color: var(--ink);
}

/* 決着した問題の答え合わせ（全文と想定正解）。 */
.v-reveal {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 3px dotted var(--wood);
  /* 長い問題文でも画面からはみ出さない。 */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.v-reveal p {
  margin: 0;
}

.v-question {
  color: var(--ink);
}

.v-answer {
  color: var(--ink);
}

.v-answer b {
  margin-right: 8px;
  padding: 0 8px;
  color: var(--paper);
  background: var(--ink-soft);
}

.v-alt {
  color: var(--ink-soft);
}

.v-probe {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 3px dotted var(--wood);
  color: var(--ink-soft);
}

.v-source {
  padding: 0 8px;
  background: rgb(255 255 255 / 0.7);
  border: 2px solid var(--wood);
}

.v-prob {
  display: flex;
  align-items: center;
  gap: 6px;
}

.v-prob i {
  display: block;
  width: 72px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--wood);
}

.v-prob i span {
  display: block;
  height: 100%;
  background: var(--ink-soft);
}

.v-prob.correct i span {
  background: var(--heal);
}

.v-prob.close i span {
  background: var(--gold);
}

.v-prob.incorrect i span {
  background: var(--hit);
}

.v-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--hit);
}

/* ---------- 結果 ---------- */

.result h1 {
  color: var(--ink);
}

.result.win .kicker {
  color: var(--heal);
}

.result.lose .kicker {
  color: var(--hit);
}

.scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
}

.scoreboard > div {
  padding: 12px;
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 rgb(43 31 22 / 0.2);
}

.scoreboard dt {
  color: var(--ink-soft);
}

.scoreboard dd {
  margin: 0;
  font-size: 36px;
  line-height: 1.34;
}

.scoreboard .unit {
  margin-left: 8px;
  font-size: var(--px);
  color: var(--ink-soft);
}

.breakdown ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breakdown li {
  display: grid;
  grid-template-columns: 8em 1fr 3em;
  align-items: center;
  gap: 12px;
}

.breakdown .meter {
  display: block;
  height: 18px;
  background: #fff;
  border: 3px solid var(--ink);
}

.breakdown .meter span {
  display: block;
  height: 100%;
  background: var(--ink-soft);
}

.breakdown .correct .meter span {
  background: var(--heal);
}

.breakdown .close .meter span {
  background: var(--gold);
}

.breakdown .incorrect .meter span,
.breakdown .review .meter span {
  background: var(--hit);
}

.breakdown b {
  text-align: right;
  color: var(--ink);
}

/* 1 問ずつの表（結果画面）。 */

.records-scroll {
  max-height: 360px;
  overflow: auto;
}

.records table {
  width: 100%;
  border-collapse: collapse;
}

.records th,
.records td {
  padding: 8px;
  text-align: left;
  border-bottom: 3px dotted var(--wood);
  white-space: nowrap;
}

.records th {
  color: var(--ink-soft);
}

.records .num {
  text-align: right;
}

.records .verdict-cell.correct {
  color: var(--heal);
}

.records .verdict-cell.close {
  color: var(--gold);
}

.records .verdict-cell.incorrect,
.records .verdict-cell.review {
  color: var(--hit);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

/* ---------- 足元 ---------- */

footer {
  margin-top: 36px;
  padding-top: 12px;
  border-top: 3px dotted var(--wood);
  color: var(--ink-soft);
}

/* フィールドと戦闘では隠す。1080 の画面でスクロールを出さないため。 */
body:not([data-screen="title"]) footer {
  display: none;
}

footer p {
  margin: 0 0 4px;
  max-width: 72ch;
}

.credit {
  color: var(--ink-soft);
}

/* ---------- 問題セットのパネル（web/lib/question-set.css の上書き） ---------- */

#question-set {
  font-family: inherit;
  font-size: var(--px);
  color: var(--ink);
}

/* ---------- 狭い画面 ---------- */

/* ---------- MP ゲージ ---------- */

.gauge-name {
  min-width: 2em;
  color: var(--ink-soft);
}

.hp-mana .hp-fill {
  border-image-source: url("./assets/bar-blue.png");
}

/* ---------- タイトルの追加ぶん ---------- */

.banner-monsters .banner-hero {
  height: 64px;
  align-self: flex-end;
  animation: none;
}

.quest-brief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.brief-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brief-list li {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 12px;
  align-items: baseline;
}

.brief-list b {
  padding: 0 8px;
  text-align: center;
  color: var(--paper);
  background: var(--ink-soft);
}

.title-start {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

/* ---------- フィールド ---------- */

.map {
  gap: 12px;
}

.party {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 12px;
  background: rgb(255 250 240 / 0.86);
  border: 3px solid var(--ink);
}

.party .hp {
  min-width: 180px;
}

.quest-count {
  margin: 0;
  padding: 0 8px;
  white-space: nowrap;
  color: var(--paper);
  background: var(--hit);
}

.map-frame {
  display: flex;
  justify-content: center;
}

#map-canvas {
  display: block;
  width: 100%;
  max-width: 768px;
  height: auto;
  image-rendering: pixelated;
  background: #7fbf4f;
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 rgb(43 31 22 / 0.25);
}

.window-map {
  display: grid;
  gap: 12px;
}

.map-log {
  margin: 0;
  min-height: 36px;
  font-size: 24px;
  line-height: 1.5;
}

.map-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

/*
 * 十字ボタン。1920×1080 でフィールドをスクロールなしに収めるため、ゲージを 2 倍
 * （36 px）に戻したぶんの 12 px をここで詰めている（3 行 × 4 px）。狭い画面では
 * 指で押せる大きさを優先して 48 px に戻す。
 */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
}

.dpad-key {
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  background: none;
  border-style: solid;
  border-width: 12px;
  border-image-source: url("./assets/button.png");
  border-image-slice: 8 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  cursor: pointer;
}

.dpad-key:active {
  border-image-source: url("./assets/button-pressed.png");
}

.dpad-key.up {
  grid-area: 1 / 2;
}
.dpad-key.left {
  grid-area: 2 / 1;
}
.dpad-key.right {
  grid-area: 2 / 3;
}
.dpad-key.down {
  grid-area: 3 / 2;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.map-actions .btn {
  min-height: 48px;
  font-size: var(--px);
}

/* ---------- 戦闘のコマンド ---------- */

.commands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  width: 100%;
}

.commands[hidden] {
  display: none;
}

.cmd {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
  background: none;
  border-style: solid;
  border-width: 16px;
  border-image-source: url("./assets/button.png");
  border-image-slice: 8 fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  cursor: pointer;
}

.cmd:hover:not(:disabled) {
  filter: brightness(1.06);
}

.cmd:active:not(:disabled) {
  border-image-source: url("./assets/button-pressed.png");
  transform: translateY(4px);
}

.cmd:disabled {
  filter: grayscale(0.7) brightness(1.1);
  cursor: not-allowed;
}

.cmd .key {
  font-size: var(--px);
  line-height: 1;
  color: var(--ink-soft);
}

.cmd-fight {
  grid-column: 1 / -1;
}

.submenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  width: 100%;
}

.submenu[hidden] {
  display: none;
}

.btn-small {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px 8px;
  min-height: 48px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--px);
  line-height: 1.6;
  text-align: left;
  color: var(--ink);
  background: none;
  border-style: solid;
  border-width: 12px;
  border-image-source: url("./assets/button.png");
  border-image-slice: 8 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  cursor: pointer;
}

.btn-small:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn-small:active:not(:disabled) {
  border-image-source: url("./assets/button-pressed.png");
}

.btn-small:disabled {
  filter: grayscale(0.7) brightness(1.1);
  cursor: not-allowed;
}

.btn-small b {
  font-size: var(--px);
  color: var(--ink);
}

.spell-cost {
  padding: 0 6px;
  color: var(--paper);
  background: #2f5fa8;
}

.spell-note {
  margin: 0 0 12px;
  padding: 6px 12px;
  color: var(--ink);
  background: var(--win-accent);
  border: 3px solid var(--ink);
}

.spell-note[hidden] {
  display: none;
}

.v-mark.guard {
  background: #2f5fa8;
}

.verdict.guard {
  background: #e3ecf8;
}

/* ---------- もちもの ---------- */

.pix {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  vertical-align: -6px;
}

.bag {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgb(43 31 22 / 0.5);
}

.bag[hidden] {
  display: none;
}

.bag-sheet {
  width: min(600px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 12px 24px 24px;
  background: var(--paper);
  border-style: solid;
  border-width: 24px;
  border-image-source: url("./assets/panel-beige.png");
  border-image-slice: 12 fill;
  border-image-width: 24px;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

.bag-sheet > * {
  image-rendering: auto;
}

.bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.5;
}

.bag-close {
  min-width: 36px;
  min-height: 36px;
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  cursor: pointer;
}

.bag-part + .bag-part {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 3px dotted var(--wood);
}

.bag-part h3 {
  margin: 0 0 8px;
  font-size: var(--px);
  font-weight: 400;
  color: var(--ink-soft);
}

.bag-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bag-list li {
  display: grid;
  grid-template-columns: 24px 10em 1fr auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 8px;
  background: rgb(255 255 255 / 0.6);
  border: 2px solid var(--wood);
}

.bag-list li.empty {
  color: var(--ink-soft);
  filter: grayscale(0.7);
}

.bag-note {
  color: var(--ink-soft);
}

.bag-count {
  white-space: nowrap;
}

.bag-hint {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

.gear-row {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

.gear-slot {
  padding: 0 8px;
  text-align: center;
  color: var(--paper);
  background: var(--ink-soft);
}

.gear-choices {
  display: grid;
  gap: 8px;
}

.gear-pick.worn {
  border-image-source: url("./assets/button-pressed.png");
  outline: 3px solid var(--gold);
}

/*
 * ステージが低いとき（枠込み 270px 未満）の 1 倍表示。data-scale は game.js の
 * watchStageScale がステージの実寸を測って付ける。ドット絵は整数倍しか使わないので、
 * 敵の絵は 140px → 70px、ゲージは高さ 36px → 18px・キャップ 18px → 9px と、
 * どれもちょうど半分にする。
 */
.stage[data-scale="1"] .stage-hud,
.stage[data-scale="1"] .stage-foot {
  left: 6px;
  right: 6px;
  padding: 4px 8px;
}

.stage[data-scale="1"] .stage-foot {
  padding: 2px 8px;
}

.stage[data-scale="1"] .hp {
  min-width: 96px;
}

.stage[data-scale="1"] .hp-track {
  height: 18px;
  border-width: 0 9px;
  border-image-width: 0 9px;
}

.stage[data-scale="1"] .hp-fill {
  inset: 0 -9px;
  border-width: 0 9px;
  border-image-width: 0 9px;
}

/* ステージの高さは画面ごとに違うので、上からではなく下の HP パネル
   （下端から 12px、高さ 34px）を基準にして、その 6px 上に足元が来るように置く。 */
.stage[data-scale="1"] .boss-art {
  top: auto;
  bottom: 52px;
}

.stage[data-scale="1"] .boss-art img {
  height: 70px;
}

@media (max-width: 640px) {
  .cabinet {
    padding: 8px 8px 24px;
  }

  h1 {
    font-size: 36px;
  }

  .pitch {
    font-size: var(--px);
    line-height: 2;
  }

  .banner-monsters img {
    height: 70px;
  }

  .banner-monsters {
    gap: 12px;
  }

  .stage {
    max-width: calc(38vh * 5 / 3);
    max-height: 38vh;
    border-width: 3px;
  }

  /* フィールドのゲージは狭い画面では 1 倍（高さ 18 px・キャップ 9 px）。縦横の倍率をそろえる。
     戦闘のゲージはステージの実寸で決める（下の .stage[data-scale="1"]）。 */
  .party .hp-track {
    height: 18px;
    border-width: 0 9px;
    border-image-width: 0 9px;
  }

  .party .hp-fill {
    inset: 0 -9px;
    border-width: 0 9px;
    border-image-width: 0 9px;
  }

  .window {
    padding: 8px 12px 12px;
    border-width: 12px;
    border-image-width: 12px;
  }

  /* 狭い画面では 1 行の字数が少ないので、最低 3 行ぶん（36px × 3）取っておく。 */
  .question {
    min-height: 108px;
  }

  .card {
    padding: 12px;
  }

  .btn {
    font-size: 24px;
  }

  .btn-buzz {
    min-height: 72px;
    font-size: 24px;
  }

  .verdict {
    grid-template-columns: 1fr;
  }

  .v-mark {
    grid-row: auto;
    justify-self: start;
  }

  .v-headline,
  .v-detail {
    grid-column: 1;
  }

  .breakdown li {
    grid-template-columns: 6em 1fr 2.5em;
    gap: 8px;
  }
  .map-log {
    font-size: var(--px);
    line-height: 2;
    min-height: 60px;
  }

  .dpad {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
  }

  .map-controls {
    justify-content: center;
  }

  .commands {
    grid-template-columns: repeat(2, 1fr);
  }

  .cmd {
    min-height: 52px;
    font-size: var(--px);
    border-width: 12px;
    border-image-width: 12px;
  }

  .submenu {
    grid-template-columns: 1fr;
  }

  .party .hp {
    min-width: 120px;
  }

  .bag-sheet {
    padding: 8px 12px 12px;
    border-width: 12px;
    border-image-width: 12px;
  }

  .bag-list li {
    grid-template-columns: 24px 1fr auto;
  }

  .bag-list .bag-note {
    grid-column: 1 / -1;
  }

  .bag-list .btn-small {
    justify-self: end;
    justify-content: center;
    min-height: 40px;
    min-width: 7em;
  }

  .gear-row {
    grid-template-columns: 1fr;
  }

  .brief-list li {
    grid-template-columns: 5em 1fr;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}