:root {
  --font: "M PLUS 1", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --ink: #273546;
  --muted: #6c7987;
  --bg: #edf0f2;
  --card: #fff;
  --line: #cbd3dc;
  --track: #d7dde3;
  --blue: #2869dc;
  --red: #e04c3d;
  --fire: #e2582a;
  --night: #0c0806;
  --bar: #0b0b0b;
  --bar-ink: #f1f1eb;
  /* 火の上に重ねる UI は黒いガラス。ページの明るい札とは別の系統 */
  --glass: rgba(12, 10, 9, .78);
  --glass-ink: #f3e9dc;
  --glass-muted: rgba(243, 233, 220, .7);
  --glass-line: rgba(255, 255, 255, .14);
  --glass-blur: blur(8px);
  --ember: #ffb85a;
  --warn: #ffb3a0;
  --button-depth: 3px;
  --button-shadow-color: #d5dbe1;
  --button-shadow: 0 var(--button-depth) 0 var(--button-shadow-color);
  --radius: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --tray-btn: 44px;
  /* ノッチぶんの余白。ふだんは 0 で、画面いっぱいの時だけ env() を入れる */
  --inset-top: 0px;
  --inset-right: 0px;
  --inset-bottom: 0px;
  --inset-left: 0px;
}

* { box-sizing: border-box; }

/* display を指定した要素でも hidden 属性が効くように（ブラウザ既定の display:none は負けてしまう） */
[hidden] { display: none !important; }
/* Web 公開版（scripts/build-web.js が付ける）では、お店・ライター・景色えらびを出さない */
:root[data-edition="public"] [data-full-only] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
}

/* manipulation で二度押しの拡大を止める。灰色のフラッシュも消す */
button { font: inherit; color: inherit; touch-action: manipulation; }
button, .layer { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.stage-frame :focus-visible { outline-color: var(--ember); }

/* ---- 上のバー ---- */
/* iPhone のノッチ側の帯も上のバーと同じ色で塗る */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--bar);
}

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--bar);
  color: var(--bar-ink);
}
.topbar-mark {
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #ffd27a 0 25%, var(--fire) 60%, #a8301b 100%);
}
.topbar-title { margin: 0; font-size: 14px; letter-spacing: .1em; }

/* ---- ページ ---- */
.page {
  width: min(100%, 460px);
  margin: 0 auto;
  padding-block: 20px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.title {
  margin: 8px 0 0;
  text-align: center;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.1;
}
.title-hi { color: var(--red); }
.lead {
  margin: 6px 0 18px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  border-top: 3px solid var(--fire);
  box-shadow: 0 1px 2px rgba(39, 53, 70, .08), 0 6px 20px -12px rgba(39, 53, 70, .25);
}

/* ---- 火の景色 ---- */
.stage { padding: 12px; }

/* 最初の一枚が描かれるまでは熾火の明かりだけを置いておく（真っ黒だと壊れて見える）。キャンバスが上を覆う */
.stage-frame {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(60% 30% at 50% 63%, #5a2410 0%, #1d0d07 55%, var(--night) 100%);
}
.stage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(226, 88, 42, 0);
  pointer-events: none;
  transition: box-shadow .2s var(--ease);
}
.stage-frame.is-drop-target::after { box-shadow: inset 0 0 0 3px rgba(226, 88, 42, .7), inset 0 0 40px rgba(255, 140, 60, .35); }

.layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.layer-top { touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* 景色の切り替えのまばたき。黒い幕を 180ms で上げ下げする（絵の上、ボタンの下） */
.stage-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-in-out;
}
.stage-veil.is-on { opacity: 1; }

/* 長押しの進みぐあい。芋の上に出るリング */
.hold-ring {
  position: absolute;
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(rgba(255, 200, 120, .95) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .15) 0);
  -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px);
  mask: radial-gradient(circle, transparent 22px, #000 23px);
  pointer-events: none;
}

