/* =========================================================================
 * ふたつめの波 — styles.css
 *
 * 世界観:「一枚の水」
 *   地は生成り。波と灯と岩は藍。砂色は灯がともった瞬間の輪だけ。
 *   憲法第22条(砂は選択の瞬間にだけ)と第24条(交差するが、接続しない)に従う。
 *
 * canvasの色はここのトークンを唯一の定義源とし、app.jsが読み出す。
 * JS側に色を書かない。
 * ========================================================================= */

:root {
  /* ---- 憲法第22条の4系統 ---- */
  /* 生成り — 基調 */
  --bg: #FBFAF7; --bg-2: #F4EFE6; --bg-3: #EAE2D3;
  /* 炭 — 文字 */
  --ink: #1B1B1E; --ink-2: #45464C; --ink-3: #63646B; --ink-4: #B6B3AB;
  /* 藍 — 骨格 */
  --navy: #16233E; --blue: #24365C;
  /* 砂 — 温度(選択の瞬間だけ) */
  --sand: #A98F63;

  /* ---- 水のトークン(app.jsが getComputedStyle で読む) ---- */
  --w-ground: var(--bg-2);   /* 水の面 */
  --w-line:   var(--blue);   /* 波 */
  --w-deep:   var(--navy);   /* 灯と岩 */
  --w-choice: var(--sand);   /* 灯がともった瞬間の輪 */

  --mincho: 'Shippori Mincho B1', 'Noto Serif JP', serif;
  --sans: 'Noto Sans JP', sans-serif;
  --bar-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111521; --bg-2: #161B2B; --bg-3: #1D2436;
    --ink: #EDEAE2; --ink-2: #C2BFB6; --ink-3: #8A8D98; --ink-4: #565A68;
    --navy: #D8DEEB; --blue: #9FB1D4;
    --sand: #C2A97E;
  }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  background: var(--w-ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 水。バーの下から画面の底まで ----
 * canvasは置換要素なので、top/bottomの指定だけでは高さが決まらない
 * (高さautoのときは属性の固有サイズが使われ、bottomは無視される)。
 * 高さを式で与えて画面の底まで伸ばす。 */
.water {
  position: fixed;
  left: 0;
  top: calc(var(--bar-h) + env(safe-area-inset-top));
  width: 100%;
  height: calc(100vh - var(--bar-h) - env(safe-area-inset-top));
  height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top));
  display: block;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

/* ---- 上のバー。地の色に浮かべるだけで、線を引かない ---- */
.bar {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0; right: 0;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right));
  z-index: 2;
}

.mark {
  grid-column: 2;
  font-family: var(--mincho);
  font-size: 16px;
  letter-spacing: .14em;
  color: var(--ink-2);
  text-indent: .14em;
  user-select: none;
}

.back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  font-size: 12px; letter-spacing: .08em;
  color: var(--ink-3); text-decoration: none;
  transition: color .2s ease;
}
.back:hover, .back:focus-visible { color: var(--ink); }

/* ---- 残りの波。数字ではなく丸で見せる ---- */
.left {
  grid-column: 3;
  justify-self: end;
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
}
.left i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--ink-4);
  transition: background-color .3s ease, border-color .3s ease;
}
.left i.on { background: var(--ink-3); border-color: var(--ink-3); }

.btn {
  min-height: 44px; padding: 0 22px;
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  background: none;
  font-family: var(--sans);
  font-size: 13px; letter-spacing: .1em;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.btn.small { padding: 0 14px; font-size: 12px; }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--ink-3); }

/* ---- 何面めか。数えるためではなく、いまどこにいるかのため ---- */
.stage {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink-4);
  pointer-events: none;
  transition: opacity .6s ease;
}
.stage.hide { opacity: 0; }

.hint {
  position: fixed;
  left: 50%;
  bottom: calc(62px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  padding: 0 20px;
  font-size: 13px; line-height: 1.7; letter-spacing: .04em;
  color: var(--ink-3);
  text-align: center;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.hint.gone { opacity: 0; }
/* 一度触れた人には最初から出さない。消える動きも見せない */
.hint.hidden { opacity: 0; transition: none; }

/* ---- 印を置いたときだけ現れる「放つ」 ----
 * 見えていないあいだは visibility ごと畳む。opacity:0 のままだと
 * 透明なボタンが画面の上に居座って、触れてしまう。 */
.act {
  position: fixed;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s, color .2s ease, border-color .2s ease;
}
.act.show { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---- 最後の面のあと ---- */
.over {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: var(--w-ground);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.over.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.over p {
  font-family: var(--mincho);
  font-size: 20px; letter-spacing: .26em; text-indent: .26em;
  color: var(--ink-2);
}

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

:focus-visible { outline: 1px solid var(--ink-4); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hint, .stage, .act, .over { transition: none; }
}