/* 夜明けの海。画面の状態で見せるものを入れ替える。
   色で意味を分けない（赤と緑の対比を使わない）ので、判定は文字と動きで伝える。 */

:root {
  --ink: #eef1f7;
  --ink-quiet: #c3cbdb;
  --ground: #0b1322;
  --panel: #16203385;
  --line: #33405a;
  --accent: #f4a765;
  --accent-ink: #21120a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.head__day {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--ink-quiet);
}

h1 {
  margin: 0.15rem 0 0.5rem;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.3;
}

.lede { margin: 0; color: var(--ink-quiet); text-wrap: pretty; }
.lede strong { color: var(--ink); }

/* ---------------------------------------------------------------- 舞台 */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 58vh;
  border-radius: 14px;
  overflow: hidden;
  background: #101a2c;
  border: 1px solid var(--line);
  touch-action: manipulation;
}

/* ⚠️ 枠の高さが flex で決まるとき、height:100% は解決できずcanvas自身の属性値に落ちる。
   しかもその属性値は resize() が測った値なので、小さいまま固まって戻らなくなる。
   絶対配置なら親の高さの決まり方に関係なく埋められる。 */
#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.verdict {
  position: absolute;
  left: 50%;
  bottom: 33%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.1em 0.6em;
  font-size: clamp(1.1rem, 4.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 10px #000c, 0 0 3px #000c;
  pointer-events: none;
  white-space: nowrap;
}

/* 早いのか遅いのか。色ではなく言葉で出す（色に意味を持たせない方針） */
.verdict__dir {
  display: block;
  margin-top: 0.1em;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ffe9c8;
}

.hud {
  position: absolute;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #eaf0ff;
  text-shadow: 0 1px 6px #000b;
  pointer-events: none;
}

.hud--top { inset: 0.55rem 0.7rem auto; justify-content: center; }
.hud--bottom { inset: auto 0.7rem 0.5rem; }
.hud__combo { font-weight: 700; }
.hud__ship { font-variant-numeric: tabular-nums; }

.ladder {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-quiet);
  text-wrap: pretty;
}

.ship-state {
  margin: 0 0 0.8rem;
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- 板 */

.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  background: var(--panel);
}

.panel h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }

.rules { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.rules li { margin-bottom: 0.25rem; }
.rules b { color: var(--accent); }

.note { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-quiet); text-wrap: pretty; }
.note--warn { border-left: 3px solid var(--accent); padding-left: 0.7rem; }

.warning {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 0.9rem;
}

.buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

.button {
  appearance: none;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #1d2942;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button:focus-visible { outline: 3px solid #9fc4ff; outline-offset: 2px; }

.cal { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cal__label { font-size: 0.9rem; color: var(--ink-quiet); }
.cal input { flex: 1 1 12rem; min-width: 8rem; accent-color: var(--accent); }
.cal__value { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5ch; }

.counting { margin: 0; text-align: center; font-size: 1.1rem; color: var(--ink-quiet); }

.rank { margin: 0; font-size: clamp(1.6rem, 7vw, 2.3rem); font-weight: 800; }
.rank__note { margin: 0.2rem 0 0.8rem; color: var(--ink-quiet); }

/* 4つの数字は、狭い画面で3+1に割れると「から振り」だけ取り残される（体験評価3周目）。
   割れるときは2×2にする。 */
.tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0; }
@media (max-width: 30rem) { .tally { grid-template-columns: repeat(2, 1fr); } }
.tally__row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  text-align: center;
}
.tally dt { font-size: 0.78rem; color: var(--ink-quiet); }
.tally dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.tap {
  appearance: none;
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: manipulation;
}

.about { border-top: 1px solid var(--line); padding-top: 1rem; }
.about h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.about p { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--ink-quiet); text-wrap: pretty; }
.about code { font-size: 0.86em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 状態ごとの出し分け */

.panel--title, .panel--cal, .panel--result, .panel--error, .counting, .tap, .stage { display: none; }

[data-state="empty"] .panel--title { display: block; }
[data-state="calibrating"] .panel--cal { display: block; }
[data-state="result"] .panel--result { display: block; }
[data-state="error"] .panel--error { display: block; }
[data-state="loading"] .counting { display: block; }

[data-state="loading"] .stage,
[data-state="playing"] .stage,
[data-state="result"] .stage { display: block; }

/* 練習の1発はカウントインの中で来るので、読込中でも押せるようにしておく */
[data-state="playing"] .tap,
[data-state="loading"] .tap { display: block; }

/* 遊んでいる間は、海と、進み具合と、押すところだけ残す */
[data-state="playing"] .head,
[data-state="playing"] .about,
[data-state="playing"] #share,
[data-state="playing"] .warning { display: none; }

/* ⚠️ data-state を持っているのは .page 自身なので、子孫セレクタでは当たらない。
   `[data-state="playing"] .page` と書いて、モバイルの余白が半分残ったまま気づかなかった。 */
.page[data-state="playing"],
.page[data-state="loading"] { min-height: 100dvh; }

[data-state="playing"] .stage,
[data-state="loading"] .stage {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 42vh;
  max-height: none;
}

/* 結果では海を小さくする。大きいままだと「もう一度」が画面の下で切れて押せない
   （体験評価1周目に1200×943で実測・下端967px） */
[data-state="result"] .stage { max-height: 30vh; }

/* 補正の警告は、直したあとも消さない（何が起きたか分かるようにしておく） */
[data-state="calibrating"] .warning { display: none; }

@media (prefers-reduced-motion: reduce) {
  .verdict { transition: none; }
}