/* Adventure UI — final presentation layer. Gameplay and save data stay unchanged. */
:root {
  --adv-ink: #193e46;
  --adv-muted: #587078;
  --adv-paper: #fffdf3;
  --adv-cream: #f2f0df;
  --adv-teal: #157f80;
  --adv-coral: #ef654c;
  --adv-gold: #ffdc78;
  --font-jp: 'Nunito Sans', 'Noto Sans JP', sans-serif;
  --ink: #eef7f3;
  --magic: #78ded2;
  --magic-hi: #b2f3e5;
  --ink-dim: #abc4c6;
}
html { background: #163e48; }
body { background: #163e48; }
body::before, .ambient { display: none; }
#app { max-width: 1480px; border: 0; background: #163e48; box-shadow: none; }
button { touch-action: manipulation; }
button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #e59824;
  outline-offset: 4px;
}
button { transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }

/* Lobby: a character stage and a calm, legible quest board. */
#screen-title.active {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.15fr);
  grid-template-rows: auto;
  align-items: stretch;
  align-content: start;
  gap: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  background: var(--adv-cream);
  overflow-y: auto;
}
.lobby-hero {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100%;
  padding: clamp(28px, 4vw, 52px) 20px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fffbed;
  background: radial-gradient(ellipse at 48% 46%, #307a7a, transparent 63%), #174751;
}
.lobby-hero::before {
  content: '';
  position: absolute;
  width: 570px;
  height: 570px;
  top: 17%;
  border: 1px solid #ffffff18;
  border-radius: 50%;
  box-shadow: 0 0 0 60px #ffffff04, 0 0 0 120px #ffffff04;
  z-index: -1;
}
.lobby-hero::after {
  content: '✦';
  position: absolute;
  bottom: 30px;
  left: 25px;
  color: #b0d4bd;
  font-size: 35px;
  opacity: .5;
}
.lobby-eyebrow { font: 600 12px/1.5 var(--font-display); letter-spacing: .19em; color: #bedbd3; }
.lobby-eyebrow span { color: var(--adv-gold); padding-right: 7px; }
#screen-title .game-logo { width: 100%; margin: 16px 0 0; transform: none; }
.game-logo::before { display: none; }
#screen-title .logo-en {
  color: #fff8dc;
  -webkit-text-fill-color: #fff8dc;
  font-size: clamp(32px, 3.7vw, 54px);
  letter-spacing: -.035em;
  filter: drop-shadow(0 3px 0 #092f3a);
}
#screen-title .logo-ja {
  display: block;
  margin-top: 14px;
  padding: 0;
  color: #d6e7dd;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
}
#screen-title .title-showcase {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 410px);
  height: 370px;
  inset: auto;
  margin: 12px 0 4px;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  filter: none;
}
#screen-title .title-showcase::after { display: none; }
#title-hero-canvas { width: 100%; height: 100%; object-fit: contain; }
#screen-title .showcase-word { font-size: 12px; border: 1px solid #dcead34d; background: #17434bc9; color: #fae5aa; box-shadow: none; border-radius: 8px; padding: 7px 11px; }
#screen-title .word-one { top: 110px; left: 0; transform: rotate(-9deg); }
#screen-title .word-two { top: 65px; right: 0; transform: rotate(8deg); }
#screen-title .word-three { bottom: 45px; right: 0; transform: rotate(-6deg); }
#screen-title .title-sub { margin: 5px 0 15px; color: #c2d8d2; font-size: 13px; letter-spacing: .06em; text-shadow: none; }
#screen-title .hero-badge { margin: 0; padding: 9px 17px; color: #f7edc5; background: #0f343d; border: 1px solid #769b9666; border-radius: 30px; box-shadow: inset 0 1px 0 #ffffff0d; font-size: 13px; }
#screen-title .title-glow { display: none; }
.lobby-menu { min-width: 0; padding: 34px clamp(22px, 3vw, 46px) 28px; color: var(--adv-ink); }
.lobby-heading { margin-bottom: 22px; }
.lobby-heading > span { color: var(--adv-teal); font: 600 11px/1 var(--font-display); letter-spacing: .2em; }
.lobby-heading h2 { margin-top: 8px; font-size: clamp(23px, 2.5vw, 32px); font-weight: 900; letter-spacing: -.04em; }
.lobby-heading p { margin-top: 6px; font-size: 13px; color: var(--adv-muted); }
#screen-title .tier-select { width: 100%; margin: 0 0 17px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.tier-label { text-align: left; margin-bottom: 8px; color: var(--adv-muted); font-size: 12px; letter-spacing: .06em; }
.tier-buttons { padding: 5px; gap: 5px; border-radius: 16px; background: #e1e5d8; }
#screen-title .tier-btn { min-height: 57px; background: transparent; color: #5b716f; border: 0; border-radius: 12px; box-shadow: none; font-size: 16px; }
#screen-title .tier-btn small { color: inherit; font-size: 11px; opacity: .85; }
#screen-title .tier-btn.selected { background: var(--adv-paper); color: #136769; box-shadow: 0 3px 8px #193e4615; }
.tier-btn.selected::after { background: #158580; border-radius: 50%; right: 6px; }
.tier-mastery { text-align: right; color: var(--adv-muted); font-size: 11px; margin-top: 7px; }
#screen-title .battle-style-mixed { margin: 0 0 20px; padding: 0 0 15px; width: 100%; background: none; border: 0; border-bottom: 1px solid #193e4624; border-radius: 0; box-shadow: none; }
.battle-style-mixed::after { display: none; }
.battle-style-heading { margin-bottom: 9px; gap: 8px; }
.battle-style-heading > span { color: var(--adv-teal); font-size: 10px; }
.battle-style-heading b { color: var(--adv-ink); font-size: 12px; }
.battle-style-heading i { color: #775619; background: #f3dfab; border: 0; box-shadow: none; font-size: 9px; }
.battle-style-reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.battle-style-reel em { display: none; }
.battle-style-reel > span, .battle-style-reel > span[data-style="turn"], .battle-style-reel > span[data-style="rush"] { min-height: 38px; padding: 7px 4px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; color: #1b6d6e; background: #dcece2; border: 0; border-radius: 8px; box-shadow: none; }
.battle-style-reel > span[data-style="turn"] { color: #826023; background: #f1e5c3; }
.battle-style-reel > span[data-style="rush"] { color: #a14c3c; background: #f4ddd1; }
.battle-style-reel small { font: 600 10px/1 var(--font-display); }
.battle-style-reel > span[data-style="realtime"] { border: 0; }
.battle-style-reel b { font-size: 10px; }
#screen-title .battle-style-desc { display: none; }
#screen-title .mode-buttons { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mode-section-title { grid-column: 1/-1; min-height: auto; padding: 0; margin-bottom: 1px; }
.mode-section-title span { color: #748782; font-size: 10px; letter-spacing: .12em; }
.mode-section-title b { color: var(--adv-ink); font-size: 13px; }
.mode-btn, #screen-title .mode-btn {
  color: var(--adv-ink);
  min-height: 83px;
  padding: 15px 32px 15px 58px;
  background: var(--adv-paper);
  border: 1px solid #cbd3c3;
  border-radius: 17px;
  box-shadow: 0 4px 0 #c7cfbf, inset 0 2px 0 #fff;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}
.mode-btn::before { display: none; }
.mode-btn::after { right: 13px; width: auto; height: auto; color: #75978c; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 26px; }
.mode-btn small, #screen-title .mode-btn small { color: var(--adv-muted); font-size: 11px; margin-top: 4px; line-height: 1.45; white-space: normal; }
.mode-icon, .mode-row .mode-icon { left: 12px; width: 35px; height: 39px; border: 0; border-radius: 12px; box-shadow: none; background: #e0ece3; color: #257e79; font-size: 23px; }
.mode-btn.primary, #screen-title .mode-btn.primary { grid-column: 1/-1; min-height: 95px; padding-left: 76px; padding-right: 55px; color: #fffdf3; background: #e9664f; border: 1px solid #d6523d; box-shadow: 0 5px 0 #b94c3b, inset 0 2px 0 #ffb192; font-size: 22px; }
.mode-btn.primary small { color: #fff0d9 !important; font-size: 12px !important; }
.mode-btn.primary .mode-icon { left: 17px; width: 43px; height: 48px; background: #ffd985; color: #a35232; box-shadow: 0 3px 0 #bc593d; border: 0; }
.mode-btn.primary::after { right: 20px; width: 29px; height: 29px; font-size: 17px; color: #fff4de; background: none; border: 0; box-shadow: none; }
.mode-btn:disabled { opacity: 1; color: #77877f; background: #e5e8dc; border-color: #d3daca; box-shadow: 0 3px 0 #d0d7c7; }
.mode-btn:disabled small { color: #7c8b80; }
.mode-btn:disabled .mode-icon { color: #93a196; background: #d4ddce; border: 0; }
.mode-btn:disabled::after { color: #9caa9c; background: none; }
.mode-row { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 4px; }
.mode-row .mode-btn { width: 100%; }
.mode-btn:hover:not(:disabled) { background: #fffef8; transform: translateY(-2px); filter: none; }
.mode-btn.primary:hover:not(:disabled) { background: #f17156; }
.mode-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #b4bfae; }
.mode-btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 #b94c3b; }
#screen-title .title-footer { margin: 20px 0 0; padding: 15px 0 0; border-top: 1px solid #ccd5c5; justify-content: flex-start; gap: 8px; }
.opt-btn, .back-btn { min-height: 40px; color: #4c6e69; background: transparent; border: 1px solid #b8cabc; border-radius: 24px; padding: 8px 13px; box-shadow: none; font-size: 12px; }
.opt-btn.on { color: #fffbed; background: #287d78; border-color: #287d78; box-shadow: none; }
.opt-btn:hover, .back-btn:hover { background: #dbe9de; color: #193e46; }
.streak-badge { color: #6b7e6b; }

/* Battle: warm answer cards against a quiet teal stage. */
#screen-game { background: #163e48; }
.hud { color: var(--adv-ink); background: #faf4dc; border-bottom: 3px solid #d3c7a2; box-shadow: none; }
.hud-floor { background: #e9644d; border: 1px solid #bf4d3a; border-radius: 13px; box-shadow: 0 3px 0 #ad4535, inset 0 2px 0 #ffb093; }
.hud-level { color: #277f7e; }
.hud-mode { color: #657968; background: #e3e7d4; border: 0; border-radius: 8px; }
.hud-score { color: var(--adv-ink); }
.hud-score::before { color: #7c816b; }
.exp-bar { background: #d4d8c1; border: 1px solid #a8b39f; box-shadow: inset 0 1px 2px #596b572b; }
.exp-fill { background: linear-gradient(90deg,#278b87,#90d8b6); }
.battle-status, .battle-status[data-style="turn"], .battle-status[data-style="rush"], .battle-status[data-state="frozen"] { color: #e3f0e6; background: #194a53; border-bottom: 1px solid #ffffff15; box-shadow: none; }
.battle-status > small { color: #b0cbc7; }
.battle-status b { background: #2b737b; border: 0; border-radius: 7px; }
.enemy-zone { background: radial-gradient(ellipse at 50% 86%, #488e864a, transparent 60%), linear-gradient(#205762,#153d49); border: 1px solid #85b8ab38; border-radius: 25px; box-shadow: inset 0 2px 0 #ffffff0b, 0 5px 0 #0e3039; }
.enemy-zone::after { opacity: .16; }
/* The v2 character silhouette remains readable beside the encounter. */
#screen-game #hero-canvas { width: 136px; height: 136px; }
@media (max-width: 560px) {
  #screen-game #hero-canvas { width: 84px; height: 84px; }
}
.enemy-plate { color: #fff9df; background: #10343ce6; border: 1px solid #b8d2b753; border-radius: 13px; box-shadow: 0 3px 0 #09262e; }
.map-panel { border: 2px solid #77a79d66; border-radius: 22px; box-shadow: 0 5px 0 #0e2d35; }
.map-hint { color: #c2dbd3; background: #10343d; }
.msg-window { color: #dcece3; background: #1e4c54; border: 1px solid #64988d44; box-shadow: none; font-size: 15px; }
.msg-window b { color: #ffe097; }
.mobile-question-prompt:not(.hidden) { background: #fff9e5; color: #173f47; border: 1px solid #e6dcbc; border-radius: 17px; box-shadow: 0 4px 0 #aebba9; }
.mobile-question-prompt > strong { color: #193e46; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.15; }
.mobile-question-prompt > span { color: #fffbea; background: #237e7c; border: 0; border-radius: 8px; box-shadow: none; }
.choice-btn, .boss-chip { color: var(--adv-ink); background: #fffbee; border: 1px solid #c8d5c4; border-radius: 17px; box-shadow: 0 5px 0 #9eb7ad, inset 0 2px 0 #fff; font-weight: 900; }
.choice-btn { padding-inline: 32px 16px; overflow-wrap: anywhere; }
.choice-btn::before { left: 10px; top: 50%; transform: translateY(-50%); width: 19px; height: 23px; color: #7c978c; background: #e8efdf; border: 0; border-radius: 7px; font-size: 11px; }
.choice-btn:hover, .boss-chip:hover { color: #145f61; background: #e2f2dc; border-color: #94c3a3; }
.choice-btn:active, .boss-chip:active { transform: translateY(4px); box-shadow: 0 1px 0 #9eb7ad; }
.choice-btn.correct-pick, .choice-btn.reveal-correct { color: #143e2f; background: #a7e4a7; border-color: #69ae7a; box-shadow: 0 4px 0 #478268; }
.choice-btn.wrong-pick { color: #fff; background: #e96a5a; border-color: #b84d43; box-shadow: 0 4px 0 #98463c; }
.bottom-hud { background: #10343d; border-top: 1px solid #8cbaad33; box-shadow: none; }
.skill-caption > span { color: #d9e7d2; }
.skill-caption small { color: #a6c0b5; }
.skill-btn { color: #e7f1db; background: #2a5960; border: 1px solid #749e9455; border-radius: 15px; box-shadow: 0 4px 0 #092b32, inset 0 2px 0 #ffffff12; }
.skill-btn.ready { border-color: #e5d895; box-shadow: 0 4px 0 #716943, inset 0 0 0 1px #e5d89555; }
.skill-btn small { background: #afddcf; border: 1px solid #245751; color: #174840; border-radius: 7px; box-shadow: none; }
.skill-btn small[data-kind="locked"] { color: #bdcdc4; background: #345a5e; }
.skill-name { color: #e8f2df; font-size: 12px; }
.skill-glyph { text-shadow: none; }
.orb { border: 2px solid #749589; border-radius: 50%; box-shadow: 0 4px 0 #082730, inset 0 2px 0 #ffffff30; background: #1c3944; }
.giveup-btn, .skill-caption .giveup-btn { color: #c4d8ce; background: transparent; border: 1px solid #6b9188; border-radius: 20px; box-shadow: none; }
.tactic-cycle, .counter-chain { background: #214c54; border-color: #6b9a8e66; border-radius: 12px; box-shadow: 0 3px 0 #10303a; }
.tactic-copy small { color: #bdd4ca; }
.tactic-cycle.counter-ready { background: #f3dc83; border-color: #fff1b5; box-shadow: 0 3px 0 #97834c; animation: none; }
.counter-label { color: #b9d4c5; }

/* Collection and reward surfaces use the same paper, edge and ink system. */
.overlay { background: #09272dd9; backdrop-filter: blur(9px); }
.intro-card, .feedback-card, .relic-card, .gear-card, .chest-card, .zukan-card,
.result-report, .recap, .zukan-header, .gear-slot, .gear-summary, .gear-hero-card, .zukan-overview {
  color: var(--adv-ink); background: var(--adv-paper); background-image: none;
  border: 1px solid #d1d7bf; border-radius: 22px;
  box-shadow: 0 5px 0 #aebaa6, 0 18px 45px #06282b18, inset 0 2px 0 #fff;
}
.intro-title, .fb-meaning, .recap-title, .relic-name { color: #277f76; }
.intro-text, .intro-list li, .intro-more, .fb-example-ja, .fb-hint, .gear-meta, .gear-affix.implicit, .gear-vs, .card-ja { color: #5a7269; }
.gear-affix, .relic-desc, .gear-name, .chest-desc { color: #385f56; }
.intro-text b, .intro-list b, .intro-steps b, .fb-example b { color: #197e77; }
.intro-steps li, .intro-more, .fb-example, .recap-item, .result-stats span { color: #365f56; background: #edf0df; border-color: #dce2cc; border-radius: 13px; }
.intro-glyph, .recap-title::before { color: #fff9e7; background: #267e77; border: 0; box-shadow: none; }
.fb-word, .card-word, .zukan-header h2, .gear-summary, .result-stats b, #result-score-num { color: #193e46; -webkit-text-fill-color: #193e46; }
.fb-verdict.ok { color: #258258; }
.fb-verdict.ng { color: #c45544; }
.feedback-card.correct { border-color: #78b999; box-shadow: 0 5px 0 #558f75, 0 18px 42px #06282b38; }
.feedback-card.wrong { border-color: #d38470; box-shadow: 0 5px 0 #ae6a55, 0 18px 42px #06282b38; }
#screen-result, #screen-zukan, #screen-gear { color: var(--adv-ink); background: var(--adv-cream); }
.result-title { color: #1c635e; -webkit-text-fill-color: #1c635e; text-shadow: 0 3px 0 #fff; }
.result-kicker, .result-score-label { color: #6c8774; }
.result-rank-shell { background: radial-gradient(circle, #fffdf1 0 40%, #e6c875 42% 65%, #f8e8a5 67% 73%, #c0a266 75%); border-color: #9c8654; box-shadow: 0 6px 0 #89764f, 0 16px 30px #384b2926, inset 0 2px 0 #fff5c9; }
.result-score { border-bottom-color: #d5ddc8; }
.result-achievement { color: #3a6d5e; background: #e4ecd8; border-color: #bccdb5; }
.result-achievement b, .recap-word { color: #197970; }
.recap-ja { color: #48695f; }
.recap-empty { color: #2b7e58; }
.result-buttons .mode-btn { padding-left: 25px; padding-right: 54px; text-align: center; }
.result-buttons #btn-result-gear { padding-left: 59px; font-size: 16px; }
.collection-heading > span, .collection-eyebrow { color: #438776; }
.zukan-progress { color: #367e70; }
.zukan-overview-copy strong, .gear-hero-copy strong { color: #224f49; }
.zukan-overview-copy small, .gear-hero-copy span, .gear-inv-title { color: #607a69; }
.gear-inv-title b { color: #325e51; }
.gear-inv-title small { color: #607a69; }
.gear-slot .slot-label, .gear-slot .slot-empty { color: #6c806d; }
.gear-slot.empty, .gear-empty, .zukan-card.unowned { color: #718574; background: #e3e9d8; border-color: #c3d2b8; box-shadow: 0 3px 0 #bacab0; }
.gear-slot.empty:hover, .zukan-card.unowned:hover { background: #e3e9d8; }
.gear-slot.empty .slot-label, .gear-slot.empty .slot-empty, .gear-empty p, .gear-empty small, .zukan-card.unowned .card-ja, .zukan-card.unowned .card-word { color: #70816c; }
.gear-empty strong { color: #355c4c; }
.gear-btn, .zukan-tier-btn { color: #42665b; background: #e1ead7; border: 1px solid #bacdb2; border-radius: 12px; box-shadow: 0 3px 0 #b1c2a6; }
.gear-btn.primary, .zukan-tier-btn.selected { color: #fffbed; background: #237d76; border-color: #17665f; box-shadow: 0 3px 0 #165951; }

@media (min-width: 900px) {
  #screen-result.active { grid-template-columns: minmax(230px,.65fr) minmax(0,1.4fr); align-content: start; padding-top: 40px; }
  #screen-result .result-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-result .result-buttons #btn-retry { grid-column: 1/-1; }
}

@media (max-width: 1050px) and (min-width: 761px) {
  #screen-title.active { grid-template-columns: minmax(280px,.75fr) minmax(0,1.15fr); }
  .lobby-menu { padding: 26px 22px; }
  #screen-title .mode-btn { padding-left: 49px; font-size: 13px; }
  .mode-icon { left: 9px; width: 30px; }
}
@media (max-width: 760px) {
  #screen-title.active { display: block; }
  .lobby-hero { min-height: 0; height: 245px; padding: 23px 22px; align-items: flex-start; justify-content: flex-start; }
  .lobby-eyebrow { font-size: 9px; letter-spacing: .12em; }
  #screen-title .game-logo { width: 65%; margin-top: 17px; text-align: left; z-index: 1; }
  #screen-title .logo-en { font-size: clamp(27px, 5.9vw, 42px); }
  #screen-title .logo-ja { font-size: 11px; letter-spacing: .02em; margin-top: 10px; }
  #screen-title .title-showcase { position: absolute; width: 216px; height: 239px; right: -32px; left: auto; top: 4px; margin: 0; opacity: 1; }
  #screen-title .showcase-word, #screen-title .title-showcase::before { display: none; }
  #screen-title .title-sub { position: relative; z-index: 1; width: 53%; font-size: 11px; line-height: 1.7; margin: 20px 0 12px; text-wrap: balance; }
  #screen-title .hero-badge { position: relative; z-index: 1; min-height: 0; max-width: 67%; align-self: flex-start; font-size: 10px; padding: 7px 10px; }
  .lobby-menu { position: relative; padding: 24px 18px 26px; border-radius: 26px 26px 0 0; margin-top: -20px; background: var(--adv-cream); }
  .lobby-heading { margin-bottom: 19px; }
  .lobby-heading h2 { font-size: 24px; }
  .lobby-heading p { font-size: 12px; }
  #screen-title .tier-btn { font-size: 15px; min-height: 53px; }
  #screen-title .tier-btn small { font-size: 10px; }
  #screen-title .mode-buttons { gap: 11px; }
  #screen-title .mode-btn { min-height: 100px; padding: 44px 12px 13px; font-size: 14px; border-radius: 16px; }
  #screen-title .mode-icon { left: 12px; top: 12px; transform: none; width: 26px; height: 26px; font-size: 20px; background: none; }
  #screen-title .mode-btn::after { top: 14px; transform: none; right: 13px; font-size: 20px; }
  #screen-title .mode-btn.primary { padding: 19px 40px 19px 62px; min-height: 94px; font-size: 21px; }
  #screen-title .mode-btn.primary .mode-icon { top: 23px; left: 14px; width: 35px; height: 40px; background: #ffdc86; }
  #screen-title .mode-btn.primary::after { top: 35px; right: 10px; font-size: 16px; }
  #screen-title .mode-btn small { font-size: 11px; }
  #screen-title .mode-row .mode-btn { min-height: 85px; }
  .mode-row { gap: 11px; }
  #screen-title .title-footer { gap: 6px; }
  .opt-btn { min-height: 44px; padding-inline: 8px; font-size: 11px; }
}
@media (max-width: 560px) {
  #screen-game { overflow-y: auto; }
  .hud { padding: 9px 12px; }
  .hud-floor { font-size: 20px; }
  .hud-mode { font-size: 12px; }
  .battle-status { min-height: 45px; }
  .battle-status > span { font-size: 12px; }
  .battle-status > small { font-size: 11px; }
  .mobile-question-prompt:not(.hidden) { min-height: 61px; margin: 0 10px 10px; padding: 8px 12px; }
  .mobile-question-prompt > span { font-size: 11px; }
  .mobile-question-prompt > strong { font-size: 29px; }
  .mobile-question-prompt.jp > strong { font-size: 23px; }
  .mobile-question-prompt.listen > strong { font-size: 17px; }
  .choice-btn { min-height: 59px; font-size: 18px; padding-block: 12px; border-radius: 15px; }
  .choices { gap: 10px; padding-bottom: 13px; }
  .skill-name { font-size: 12px; }
  .skill-btn small { font-size: 10px; }
  .skill-caption .giveup-btn { min-height: 36px; font-size: 12px; }
  .tactic-copy small { font-size: 11px; }
  .tactic-copy strong { font-size: 14px; }
  .bottom-hud { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .result-buttons { grid-template-columns: 1fr; }
  .result-buttons .mode-btn { min-height: 67px; }
  .intro-card { padding: 22px 19px; }
  .intro-text { font-size: 14px; line-height: 1.8; }
  .intro-steps b { font-size: 15px; }
  .intro-steps small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  button, .screen.active { transition: none !important; animation: none !important; }
}

@media (max-width: 360px) {
  #screen-title .mode-buttons { grid-template-columns: 1fr; }
  #screen-title .mode-btn { min-height: 78px; padding: 16px 32px 16px 52px; font-size: 15px; }
  #screen-title .mode-btn .mode-icon { top: 25px; }
  #screen-title .mode-btn::after { top: 25px; }
  #screen-title .mode-btn.primary { font-size: 19px; }
  #screen-title .mode-row .mode-btn { padding: 42px 10px 12px; font-size: 14px; }
  #screen-title .mode-row .mode-icon { top: 12px; }
}