/* Adventure / RPG presentation. Study-mode styles live in styles.css; sprite
   playback and battle effects live in fx.css. Pixel look comes from frames,
   panels, sprites and buttons — vocabulary stays in a readable Japanese font. */
@font-face {
  font-family: "PressStart";
  src: url("assets/fonts/press-start-2p-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --px: 3;
  --b: 3px;
  --pixel-font: "PressStart", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", monospace;
  --read-font: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --ink: #0e1024;
  --night: #10132a;
  --win-top: #4056cc;
  --win-mid: #2a38a4;
  --win-low: #1a226a;
  --edge: #f4f1ea;
  --edge-dim: #9aa6e8;
  --gold: #ffd35a;
  --gold-deep: #f28a2e;
  --red: #d8413a;
  --hp: #54c46a;
  --hp-low: #f2b33c;
  --hp-danger: #e0503f;
  --violet: #7a4cc0;
  --ok: #9be26a;
  --bad: #ff8a7a;
}

/* ---------------------------------------------------------------- pixel UI */
.px-font { font-family: var(--pixel-font); font-weight: 400; letter-spacing: 0; }
/* SNES-style window: vertical blue gradient, white frame, inner light bevel, dark outer ring. */
.px-panel {
  background: linear-gradient(180deg, var(--win-top) 0%, var(--win-mid) 38%, var(--win-low) 100%);
  color: #fff;
  border: var(--b) solid var(--edge);
  border-radius: 0;
  box-shadow: 0 0 0 var(--b) var(--ink), inset 0 0 0 2px var(--edge-dim), inset 0 calc(var(--b) * -2) 0 2px #0b103f55;
}
.px-button {
  font-family: var(--pixel-font);
  font-weight: 400;
  border-radius: 0;
  border: var(--b) solid var(--edge);
  box-shadow: 0 0 0 var(--b) var(--ink), inset 0 calc(var(--b) * -2) 0 0 #0005, inset 0 2px 0 0 #ffffff40;
  background: linear-gradient(180deg, #9a6be0, var(--violet) 55%, #5d379c);
  color: #fff;
  line-height: 1.5;
  text-shadow: 2px 2px 0 #0008;
}
.px-button:hover:not(:disabled) { filter: brightness(1.12); }
.px-button:active:not(:disabled) { box-shadow: 0 0 0 var(--b) var(--ink), inset 0 var(--b) 0 0 #0006; translate: 0 2px; }
.px-button.secondary { background: linear-gradient(180deg, #56608f, #3b4470 60%, #2c3358); color: #fff; }
.px-button:disabled { opacity: 1; filter: saturate(.3) brightness(.75); cursor: default; }
.px-button:focus-visible, .battle-skill:focus-visible, .battle-enemy:focus-visible, .hero-card:focus-visible {
  outline: 4px solid var(--gold); outline-offset: 5px;
}
.px-icon {
  display: inline-block; flex: none; vertical-align: middle;
  width: calc(var(--fw) * var(--icon, 2) * 1px); height: calc(var(--fh) * var(--icon, 2) * 1px);
  background-size: 100% 100%; image-rendering: pixelated; image-rendering: crisp-edges;
}
.music-toggle { min-height: 44px; padding: .35rem .8rem; font-size: 11px; white-space: nowrap; }
.music-toggle--off { color: #c6cbe0; }

/* --------------------------------------------------------------- AP meter */
.ap-slot { display: block; min-width: 1px; }
.ap-meter {
  position: relative; justify-self: center; display: grid; justify-items: stretch; gap: 3px;
  width: min(460px, 100%); padding: 5px 14px 7px;
  background: linear-gradient(180deg, #2b2f6e, #181b48);
  border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink), inset 0 0 0 2px #6c78d6;
}
.ap-meter__label { display: flex; justify-content: center; align-items: baseline; gap: 10px; line-height: 1.2; }
.ap-meter__title { font-family: var(--pixel-font); font-size: 11px; color: var(--gold); letter-spacing: 1px; }
.ap-meter__ja { font-family: var(--read-font); font-size: .8rem; font-weight: 800; color: #e6e9ff; }
.ap-meter__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ap-meter__track {
  position: relative; height: 22px; overflow: hidden;
  background: #120f2c; border: var(--b) solid var(--ink); box-shadow: 0 0 0 2px var(--edge);
}
.ap-meter__fill, .ap-meter__trail { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.ap-meter__fill {
  background: linear-gradient(180deg, #fff6c2 0 22%, #ffd35a 22% 60%, #f5a132 60% 84%, #d9782a 84%);
  transition: width 500ms ease;
}
.ap-meter__fill::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: #fffbe6; opacity: .9; }
.ap-meter__trail { background: #ff6b5a; transition: width 500ms ease 320ms; }
.ap-meter__notches { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), #120f2c calc(10% - 3px) 10%); pointer-events: none; }
.ap-meter--instant .ap-meter__fill, .ap-meter--instant .ap-meter__trail { transition: none; }
.ap-meter__value { font-family: var(--pixel-font); font-weight: 400; font-size: 14px; color: #fff; white-space: nowrap; }
.ap-meter__value b { font-weight: 400; font-size: 22px; color: var(--gold); }
.ap-meter--empty .ap-meter__value b { color: var(--bad); }
.ap-meter__delta {
  position: absolute; right: -6px; top: calc(100% - 4px); z-index: 3; padding: 2px 6px; font-family: var(--pixel-font); font-size: 12px; opacity: 0; pointer-events: none;
  background: var(--ink); border: 2px solid var(--edge);
}
.ap-meter__delta--gain { color: var(--gold); }
.ap-meter__delta--spend { color: var(--bad); }
.ap-meter__delta--show { animation: ap-delta .9s steps(6) forwards; }
@keyframes ap-delta { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -8px; } }
.ap-meter--gain .ap-meter__fill { animation: ap-glow .6s steps(3); }
@keyframes ap-glow { 50% { filter: brightness(1.5); } }
.ap-meter--recovering { box-shadow: 0 0 0 var(--b) var(--ink), inset 0 0 0 2px #7fd4ff; animation: ap-recover 1s steps(2) infinite; }
@keyframes ap-recover { 50% { box-shadow: 0 0 0 var(--b) #1f5f84, inset 0 0 0 2px #c8f0ff; } }
.ap-meter--deny { animation: ap-deny .3s steps(4); }
@keyframes ap-deny { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* ----------------------------------------------------------- RPG top bar */
.rpg-topbar { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 12px; width: 100%; }
.rpg-topbar__menu { justify-self: start; min-height: 44px; padding: .35rem .9rem; font-size: 11px; white-space: nowrap; }
.rpg-topbar__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.rpg-topbar .ap-meter { width: min(460px, 46vw); }

/* ------------------------------------------------------------ RPG quiz */
/* A training scene under a thin top strip: the stage backdrop is the sky and
   horizon, a matching floor tile fills everything below it. The scene is one
   line, HERO | WORD | DUMMY on roughly 31 / 38 / 31 columns, centred between
   the banner and the answer; the hero's status stands under the hero and the
   answer is centred a short way below the scene. --px scales the backdrop tiles,
   --apx the hero, the dummy and the strike effects. */
.app.rpg-quiz-app { width: 100%; max-width: none; min-height: 100vh; padding: 8px 12px 10px; align-content: start; background: var(--night); }
.rpg-quiz { width: min(1680px, 100%); height: calc(100vh - 18px); min-height: 560px; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.rpg-quiz .rpg-topbar .ap-meter { padding-block: 3px 5px; }
.rpg-field {
  --px: 3; --apx: 5; --word-max: clamp(3rem, 7vw, 6.5rem); --field-sky: #8fd0f2;
  position: relative; display: grid; min-height: 0; overflow: hidden; isolation: isolate;
  /* banner | space | scene | space | answer | space: the scene takes its own
     height and the three spaces share what is left 1 : 1 : 1.3, so the scene is
     centred between the banner and the answer and the answer sits closer to the
     scene than to the bottom edge. */
  grid-template-rows: auto minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr) auto minmax(0, 1.3fr);
  background: var(--field-sky); border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink);
}
.rpg-quiz.stage-2 .rpg-field { --field-sky: #f2b88a; }
.rpg-quiz.stage-3 .rpg-field { --field-sky: #2e3350; }
.rpg-quiz.stage-4 .rpg-field { --field-sky: #3a2350; }
.rpg-field__sky, .rpg-field__ground { position: absolute; left: 0; right: 0; z-index: -1; background-position: center top; image-rendering: pixelated; }
.rpg-field__sky { top: 0; height: calc(112px * var(--px)); background-repeat: repeat-x; background-size: calc(192px * var(--px)) calc(112px * var(--px)); }
.rpg-field__ground { top: calc(112px * var(--px)); bottom: 0; background-repeat: repeat; background-size: calc(var(--sw) * var(--px) * 1px) calc(var(--sh) * var(--px) * 1px); }

/* stage / mode / count: readable from the back of a classroom (the mode most of
   all), but plain and translucent so the word stays the first thing seen */
.rpg-field__hud {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 6px 10px 0; padding: 6px 14px;
  background: linear-gradient(90deg, #0e102499, #0e102466 50%, #0e102499); color: #fff;
}
.rpg-field__stage, .rpg-field__count { font-family: var(--pixel-font); color: var(--gold); white-space: nowrap; text-shadow: 2px 2px 0 var(--ink); }
.rpg-field__stage { font-size: clamp(17px, 1.6vw, 22px); }
.rpg-field__count { font-size: clamp(14px, 1.3vw, 18px); color: #fff; }
.rpg-field__mode { min-width: 0; font-family: var(--read-font); font-weight: 900; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; text-align: center; overflow-wrap: anywhere; text-shadow: 2px 2px 0 var(--ink); }

.rpg-field__hud { grid-row: 1; }
.rpg-field__arena { grid-row: 3; }
.rpg-field__bottom { grid-row: 5; }

/* The scene: the hero and the dummy share a ground line, the hero's status
   under the hero. The word column spans both rows and centres the word itself
   on them; the speaker and any audio error hang below it. */
.rpg-field__arena {
  position: relative; min-height: 0; display: grid; column-gap: 1%; padding-inline: 1%;
  grid-template-columns: minmax(0, 31fr) minmax(0, 38fr) minmax(0, 31fr);
  grid-template-rows: auto auto;
  grid-template-areas: "hero prompt dummy" "stats prompt .";
}
/* The actors (and their strike effects) draw at 90% of --apx, a little smaller
   than the integer steps allow, so the word and its plate lead the scene.
   The sprites are pixelated backgrounds, so they stay hard-edged. */
.rpg-field__hero, .rpg-field__dummy { --px: calc(var(--apx) * .9); z-index: 2; display: flex; justify-self: center; align-self: end; }
.rpg-field__hero { grid-area: hero; }
.rpg-field__dummy-wrap { grid-area: dummy; position: relative; display: flex; justify-self: center; align-self: end; }
.rpg-field__dummy.is-hit { animation: dummy-shake .42s steps(6); }
@keyframes dummy-shake { 20% { translate: 7px 0; rotate: 4deg; } 45% { translate: -4px 0; rotate: -3deg; } 70% { translate: 3px 0; rotate: 1deg; } 100% { translate: 0; rotate: 0deg; } }
.rpg-field__prompt { --plate-x: clamp(14px, 5cqi, 34px); grid-area: prompt; z-index: 3; container-type: inline-size; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; row-gap: 10px; min-width: 0; }
.rpg-field__prompt > :first-child { grid-row: 2; }
.rpg-field__under { grid-row: 3; align-self: start; display: grid; justify-items: center; gap: 8px; }
/* A quiet translucent plate behind a visible word: steady contrast on every
   stage backdrop. It sizes to the word, from about half the column to all of it. */
.rpg-field__word-plate {
  box-sizing: border-box; min-width: min(100%, 46cqi); max-width: 100%; display: grid; justify-items: center;
  padding: clamp(4px, 1.2cqi, 10px) var(--plate-x) clamp(7px, 1.8cqi, 14px);
  background: linear-gradient(180deg, #1a1e44b0, #0e1024a8); border: 2px solid #ffffff24; box-shadow: inset 0 2px 0 #ffffff14, 0 0 0 2px #0e102440;
}
/* The word fills the plate on one line (see promptWord) up to --word-max, never below 2.4rem. */
.rpg-field__word {
  max-width: 100%; font-family: var(--read-font); font-weight: 900; line-height: 1.05; text-align: center; color: #fff; word-break: keep-all; overflow-wrap: normal;
  font-size: clamp(2.4rem, calc((98cqi - 2 * var(--plate-x) - 4px) / var(--ems, 4)), var(--word-max));
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 5px 6px 0 #0e102488;
}
.rpg-speaker { flex: none; min-width: 52px; min-height: 48px; padding: 0 .4rem; font-size: 1.6rem; line-height: 1; }
.rpg-speaker--big { min-width: 112px; min-height: 92px; font-size: 3.2rem; }
.rpg-field__listen { font-family: var(--read-font); font-weight: 900; font-size: 1.5rem; color: #fff; text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 3px 3px 0 var(--ink); }
/* Centred over the dummy column; centring uses transform because px-bob animates translate. */
.rpg-field__streak { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; z-index: 3; padding: 4px 10px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); font-family: var(--pixel-font); font-size: 11px; animation: px-bob .6s steps(2) infinite; }
.rpg-field .px-fx { --px: calc(var(--apx) * .9); z-index: 4; }
/* The mage's bolt crosses the word's line: it passes behind the word, never over it. */
.rpg-field .px-proj { z-index: 2; }

/* The hero's status is a flat nameplate under the hero, not a card: name and
   level, then HP and potions on one line, on a strip that fades out at the ends. */
.rpg-nameplate {
  display: grid; grid-template-columns: auto auto; align-items: center; justify-items: center; gap: 2px 10px; max-width: 100%; padding: 2px 24px 3px;
  background: linear-gradient(90deg, transparent, #0e10249c 18% 82%, transparent); border-block: 1px solid; border-image: linear-gradient(90deg, transparent, #ffffff2e 22% 78%, transparent) 1;
  color: #fff; text-shadow: 2px 2px 0 var(--ink);
}
.rpg-field__stats { grid-area: stats; justify-self: center; align-self: start; z-index: 2; margin-top: 4px; }
.rpg-nameplate strong { grid-column: 1 / -1; font-family: var(--pixel-font); font-weight: 400; font-size: 10px; color: var(--gold); white-space: nowrap; }
.rpg-nameplate .rpg-hp { width: clamp(132px, 12vw, 180px); font-size: 9px; }
.rpg-field__potions { display: flex; align-items: center; gap: 4px; font-family: var(--pixel-font); font-size: 9px; --icon: 1.5; }

/* The answer, centred under the scene. A fixed height per input type, so
   answering never moves the hero, the word or the dummy. */
.rpg-field__bottom { display: grid; justify-items: center; align-items: start; height: 108px; padding: 0 12px 10px; }
.rpg-field--enSpeech .rpg-field__bottom { height: 140px; }
.rpg-field--choices .rpg-field__bottom { height: 186px; }
.rpg-field--enSpeech .rpg-field__answer:not(.is-answered), .rpg-field--choices .rpg-field__answer:not(.is-answered) { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.rpg-field--choices .rpg-field__answer .choices { grid-template-columns: 1fr 1fr; gap: 8px; }
.rpg-field__answer:not(.is-answered) > .feedback:empty { display: none; }
.rpg-field__answer { width: min(680px, 100%); margin: 0; gap: 8px; padding: 10px 12px; background: #0e1024cc; border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink); }
/* Typed answers: a labelled answer slot about 430–470px wide beside its button. */
.rpg-field__answer:has(> .rpg-answer__slot) { width: auto; max-width: 100%; grid-template-columns: minmax(0, clamp(240px, 42vw, 470px)) auto; padding-top: 14px; }
.rpg-field__answer > .feedback { order: 3; grid-column: 1 / -1; text-align: center; }
.rpg-field__answer > .choices, .rpg-field__answer > .mic { order: 1; }
.rpg-field__answer > .secondary { order: 2; }
.rpg-field__answer.is-answered { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rpg-field__answer.is-answered > .feedback { order: 0; grid-column: auto; text-align: left; }
.rpg-field__note { order: 4; font-family: var(--read-font); font-weight: 800; color: #fff4b0; font-size: .95rem; text-align: center; grid-column: 1 / -1; }
.rpg-field__prompt .audio-error { padding: 2px 10px; background: #0e1024cc; color: #ffb3a8; font-family: var(--read-font); font-weight: 800; font-size: .95rem; text-align: center; }
.rpg-answer { margin-top: 0; }
.rpg-answer .feedback { min-height: 1.5rem; font-family: var(--read-font); font-size: 1.25rem; font-weight: 900; color: #e6e9ff; }
.rpg-answer .feedback.correct { color: var(--ok); }
.rpg-answer .feedback.wrong { color: var(--bad); }
/* The answer slot: a dark recessed field with a thin pixel outline, the typed
   answer centred in cream, and a こたえ / ANSWER tab set into its top edge. */
.rpg-answer__slot { position: relative; display: grid; min-width: 0; }
.rpg-answer__label {
  position: absolute; left: 50%; top: 0; z-index: 1; translate: -50% -55%; padding: 0 10px 1px; white-space: nowrap; pointer-events: none;
  background: var(--ink); border: 2px solid #ffd35a8c; font-family: var(--read-font); font-weight: 900; font-size: .9rem; line-height: 1.35; letter-spacing: .04em; color: var(--gold);
}
.rpg-answer input {
  min-height: 66px; padding: 10px 16px 6px; font-family: var(--read-font); font-weight: 700; font-size: 1.9rem; text-align: center; color: #fff6dc; caret-color: var(--gold);
  background: linear-gradient(180deg, #070818, #1a1f48); border: 2px solid #c9cdf0b3; border-radius: 0; box-shadow: inset 0 4px 0 #00000080, 0 0 0 2px var(--ink);
}
.rpg-answer input:focus-visible { outline: none; border-color: var(--gold); box-shadow: inset 0 4px 0 #00000080, 0 0 0 2px var(--ink), 0 0 12px 2px #ffd35a59; }
.rpg-answer .px-button { min-height: 56px; font-size: 14px; }
.rpg-answer .choices .px-button { font-family: var(--read-font); font-weight: 900; font-size: 1.5rem; text-align: left; padding: .4rem 1rem; min-height: 52px; }
.rpg-answer .mic { font-family: var(--read-font); font-weight: 900; font-size: 1.4rem; }
.rpg-answer .secondary.px-button { font-family: var(--read-font); font-weight: 800; font-size: 1.05rem; }

.rpg-hp { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 6px; font-family: var(--pixel-font); font-size: 10px; }
.rpg-hp b { font-weight: 400; color: var(--gold); }
.rpg-hp__track { height: 10px; background: #3a2a3a; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--edge); }
.rpg-hp__fill { display: block; height: 100%; background: var(--hp); }
.rpg-hp--low .rpg-hp__fill { background: var(--hp-low); }
.rpg-hp--danger .rpg-hp__fill { background: var(--hp-danger); }

/* ------------------------------------------------------------------ battle */
.battle-app { width: 100%; max-width: none; height: 100vh; min-height: 600px; padding: 8px; grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; background: var(--night); }
.battle-host, .battle-view { width: 100%; height: 100%; min-height: 0; }
.battle-view {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px;
  width: min(1400px, 100%); margin: 0 auto; padding: 4px 10px 10px; overflow: hidden; color: #fff;
}
.battle-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.battle-exit { justify-self: start; min-height: 44px; padding: .35rem 1rem; font-size: 11px; }
.battle-topbar .ap-meter { width: min(460px, 44vw); }
.battle-topbar__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.battle-round { padding: 8px 14px; font-family: var(--pixel-font); font-size: 12px; }

.battle-field {
  position: relative; display: grid; grid-template-columns: minmax(170px, .55fr) minmax(300px, 1.8fr); align-items: end; gap: 10px;
  min-height: 0; padding: 0 18px calc(var(--px) * 5px); overflow: hidden;
  background-repeat: repeat-x; background-position: left bottom;
  background-size: calc(192px * var(--px)) calc(112px * var(--px));
  image-rendering: pixelated; image-rendering: crisp-edges;
  border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink);
}
.battle-view.stage-1 .battle-field { background-color: #8fd0f2; }
.battle-view.stage-2 .battle-field { background-color: #f2b88a; }
.battle-view.stage-3 .battle-field { background-color: #373d5e; }
.battle-view.stage-4 .battle-field { background-color: #3a2350; }
.battle-light { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.battle-hero { position: relative; z-index: 2; display: grid; justify-items: center; align-content: end; min-width: 0; }
.battle-art-wrap { position: relative; display: grid; justify-items: center; align-items: end; }
.battle-hero .px-fx-barrier { position: absolute; left: 50%; top: auto; bottom: calc(var(--px) * -2px); transform: translateX(-50%); }
.battle-view--recovering .battle-hero .px-sprite { filter: saturate(.6) brightness(.9); }
.battle-enemies { position: relative; z-index: 2; display: flex; justify-content: space-evenly; align-items: end; gap: 6px; min-width: 0; padding-bottom: calc(var(--px) * 1px); }
.battle-enemy {
  position: relative; display: grid; justify-items: center; align-content: end; gap: 3px;
  min-width: 0; min-height: 0; height: auto; padding: 0 2px; background: transparent; color: #fff; border: 0; border-radius: 0; box-shadow: none;
}
.battle-enemy:disabled { opacity: 1; }
/* A defeated enemy leaves nothing behind: its slot stays for layout but nothing is drawn. */
.battle-enemy--gone { visibility: hidden; pointer-events: none; }
.battle-enemy--pending { visibility: hidden; }
/* Name plate and intents may sit over the transparent rows at the top of a sprite frame. */
.battle-enemy .px-sprite { margin-top: calc(var(--top, 0) * var(--px) * -1px); }
.battle-enemy--defeated .battle-enemy__plate, .battle-enemy--defeated .battle-cues, .battle-enemy--defeated .battle-target-marker { visibility: hidden; }
.battle-target-marker { visibility: hidden; height: 22px; --icon: 2; }
.battle-target-marker .px-icon { transform: rotate(90deg); animation: px-bob .6s steps(2) infinite; }
@keyframes px-bob { 50% { translate: 0 4px; } }
.battle-enemy--selected .battle-target-marker { visibility: visible; }
.battle-enemy__plate { display: grid; gap: 3px; width: 100%; min-width: 132px; max-width: 210px; padding: 4px 8px 5px; text-align: center; }
.battle-enemy--selected .battle-enemy__plate { border-color: var(--gold); }
/* A long English + Japanese name breaks between the two instead of spilling out of the plate. */
.battle-enemy__name { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px; font-family: var(--read-font); font-weight: 900; font-size: .85rem; line-height: 1.1; }
.battle-enemy__name small { font-weight: 600; font-size: .75rem; opacity: .9; white-space: nowrap; }
.battle-cues { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-height: 28px; max-width: 270px; }
.battle-intent {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 8px 2px 4px;
  background: #fffbe8; color: var(--ink); border: var(--b) solid var(--ink);
  font-family: var(--read-font); font-size: .8rem; font-weight: 900; line-height: 1.1; white-space: nowrap; --icon: 2;
}
.battle-intent--heavy { background: var(--red); color: #fff; animation: px-blink .7s steps(2) infinite; }
@keyframes px-blink { 50% { background: #8e2436; } }
.battle-intent--support { background: #d8f7c8; }
.battle-intent--charge { background: var(--gold); }

.battle-hp { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-family: var(--pixel-font); font-size: 10px; }
.battle-hp__label { color: var(--gold); }
.battle-hp__track { height: calc(var(--b) * 4); border: var(--b) solid var(--ink); background: #3a2a3a; box-shadow: 0 0 0 2px var(--edge); }
.battle-hp__track span { display: block; height: 100%; background: var(--hp); box-shadow: inset 0 var(--b) 0 0 #ffffff55; transition: width .25s steps(5); }
.battle-hp--low .battle-hp__track span { background: var(--hp-low); }
.battle-hp--danger .battle-hp__track span { background: var(--hp-danger); }
.battle-hp strong { font-weight: 400; white-space: nowrap; }

.battle-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 2px solid var(--ink); background: #eef2f8; color: var(--ink); font-family: var(--read-font); font-size: .74rem; font-weight: 900; white-space: nowrap; --icon: 2; }
.battle-status--combo, .battle-status--counter, .battle-status--opening { background: var(--gold); }
.battle-status--charge, .battle-status--angry { background: var(--red); color: #fff; }
.battle-status--guard { background: #b8d4ff; }
.battle-status--tired { background: #c9d2e8; }

.battle-lower { display: grid; grid-template-columns: minmax(210px, 250px) 1fr; gap: 10px 12px; align-items: stretch; }
.battle-message-box { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 6px 16px; }
.battle-message { font-family: var(--pixel-font); font-size: 15px; line-height: 1.5; }
.battle-hint { font-family: var(--read-font); color: var(--gold); font-size: 1.15rem; font-weight: 900; white-space: nowrap; }
.battle-hint--danger { color: #fff; background: var(--red); padding: 2px 10px; border: 2px solid var(--edge); animation: px-blink .7s steps(2) infinite; }
.battle-hero-panel { display: grid; align-content: center; gap: 6px; padding: 8px 12px; }
.battle-hero-panel h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--pixel-font); font-weight: 400; font-size: 13px; color: var(--gold); }
.battle-hero-panel h2 small { font-family: var(--read-font); font-size: .85rem; font-weight: 700; color: #fff; }
.battle-level { margin-left: auto; padding: 2px 6px; background: var(--ink); color: #fff; font-size: 10px; border: 2px solid var(--edge-dim); }
.battle-hero-panel .battle-hp { font-size: 12px; }
.battle-statuses { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; }

.battle-skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .62fr); gap: 12px; padding: 12px 3px 3px; }
.battle-skills--items { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.battle-skill {
  position: relative; min-width: 0; min-height: 76px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 16px 8px 8px; text-align: left; background: linear-gradient(180deg, var(--win-top), var(--win-mid) 55%, var(--win-low)); --icon: 2;
}
.battle-skill--defense { background: linear-gradient(180deg, #3d78a8, #2d5a86 55%, #1f3f63); }
.battle-skill--items { background: linear-gradient(180deg, #3f9e56, #2e7a41 55%, #1f5a2f); }
.battle-skill--item { background: linear-gradient(180deg, #3f9e56, #2e7a41 55%, #1f5a2f); }
.battle-skill:disabled { background: #3a3d52; color: #aab0c4; filter: none; }
.battle-skill:disabled .px-icon { filter: grayscale(1) brightness(.8); }
.battle-skill kbd { display: grid; place-items: center; min-width: 26px; height: 28px; padding: 0 4px; background: var(--edge); color: var(--ink); border: 2px solid var(--ink); font-family: var(--pixel-font); font-size: 12px; text-shadow: none; }
.battle-skill__name { display: grid; gap: 4px; min-width: 0; font-family: var(--pixel-font); font-size: 11px; line-height: 1.3; text-transform: uppercase; }
.battle-skill__name small { font-family: var(--read-font); font-weight: 700; font-size: .8rem; text-transform: none; text-shadow: none; white-space: nowrap; }
.battle-skill__cost {
  position: absolute; top: -13px; right: 8px; display: flex; align-items: center; gap: 3px; padding: 2px 6px;
  background: var(--ink); color: var(--gold); border: 2px solid var(--edge); font-family: var(--pixel-font); font-size: 10px; text-shadow: none;
}
.battle-skill__cost i { display: inline-block; width: 6px; height: 8px; background: var(--gold); box-shadow: inset 0 -2px 0 var(--gold-deep); }
.battle-skill__cost i:last-of-type { margin-right: 3px; }
.battle-skill__cost--short { color: var(--bad); }
.battle-skill__cost--short i { background: #6b5a5a; box-shadow: none; }
.battle-skill__cost--locked { color: #fff; }
.battle-skill__why { position: absolute; left: 8px; bottom: -11px; padding: 0 5px; background: var(--ink); color: var(--bad); border: 2px solid #6b2a2a; font-family: var(--read-font); font-size: .72rem; font-weight: 800; text-shadow: none; }
/* COMBO / OPENING / COUNTER: the extra damage this skill would get right now. */
.battle-skill__bonus {
  position: absolute; top: -13px; left: 8px; padding: 2px 6px;
  background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font-family: var(--pixel-font); font-size: 11px; text-shadow: none;
}
.battle-skill--hint { outline: 5px solid var(--gold); outline-offset: 3px; animation: px-hint .7s steps(2) infinite; }
@keyframes px-hint { 50% { outline-color: #fff4b0; } }

.battle-floater {
  position: absolute; z-index: 8; left: 50%; top: 22%; pointer-events: none; white-space: nowrap;
  font-family: var(--pixel-font); font-size: 22px; line-height: 1;
  color: #fff; translate: -50% 0;
  text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 3px 3px var(--ink), -3px 3px var(--ink), 3px -3px var(--ink), -3px -3px var(--ink);
  animation: px-float .5s steps(5) forwards;
}
.battle-floater--damage { color: #fff; font-size: 28px; }
.battle-floater--hurt { color: #ff6b5a; font-size: 28px; }
.battle-floater--heal { color: var(--ok); }
.battle-floater--shield { color: #9ff3ee; }
.battle-floater--power { color: var(--gold); }
.battle-floater--status { color: var(--gold); font-size: 18px; }
.battle-floater--ally { color: #9fd8ff; font-family: var(--read-font); font-weight: 900; font-size: 20px; }

/* Horde waves and the guest ally. The next wave's enemies stay hidden until its
   waveStart plays; the Horde in reserve stands as dark silhouettes on the horizon. */
.battle-enemy--incoming { display: none; }
.battle-enemy--enter { animation: horde-enter .6s steps(6) both; }
@keyframes horde-enter { from { translate: 60% -6%; opacity: 0; filter: brightness(0); } 60% { opacity: 1; filter: brightness(.4); } to { translate: 0 0; filter: none; } }
.battle-reserve { position: absolute; right: 2%; bottom: 34%; z-index: 1; display: flex; flex-direction: row-reverse; align-items: end; transform: scale(.5); transform-origin: right bottom; pointer-events: none; filter: brightness(0) drop-shadow(0 0 2px #7a3ad0); opacity: .55; }
.battle-reserve__unit { margin-left: -14%; }
.battle-reserve__unit:nth-child(2n) { translate: 0 8%; }
.battle-reserve .px-sprite { animation-play-state: paused !important; }
.battle-field--ally { grid-template-columns: minmax(250px, .85fr) minmax(300px, 1.6fr); }
.battle-field--ally .battle-hero { justify-items: end; }
.battle-ally { position: absolute; left: 12px; bottom: calc(var(--px) * 7px); z-index: 1; display: grid; justify-items: center; }
.battle-ally--enter { animation: ally-enter .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes ally-enter { from { translate: -140% 0; } 70% { translate: 8% 0; } to { translate: 0 0; } }
.battle-ally__tag { margin-top: -4px; padding: 1px 8px; font-family: var(--read-font); font-weight: 900; font-size: .8rem; color: #9fd8ff; }
.battle-wave { color: var(--gold); }
.battle-banner { position: absolute; left: 50%; top: 22%; z-index: 8; display: none; justify-items: center; gap: 4px; padding: 10px 28px; translate: -50% 0; pointer-events: none; background: #0e1024e6; border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink); }
.battle-banner--show { display: grid; animation: banner-pop 1.4s steps(12) forwards; }
.battle-banner strong { font-family: var(--pixel-font); font-weight: 400; font-size: clamp(18px, 3vw, 30px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.battle-banner span { font-family: var(--read-font); font-weight: 900; font-size: clamp(1rem, 2vw, 1.5rem); color: #fff; }
.battle-banner--final strong { color: #ff8a7a; }
.battle-banner--ally { border-color: #9fd8ff; }
.battle-banner--ally strong { color: #9fd8ff; font-family: var(--read-font); font-weight: 900; }
.battle-banner--clear { top: 30%; }
@keyframes banner-pop { 0% { scale: .6; opacity: 0; } 12% { scale: 1.08; opacity: 1; } 20% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.battle-floater--break { color: #9ff3ee; font-size: 26px; }
@keyframes px-float { 0% { translate: -50% 10px; scale: 1.4; } 20% { translate: -50% -10px; scale: 1; } 40% { translate: -50% -16px; } 100% { translate: -50% -24px; } }

/* ----------------------------------------------------------- RPG screens */
.app.rpg-app { width: 100%; max-width: none; background: var(--night); }
.rpg-card {
  width: min(780px, 100%); margin: auto; padding: clamp(14px, 3vw, 28px); display: grid; gap: 12px; justify-items: center; text-align: center;
}
.rpg-card .rpg-topbar { margin-bottom: 2px; }
.rpg-card h1, .rpg-card h2 { margin: 0; font-family: var(--pixel-font); font-weight: 400; line-height: 1.4; }
.rpg-title { font-size: clamp(22px, 4vw, 38px); color: var(--gold); text-shadow: 4px 4px 0 var(--ink); }
.rpg-card .px-button { min-width: min(340px, 100%); min-height: 58px; font-size: 16px; }
.rpg-card .rpg-topbar .px-button { min-width: 0; min-height: 44px; font-size: 11px; }
.rpg-score { font-family: var(--pixel-font); font-size: clamp(22px, 4.5vw, 36px); }
.rpg-note { margin: 0; font-family: var(--read-font); font-weight: 800; color: #e6e9ff; }
.rpg-tip { margin: 0; padding: 6px 12px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); font-family: var(--read-font); font-weight: 900; }
.rpg-stage-scene { --px: 3; width: 100%; height: 236px; padding-bottom: calc(var(--px) * 3px); background-repeat: repeat-x; background-position: left bottom; background-size: calc(192px * var(--px)) calc(112px * var(--px)); image-rendering: pixelated; border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink); display: flex; align-items: end; justify-content: center; overflow: hidden; }
/* Stage Clear: the same backdrop raised by a strip of the stage's floor tile,
   and the hero's nameplate on that floor directly under the hero's feet. */
.rpg-stage-scene--clear { --band: 48px; --sky: 236px; height: calc(var(--sky) + var(--band)); padding-bottom: 0; flex-direction: column; align-items: stretch; justify-content: end; background-position: left bottom var(--band); }
.stage-clear__hero { display: flex; justify-content: center; padding-bottom: calc(var(--px) * 3px); }
.stage-clear__ground {
  flex: none; height: var(--band); display: grid; place-items: start center; padding-top: 4px;
  background-repeat: repeat; background-position: center top; background-size: calc(var(--sw) * var(--px) * 1px) calc(var(--sh) * var(--px) * 1px); image-rendering: pixelated;
}
.stage-clear__note span { display: block; }
.rpg-xp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; width: min(560px, 100%); padding: 12px 18px; text-align: left; }
.rpg-xp__gain { grid-column: 1 / -1; justify-self: center; font-family: var(--pixel-font); font-size: clamp(22px, 4vw, 32px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); animation: px-pop .5s steps(4) both; }
.rpg-xp__gain small { font-size: 11px; color: #fff; }
.victory-card--final .rpg-xp__gain { font-size: clamp(28px, 6vw, 46px); }
@keyframes px-pop { 0% { scale: .3; opacity: 0; } 60% { scale: 1.25; opacity: 1; } 100% { scale: 1; } }
.rpg-xp__level { font-family: var(--pixel-font); font-size: 14px; color: #fff; white-space: nowrap; }
.rpg-xp__bar { position: relative; height: 18px; background: #120f2c; border: var(--b) solid var(--ink); box-shadow: 0 0 0 2px var(--edge); }
.rpg-xp__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(180deg, #d8f7ff 0 25%, #6fd3ff 25% 70%, #2f8fd0 70%); transition: width 700ms ease-out; }
.rpg-xp__fill--instant { transition: none; }
.rpg-levelups, .rpg-rest { grid-column: 1 / -1; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rpg-rest { width: min(560px, 100%); justify-items: start; text-align: left; }
.rpg-reward-line { display: flex; align-items: center; gap: 10px; font-family: var(--read-font); font-size: 1.1rem; font-weight: 900; --icon: 3; animation: px-pop .4s steps(3) both; }
/* Laid out but not yet revealed (see playXpSequence); removing it replays the pop. */
.rpg-pending, .rpg-pending .rpg-reward-line { visibility: hidden; animation: none; }
.rpg-reward-line--levelup { font-family: var(--pixel-font); font-weight: 400; font-size: 16px; color: var(--gold); }
.rpg-reward-line--skill { color: #fff4b0; }
.rpg-reward-tip { display: block; margin-top: 2px; font-size: .9em; font-weight: 800; color: #e3e7ff; }
.rpg-ja { font-family: var(--read-font); font-size: 1.6rem; font-weight: 900; color: #fff; }
.rpg-master { color: #fff4b0; }
.rpg-burst { position: relative; isolation: isolate; }
/* Rays only (a solid sun behind the letters made the title unreadable). The gradient turns, not the
   element, so the rays stay inside the title's band instead of sweeping above the card. */
@property --burst-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.rpg-burst::before {
  content: ""; position: absolute; inset: -8px calc(50% - 190px); z-index: -1;
  background: repeating-conic-gradient(from var(--burst-turn), #ffd35a40 0 10deg, transparent 10deg 20deg);
  mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: px-flash-in .6s steps(3) both, px-burst-spin 6s steps(72) infinite;
}
@keyframes px-flash-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes px-burst-spin { to { --burst-turn: 1turn; } }
.defeat-card .rpg-title { color: #c9d2e8; }
.results-card .stage-results span { background: #0b0e2ecc; border: 2px solid var(--edge-dim); border-radius: 0; }
.results-card .rpg-title { font-size: clamp(20px, 3.2vw, 30px); }
/* Missed words fill a grid (not CSS columns, which overflow sideways) and scroll inside the card when a long
   list would push the buttons off screen; the count above says how many there are. */
.results-missed-label { margin: 0 0 -4px; justify-self: start; font-family: var(--read-font); font-weight: 900; color: #fff4b0; }
.results-card .missed {
  justify-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 30px; align-content: start;
  margin: 0; padding: 6px 12px 6px 30px; max-height: max(120px, 100vh - 570px); overflow-y: auto; scrollbar-color: var(--gold) #0b0e2e;
  text-align: left; font-family: var(--read-font); font-size: 1.05rem; line-height: 1.45; background: #0b0e2e99; border: 2px solid var(--edge-dim);
}
.results-card .correct { margin: 0; color: var(--ok); font-family: var(--pixel-font); }
.results-card .actions { width: 100%; grid-template-columns: 1fr 1fr; }
.results-card .actions .px-button { min-width: 0; }
.results-card .actions .px-button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.results-hero__text { display: grid; justify-items: start; gap: 2px; text-align: left; }
.results-hero__text p { margin: 0; }

.adventure-choice { display: grid; justify-items: center; gap: 10px; padding: 14px 18px 18px; font-size: clamp(16px, 3vw, 22px); }
/* Heroes arrive one by one after the menu paints (see prewarmArt); the row keeps their height meanwhile. */
.adventure-choice .adventure-trio { display: flex; gap: 4px; --px: 2; min-height: calc(72px * var(--px)); pointer-events: none; }
.adventure-choice small { font-family: var(--read-font); font-weight: 800; font-size: 1.1rem; }
.menu-toggles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.hero-select { width: min(1100px, 100%); margin: auto; padding: 22px; display: grid; gap: 18px; }
.hero-select .topline h1 { margin: 0; font-family: var(--pixel-font); font-weight: 400; font-size: clamp(16px, 2.4vw, 24px); color: var(--gold); line-height: 1.5; }
.hero-select .topline h1 small { display: block; font-family: var(--read-font); font-weight: 800; font-size: 1.1rem; color: #fff; }
.topline-actions { display: flex; gap: 10px; align-items: center; }
.topline-actions .px-button { min-height: 48px; font-size: 11px; }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hero-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 0; padding: 12px 10px 16px; background: linear-gradient(180deg, #2c3790, #1d2556 70%); }
.hero-card-art { display: flex; justify-content: center; align-items: end; width: 100%; --px: 3; background: linear-gradient(#6fb6e3 0 60%, #9fd4ee 60% 76%, #3d6f4c 76% 80%, #2f5a3d 80%); border: var(--b) solid var(--ink); }
.hero-card strong { font-family: var(--pixel-font); font-weight: 400; font-size: 18px; color: var(--gold); }
.hero-card .hero-ja { font-family: var(--read-font); font-size: 1.15rem; font-weight: 800; }
.hero-card .hero-kana { font-family: var(--read-font); font-size: 1.25rem; font-weight: 900; color: #fff4b0; }
.hero-card small { font-family: var(--read-font); font-size: 1.05rem; font-weight: 700; }
.hero-card:hover .px-sprite, .hero-card:focus-visible .px-sprite { --row: 9; }
.hero-card:focus-visible::before, .hero-card:hover::before { content: ""; position: absolute; left: -26px; top: 40%; width: 22px; height: 22px; background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }

.results-hero { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 1.3rem; font-family: var(--read-font); }
.mini-art { --px: 2; display: inline-flex; }
.stage-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-weight: 700; width: 100%; }
.stage-results span { padding: 10px; border-radius: 10px; background: #eef2f8; }

/* --------------------------------------------------------- debug gallery */
.art-gallery { width: min(1400px, 100%); margin: 0 auto; display: grid; gap: 14px; background: var(--night); color: #fff; padding: 16px; }
.art-gallery h1, .art-gallery h2 { margin: 0; font-family: var(--pixel-font); font-weight: 400; font-size: 16px; color: var(--gold); }
.art-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.art-controls select { min-height: 48px; font-size: 1rem; }
.art-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 10px; background: linear-gradient(#7fb6d6 0 70%, #6a9f58 70%); }
.art-cell { display: grid; justify-items: center; gap: 2px; font-size: .75rem; color: var(--ink); font-weight: 800; }
.debug-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.debug-presets button { min-height: 44px; padding: .3rem .8rem; }

/* ------------------------------------------------------------- viewports */
/* Quiz actors (--apx) are about 1.5–1.7× the backdrop scale, as large as the
   31% side columns and the arena height allow. */
@media (min-height: 940px) and (min-width: 1500px) {
  .rpg-field { --px: 4; --apx: 6; }
  .rpg-field__stats .rpg-hp { width: 200px; }
  .rpg-field__stats strong { font-size: 12px; }
  .rpg-field__stats .rpg-hp, .rpg-field__potions { font-size: 11px; }
}
@media (min-height: 701px) and (max-height: 740px), (min-height: 701px) and (max-width: 1250px) {
  .rpg-field { --apx: 4; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .battle-skill { min-height: 62px; } .battle-message-box { min-height: 40px; }
  .rpg-field { --px: 2; --apx: 3; --word-max: clamp(2.6rem, 6vw, 4.6rem); }
  .rpg-field__bottom { height: 102px; }
  .rpg-field--enSpeech .rpg-field__bottom { height: 134px; }
  .rpg-field--choices .rpg-field__bottom { height: 176px; }
  .rpg-answer input { min-height: 56px; }
  .rpg-answer .px-button { min-height: 52px; }
  .rpg-answer .choices .px-button { min-height: 46px; font-size: 1.35rem; }
  .rpg-speaker--big { min-width: 96px; min-height: 76px; font-size: 2.6rem; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .battle-lower { grid-template-columns: 1fr; }
  /* The hero panel spans the width here, so name, HP and statuses share one row and the field keeps the height. */
  .battle-hero-panel { grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; column-gap: 16px; padding-block: 6px; }
  .battle-hero-panel .battle-statuses { min-height: 0; }
}
@media (max-height: 740px) {
  .rpg-stage-scene { --px: 2; height: 162px; }
  .rpg-stage-scene--clear { --sky: 190px; --band: 44px; height: calc(var(--sky) + var(--band)); }
  .rpg-card { gap: 8px; padding-block: 10px; }
  .rpg-card .px-button { min-height: 50px; }
  .rpg-title { font-size: clamp(20px, 3.2vw, 30px); }
  .rpg-xp { padding: 8px 16px; gap: 4px 12px; }
  .rpg-reward-line { font-size: 1rem; --icon: 2; }
  .results-card .missed { max-height: max(110px, 100vh - 494px); }
}
/* Full-size victory / defeat cards need ~790px; just above the compact breakpoint they tighten instead. */
@media (min-height: 741px) and (max-height: 820px) {
  .rpg-card { gap: 8px; padding-block: 14px; }
  .rpg-card .rpg-xp { padding: 8px 16px; gap: 4px 12px; }
}
@media (max-width: 860px) {
  .rpg-field { --px: 2; --apx: 3; }
  .rpg-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rpg-topbar .ap-meter, .battle-topbar .ap-meter { width: 100%; }
}
@media (max-width: 700px) {
  :root { --px: 2; }
  .hero-grid { grid-template-columns: 1fr; }
  .stage-results { grid-template-columns: 1fr 1fr; }
  .results-card .actions { grid-template-columns: 1fr; }
  .results-card .missed { max-height: none; }
  .battle-app { height: auto; min-height: 100vh; overflow: visible; }
  .battle-view { min-height: 100vh; grid-template-rows: auto auto auto auto; overflow: visible; }
  .battle-field { grid-template-columns: 1fr; min-height: 420px; padding: 8px; }
  .battle-enemies { flex-wrap: wrap; padding-bottom: 0; }
  .battle-hero { order: 2; justify-items: start; }
  .battle-skill { grid-template-columns: auto minmax(0, 1fr); }
  .battle-skill > .px-icon { display: none; }
  .battle-enemy__plate { min-width: 120px; }
  .battle-lower { grid-template-columns: 1fr; }
  .battle-skills { grid-template-columns: 1fr 1fr; }
  .battle-topbar { grid-template-columns: auto minmax(0, 1fr); }
  .battle-topbar__right { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  .battle-message-box { flex-direction: column; align-items: flex-start; }
  .ap-meter__ja { display: none; }
  .music-toggle { font-size: 10px; }
  /* Phones: the word above, the hero and the dummy side by side below it. */
  .rpg-field { --apx: 2; }
  .rpg-field__arena { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-areas: ". ." "prompt prompt" "hero dummy" "stats ." ". ."; row-gap: 6px; }
  .rpg-field__bottom, .rpg-field--enSpeech .rpg-field__bottom, .rpg-field--choices .rpg-field__bottom { height: auto; }
  .rpg-field--choices .rpg-field__answer:not(.is-answered) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .px-summoned, .battle-skill--hint, .battle-floater, .battle-intent--heavy, .battle-hint--danger, .battle-target-marker .px-icon, .rpg-reward-line, .rpg-xp__gain, .rpg-burst::before, .rpg-field__streak, .ap-meter--recovering, .ap-meter--deny, .ap-meter--gain .ap-meter__fill {
    animation: none !important;
  }
  .rpg-xp__fill { transition-duration: .001ms !important; }
  .battle-floater { animation: none !important; translate: -50% -10px; }
}

/* ------------------------------------------------ main menu: Adventure first */
/* Adventure is the game: a big gold-framed button with a play arrow that reads as
   pressable without hover (Chromebook touchpads). Practice sits below, quieter. */
.menu-actions { gap: 14px; }
.menu-card .menu-toggles { justify-content: center; }
.adventure-choice {
  min-height: 0; padding: 16px 18px 20px; gap: 8px;
  background: linear-gradient(180deg, #6f8cf0, #3b55cf 50%, #28389a);
  border-color: var(--gold); box-shadow: 0 0 0 var(--b) var(--ink), 0 8px 0 0 #1a226a, inset 0 calc(var(--b) * -2) 0 0 #0005, inset 0 2px 0 0 #ffffff50;
}
.adventure-choice:active:not(:disabled) { translate: 0 6px; box-shadow: 0 0 0 var(--b) var(--ink), 0 2px 0 0 #1a226a, inset 0 var(--b) 0 0 #0006; }
.adventure-choice:focus-visible { outline: 5px solid var(--gold); outline-offset: 6px; }
.adventure-cta { max-width: 100%; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--gold); color: var(--ink); text-shadow: none; font-size: clamp(16px, 3.4vw, 26px); border: var(--b) solid var(--ink); box-shadow: inset 0 -4px 0 #d89a2a; }
.adventure-cta__arrow { display: inline-block; animation: cta-nudge 1.1s steps(2) infinite; }
.adventure-choice small { font-size: 1.3rem; color: #fff4b0; }
.practice-choice { justify-self: center; display: grid; justify-items: center; gap: 2px; min-height: 58px; width: min(320px, 100%); padding: .45rem 1rem; font-size: 1.05rem; border: 2px solid #b9c5d8; }
.practice-choice small { font-weight: 700; font-size: .95rem; }
@keyframes cta-nudge { 50% { transform: translateX(4px); } }
@media (max-height: 620px) { .adventure-choice .adventure-trio { --px: 1.6; } .adventure-choice { padding-block: 10px 14px; } }
@media (max-width: 520px) { .adventure-choice .adventure-trio { --px: 1.3; gap: 0; } .adventure-choice { padding-inline: 10px; } .adventure-cta { gap: 8px; padding: 8px 10px; } }

/* ----------------------------------------------- hero select: replay badges */
.hero-card-art { position: relative; }
.hero-badge { position: absolute; top: 6px; right: 6px; display: grid; justify-items: end; gap: 2px; padding: 4px 6px; background: #0e1024dd; border: 2px solid var(--gold); font-family: var(--pixel-font); font-size: 10px; line-height: 1.4; color: #fff; }
.hero-badge b { font-weight: 400; color: var(--gold); font-size: 12px; }
.hero-badge span { font-size: 8px; max-width: 13ch; text-align: right; }
.hero-badge--new { border-color: var(--ok); color: var(--ok); font-size: 11px; }
.hero-card--done { box-shadow: 0 0 0 var(--b) var(--ink), 0 0 0 calc(var(--b) * 2) var(--gold), inset 0 calc(var(--b) * -2) 0 0 #0005; }
.all-heroes { margin: 0; text-align: center; font-family: var(--pixel-font); color: var(--gold); font-size: 14px; }

/* ------------------------------------------------------ campaign results */
.results-card .rpg-title .rpg-ja { display: block; font-size: 1.2rem; margin-top: 4px; }
.results-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; }
.rpg-score__unit { display: block; font-size: .45em; }
.results-card .results-hero { justify-content: start; gap: 10px; }
.results-card .results-hero__text { min-width: 0; }
.results-card .mini-art { --px: 1.6; }
/* Two replay paths side by side on one line each, then the quiet buttons in one compact row. */
.results-card .results-actions { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.results-card .results-actions > .px-button { grid-column: span 2; min-height: 46px; padding: .3rem .6rem; font-size: 11px; }
.results-card .results-actions > .results-again, .results-card .results-actions > .results-new-hero { grid-column: span 3; font-size: 12px; }
.results-card .results-actions > .results-again:not(:has(+ .results-new-hero)) { grid-column: 1 / -1; }
.results-card .results-actions > .px-button:last-child:nth-child(odd) { grid-column: span 2; }
.results-card .results-actions:not(:has(> .results-practice)) > .secondary { grid-column: span 3; }
@media (max-width: 700px) { .results-card .results-actions > .px-button { grid-column: 1 / -1 !important; } }
.results-title { display: grid; justify-items: center; gap: 4px; padding: 10px 14px; text-align: center; border-color: var(--gold); }
.results-title__flag { font-family: var(--pixel-font); font-size: 11px; color: var(--ink); background: var(--ok); padding: 3px 8px; }
.results-title__en { font-family: var(--pixel-font); font-weight: 400; font-size: clamp(16px, 2.6vw, 24px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); line-height: 1.4; }
.results-title__ja { font-family: var(--read-font); font-weight: 900; font-size: 1.3rem; }
.results-title__next { font-family: var(--read-font); font-weight: 800; font-size: .95rem; color: #d8e0ff; }
.results-title__next--max { font-family: var(--pixel-font); font-size: 12px; color: var(--gold); }
.results-roster { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-family: var(--pixel-font); font-size: 11px; color: #aab4e0; }
.results-roster__label, .results-roster__bosses { color: #fff; }
.results-roster__hero.is-done { color: var(--gold); }
.results-roster__all { color: var(--ok); }
.results-actions .results-again, .results-actions .results-new-hero { display: grid; justify-items: center; gap: 2px; }
.results-actions small { font-family: var(--read-font); font-weight: 800; font-size: .95rem; }
.results-again { background: linear-gradient(180deg, #ffd35a, #f2a93a 55%, #d8812a); color: var(--ink); text-shadow: none; border-color: #fff4b0; }
.results-new-hero { background: linear-gradient(180deg, #6f8cf0, #3b55cf 55%, #28389a); }

/* ------------------------------------------------------------- cinematic */
.cinematic { position: relative; --cpx: 4; width: min(calc(192px * var(--cpx)), 100%); margin: auto; display: grid; gap: 12px; }
.cinematic__scene { --px: var(--cpx); position: relative; width: 100%; aspect-ratio: 192 / 112; overflow: hidden; border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink); background: var(--night); }
.cinematic__city, .cinematic__monsters { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.cinematic__city { opacity: 0; transition: opacity 1.4s ease; }
.cinematic__city.is-on { opacity: 1; }
/* Monsters face the city from the right: mirrored, sliding in from off-screen. */
.cinematic__monsters { opacity: 0; transform: translateX(70%) scaleX(-1); transition: transform 2.8s ease-out, opacity .6s ease; }
.cinematic__monsters.is-near { opacity: 1; transform: translateX(34%) scaleX(-1); }
.cinematic__monsters.is-gone { opacity: 0; transform: translateX(90%) scaleX(-1); transition: transform 1.6s ease-in, opacity 1.4s ease; }
.cinematic__hero { position: absolute; left: 14%; bottom: 4%; transform: translateX(-160%); transition: transform 1.1s cubic-bezier(.2, .8, .3, 1); }
.cinematic__hero.is-on { transform: translateX(0); }
.cinematic__citizens { position: absolute; left: 44%; right: 6%; bottom: 20%; display: flex; justify-content: space-around; opacity: 0; transition: opacity .8s ease; }
.cinematic__citizens.is-on { opacity: 1; }
/* Tiny cheering townsfolk: two pixel blocks each, hopping out of step. */
.cinematic__citizen { width: calc(5px * var(--px)); height: calc(9px * var(--px)); background: linear-gradient(#f2c7a0 0 38%, #2d4a52 38% 44%, #c95a4b 44%); box-shadow: 0 0 0 calc(var(--px) * 1px) #2d4a52; animation: citizen-hop .5s steps(2) infinite; }
.cinematic__citizen:nth-child(2n) { background: linear-gradient(#f2c7a0 0 38%, #2d4a52 38% 44%, #4f7fd0 44%); animation-delay: .25s; }
.cinematic__citizen:nth-child(3n) { background: linear-gradient(#e0b084 0 38%, #2d4a52 38% 44%, #58a970 44%); }
@keyframes citizen-hop { 50% { transform: translateY(calc(var(--px) * -3px)); } }
.cinematic__caption { min-height: 92px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 10px 16px; text-align: center; }
.cinematic__caption[hidden] { display: grid; visibility: hidden; }
.cinematic__caption strong { font-family: var(--pixel-font); font-weight: 400; font-size: clamp(14px, 2.4vw, 22px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); line-height: 1.4; }
.cinematic__caption span { font-family: var(--read-font); font-weight: 900; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.cinematic__caption--big strong { font-size: clamp(18px, 3.4vw, 32px); }
.cinematic__skip { position: absolute; top: 10px; right: 10px; min-height: 44px; padding: .3rem .9rem; font-size: 12px; z-index: 7; }
.cinematic--still .cinematic__city, .cinematic--still .cinematic__monsters, .cinematic--still .cinematic__hero, .cinematic--still .cinematic__citizens { transition: none; }
/* ---------------------------------------------------------- Osaka map */
.rpg-card.map-card { width: min(1120px, 100%); gap: 8px; padding-block: 12px 16px; }
.map-title { font-size: clamp(20px, 3.4vw, 32px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.map-title small { display: block; margin-top: 4px; font-size: .42em; color: var(--edge-dim); }
@media (max-height: 700px) { .rpg-card.map-card { gap: 5px; padding-block: 8px 10px; } .map-title { font-size: 20px; } .rpg-card .map-go { min-height: 54px; font-size: 1.2rem; } .map-card .osaka-map { width: min(100%, calc((100vh - 270px) * 176 / 112)); } .map-title small { display: none; } }
.map-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; font-family: var(--pixel-font); font-size: 12px; }
.map-count { font-family: var(--read-font); font-weight: 900; font-size: 1.25rem; color: var(--gold); }
.map-hero { display: flex; align-items: center; gap: 8px; }
.map-hero .mini-art { --px: .6; margin-block: -8px -4px; }
.osaka-map { position: relative; width: min(100%, calc((100vh - 336px) * 176 / 112)); min-width: min(100%, 420px); aspect-ratio: 176 / 112; container-type: inline-size; background-size: 100% 100%; image-rendering: pixelated; border: var(--b) solid var(--edge); box-shadow: 0 0 0 var(--b) var(--ink); }
.osaka-city { position: absolute; z-index: 1; translate: -50% calc(clamp(20px, 4.4cqw, 34px) / -2); display: grid; justify-items: center; gap: 3px; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; color: #fff; cursor: pointer; }
.osaka-city:disabled { cursor: default; opacity: 1; }
.osaka-city:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
.osaka-city__pin { position: relative; width: clamp(20px, 4.4cqw, 34px); height: clamp(20px, 4.4cqw, 34px); display: grid; place-items: center; font-family: var(--pixel-font); font-size: clamp(10px, 2cqw, 16px); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--edge); }
.osaka-city__plate { display: grid; justify-items: center; padding: 1px clamp(4px, 1cqw, 8px) 2px; background: #0e1024e0; border: 2px solid var(--edge); box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.osaka-city__name { font-family: var(--read-font); font-weight: 900; font-size: clamp(.72rem, 2.2cqw, 1.05rem); line-height: 1.2; }
.osaka-city__state { font-family: var(--read-font); font-weight: 800; font-size: clamp(.6rem, 1.6cqw, .8rem); line-height: 1.2; }
.osaka-city--saved .osaka-city__pin { background: var(--gold); }
.osaka-city--saved .osaka-city__state { color: var(--gold); }
.osaka-city--danger .osaka-city__pin { background: var(--red); color: #fff; animation: city-alarm 1s steps(2) infinite; }
.osaka-city--danger .osaka-city__state { color: #ffb4a4; }
.osaka-city--danger .osaka-city__plate { border-color: #ff8a7a; }
.osaka-city--locked .osaka-city__pin { width: clamp(18px, 3.4cqw, 26px); height: clamp(18px, 3.4cqw, 26px); background: #6b7090; }
.osaka-city--locked .osaka-city__pin::before { content: ""; width: 10px; height: 8px; margin-top: 5px; background: #d8dcef; box-shadow: 0 0 0 2px var(--ink); }
.osaka-city--locked .osaka-city__pin::after { content: ""; position: absolute; top: 3px; width: 6px; height: 6px; border: 2px solid #d8dcef; border-bottom: 0; }
.osaka-city--locked .osaka-city__plate { opacity: .75; }
.osaka-city--locked .osaka-city__name { font-size: clamp(.64rem, 1.9cqw, .9rem); color: #c6cbe0; }
.osaka-city--locked .osaka-city__state { color: #9aa0bc; }
.osaka-city:not(:disabled):hover .osaka-city__plate { background: #2a38a4; }
@keyframes city-alarm { 50% { background: #ff7a5a; box-shadow: 0 0 0 2px var(--edge), 0 0 14px 4px #ff4a3a; } }
.osaka-city__resume { font-family: var(--pixel-font); font-size: 9px; background: var(--gold); color: var(--ink); padding: 2px 5px; border: 2px solid var(--ink); }
.osaka-city--just-saved .osaka-city__pin { animation: city-saved .9s steps(5); }
@keyframes city-saved { 0% { scale: 1.9; background: #fff; } 100% { scale: 1; } }
.osaka-city__burst { position: absolute; left: 50%; top: 17px; z-index: -1; width: 140px; height: 140px; translate: -50% -50%; pointer-events: none; background: radial-gradient(circle, #fff 0 7%, #ffd35acc 8% 22%, #ffd35a00 56%); animation: city-burst 1s ease-out forwards; }
@keyframes city-burst { from { scale: .2; opacity: 1; } to { scale: 1.7; opacity: 0; } }
.osaka-map__biwa { position: absolute; left: 91%; top: 19%; translate: -50% 0; display: grid; justify-items: center; font-family: var(--read-font); font-weight: 800; font-size: .8rem; line-height: 1.1; color: #e8d4ff; text-shadow: 2px 2px 0 var(--ink); pointer-events: none; }
.map-actions { display: flex; justify-content: center; }
.rpg-card .map-go { min-height: 64px; display: grid; gap: 2px; padding: .4rem 1.6rem; font-family: var(--read-font); font-weight: 900; font-size: 1.4rem; }
.map-go small { font-family: var(--pixel-font); font-size: 10px; font-weight: 400; }
.map-soon { margin: 0; font-family: var(--read-font); font-weight: 800; color: #e6e9ff; }

/* Story crawl: Japanese exposition over the scene. Cards drift gently upward and
   fade at the top edge, but stay flat and large so Japanese stays easy to read. */
.story .cinematic__scene { cursor: pointer; }
.story .cinematic__hero { left: 44%; z-index: 3; opacity: 0; transition: transform 1.1s cubic-bezier(.2, .8, .3, 1), opacity .5s ease; }
.story .cinematic__hero.is-on { opacity: 1; }
.story .cinematic__ally { left: 24%; z-index: 2; }
/* The opening is a stand-off: the hero defends from the left, the Horde comes from
   the right. The hero stands on the grass above the lower-third title, not behind it. */
.story--intro .cinematic__hero { left: 5%; bottom: 25%; }
.cinematic__monsters.is-spread { opacity: .9; transform: translateX(-55%) scale(-.75, .75); transition: transform 3.2s ease-in, opacity 1s ease; }
.story__veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: radial-gradient(ellipse 75% 70% at 50% 50%, #07061acc 0 55%, #07061a88 80%, #07061a44); }
.story__veil.is-on { opacity: 1; }
.story__crawl { position: absolute; inset: 5% 5% 9%; z-index: 5; display: grid; place-items: center; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%); mask-image: linear-gradient(transparent, #000 14%); }
.story__card { display: grid; justify-items: center; gap: .1em; text-align: center; animation: story-rise var(--dur, 3000ms) linear forwards; }
.story__card--hold { animation: story-in .5s ease-out forwards; }
@keyframes story-rise { 0% { opacity: 0; transform: translateY(22%); } 12% { opacity: 1; transform: translateY(12%); } 86% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18%) scale(.95); } }
@keyframes story-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
.story__line {
  margin: 0; font-family: var(--read-font); font-weight: 900; font-size: clamp(1.2rem, 2.7vw, 2.2rem); line-height: 1.6; color: #fff; letter-spacing: .03em;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 3px 3px 0 var(--ink);
}
.story__line rt { font-size: .42em; font-weight: 800; color: #ffe9a8; letter-spacing: 0; }
.story__line--big { font-size: clamp(2rem, 5.6vw, 4.4rem); line-height: 1.35; color: var(--gold); text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 5px 5px 0 var(--ink); }
.story__en { margin: .5em 0 0; font-family: var(--pixel-font); font-size: clamp(10px, 1.3vw, 15px); color: #cfd6ff; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--ink); }
/* Title beats are a lower third: the city stays the picture, the title a subtitle under it. */
.story__title {
  position: absolute; left: 50%; bottom: 6%; z-index: 5; translate: -50% 0; display: grid; justify-items: center; gap: 2px; padding: 4px 28px 6px; white-space: nowrap; animation: story-in .5s ease-out;
  background: linear-gradient(90deg, transparent, #0e1024a6 18% 82%, transparent); color: #fff;
}
.story__title[hidden] { display: none; }
.story__title strong { font-family: var(--read-font); font-weight: 900; font-size: clamp(1.4rem, 3.3vw, 2.6rem); line-height: 1.3; color: #fff; text-shadow: 3px 3px 0 var(--ink); }
.story__title span { font-family: var(--pixel-font); font-size: clamp(10px, 1.3vw, 14px); color: var(--gold); }
.story__core { position: absolute; left: 50%; bottom: -8%; z-index: 2; width: 46%; aspect-ratio: 1; translate: -50% 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: radial-gradient(circle, #fff6c2dd 0 7%, #ffd35a99 8% 20%, #f28a2e55 21% 38%, transparent 58%); }
.story__core.is-on { opacity: 1; animation: core-pulse 1.2s steps(3) infinite; }
@keyframes core-pulse { 50% { scale: 1.08; filter: brightness(1.25); } }
.story__tap { position: absolute; right: 10px; bottom: 8px; z-index: 6; font-family: var(--read-font); font-weight: 800; font-size: .85rem; color: #ffffffaa; opacity: 0; transition: opacity .4s; }
.story__tap.is-on { opacity: 1; }
.cinematic--still .story__card, .cinematic--still .story__core { animation: none; }
@media (min-width: 1000px) and (min-height: 700px) { .story { --cpx: 5; } }
@media (min-width: 1500px) and (min-height: 940px) { .story { --cpx: 6; } }
@media (max-height: 700px), (max-width: 820px) { .cinematic { --cpx: 3; } .cinematic__caption { min-height: 76px; } }
@media (max-height: 500px), (max-width: 620px) { .cinematic { --cpx: 2; } }
@media (max-width: 420px) { .cinematic { --cpx: 1.8; } }
@media (max-width: 700px) { .results-top { grid-template-columns: 1fr; } }
.results-card .rpg-score { white-space: nowrap; font-size: clamp(18px, 2.4vw, 28px); }
.results-card .results-hero { font-size: 1.15rem; }
@media (max-height: 740px) {
  .results-title { padding: 6px 12px; gap: 2px; }
  .results-card .rpg-title .rpg-ja { font-size: 1rem; margin-top: 2px; }
  .results-card .mini-art { --px: 1.5; }
  .results-card .stage-results span { padding: 4px 8px; }
  .results-card .missed { max-height: max(80px, 100vh - 548px); }
}
@media (prefers-reduced-motion: reduce) {
  .adventure-cta__arrow, .cinematic__citizen { animation: none; }
}

/* ---------------------------------------- regional Adventure continuation */
.new-adventure-choice { justify-self: center; display: grid; justify-items: center; gap: 2px; width: min(440px, 100%); min-height: 72px; padding: .55rem 1rem; font-size: clamp(13px, 2.4vw, 18px); }
.new-adventure-choice small { font-family: var(--read-font); font-weight: 800; font-size: 1rem; }
.results-card .results-actions > .results-map { grid-column: 1 / -1; min-height: 58px; display: grid; justify-items: center; gap: 2px; background: linear-gradient(180deg, #ffd35a, #f2a93a 55%, #d8812a); color: var(--ink); text-shadow: none; border-color: #fff4b0; font-size: 14px; }
.results-map small { font-family: var(--read-font); font-weight: 800; font-size: .95rem; }
.results-actions .results-again.secondary, .results-actions .results-new-hero.secondary { background: #20285d; color: #fff; border-color: var(--edge-dim); }
.city-results .results-hero { justify-content: center; }
.city-results .results-actions > .secondary { grid-column: span 3; }
.city-results .results-actions:not(:has(> .results-practice)) > .secondary { grid-column: 1 / -1; }
@media (max-height: 620px) { .menu-card:has(.new-adventure-choice) .menu-actions { gap: 8px; } .new-adventure-choice { min-height: 54px; padding-block: .3rem; } .menu-card:has(.new-adventure-choice) .practice-choice { min-height: 46px; } }
/* The CONTINUE ADVENTURE row makes results one button taller: the missed-word list gives up that room. */
.results-card:has(.results-map) .missed { max-height: max(80px, 100vh - 636px); }
@media (max-height: 740px) { .results-card:has(.results-map) .missed { max-height: max(72px, 100vh - 560px); } }
.results-card .results-actions > .results-map > span { font-family: var(--read-font); font-weight: 900; font-size: 1.25rem; }
.results-card .results-actions > .results-map > small { font-family: var(--pixel-font); font-weight: 400; font-size: 10px; }
@media (max-height: 700px) {
  .results-card:has(.results-map) { gap: 6px; }
  .results-card:has(.results-map) .results-actions { gap: 6px; }
  .results-card:has(.results-map) .results-actions > .px-button { min-height: 40px; padding-block: 3px; }
  .results-card .results-actions > .results-map { min-height: 48px; }
}
@media (max-height: 620px) { .app.rpg-app:has(.results-card) { padding-block: 6px; } }
/* Continue layout: three choices, so the title, the hero and the buttons tighten and the CTA stays on one line. */
.menu-card:has(.new-adventure-choice) .game-title { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: .7rem; }
.menu-card:has(.new-adventure-choice) .adventure-choice .adventure-trio { --px: 1.6; }
.menu-card:has(.new-adventure-choice) .adventure-cta { white-space: nowrap; font-size: clamp(14px, 2.6vw, 21px); }
.menu-card:has(.new-adventure-choice) .new-adventure-choice { min-height: 60px; }
.menu-card:has(.new-adventure-choice) .menu-actions { gap: 10px; margin-bottom: 10px; }
@media (max-height: 700px) { .menu-card:has(.new-adventure-choice) { padding-block: 16px; } .menu-card:has(.new-adventure-choice) .adventure-choice .adventure-trio { --px: 1.2; } }