/* WORD RUNNER：スマホ縦持ち・片手操作が基準 */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: #0b1626; color: #f2f6ff;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
#app { min-height: 100%; display: flex; justify-content: center; }
.screen {
  width: 100%; max-width: 420px; min-height: 100dvh; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
h1 { margin: 16px 0 0; font-size: 34px; letter-spacing: 0.06em; color: #ffd166; }
h2 { margin: 12px 0 0; font-size: 28px; text-align: center; }
h3 { margin: 12px 0 0; font-size: 16px; align-self: flex-start; color: #ffb4a2; }
.sub { margin: 0; font-size: 15px; color: #a9c1e8; }
.lead { font-size: 18px; text-align: center; }
.player { margin: 8px 0 0; font-size: 14px; color: #cfe3ff; text-align: center; }
.howto { margin: 4px 0 8px; font-size: 15px; line-height: 1.7; text-align: center; }
.howto strong { color: #ffd166; }
.note { margin: 0; font-size: 13px; color: #a9c1e8; text-align: center; }
.stack { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.btn {
  width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-radius: 14px;
  background: #2f80ed; color: #fff; font: inherit; font-size: 19px; font-weight: bold;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  touch-action: manipulation; cursor: pointer;
}
.btn:active { transform: translateY(1px); background: #1f66c7; }
.btn small { font-size: 12px; font-weight: normal; color: #dbe9ff; }
.btn.ghost { background: transparent; border: 2px solid #46618c; color: #cfe3ff; min-height: 52px; }
.btn.cleared { background: #1f9d68; }
.link { background: none; border: 0; padding: 6px; color: #8fc0ff; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }

.settings { margin-top: 8px; display: flex; gap: 20px; font-size: 15px; }
.settings label { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.settings input { width: 22px; height: 22px; }

.score { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#result-correct { font-size: 30px; font-weight: bold; color: #ffd166; }
#result-score { font-size: 16px; color: #cfe3ff; }
.missed { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.missed li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: #16253d;
}
.missed .en { font-size: 19px; font-weight: bold; overflow-wrap: anywhere; }
.missed .ja { font-size: 16px; color: #ffe9a8; text-align: right; }
.missed .none { justify-content: center; color: #a9c1e8; }

/* あそぶ画面：Canvas 1枚を 9:16 で画面に合わせる */
.screen.play { max-width: none; padding: 0; gap: 0; justify-content: center; position: relative; background: #000; }
#game {
  display: block; width: min(100vw, calc(100dvh * 9 / 16)); height: auto; aspect-ratio: 9 / 16;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.quit {
  position: absolute; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
  min-width: 64px; min-height: 44px; border: 0; border-radius: 10px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}

/* 距離チャレンジ：道と樽を主役にする。 */
#screen-title { gap: 10px; padding-top: 16px; }
#screen-title h1 { margin-top: 6px; font-size: clamp(28px, 8vw, 34px); }
.hero { width: 100%; height: 160px; position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(0deg, #0b1626 0%, transparent 50%), url('assets/img/bg_1.png') center 45% / 100% auto; }
.hero-barrel { position: absolute; width: 120px; left: calc(50% - 60px); top: -10px; }
.hero-soldier { position: absolute; width: 62px; left: calc(50% - 31px); top: 76px; }
.hero span { position: absolute; bottom: 1px; width: 100%; text-align: center; font-size: 13px; color: #dce9ed; }
.record { display: flex; flex-direction: column; align-items: center; gap: 0; color: #a9c1e8; font-size: 12px; }
.record strong { color: #fff; font-size: 46px; line-height: 1.2; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.record small, .distance small { font-size: 22px; color: #a9c1e8; letter-spacing: 0; }
.btn.primary { background: #ffd166; color: #142336; flex-direction: row; justify-content: space-between; padding: 12px 24px; box-shadow: 0 4px 0 #ac762a; }
.btn.primary:active { background: #f6bd4d; }
.howto { font-size: 14px; margin: 6px 0 0; }
.howto span { color: #a9c1e8; font-size: 12px; }
.player { font-size: 12px; margin-top: 0; }
.history, .practice { width: 100%; border-top: 1px solid #293a50; }
summary { min-height: 44px; padding: 12px 2px; font-size: 14px; cursor: pointer; color: #cfe3ff; }
summary small { float: right; color: #a9c1e8; }
.practice .note { margin-bottom: 10px; }
.history ol { list-style: none; padding: 0; margin: 0 0 8px; }
.history li { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; font-size: 13px; color: #a9c1e8; }
.history strong { color: #fff; font-size: 17px; }
.distance { font-size: 66px; font-weight: bold; margin: 4px 0; color: #ffd166; line-height: 1.15; font-variant-numeric: tabular-nums; }
.new-best { color: #ffd166; margin: 0; font-size: 14px; letter-spacing: .1em; }
#screen-result.distance-result #result-correct { font-size: 21px; color: #f2f6ff; }
:focus-visible { outline: 3px solid #82e5ff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mode-picker { width: 100%; display: flex; margin: 2px 0; padding: 4px; border: 1px solid #415772; border-radius: 12px; gap: 4px; }
.mode-picker label { position: relative; flex: 1; cursor: pointer; }
.mode-picker input { position: absolute; opacity: 0; }
.mode-picker span { display: grid; min-height: 44px; place-items: center; border-radius: 8px; color: #adc4df; font-size: 14px; font-weight: bold; }
.mode-picker input:checked + span { background: #ffd166; color: #142336; }
.mode-picker input:focus-visible + span { outline: 3px solid #82e5ff; outline-offset: 1px; }
.level-field { width: 100%; display: flex; align-items: center; gap: 12px; }
.level-field label { font-size: 12px; color: #cfe3ff; white-space: nowrap; }
select { min-width: 0; min-height: 44px; border: 1px solid #46618c; border-radius: 8px; background: #16253d; color: #f8fbff; font: inherit; font-size: 14px; padding: 8px; }
.level-field select { flex: 1; }
.attack-rule { font-size: 13px; color: #cfe3ff; line-height: 1.65; text-align: center; margin: 0; }
.attack-rule strong { color: #ffd166; }
.practice-stage { border-left: 3px solid #46618c; padding-left: 10px; display: flex; flex-direction: column; gap: 6px; }
.practice-stage .level-field { gap: 6px; }
.practice-stage .btn { min-height: 54px; }
.curriculum { width: 100%; color: #a9c1e8; font-size: 12px; border-top: 1px solid #293a50; }
.curriculum p { line-height: 1.7; }
.curriculum a { color: #9dcaff; }
.curriculum ol { padding-left: 24px; line-height: 1.9; }
.distance.attack-distance { font-size: clamp(36px, 12vw, 50px); }