/* ---- 対戦の表示 ---- */
.hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: #f3e9dc;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
/* 上の帯。右上のボタン（音・あそびかた・もどる）の下に置く。横に並べるとスマホの幅では重なる */
.hud-top {
  position: absolute;
  top: calc(52px + var(--inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(10, 8, 6, .55);
  transform: translateX(-50%);
  white-space: nowrap;
}
.hud-top > :empty { display: none; }
.hud-fire { font-size: 11px; opacity: .85; }
.hud-fire.is-low { color: var(--warn); opacity: 1; }
.hud-timer { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
/* 残り 10 秒。赤く、またたく */
.hud-timer.is-urgent { color: var(--warn); animation: timer-blink 1s steps(2, start) infinite; }
@keyframes timer-blink { 50% { opacity: .45; } }
.hud-dots { display: inline-flex; align-items: center; gap: 4px; }
.hud-dots span { margin: 0 4px; font-size: 10px; opacity: .7; }
.hud-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.hud-dots i.is-won.side-1 { background: #ffb85a; }
.hud-dots i.is-won.side-2 { background: #ff6a5a; }
/* 操作の説明。上の帯のすぐ下。match-ui が文を入れ、覚えたころに消す */
.hud-howto {
  position: absolute;
  top: calc(88px + var(--inset-top));
  left: 50%;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(10, 8, 6, .55);
  font-size: 11px;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .5s var(--ease);
}
.hud-howto:empty { display: none; }
.hud-howto.is-hidden { opacity: 0; }
.hud-side {
  position: absolute;
  top: 38%;
  display: grid;
  gap: 2px;
  max-width: 40%;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(10, 8, 6, .45);
}
.hud-left { left: 10px; }
.hud-right { right: 10px; text-align: right; }
.hud-name { font-size: 11px; opacity: .8; }
.hud-cue { font-size: 12px; font-weight: 800; }
.hud-side.is-pulled { opacity: .6; }

/* ---- 結果の札（夜の火の上なので黒いガラス） ---- */
.result {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(92%, 380px);
  max-height: calc(100% - 16px);
  overflow: auto;
  padding: 16px 14px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%);
  animation: result-in .5s var(--ease);
}
/* 画面いっぱいの時は上寄せ（上の帯より下）。置いた芋（画面の 7〜9 割の高さ）が札の下から見える */
body.is-gazing .result { top: calc(36% + var(--inset-top) / 2); max-height: 58%; }
@keyframes result-in { from { opacity: 0; transform: translate(-50%, -44%); } }
.result-title { margin: 0 0 10px; text-align: center; font-size: 18px; font-weight: 800; }
.result-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-sides:has(#resultP2[hidden]) { grid-template-columns: 1fr; justify-items: center; }
.result-side {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  text-align: center;
}
.result-side.is-winner { background: rgba(240, 164, 58, .14); box-shadow: inset 0 0 0 2px #f0a43a; }
.result-side .section { width: 140px; height: 90px; max-width: 100%; }
.result-name { font-size: 11px; color: var(--glass-muted); }
.result-grade { font-size: 20px; font-weight: 800; color: var(--ember); }
.result-word { font-size: 11px; color: var(--glass-muted); }
.result-score { margin-top: 4px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.result-bar { display: block; width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.result-fill { display: block; height: 100%; background: linear-gradient(90deg, #f0a43a, var(--fire)); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.result .btn-primary { background: var(--fire); color: #fff; box-shadow: 0 var(--button-depth) 0 #a8301b; }
.result .btn-ghost { color: var(--glass-ink); border-color: rgba(255, 255, 255, .25); box-shadow: 0 var(--button-depth) 0 rgba(255, 255, 255, .12); }

/* ---- ヒントとお知らせ（火の上なので黒いガラス） ---- */
.hint, .toast {
  position: absolute;
  left: 50%;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
  font-size: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* トレイのすぐ上。最初は is-hidden で、最初の一枚が描かれたら main.js が外す。そこからふわっと現れ、以後は呼吸する */
.hint {
  bottom: calc(var(--tray-btn) + 22px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  animation: hint-in .6s var(--ease) .2s backwards, hint-breathe 2.4s ease-in-out .8s infinite;
}
.hint.is-hidden { opacity: 0; transform: translate(-50%, 6px); animation: none; }
@keyframes hint-in { from { opacity: 0; } }
@keyframes hint-breathe { 50% { opacity: .65; } }

.toast {
  top: calc(48px + var(--inset-top));
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -6px);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* 画面いっぱいの時は上のボタンより下に。対決中は帯と操作の案内のさらに下に */
body.is-gazing .toast { top: calc(78px + var(--inset-top)); }
body.is-gazing.is-match .toast { top: calc(122px + var(--inset-top)); }

/* ---- 薪のトレイ（ふだんも画面いっぱいの時も、火のすぐ下） ---- */
.tray {
  display: flex;
  flex-wrap: wrap;           /* 薪が増えて 1 列に入らなければ 2 段に */
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 24px);
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12px;
  gap: 8px;
  transform: translateX(-50%);
  touch-action: none;
}
.tray-btn {
  width: var(--tray-btn);
  height: var(--tray-btn);
  padding: 0;
  background: rgba(12, 10, 9, .5);
  color: var(--glass-ink);
  border: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 3px solid var(--wood);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 800;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.tray-btn:hover { background: rgba(255, 255, 255, .16); }
.tray-btn:active { transform: translateY(2px); cursor: grabbing; }

/* ---- 画面いっぱいの時のボタン（音・あそびかた・もどる） ---- */
.gaze-bar { display: none; }
/* 月や炎の明るいところに重なっても読めるよう、白く透かさず暗いすりガラスにする */
.gaze-exit, .gaze-btn {
  height: 32px;
  background: rgba(14, 10, 8, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--glass-ink);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.gaze-exit:hover, .gaze-btn:hover { background: rgba(40, 30, 24, .78); }
.gaze-exit { padding: 0 14px; border-radius: 999px; font-size: 12px; }
/* 対決の途中で押すと「やめる？」になる。もう一度押すまで赤 */
.gaze-exit.is-armed { background: rgba(224, 76, 61, .6); border-color: rgba(255, 255, 255, .35); }
.gaze-btn { display: grid; place-items: center; width: 32px; padding: 0; border-radius: 50%; }
.gaze-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gaze-btn svg circle { fill: currentColor; }

/* ---- 火の具合 ---- */
.status {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 12px;
  padding: 12px 4px 2px;
}
.status-fire { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.status-label { font-size: 11px; color: var(--muted); }
.status-word { font-size: 20px; font-weight: 800; color: var(--fire); }
.meter {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0a43a, var(--fire) 60%, var(--red));
  transform-origin: left center;
  transform: scaleX(.5);
  transition: transform .4s var(--ease);
}
.status-stats { grid-column: 2; grid-row: 1; display: flex; gap: 14px; margin: 0; }
.status-stats div { text-align: right; }
.status-stats dt { font-size: 11px; color: var(--muted); }
.status-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
#newFireBtn { grid-column: 2; grid-row: 2; justify-self: end; }

/* ---- あそぶ ---- */
.modes { margin-top: 22px; }
/* まず「ながめる」を押してほしいので、いちばん大きく。火の番はその横、対決の 3 つはその下にならべる */
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.mode-btn {
  display: grid;
  gap: 1px;
  min-height: 48px;
  padding: 9px 6px 8px;
  margin-bottom: var(--button-depth);
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: var(--mode);
  box-shadow: 0 var(--button-depth) 0 var(--mode-shadow);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.mode-btn small { font-size: 10px; font-weight: 500; opacity: .85; }
.mode-btn:active { transform: translateY(var(--button-depth)); box-shadow: 0 0 0 var(--mode-shadow); }
.mode-gaze { --mode: #2a2f45; --mode-shadow: #171a28; grid-column: span 2; min-height: 58px; font-size: 16px; }
.mode-gaze small, .mode-watch small { font-size: 11px; }
/* 火の番は熾火の色。きそうモードだと分かるように */
.mode-watch { --mode: #b5451c; --mode-shadow: #7a2c10; min-height: 58px; font-size: 16px; }
.mode-solo { --mode: #3f9a5a; --mode-shadow: #2a6b3d; }
.mode-com { --mode: var(--blue); --mode-shadow: #1b4a9c; }
.mode-2p { --mode: var(--red); --mode-shadow: #a2342a; }
.com-level { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.seg button {
  padding: 5px 14px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* ---- 火の番ランキング ---- */
.ranking { margin-top: 22px; }
.ranking-mine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 12px;
  color: var(--muted);
}
.ranking-mine b { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.ranking-mine .btn { margin-left: auto; }
.ranking-name-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.ranking-name-field[hidden] { display: none; }
.ranking-name-field input {
  flex: 1;
  min-width: 0;
  max-width: 16em;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.ranking-name-field input:focus-visible { outline: 2px solid var(--fire); outline-offset: 1px; }
.ranking-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ranking-row {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--card);
  font-size: 13px;
}
.ranking-place { font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
/* 上位 3 人は熾火の色 */
.ranking-row:nth-child(-n+3) .ranking-place { color: var(--fire); font-size: 15px; }
.ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-time { font-variant-numeric: tabular-nums; }
.ranking-row.is-me { box-shadow: inset 0 0 0 2px var(--fire); }
.ranking-note { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }

/* ---- 景色 ---- */
.scenes { margin-top: 22px; }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 8px; }
.scene-btn {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 7px 10px 7px 7px;
  margin-bottom: var(--button-depth);
  text-align: left;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 var(--button-depth) 0 var(--line);
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.scene-btn:active { transform: translateY(var(--button-depth)); box-shadow: 0 0 0 var(--line); }
.scene-btn[aria-pressed="true"] { border-color: var(--fire); box-shadow: 0 var(--button-depth) 0 #b4521c; }
.scene-btn[aria-pressed="true"]:active { box-shadow: 0 0 0 #b4521c; }
.scene-swatch {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--swatch, #222);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.scene-name { font-size: 15px; font-weight: 800; line-height: 1.2; }
.scene-caption { font-size: 10px; color: var(--muted); line-height: 1.3; }

/* ---- 薪のカード ---- */
.woods { margin-top: 22px; }
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
}
.section-title small { font-size: 11px; font-weight: 500; color: var(--muted); }

.wood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 10px;
}
.wood-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* まだ持っていない薪。形は見せて、くべられないことが分かるよう淡く */
.wood-card.is-locked { opacity: .5; cursor: default; filter: saturate(.4); }
.woods-more { margin: 10px 0 0; text-align: right; }

/* pan-y: 指で上下になぞればページが動く。長押ししてからのドラッグは wood-tray が受け持つ */
.wood-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px 9px;
  margin-bottom: var(--button-depth);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--wood);
  border-radius: 10px;
  box-shadow: var(--button-shadow);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.wood-card:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--button-depth) + 2px) 0 var(--button-shadow-color); }
.wood-card:active { transform: translateY(var(--button-depth)); box-shadow: 0 0 0 var(--button-shadow-color); cursor: grabbing; }

.wood-glyph {
  grid-row: 1;
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  color: var(--wood);
}
.wood-reading {
  grid-row: 2;
  justify-self: center;
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
}
.wood-stats { grid-row: 1 / span 2; grid-column: 2; display: grid; gap: 5px; }
.stat { display: grid; gap: 2px; }
.stat-name { font-size: 10px; color: var(--muted); }
.bar { display: block; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar-fill {
  display: block;
  height: 100%;
  width: calc(var(--v, 0) * 100%);
  border-radius: inherit;
  background: var(--wood);
}
.wood-note {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: var(--muted);
}

/* ---- 丸ボタン ---- */
.tools { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.round-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--button-depth);
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.round-btn:active { transform: translateY(var(--button-depth)); box-shadow: 0 0 0 var(--button-shadow-color); }
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round-btn svg circle { fill: var(--ink); }
/* 音のアイコンは下の丸ボタンと画面いっぱいの時のボタンで同じ。aria-pressed が状態 */
.sound-off { display: none; }
#soundBtn[aria-pressed="false"] .sound-wave, #gazeSound[aria-pressed="false"] .sound-wave { display: none; }
#soundBtn[aria-pressed="false"] .sound-off, #gazeSound[aria-pressed="false"] .sound-off { display: inline; }
/* 全画面のあいだは「縮める」形の矢じりに */
#gazeFull[aria-pressed="true"] .fs-enter, #gazeFull[aria-pressed="false"] .fs-leave { display: none; }
.gaze-btn[hidden] { display: none; }

.btn {
  padding: 8px 22px;
  margin-bottom: var(--button-depth);
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 var(--button-depth) 0 #111a24; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: var(--button-shadow); }
/* 「火を新しくする」は一度目に「ほんとに？」と聞く。もう一度押すまで赤 */
.btn-ghost.is-armed { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 var(--button-depth) 0 #a2342a; }
.btn-small { padding: 5px 12px; font-size: 11px; }
.btn:active { transform: translateY(var(--button-depth)); box-shadow: none; }

/* ---- 火の番：火の上の記録と、消えたときの札 ---- */
.watch-hud {
  position: absolute;
  top: calc(14px + var(--inset-top));
  left: calc(14px + var(--inset-left));
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 8px 14px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(14, 10, 8, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--glass-ink);
  pointer-events: none;
}
.watch-label { font-size: 10px; letter-spacing: .12em; color: var(--ember); }
.watch-clock { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.watch-meta { font-size: 11px; color: var(--glass-muted); }
.watch-meta b { color: var(--glass-ink); font-variant-numeric: tabular-nums; }
.watch-panel { text-align: center; }
.watch-record { margin: 0; font-size: 13px; color: var(--glass-muted); }
.watch-record strong { display: block; font-size: 34px; color: var(--ember); font-variant-numeric: tabular-nums; }
.watch-note { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--glass-muted); }
.watch-panel .result-actions { flex-direction: column; align-items: stretch; }
.result .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---- お店（試作） ---- */
.shop-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.shop-items { display: grid; gap: 8px; margin-bottom: 10px; }
.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: var(--button-depth);
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 var(--button-depth) 0 var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.shop-item:hover { border-color: var(--fire); }
.shop-item:active { transform: translateY(var(--button-depth)); box-shadow: 0 0 0 var(--line); }
.shop-item b { color: var(--fire); }
.shop-item span { text-align: left; font-weight: 600; font-size: 13px; }
.shop-heading { margin: 14px 0 4px; font-size: 14px; }
.shop-heading:first-of-type { margin-top: 0; }
.shop .help-note span:last-child { white-space: nowrap; }

/* ---- あそびかた ---- */
.help {
  width: min(92vw, 400px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding: 20px 20px 0;
  border: 0;
  border-top: 3px solid var(--fire);
  border-radius: var(--radius);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.help::backdrop { background: rgba(12, 8, 6, .45); }
.help h2 { margin: 0 0 8px; font-size: 17px; }
.help h3 { margin: 10px 0 4px; font-size: 13px; color: var(--fire); }
.help ul { margin: 0 0 10px; padding-left: 1.2em; font-size: 13px; line-height: 1.65; }
.help-note { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 8px; font-size: 11px; color: var(--muted); }
.help-version { flex-shrink: 0; }
/* 「とじる」は札の底に貼りつく。文が長くなってもスクロールの先に隠れない */
.help form {
  position: sticky;
  bottom: 0;
  margin: 0 -20px;
  padding: 10px 20px 16px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--card) 40%);
  text-align: center;
}

/* ---- ドラッグ中の薪 ---- */
.ghost-log {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 110px;
  height: 28px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 9px 13px at calc(100% - 10px) 50%, var(--grain) 0 80%, transparent 85%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 45%, rgba(0,0,0,.35)),
    var(--bark);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.ghost-log span { margin-right: 14px; font-size: 17px; font-weight: 800; color: rgba(40, 20, 10, .6); }
/* 薪の絵（wood-tray が --ghost-tex に入れる）があれば、カプセルではなく絵そのものを持ち上げる */
.ghost-log.has-tex {
  width: 120px;
  height: 30px;
  border-radius: 0;
  background: var(--ghost-tex) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45));
}
.ghost-log.has-tex span { display: none; }

/* ---- 画面いっぱい（ながめる・対決） ---- */
/* iOS Safari は overflow:hidden だけでは後ろのページが指で動くので、body ごと固定する。
   スクロール位置は main.js が覚えて戻す */
body.is-gazing {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  --inset-top: env(safe-area-inset-top, 0px);
  --inset-right: env(safe-area-inset-right, 0px);
  --inset-bottom: env(safe-area-inset-bottom, 0px);
  --inset-left: env(safe-area-inset-left, 0px);
}
body.is-gazing .stage-frame {
  position: fixed;
  inset: 0;
  z-index: 50;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--night);
  touch-action: none;
}
body.is-gazing .hint { display: none; }
body.is-gazing .gaze-bar {
  display: flex;
  position: absolute;
  z-index: 2;
  top: calc(14px + var(--inset-top));
  right: calc(14px + var(--inset-right));
  align-items: center;
  gap: 8px;
  touch-action: none;
}
body.is-gazing .tray { --tray-btn: 48px; bottom: calc(18px + var(--inset-bottom)); gap: 10px; }
body.is-gazing .tray-btn { font-size: 22px; }
/* しばらく触らないとボタンが消える（ながめる中だけ。対決中は main.js が眠らせない） */
body.is-gazing .gaze-bar, body.is-gazing .tray { transition: opacity .8s var(--ease); }
body.is-gazing.is-ui-asleep .gaze-bar, body.is-gazing.is-ui-asleep .tray { opacity: 0; pointer-events: none; }
body.is-gazing.is-ui-asleep { cursor: none; }
body.is-gazing.is-ui-asleep .layer-top { cursor: none; }

/* スマホでは火を見ながら薪を選べるよう、カードを 2 列に詰める */
@media (max-width: 480px) {
  .page { padding-block-start: 12px; }
  .title { font-size: 38px; }
  .lead { margin-bottom: 12px; }
  .woods { margin-top: 16px; }
}
/* 薪のカードを 2 列に詰める。スマホと、PC の右の列 */
@media (max-width: 480px), (min-width: 960px) {
  .wood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .wood-card { padding: 8px 9px 7px; column-gap: 7px; }
  .wood-glyph { font-size: 38px; }
  .wood-stats { gap: 3px; }
  .wood-note { margin-top: 6px; padding-top: 5px; font-size: 10px; }
}
/* ---- PC の広い画面: 1 画面に収める ----
   左いっぱいに横長の火（景色は横にも広がる）、その下の薪は大きめにして数字キーでもくべられる。
   右の列に題・あそぶ・ランキング。入りきらなければ右の列だけが動く。
   スマホの縦長の「薪をえらぶ」カードは出さない（同じ薪が火の下にある。性格はマウスを乗せると出る） */
@media (min-width: 960px) {
  body:not(.is-gazing) { overflow: hidden; }
  .page {
    --side-w: clamp(320px, 26vw, 400px);
    width: 100%;
    max-width: 1680px;
    height: calc(100dvh - 44px - env(safe-area-inset-top, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-w);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "stage head" "stage side";
    column-gap: 24px;
    padding: 20px max(28px, env(safe-area-inset-right, 0px)) 20px max(28px, env(safe-area-inset-left, 0px));
  }
  .stage { grid-area: stage; display: flex; flex-direction: column; min-height: 0; padding: 14px; }
  .stage-frame { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 10px; }
  .page-head { grid-area: head; padding: 4px 0 2px; }
  .page-side { grid-area: side; min-height: 0; overflow-y: auto; padding: 0 6px 12px 2px; margin-right: -6px; scrollbar-width: thin; }
  .page-side > :first-child { margin-top: 0; }
  .title { margin-top: 0; font-size: 40px; }
  .lead { margin: 4px 0 18px; }
  .modes, .ranking { margin-top: 20px; }
  .modes { margin-top: 0; }
  /* 右の列は細いので 2 列。ながめるを上に大きく、火の番と練習、対決の 2 つ */
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-gaze { grid-column: 1 / -1; }
  .woods { display: none; }
  .tools { margin-top: 18px; }
  .tray { --tray-btn: 58px; bottom: 16px; gap: 10px; }
  .tray-btn { font-size: 25px; }
}
/* マウスで触る PC だけ: 押せるものが反応し、薪には数字キーの番号が付く */
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .mode-btn:hover { filter: brightness(1.1); }
  .mode-btn:hover:not(:active) { transform: translateY(-1px); }
  .tray { counter-reset: wood-key; }
  .tray-btn { position: relative; }
  .tray-btn::after {
    counter-increment: wood-key;
    content: counter(wood-key);
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: var(--glass-muted);
  }
}

@media (max-width: 360px) {
  .mode-btn { font-size: 13px; }
  .mode-gaze { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hint, .result, .hud-timer.is-urgent { animation: none; }
  .wood-card, .round-btn, .tray-btn { transition: none; }
  .wood-card:hover { transform: none; }
}