#game-root, .game-page--grow .grow-head, .tr-face { /* 育てる回線の題字と別の端末で続けるの面 (#game-root の外) も同じ字の大きさと色の変数を使う */
  /* 角丸と影の落ちの厚み (PR-7 §15.3・2 割細く・ここ 1 か所) */
  --r-s: 8px; --r-m: 10px; --r-l: 12px;
  --sea: #c9dcec;
  --land: #f4efe3;
  --coast: #b9a98a;
  --ink: #1b1b1b;
  --paper: #fff;
  --cream: #faf7f0;
  --chip-line: #d9d2c3;
  --red: #d9534f;
  --accent: #6aa9d8;
  --fs-s: 13px;
  --fs-m: 15px;
  --fs-l: 18px;
  --fs-xl: 22px;
  --fs-xxl: 28px;
}
#game-root * { box-sizing: border-box; }
#game-root { background: var(--cream); color: var(--ink); }
#game-root { font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: var(--fs-m); -webkit-tap-highlight-color: transparent; }
/* サイトの style.css の要素の既定 (本文の行の高さ 1.8 / 見出しの詰め / 文節の折り返し / canvas の height: auto) をゲームの中では試作と同じ既定へ戻す。
   ゲームの規則 (#game-root .名前) の方が強いので、ゲームが決めている所はゲームの値になる */
#game-root { line-height: normal; font-feature-settings: normal; letter-spacing: normal; }
#game-root :is(h1, h2, h3, p, dt, dd, li) { font-feature-settings: normal; letter-spacing: normal; word-break: normal; }
#game-root canvas { max-width: none; }
#game-root #app { display: flex; flex-direction: column; height: calc(100dvh - var(--site-head, 0px)); max-width: 560px; margin: 0 auto; position: relative; background: var(--cream); }

/* 上の帯: 3 つのチップ (日 / 届けた数 / 回線の枠) */
/* HUD: 1 本の白い帯 (左 = 日の文字盤・中央 = 届けた数・右 = 回線の枠) */
#game-root #bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; min-height: 52px; background: #fff; border-bottom: 0; box-shadow: 0 1px 3px rgba(58, 50, 38, 0.06); }
#game-root .hud-chip { display: flex; align-items: center; gap: 6px; height: 40px; }
#game-root #day-chip { gap: 8px; }
#game-root #day { font-size: var(--fs-m); font-weight: 700; white-space: nowrap; }
#game-root #score-chip { flex: 1; justify-content: center; gap: 6px; }
#game-root #score-chip svg { width: 22px; height: 22px; flex: none; }
#game-root #score { color: #1b1b1b; font-size: var(--fs-l); font-weight: 700; min-width: 2ch; display: inline-block; font-variant-numeric: tabular-nums; }
#game-root #score.roll { animation: roll-up 0.2s ease-out; }
@keyframes roll-up { from { transform: translateY(40%); } to { transform: none; } } /* 位置だけ動かす・濃さと色は変えない (FB4) */
#game-root #lines { gap: 5px; }
#game-root #lines i { width: 16px; height: 11px; border-radius: 6px; display: inline-block; border: 2px solid; background: #fff; }
#game-root #lines i.used { border-width: 0; }

#game-root #banner { position: absolute; left: 50%; width: min(520px, calc(100% - 20px)); transform: translateX(-50%); box-sizing: border-box; top: 8px; z-index: 3; padding: 10px 14px; background: var(--paper); color: var(--ink); border: 0; border-left: 5px solid var(--accent); border-radius: var(--r-s); font-size: var(--fs-m); font-weight: 600; text-align: center; box-shadow: 0 2px 8px rgba(58, 50, 40, 0.12); }
#game-root #banner.warn { border-left-color: var(--red); color: var(--red); font-size: var(--fs-s); }
#game-root #banner[hidden] { display: none; }
#game-root #app.full #bar, #game-root #app.full #foot, #game-root #app.full #banner { display: none; }
#game-root .city-dim { pointer-events: none; }
#game-root .power-face { fill: #fff; stroke: #8a8f96; stroke-width: 1.5; }
#game-root .power-icon { fill: none; stroke: #5b6b7c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#game-root .cache-face { fill: #fff; stroke: #2f7fc1; stroke-width: 2; }
#game-root .cache-hand { fill: none; stroke: #2f7fc1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#game-root .line .sat-under { opacity: 0.3; }
#game-root .line .sat-dots { stroke-linecap: butt; }
#game-root .sat-mark .sat-body { fill: #fff; stroke: #5b6b7c; stroke-width: 1.5; }
#game-root .rider.no-trail .trail { display: none; }
#game-root .trend-chip { color: #c2410c; font-size: var(--fs-s); font-weight: 600; gap: 4px; border-color: #e8a27a; }
#game-root .trend-chip svg { width: 18px; height: 18px; }
#game-root .trend-chip[hidden] { display: none; }
#game-root svg.demo .chip, #game-root svg.demo .plus { display: none; }
/* タイトルの間は上下の帯を隠す・週末のカードの間は上の帯と下のボタンをそのまま見せる (FB1) */
#game-root #app:has(#title:not([hidden])) #bar > *, #game-root #app:has(#title:not([hidden])) #foot > *, #game-root #app:has(#overlay:not([hidden])) #banner, #game-root #app:has(#overlay:not([hidden])) #guide-wrap, #game-root #app:has(#title:not([hidden])) #banner { visibility: hidden; }
#game-root #stage { background: var(--sea); flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; position: relative; }
#game-root #map { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }

/* 下の帯: 絵と字のボタンだけ */
#game-root #foot { padding: 8px 10px 12px; background: var(--cream); border-top: 0; }
/* 案内 (止めています・選ぶ回線をタップ など) は地図の下端の中央の白い帯 (FA3・下の枠は無くした) */
#game-root #guide-wrap { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; background: #fff; border: 0; border-radius: var(--r-m); box-shadow: 0 2px 8px rgba(58, 50, 38, 0.15); }
#game-root #guide-wrap.empty { display: none; }
#game-root #guide-wrap svg { width: 20px; height: 20px; flex: none; }
#game-root #guide { margin: 0; font-size: var(--fs-m); font-weight: 600; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
#game-root #buttons { display: flex; gap: 8px; }
#game-root button { font: inherit; font-size: var(--fs-m); min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: var(--paper); color: var(--ink); border-radius: var(--r-s); cursor: pointer; box-shadow: 0 1px 2px rgba(58, 50, 40, 0.08); }
#game-root #buttons button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
#game-root #buttons button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#game-root #snd[aria-pressed="false"] .wave { display: none; }
#game-root #snd[aria-pressed="true"] .mute { display: none; }
#game-root #pause .play { display: none; }
#game-root #pause.paused .play { display: inline; }
#game-root #pause.paused .bars { display: none; }
#game-root button:active { background: var(--cream); }
/* 回線を外すボタン: 選んだ回線の中ほどの近くに浮かせる (位置は main.js が毎フレーム) */
#game-root #remove { position: absolute; z-index: 3; left: 0; top: 0; height: 44px; padding: 0 16px; background: #fff; border: 2px solid var(--red); color: var(--red); font-weight: 600; box-shadow: 0 2px 8px rgba(58, 50, 38, 0.15); white-space: nowrap; }
#game-root #remove[hidden] { display: none; }

/* 地図: 沖の青 → 沿岸の浅瀬 (ぼかした 2 本の帯) → 紙の陸 → 細い海岸線 */
#game-root .sea { fill: url(#sea-grad); }
#game-root .relief ellipse { fill: #e4d9c4; fill-opacity: 0.6; }
#game-root .graticule path { fill: none; stroke: #d4e2ec; stroke-width: 0.5; }
#game-root .shore path { fill: none; stroke-linejoin: round; }
#game-root .shore-wide { stroke: #e2eff8; stroke-width: 22; }
#game-root .shore-near { stroke: #eef6fb; stroke-width: 10; }
#game-root .land { fill: var(--land); }
#game-root .land-paper { fill: url(#paper); pointer-events: none; }
#game-root .land-glow { fill: none; stroke: #fffaf0; stroke-width: 6; stroke-linejoin: round; opacity: 0.9; }
#game-root .coast { fill: none; stroke: var(--coast); stroke-width: 1; stroke-linejoin: round; }
#game-root .tint { pointer-events: none; mix-blend-mode: multiply; }
#game-root .stars { pointer-events: none; transition: opacity 0.8s linear; }
#game-root .star { fill: #fff8d6; }
#game-root svg.seventh .city-dot { fill: #fffbea; }
#game-root svg.seventh .bld-back { fill: #e8c77d; }
#game-root .star.twinkle { animation: twinkle 2.4s ease-in-out infinite; }

/* 回線: 外側 = 回線の色・内側 = 明るい芯・海の区間は白い点線の芯 */
#game-root .line-outer, #game-root .line-core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#game-root .sea-core { stroke-dasharray: 4 2; stroke-linecap: butt; }
#game-root .line-grow .line-outer { stroke-dasharray: var(--len) var(--len); animation: grow 0.4s ease-out both; }
#game-root .line-grow .line-core { animation: fade-in 0.4s ease-in both; }
#game-root .line-pick .line-outer { animation: blink 1s ease-in-out infinite; }
#game-root svg.night .line-core:not(.sea-core) { stroke: #fffbea; }
#game-root svg.night .line-outer { filter: none; }
#game-root .handle-body { transform-box: fill-box; transform-origin: center; }
#game-root .handle-pulse { animation: handle-pulse 1.2s ease-in-out infinite; }
@keyframes handle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
#game-root .handle-core { fill: #fff; }
#game-root .draft-line { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
#game-root .draft-stop { fill: none; stroke-width: 3; }

/* 街のバッジ: 白い円 + 建物の影絵 + 縁のサービスのタグ */
/* 街のバッジ: 白い円 (直径 36) + 淡いスレートの縁 2 px + 柔らかい影 1 段。混雑の間は縁が赤 */
#game-root .city-dot { fill: #fff; stroke: #b9c3ce; stroke-width: 2; }
#game-root .city-body.crowd .city-dot { stroke: var(--red); }
#game-root .home-ribbon { fill: #d98a7a; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
#game-root .home-flag { fill: #fff; stroke: #fff; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
/* ランドマーク (assets-landmarks.js): 本体 #6b7786・差し色 #c9a27a・灯り 白 (夜は #f5d58a)・線 1.5 */
#game-root .lm-b { fill: #6b7786; }
#game-root .lm-a { fill: #c9a27a; }
#game-root .lm-r { fill: #d98a7a; }
#game-root .lm-w { fill: var(--lm-light, #fff); }
#game-root .lm-wh { fill: #fff; }
#game-root .lm-wn { fill: var(--lm-light-wall, #6b7786); }
#game-root .lm-lamp { fill: var(--lm-lamp, #c9a27a); }
#game-root .lm-wall { fill: #fff; stroke: #6b7786; stroke-width: 1; }
#game-root .lm-l, #game-root .lm-al, #game-root .lm-t { fill: none; stroke: #6b7786; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#game-root .lm-al { stroke: #c9a27a; }
#game-root .lm-t { stroke-width: 1; }
#game-root .lm-tw { stroke: #fff; }
#game-root .lm-ta { stroke: #c9a27a; }
#game-root .lm-smoke { fill-opacity: 0.55; }
/* 夜は灯りがともる (use の中へは CSS 変数で渡す) */
#game-root .night { --lm-light: #f5d58a; --lm-light-wall: #f5d58a; --lm-lamp: #f5d58a; }
#game-root .city-pick { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; animation: blink 1s steps(2, start) infinite; }
#game-root .bld { fill: #5b6b7c; }
#game-root .bld-back { fill: #9aa6b3; }
#game-root .bld-ground { fill: #5b6b7c; }
#game-root .city-body { transform-box: fill-box; transform-origin: center; }
#game-root .city-body.pop { animation: pop 0.45s ease-out; }
#game-root .chip-box { fill: #fff; stroke: var(--chip-line); stroke-width: 1; }
#game-root .chip-flag { fill: #e8826f; stroke: #1b1b1b; stroke-width: 1; stroke-linejoin: round; }
#game-root .city-name { font-size: var(--fs-s); font-weight: 700; fill: var(--ink); }
#game-root .city-home-lab { font-size: var(--fs-s); fill: var(--ink); }
#game-root .chip.crowd .chip-box { stroke: var(--red); stroke-width: 1.5; }
#game-root .chip.crowd .city-name, #game-root .chip.crowd .city-home-lab { fill: var(--red); }
#game-root .more-chip { fill: #fff; stroke: var(--chip-line); stroke-width: 1; }
#game-root .q-more { font-size: var(--fs-s); font-weight: 600; fill: var(--ink); }
#game-root .surge-box { fill: #fff; stroke: var(--red); stroke-width: 1.5; }
#game-root .surge-text { font-size: var(--fs-s); font-weight: 600; fill: var(--red); }
#game-root .surge { animation: gm-pulse 1.2s ease-in-out infinite; }
#game-root .crowd-arc { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; }

/* 走る小包と届いた時の粒 */
#game-root .riders.no-trail .trail { display: none; }
#game-root .spark { animation: spark 0.5s ease-out forwards; }
#game-root .plus { font-size: var(--fs-m); font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; animation: rise 0.6s ease-out forwards; }

/* 最初の案内 */
#game-root .hint-arrow { animation: blink 1s ease-in-out infinite; pointer-events: none; }
#game-root .hint-path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
#game-root .hint-finger { fill: var(--accent); stroke: #fff; stroke-width: 2.5; pointer-events: none; }
#game-root .hint-head { fill: var(--ink); }
#game-root .hint-ring { fill: none; stroke: var(--accent); stroke-width: 3; }
#game-root .blink { animation: blink 1s ease-in-out infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-20px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(0.2); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes spark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes gm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 面 (週末のカード・遊び方・結果) */
#game-root #overlay { user-select: none; -webkit-user-select: none; position: absolute; inset: 0; z-index: 5; background: rgba(250, 247, 240, 0.88); display: flex; align-items: center; align-items: safe center; justify-content: center; padding: 16px; overflow-y: auto; } /* 板が盤面より高い時だけ上寄せでスクロール */
#game-root #overlay[hidden] { display: none; }
#game-root .panel { width: min(100%, 420px); max-height: 100%; overflow-y: auto; background: var(--paper); border: 0; border-radius: var(--r-l); padding: 18px; text-align: center; box-shadow: 0 6px 24px rgba(58, 50, 40, 0.14); animation: panel-in 0.2s ease-out; }
#game-root .panel h2 { margin: 0 0 6px; font-size: var(--fs-xl); line-height: 1.35; }
#game-root .panel p { margin: 6px 0; font-size: var(--fs-m); }
#game-root .panel .big { font-size: var(--fs-l); font-weight: 700; }
/* 主ボタン: 濃い青に白字・縁 0・下に 2 px の影 (押すと 2 px 下がる)。副ボタンは白地に本文の字と淡い縁 */
#game-root button.primary { background: #3f7cb6; border: 0; color: #fff; font-weight: 600; box-shadow: 0 2px 0 #2f5d8a; }
#game-root button.primary:active { background: #3a73a8; transform: translateY(2px); box-shadow: none; }
#game-root [aria-pressed="false"] .wave { display: none; }
#game-root [aria-pressed="true"] .mute { display: none; }

/* 週末のカード: 3 枚から 1 枚 */
#game-root .week-panel .bonus { display: inline-block; padding: 4px 12px; border-radius: var(--r-m); background: #eef6fb; border: 0; font-weight: 700; }
#game-root .cards { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
#game-root .card { position: relative; overflow: hidden; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 12px; min-height: 76px; text-align: left; border: 0; box-shadow: 0 2px 6px rgba(58, 50, 40, 0.1); border-radius: var(--r-m); background: #fff; transition: transform 0.15s ease-out, border-color 0.15s; }
#game-root .card:active, #game-root .card.chosen { transform: scale(1.04); border-color: #3f7cb6; }
#game-root .card b { font-size: var(--fs-m); line-height: 1.3; align-self: end; }
#game-root .card span { font-size: var(--fs-s); line-height: 1.45; align-self: start; grid-column: 2; word-break: keep-all; overflow-wrap: anywhere; }
#game-root #week-note { word-break: keep-all; overflow-wrap: anywhere; }
#game-root .card svg { width: 56px; height: 56px; grid-row: 1 / 3; }

/* 遊び方 */
#game-root .howto-step { font-size: var(--fs-s); font-weight: 600; }
#game-root .howto-art { display: block; width: 100%; max-width: 300px; height: auto; margin: 8px auto 4px; }
#game-root .howto-text { font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; }
#game-root .howto-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 12px; }
#game-root .howto-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--chip-line); }
#game-root .howto-dots i.on { width: 20px; background: #6aa9d8; }
#game-root .howto-buttons { display: flex; gap: 8px; }
#game-root .howto-buttons button { flex: 1; font-weight: 600; }

/* 結果: 幅 320 のカード (共有できる見た目) + カードの外の下にボタン 3 つ */
#game-root .result-wrap { width: 320px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; animation: panel-in 0.2s ease-out; }
#game-root .result-card { position: relative; overflow: hidden; background: #fff; border: 0; border-radius: var(--r-l); box-shadow: 0 6px 24px rgba(58, 50, 40, 0.14); text-align: center; }
#game-root .rc-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 12px; background: #eef3f8; border-bottom: 0; } /* ランドマークを上・見出しを下 (見出しに幅 288 を渡して 2 行に収める) */
#game-root .rc-lm { flex: none; width: 48px; height: 48px; filter: drop-shadow(0 1px 2px rgba(58, 50, 38, 0.18)); }
#game-root .rc-lm-dot { fill: #fff; stroke: #b9c3ce; stroke-width: 2; }
#game-root .rc-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.5px; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
#game-root .rc-ribbon { position: absolute; top: 12px; right: -30px; width: 110px; padding: 2px 0; transform: rotate(35deg); background: #d9a441; color: #fff; font-size: var(--fs-s); font-weight: 700; box-shadow: 0 1px 2px rgba(58, 50, 38, 0.2); }
#game-root .thumb { width: 288px; height: 220px; margin: 12px auto 6px; border-radius: var(--r-s); overflow: hidden; border: 0; background: var(--sea); }
#game-root .thumb-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
#game-root .rc-why { margin: 0 16px; font-size: var(--fs-m); font-weight: 600; color: #b8443a; }
#game-root .rc-stats { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 18px; row-gap: 4px; margin: 10px 16px; padding: 10px 0; border-top: 0; border-bottom: 0; font-size: var(--fs-m); }
#game-root .rc-stats dt { text-align: left; }
#game-root .rc-stats dd { margin: 0; text-align: left; font-weight: 700; }
#game-root .result-card .next-try { margin: 0 16px 14px; font-size: var(--fs-m); }
#game-root .result-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#game-root .result-buttons .again { grid-column: 1 / -1; }
#game-root .result-buttons button { font-weight: 600; }
#game-root .result-wrap .seed { margin: 0; text-align: center; font-size: var(--fs-s); }

/* タイトルの面: 後ろのデモの盤面を薄く見せる */
#game-root #title { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; align-items: safe center; justify-content: center; padding: 16px; background: rgba(250, 247, 240, 0.3); overflow-y: auto; }
#game-root #title[hidden] { display: none; }
#game-root .title-panel { width: min(100%, 360px); margin-bottom: 8px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding: 22px 18px; background: rgba(255, 255, 255, 0.94); border: 0; border-radius: var(--r-l); box-shadow: 0 8px 28px rgba(58, 50, 40, 0.16); }
#game-root .title-panel h1 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.5px; line-height: 1.3; word-break: keep-all; }
#game-root .logo { width: 96px; height: 96px; margin: 0 auto -2px; display: block; filter: drop-shadow(0 2px 3px rgba(58, 50, 38, 0.18)); }
#game-root .title-lead { margin: 0; font-size: var(--fs-m); }
#game-root .big-button { min-height: 46px; font-size: var(--fs-l); border-radius: var(--r-m); }
#game-root .home-pick { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-m); font-weight: 600; }
#game-root .home-pick select { font: inherit; font-size: var(--fs-m); min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); }
#game-root #title-snd { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
#game-root #title-snd svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#game-root #title-best { margin: 0; font-size: var(--fs-s); font-weight: 600; }

/* 出来事の帯の印・吹き出し・街が出た時の波紋・回線の枠が増えた時の光 */
#game-root #banner { display: flex; align-items: center; justify-content: center; gap: 8px; }
#game-root #banner:has(svg) { justify-content: flex-start; text-align: left; padding-left: 10px; } /* 出来事の帯: 左に丸い顔 + 印 (B9) */
#game-root #banner svg { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 1px rgba(58, 50, 38, 0.18)); }
#game-root .bubble { animation: pop-in 0.25s ease-out; }
#game-root .bubble-box { fill: #fff; stroke: var(--red); stroke-width: 1.5; }
#game-root .bubble-icon { fill: var(--red); }
#game-root .ev-fill { fill: #fff; }
#game-root .ev-line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#game-root .bubble-text { font-size: var(--fs-s); font-weight: 600; fill: var(--red); }
/* 街をタップした時の需要の吹き出しは警告ではないので本文の色 */
#game-root .bubble-info .bubble-box { stroke: var(--chip-line); }
#game-root .bubble-info .bubble-text { fill: var(--ink); }
#game-root .ripple-ring { fill: none; stroke: #6aa9d8; stroke-width: 2; }
#game-root #lines i.glow { animation: glow 0.3s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 6px 2px currentColor; transform: scale(1.2); } 100% { box-shadow: 0 0 0 0 currentColor; } }
@keyframes pop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 試作 d ステージ A: 目標の 1 行・提案の点線・需要の矢印・吸い付き・手引き */
#game-root #goal { margin: 0; padding: 6px 12px; background: var(--paper); border-bottom: 0; font-size: var(--fs-m); font-weight: 600; color: var(--ink); min-height: 34px; line-height: 22px; box-sizing: border-box; position: relative; z-index: 5; }
/* PR-8 §15.10 の 3: 「いま」1 行 (状態だけ) + 詰まった時だけのヒント 1 行 (足りない物)。行の頭に白い積み木のラベル (2 つは同じ幅)。
   390 はヒントを盤面の上に重ねて出す (盤面の高さは変えない)・700 px 以上は板が盤面に浮いているので板の中に 2 行目として足す */
#game-root #goal .row { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
#game-root #goal .row[hidden] { display: none; }
#game-root #goal .now { cursor: pointer; }
#game-root #goal .lab { flex: none; min-width: var(--lab-w, 4.4em); box-sizing: border-box; text-align: center; font-size: var(--fs-s); font-weight: 600; line-height: 18px; padding: 0 6px; border-radius: 4px; background: var(--white); color: var(--ink); }
#game-root #goal .tx { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game-root #goal .row.fit .tx { font-size: var(--fs-s); }
#game-root #goal.danger .now:not(.result) .tx { color: var(--red); }
#game-root #goal .now.result.good .tx { color: var(--blue); }
#game-root #goal .now.result.bad .tx { color: var(--red); }
#game-root #goal .hint { position: absolute; left: 0; right: 0; top: 100%; padding: 0 12px 6px; background: inherit; border-radius: 0 0 10px 10px; box-shadow: var(--board); }
#game-root #goal .hint .tx { white-space: normal; text-overflow: clip; } /* ヒントは 390 で切らずに 2 行まで折る (重ねて出すので盤面の高さは変わらない) */
#game-root #goal.hinting { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#game-root #app:has(#goal.hinting) #week-goal, #game-root #app:has(#goal.hinting) #banner { margin-top: var(--hint-h, 28px); } /* ヒントの行の高さだけ下げる (main.js が --hint-h を入れる) */
#game-root #app.notext #goal, #game-root #app.notext #banner, #game-root #app.notext #guide-wrap { visibility: hidden; }
#game-root #lines-pills { display: contents; }
#game-root #lines-n { display: none; }
#game-root #app.full #goal { display: none; }
#game-root .suggest { fill: none; stroke: #6b7786; stroke-opacity: 0.85; stroke-dasharray: 4 3; stroke-linecap: round; animation: suggest-flow 1s linear infinite; pointer-events: none; }
@keyframes suggest-flow { to { stroke-dashoffset: -7; } }
#game-root .demand-arrow { fill: none; stroke-linecap: round; pointer-events: none; }
#game-root .demand-layer { pointer-events: none; }
#game-root .no-dest-box { fill: #fff; stroke: var(--red); stroke-width: 1.5; }
#game-root .no-dest-text { font-size: var(--fs-s); font-weight: 600; fill: var(--red); }
#game-root .city-body.snap { animation: snap-pop 0.3s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes snap-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
#game-root .snap-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; animation: snap-ring 0.3s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes snap-ring { from { opacity: 0.9; transform: scale(0.85); } to { opacity: 0; transform: scale(1.3); } }
#game-root .tut-layer { pointer-events: none; }
#game-root .tut-cover { fill: #faf7f0; opacity: 0.55; }
#game-root .tut-ring { fill: none; stroke: var(--accent); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: tut-ring 1.2s ease-in-out infinite; }
@keyframes tut-ring { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 0.45; } }
#game-root .tut-finger { fill: #fff; stroke: #d9d2c3; stroke-width: 1.5; filter: url(#badge-shadow); }
#game-root .tut-tail1 { fill: #fff; opacity: 0.55; }
#game-root .tut-tail2 { fill: #fff; opacity: 0.3; }
#game-root #tip { position: absolute; z-index: 4; max-width: min(350px, calc(100% - 16px)); padding: 10px 14px; background: var(--paper); border: 0; border-radius: var(--r-s); box-shadow: 0 4px 14px rgba(58, 50, 40, 0.16); font-size: var(--fs-m); font-weight: 600; color: var(--ink); line-height: 1.5; pointer-events: auto; }
#game-root #tip[hidden] { display: none; }
#game-root #tip[data-soon] { max-width: min(460px, calc(100% - 16px)); } /* 予告の吹き出し 3 行 (F1): 1 行ずつ収まる幅 */
#game-root #tip span, #game-root .next-try { word-break: keep-all; overflow-wrap: anywhere; } /* 語の途中で折らない (折る所は <wbr> と句読点・anywhere は保険) */
#game-root .strip { display: flex; gap: 8px; justify-content: center; }
#game-root .strip-cell { margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#game-root .strip-cell svg { width: 100%; max-width: 100px; height: auto; }
#game-root .strip-cell figcaption { font-size: var(--fs-s); font-weight: 600; color: var(--ink); line-height: 1.35; }
#game-root .strip-cell figcaption span { display: inline-block; white-space: nowrap; } /* 意味の切れ目でだけ折る */
#game-root .small-button { min-height: 44px; font-size: var(--fs-s); font-weight: 600; background: transparent; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#game-root #tip button { display: block; margin: 8px auto 0; min-height: 44px; min-width: 120px; border-radius: 10px; font-size: var(--fs-m); font-weight: 600; }
#game-root #week-note { margin: 0 0 8px; font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
#game-root .next-try { font-weight: 600; color: var(--ink); }
#game-root .next-try span { display: block; font-size: var(--fs-s); color: var(--ink); } /* 見出しを 1 行目に置き、本文を 2 行目に */

/* 届いた瞬間の広がる輪 (0.4 秒) */
#game-root .burst-ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: burst-ring 0.4s ease-out forwards; }
@keyframes burst-ring { from { transform: scale(0.9); opacity: 0.8; } to { transform: scale(1.6); opacity: 0; } }
/* 回線の下の影と、選んだ回線の白い外縁 */
#game-root .line-shadow { fill: none; stroke: #5a4a30; stroke-opacity: 0.12; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#game-root .line-halo { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* 日の文字盤 (直径 28): 淡い面 + 地平線 + 太陽 / 月が弧の上を動く */
#game-root .dial { width: 28px; height: 28px; flex: none; }
#game-root .dial-face { fill: #fdf3dd; stroke: #e6d6b8; stroke-width: 1.5; }
#game-root .dial-arc { fill: none; stroke: #e2c99f; stroke-width: 1.5; stroke-dasharray: 2 2.4; stroke-linecap: round; }
#game-root .dial-ground { fill: none; stroke: #c9a27a; stroke-width: 1.5; stroke-linecap: round; }
#game-root .dial-sun { fill: #f2b04f; stroke: #fff; stroke-width: 1.2; }
#game-root .dial-moon { fill: #fffdf5; stroke: #b9b2a0; stroke-width: 1; display: none; }
#game-root .dial.moon .dial-face { fill: #dfe3ef; stroke: #c3cadb; }
#game-root .dial.night-week.moon .dial-face { fill: #c7cde3; }
#game-root .dial.moon .dial-sun { display: none; }
#game-root .dial.moon .dial-moon { display: inline; }
/* カード: 上に種類の色の淡い帯 4 px・縁 1 px・影 1 段・選ぶと 0.15 秒で拡大 */
#game-root .card { border-width: 1px; box-shadow: 0 2px 6px rgba(58, 50, 38, 0.12); transition: transform 0.15s ease-out; padding-top: 14px; }
#game-root .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--band, #d9d2c3); }

/* 試作 e (E-1): タイトルの面 = 上にロゴタイプ・下に街の地図とボタン。背景の生きた地図のデモが見える */
#game-root #title { flex-direction: column; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 12px 12px; background: none; }
#game-root .title-top { width: min(100%, 360px); text-align: center; padding: 14px 12px 10px; background: rgba(255, 255, 255, 0.86); border-radius: var(--r-l); box-shadow: 0 4px 16px rgba(58, 50, 38, 0.12); animation: panel-in 0.4s ease-out; }
#game-root .logotype { margin: 0; font-size: var(--fs-xxl); font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; word-break: keep-all; color: var(--ink); }
#game-root .logo-cable { display: block; width: 100%; max-width: 300px; height: 26px; margin: 2px auto 4px; overflow: visible; }
#game-root .logo-flow { animation: logo-flow 1.2s linear infinite; }
@keyframes logo-flow { to { stroke-dashoffset: -14.5; } }
#game-root .title-top .title-lead { margin: 0; font-size: var(--fs-m); }
#game-root #title .title-panel { width: min(100%, 360px); margin: 0; gap: 10px; padding: 12px 14px 8px; animation: panel-in 0.45s ease-out 0.05s both; }
#game-root .home-map-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#game-root #home-map { width: 300px; max-width: 100%; height: auto; max-height: min(400px, 38dvh); display: block; background: #d9e9f4; border-radius: var(--r-m); }
#game-root .hm-hit { fill: transparent; }
#game-root .hm-dot { fill: #fff; stroke: #b9c3ce; stroke-width: 1.5; }
#game-root .hm-city { cursor: pointer; outline: none; }
#game-root .hm-city .hm-flag { display: none; }
#game-root .hm-city.on .hm-flag { display: inline; }
#game-root .hm-city.on .hm-dot { stroke: #3f7cb6; stroke-width: 3; }
#game-root .hm-city:focus-visible .hm-dot { stroke: #1b1b1b; stroke-width: 3; }
#game-root .home-name { margin: 0; font-size: var(--fs-m); font-weight: 700; }
#game-root .title-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#game-root .title-row button { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
#game-root .title-row svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#game-root #start { animation: start-pulse 1.6s ease-in-out infinite; }
@keyframes start-pulse { 0%, 100% { box-shadow: 0 2px 0 #2f5d8a, 0 0 0 0 rgba(63, 124, 182, 0.35); } 50% { box-shadow: 0 2px 0 #2f5d8a, 0 0 0 8px rgba(63, 124, 182, 0); } }
#game-root #title-best.flash { animation: panel-in 0.3s ease-out; }

/* UI 部品: ボタンは 2 層 (面 + 下に 2 px の濃い影・押すと 1 px 沈む) */
#game-root button { box-shadow: 0 2px 0 #d2c9b6; transition: transform 0.08s ease-out, box-shadow 0.08s ease-out; }
#game-root button:active { transform: translateY(1px); box-shadow: 0 1px 0 #d2c9b6; }
#game-root button.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 #2f5d8a; }
#game-root .small-button, #game-root .small-button:active { box-shadow: none; transform: none; }
#game-root .card { box-shadow: 0 2px 0 #d2c9b6, 0 2px 8px rgba(58, 50, 38, 0.1); }
/* HUD の帯は淡い白地に薄い影で盤面から浮く */
#game-root #bar { position: relative; z-index: 2; margin: 6px 8px 0; border: 0; border-radius: var(--r-l); background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 10px rgba(58, 50, 38, 0.12); }
/* カードの絵は 96 px のフルカラー (E-1) */
#game-root .card { grid-template-columns: 96px 1fr; column-gap: 14px; }
#game-root .card svg { width: 96px; height: 96px; }
/* 動きの気持ちよさ (E-1): カードが滑り込む・帯が降りてくる (ease-out) */
#game-root .card { animation: card-in 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
#game-root .card:nth-child(2) { animation-delay: 0.07s; }
#game-root .card:nth-child(3) { animation-delay: 0.14s; }
@keyframes card-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
#game-root #banner:not([hidden]) { animation: banner-drop 0.32s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes banner-drop { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
#game-root .dial-hand { fill: none; stroke: #6b7786; stroke-width: 1.4; stroke-linecap: round; }
#game-root .dial-pin { fill: #6b7786; }

/* FE1 / FE12: 幅 700 px 以上は盤面を全面に。HUD の帯 / 目標の 1 行 / 下のボタンは盤面の上に浮かせる (中央・最大幅 720)。
   盤面の上下に隠れる幅は --view-top / --view-bottom で視点の計算へ渡す (render.js が読む)。390 は今の積み方のまま */
@media (min-width: 700px) {
  #game-root #app { max-width: none; display: block; }
  #game-root #stage { position: absolute; inset: 0; --view-top: 104px; --view-bottom: 78px; }
  #game-root #bar, #game-root #goal, #game-root #foot { position: absolute; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 16px)); box-sizing: border-box; z-index: 4; margin: 0; border: 0; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 10px rgba(58, 50, 38, 0.12); }
  #game-root #bar { top: 6px; }
  #game-root #goal { top: 64px; border-radius: var(--r-s); }
  #game-root #foot { bottom: 8px; border-radius: var(--r-l); padding: 8px 10px; }
  #game-root #banner { top: 108px; }
  #game-root #guide-wrap { bottom: 86px; }
}
/* FE4 (b): 街を選ぶ地図の絵 = 2.5D の街 + 淡い影。選んだ街は旗と名前のチップ */
#game-root .hm-shadow { fill: rgba(60, 52, 36, 0.16); }
#game-root .hm-chip { fill: #fff; stroke: #3f7cb6; stroke-width: 1.5; }
#game-root .hm-name { font-size: var(--fs-m); font-weight: 700; fill: var(--ink); }
#game-root .hm-city:focus-visible .hm-shadow { fill: rgba(27, 27, 27, 0.4); }
/* FE4 (a): ロゴタイプ = 淡い藍から白へのグラデーションの字 + 1 px の濃い縁 + 柔らかい影。ケーブルは字の後ろを通り板の左右へ抜ける */
#game-root .title-top { position: relative; overflow: visible; }
#game-root .logo-wrap { position: relative; margin: 0 -12px 6px; padding: 0 12px; }
#game-root .logo-wrap .logo-cable { position: absolute; left: 0; right: 0; top: 90%; width: 100%; max-width: none; height: 26px; margin: 0; transform: translateY(-50%); z-index: 0; }
#game-root .logo-wrap .logotype { position: relative; z-index: 1; color: #ffffff; -webkit-text-stroke: 2px #1b1b1b; paint-order: stroke fill; filter: drop-shadow(0 2px 3px rgba(40, 50, 80, 0.28)); }

/* E-2: 点の単位 / コンボ / 週の目標 / 取り消す / 実績の帯 */
#game-root .pt-unit { font-size: var(--fs-s); font-weight: 600; }
#game-root #combo { font-size: var(--fs-s); font-weight: 700; color: #b07a1c; padding: 0 6px; border-radius: 8px; background: #fbf1da; line-height: 20px; display: inline-block; font-variant-numeric: tabular-nums; }
#game-root #combo.off { visibility: hidden; }
#game-root #combo.bump { animation: combo-bump 0.2s ease-out; }
@keyframes combo-bump { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
#game-root #week-goal { position: absolute; z-index: 2; left: 8px; top: 6px; margin: 0; padding: 2px 10px; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 10px; font-size: var(--fs-s); font-weight: 600; color: var(--ink); line-height: 20px; }
#game-root #week-goal b { font-variant-numeric: tabular-nums; }
#game-root #week-goal.done { border-color: #d9a441; background: #fbf1da; }
#game-root #week-goal[hidden] { display: none; }
#game-root #app.full #week-goal, #game-root #app:has(#title:not([hidden])) #week-goal, #game-root #app:has(#overlay:not([hidden])) #week-goal { display: none; }
#game-root #banner { top: 36px; }
#game-root #undo { position: absolute; z-index: 3; right: 10px; bottom: 64px; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #fff; border: 2px solid #3f7cb6; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(58, 50, 38, 0.15); overflow: hidden; }
#game-root #undo svg { width: 20px; height: 20px; fill: none; stroke: #3f7cb6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#game-root #undo i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #3f7cb6; transform-origin: left; animation: undo-left 5s linear forwards; }
@keyframes undo-left { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#game-root #undo[hidden] { display: none; }
#game-root #banner.ach { border-left-color: #d9a441; }
#game-root .card .band { display: inline-block; margin: 0 0 4px; padding: 0 8px; border-radius: 8px; font-size: var(--fs-s); font-weight: 600; line-height: 20px; color: var(--ink); background: #dfeaf5; }
#game-root .card .band.rare { background: #f3e3b8; }
#game-root .card.rare { border-color: #d9a441; }
@media (min-width: 700px) {
  #game-root #stage { --view-top: 132px; }
  #game-root #week-goal { left: 50%; transform: translateX(-50%); top: 104px; }
  #game-root #banner { top: 136px; }
  #game-root #undo { right: auto; left: calc(50% + 240px); bottom: 86px; }
}
/* E-2: カードの出やすさの印 (よく出る / めずらしい) は絵の右の 1 段目 */
#game-root .card { grid-template-rows: auto auto auto; }
#game-root .card svg { grid-row: 1 / span 3; grid-column: 1; }
#game-root .card .band { grid-column: 2; justify-self: start; font-style: normal; align-self: end; }
#game-root .card b { grid-column: 2; align-self: center; }
/* E-2: 結果カードの称号 (大) と点 (主) */
#game-root .rc-title { margin: 6px 16px 0; font-size: var(--fs-xl); font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
#game-root .rc-title span { font-size: var(--fs-s); font-weight: 700; padding: 0 8px; border-radius: 8px; background: #f3e3b8; line-height: 20px; }
#game-root .rc-points { margin: 0 16px 4px; font-size: var(--fs-l); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* E-2: 行が増えた分、表は 2 組 (名前 + 値) を横に並べ、称号と点は 1 行に */
#game-root .rc-stats { grid-template-columns: auto auto auto auto; column-gap: 10px; font-size: var(--fs-s); }
#game-root .rc-stats dd { margin: 0 6px 0 0; font-weight: 700; }
#game-root .rc-head-row { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 16px 0; gap: 8px; }
#game-root .rc-head-row .rc-title, #game-root .rc-head-row .rc-points { margin: 0; }
#game-root .rc-head-row { flex-wrap: wrap; }
#game-root .result-wrap { gap: 8px; } #game-root .thumb { margin-top: 8px; }
/* FE14: ロゴは 1 色 (#34506c) + 外側の白い縁 2 px + 柔らかい影。ケーブルは字を横切らず、ロゴ全体の下 (2 行目の下端から 6 px 下) を通って左右へ抜ける */
#game-root .logo-wrap { padding-bottom: 19px; }
#game-root .logo-wrap .logotype { margin-bottom: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #34506c; -webkit-text-stroke: 4px #ffffff; paint-order: stroke fill; filter: drop-shadow(0 2px 6px rgba(40, 50, 80, 0.18)); }
#game-root .logo-wrap .logo-cable { top: auto; bottom: 0; transform: none; }
/* FE15: 倍率の字の下に幅 40 px の細い棒 (今の値)。上がる時は緑 / 下がる時は赤に 0.3 秒 */
#game-root #combo { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 1px 6px 3px; }
#game-root #combo-t { display: inline-block; line-height: 16px; }
#game-root #combo-t.bump { animation: combo-bump 0.2s ease-out; }
#game-root #combo-bar { display: block; width: 40px; height: 4px; border-radius: 0; background: #efe3c4; overflow: hidden; }
#game-root #combo-bar b { display: block; height: 100%; width: 100%; background: #d9a441; transform-origin: left; transform: scaleX(0); transition: transform 0.3s ease-out, background-color 0.3s; }
#game-root #combo.up #combo-bar b { background: #6fb37a; }
#game-root #combo.down #combo-bar b { background: #d9534f; }
/* E3-a: 画面の切り替え = 0.3 秒で白へ溶かして戻す */
#game-root #fade { position: fixed; inset: 0; z-index: 50; background: #ffffff; opacity: 0; pointer-events: none; }
#game-root #fade.go { animation: fade-white 0.3s ease-in-out; }
@keyframes fade-white { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
/* E3-b: 止めるの面 = 盤面を暗くして小さな板 */
#game-root #overlay.dim { background: rgba(27, 27, 27, 0.32); }
#game-root .pause-panel { width: min(100%, 300px); display: flex; flex-direction: column; gap: 8px; }
#game-root .pause-panel h2 { margin: 0 0 4px; font-size: var(--fs-l); }
#game-root .pause-panel button { width: 100%; font-weight: 600; }
#game-root .pause-panel button[aria-pressed="false"] { border-style: dashed; }
/* E-3 の 2: 統計の面 */
#game-root .stats-panel { width: min(100%, 420px); text-align: left; }
#game-root .stats-panel h2 { margin: 0 0 8px; font-size: var(--fs-xl); text-align: center; }
#game-root .stats-panel h3 { margin: 14px 0 6px; font-size: var(--fs-m); }
#game-root .st-four { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
#game-root .st-four div { background: #fff; border: 0; border-radius: 10px; padding: 6px 10px; }
#game-root .st-four dt { font-size: var(--fs-s); font-weight: 600; }
#game-root .st-four dd { margin: 0; font-size: var(--fs-l); font-weight: 700; font-variant-numeric: tabular-nums; }
#game-root .st-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#game-root .st-ladder li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 8px; border: 0; font-size: var(--fs-s); background: #fff; }
#game-root .st-ladder li.past { background: #f6efdc; }
#game-root .st-ladder li.now { background: #f3e3b8; border-color: #d9a441; border-width: 2px; }
#game-root .st-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#game-root .st-ach li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); line-height: 1.35; padding: 3px 4px; }
#game-root .st-ach svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #b9a98a; stroke-width: 1.5; stroke-linejoin: round; }
#game-root .st-ach li.got svg { fill: #e6c27a; stroke: #b07a1c; }
#game-root .stats-panel .back { display: block; width: 100%; margin-top: 14px; }
/* E-3 の 1: 新記録の紙吹雪 */
#game-root .result-card { position: relative; }
#game-root .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
#game-root .confetti i { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; animation: confetti-fall 1.6s ease-in forwards; }
@keyframes confetti-fall { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), 420px) rotate(var(--r)); opacity: 0; } }

/* FE23: 称号の梯子の点は 1 行 (名前だけ折れてよい) */
#game-root .st-ladder li span { flex: none; white-space: nowrap; }
#game-root .st-ladder li b { min-width: 0; }
/* FE24: 結果カードを 1 画面に。表は 2 列 × 4 行 (項目名の上・値の下)・縮小絵 170・見出しの余白 2/3 */
#game-root .rc-stats { grid-template-columns: 1fr 1fr; justify-content: stretch; column-gap: 8px; row-gap: 6px; margin: 8px 16px; padding: 8px 0; }
#game-root .rc-stats > div { min-width: 0; text-align: center; }
#game-root .rc-stats dt { text-align: center; font-size: var(--fs-s); line-height: 1.3; white-space: nowrap; }
#game-root .rc-stats dd { margin: 0; text-align: center; font-size: var(--fs-m); font-weight: 700; line-height: 1.3; white-space: nowrap; }
#game-root .thumb { height: 170px; }
#game-root .rc-head { padding: 9px 16px 8px; gap: 4px; }
/* FE24 (f): 広い画面では称号と点を 1 行に (最長の称号 + 5 桁の点が入る幅 400)。390 で長い称号は今のまま次の行 */
@media (min-width: 700px) { #game-root .result-wrap { width: 400px; } #game-root .rc-head-row { flex-wrap: nowrap; } }
/* FE25: 記録の面の実績の文と梯子の名前は語の途中で折らない (折れるのは半角スペースの所だけ) */
#game-root .st-ladder li b { word-break: keep-all; overflow-wrap: normal; }
/* FE26: 実績の文は 700 未満では通常の折り返し (保険に anywhere)・700 以上だけ keep-all。文の要素は min-width 0 で星と同じ行に */
#game-root .st-ach li span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
@media (min-width: 700px) { #game-root .st-ach li span { word-break: keep-all; overflow-wrap: normal; } }
/* FE26: 390 では実績の文の幅を広げる (板の左右の余白 18 → 12・星 18 → 14・間 6 → 4) */
@media (max-width: 699px) {
  #game-root .stats-panel { padding-left: 12px; padding-right: 12px; }
  #game-root .st-ach { column-gap: 2px; }
  #game-root .st-ach li { gap: 4px; padding: 3px 1px; }
  #game-root .st-ach svg { width: 14px; height: 14px; }
  #game-root .st-ach li span { text-wrap: balance; } /* FE27: 2 行の文の 2 行目が 1 字だけにならないよう均す */
}

/* ===== 試作 f 様式 C (玩具のジオラマ) の HUD: 木の板 (上面 + 下の側面 4 px + 接地の硬い影)・押せる積み木のボタン・灰の罫は使わない =====
   色は 8 色 + 墨 (cv-core.js の PAL と同じ値)。字は 13 / 15 / 18 / 22 / 28 px だけ */
#game-root, .game-page--grow .grow-head, .tr-face {
  --sea: #35607d; --wood: #e9dcc3; --side: #8a6a4a; --blue: #5a8cc0; --green: #67a05c;
  --orange: #e08a46; --gold: #e4b649; --red: #cc5644; --ink: #2c2a28;
  --white: color-mix(in srgb, var(--wood) 28%, #ffffff); --wood-side: color-mix(in srgb, var(--wood) 62%, var(--ink));
  --groove: color-mix(in srgb, var(--wood) 78%, var(--ink)); --shadow: rgba(30, 36, 40, 0.36);
  --lift: 4px; --drop: 1px 3px 0 var(--shadow); /* 10-19 ユーザー所見「影が大きすぎて安っぽい」: 2px 8px → 1px 3px (canvas の板の影 2〜4 px に揃える) */
  --board: 0 3px 0 var(--wood-side), 3px 8px 0 var(--shadow); --block: 0 var(--lift) 0 var(--wood-side), var(--drop); --block-down: 0 2px 0 var(--wood-side), 1px 2px 0 var(--shadow);
  --paper: var(--wood); --cream: var(--sea); --chip-line: var(--wood-side); --accent: var(--blue);
}
#game-root, #game-root #app, #game-root #foot { background: var(--sea); color: var(--ink); }
#game-root #bar, #game-root #goal, #game-root #week-goal, #game-root #banner, #game-root #guide-wrap, #game-root #tip { background: var(--wood); color: var(--ink); border: 0; box-shadow: var(--board); }
#game-root #bar { margin: 8px 8px 0; border-radius: var(--r-s); min-height: 56px; padding: 3px 12px 3px 10px; gap: 10px; }
#game-root #day { font-size: var(--fs-m); font-weight: 700; }
/* 日の文字盤: 木の弧の溝 + 進んだ分の金 + 橙の太陽の積み木 (夜は月) */
#game-root .dial { width: 44px; height: 30px; }
#game-root .dial-face, #game-root .dial-ground, #game-root .dial-pin { display: none; }
#game-root .dial-side { fill: none; stroke: var(--side); stroke-width: 4.4; stroke-linecap: round; }
#game-root .dial-arc { fill: none; stroke: var(--groove); stroke-width: 4.4; stroke-linecap: round; stroke-dasharray: none; }
#game-root .dial-hand { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
#game-root .dial-sun-side { fill: color-mix(in srgb, var(--orange) 68%, var(--ink)); }
#game-root .dial-sun { fill: var(--orange); stroke: none; }
#game-root .dial-sun-top { fill: color-mix(in srgb, var(--orange) 50%, #ffffff); }
#game-root .dial-moon { fill: color-mix(in srgb, var(--gold) 45%, #ffffff); stroke: none; display: none; }
#game-root .dial.moon .dial-sun, #game-root .dial.moon .dial-sun-top { display: none; }
#game-root .dial.moon .dial-moon { display: inline; }
#game-root .dial.moon .dial-sun-side { fill: color-mix(in srgb, var(--gold) 64%, var(--ink)); }
#game-root .dial.moon .dial-hand { stroke: var(--blue); }
/* 点: 金の星の積み木 (増えると跳ねる) + 28 px の彫った数字 (字の下に白の 1 px) */
#game-root #score-chip { gap: 4px; align-items: center; }
#game-root #score-icon { display: inline-flex; flex: none; }
#game-root #score-icon.hop { animation: hop 0.4s ease-out; }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.15); } }
#game-root #score { font-size: var(--fs-xxl); font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: var(--ink); text-shadow: 0 1px 0 #ffffff; }
#game-root .pt-unit { font-size: var(--fs-m); font-weight: 700; align-self: flex-end; margin: 0 4px 6px 0; }
/* 倍率の輪: 厚みのある輪 (下に側面)・増えた分を橙の弧で・×1.5 で金 */
#game-root #combo { position: relative; flex: none; width: 48px; height: 50px; padding: 0; margin: 0; background: none; border-radius: 0; display: inline-block; line-height: normal; }
#game-root #combo svg { display: block; width: 48px; height: 50px; }
#game-root .ring-side { fill: none; stroke: var(--side); stroke-width: 7; }
#game-root .ring-base { fill: var(--white); stroke: var(--groove); stroke-width: 7; }
#game-root .ring-arc { fill: none; stroke: var(--orange); stroke-width: 7; stroke-dasharray: 0 999; transition: stroke-dasharray 0.3s ease-out, stroke 0.3s; }
#game-root #combo.max .ring-arc { stroke: var(--gold); }
#game-root #combo.up .ring-arc { stroke: var(--green); }
#game-root #combo.down .ring-arc { stroke: var(--red); }
#game-root #combo-t { position: absolute; inset: 0 0 3px; display: grid; place-items: center; font-size: var(--fs-s); font-weight: 800; line-height: 1; color: var(--ink); }
/* 回線の錠剤: 使っている回線は色の積み木 + 白の線の印・残りは木の溝 + 色の線の印 */
#game-root #lines { gap: 4px; padding-bottom: 3px; height: auto; }
#game-root #lines i.pill { width: 20px; height: 30px; border: 0; border-radius: 6px; display: grid; place-items: center; background: var(--groove); box-shadow: inset 0 3px 0 var(--wood-side); }
#game-root #lines i.pill.used { background: var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 68%, var(--ink)); }
#game-root #lines i .ic { display: block; }
#game-root #lines i.glow { animation: pill-pop 0.3s ease-out; }
@keyframes pill-pop { 50% { transform: translateY(-4px) scale(1.15); } }
/* PR-8 §15.10 の 2: 回線の枠を色の積み木に。使用 = 色の塗り / 空き = 白地に色の縁 / 次に増える枠 = 木の溝に錠の印 + 「{w} 週目」 */
#game-root #lines i.pill.free { background: var(--white); box-shadow: inset 0 0 0 2px var(--c), 0 3px 0 color-mix(in srgb, var(--c) 40%, var(--wood-side)); }
#game-root #lines i.pill.lock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
#game-root #lines i.pill.lock b { font-size: var(--fs-s); font-weight: 700; line-height: 12px; font-style: normal; color: var(--ink); }
#game-root #lines .lock-w { display: none; font-size: var(--fs-s); font-weight: 600; white-space: nowrap; margin-left: -1px; }
@media (min-width: 700px) { #game-root #lines .lock-w { display: inline; } #game-root #lines i.pill.lock b { display: none; } }
/* 空きが無いのに引こうとした: 積み木が赤く 2 回震える (0.4 秒) */
#game-root #lines.deny i.pill { animation: lines-deny 0.4s ease-in-out; box-shadow: inset 0 0 0 2px var(--red), 0 3px 0 color-mix(in srgb, var(--red) 64%, var(--ink)); }
@keyframes lines-deny { 0%, 50%, 100% { transform: none; } 12.5%, 62.5% { transform: translateX(-3px); } 37.5%, 87.5% { transform: translateX(3px); } }
#game-root .trend-chip { color: var(--red); font-weight: 700; }
/* 目標の 1 行 / 週の目標: 木の板 */
#game-root #goal { margin: 12px 8px 0; border-radius: 10px; font-weight: 600; line-height: 22px; min-height: 34px; }
#game-root #week-goal { top: 12px; left: 8px; border-radius: 8px; padding: 3px 10px; line-height: 20px; font-size: var(--fs-s); font-weight: 600; }
#game-root #week-goal.done { background: color-mix(in srgb, var(--gold) 45%, var(--wood)); box-shadow: 0 3px 0 color-mix(in srgb, var(--gold) 64%, var(--ink)), 3px 8px 0 var(--shadow); }
/* 出来事の帯: 木札 (上に木の釘 2 本)・上から落ちて 1 回弾む (0.35 秒) */
#game-root #banner { top: 50px; border-radius: 6px; padding: 14px 18px 10px; font-weight: 700; }
#game-root #banner::before, #game-root #banner::after { content: ""; position: absolute; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--side); box-shadow: 0 1px 0 #ffffff; }
#game-root #banner::before { left: 8px; }
#game-root #banner::after { right: 8px; }
#game-root #banner.warn { color: var(--red); font-size: var(--fs-m); }
#game-root #banner.ach { box-shadow: 0 3px 0 color-mix(in srgb, var(--gold) 64%, var(--ink)), 3px 8px 0 var(--shadow); }
#game-root #banner svg { filter: none; }
#game-root #banner:not([hidden]) { animation: banner-drop 0.35s ease-out; }
@keyframes banner-drop { 0% { opacity: 0; transform: translate(-50%, -36px); } 65% { opacity: 1; transform: translate(-50%, 5px); } 82% { transform: translate(-50%, -2px); } 100% { transform: translateX(-50%); } }
/* ボタン: 押せる積み木 (側面 5 px + 接地の影)・押すと 0.08 秒で 2 px 沈み影が小さく */
#game-root button { border: 0; background: var(--white); color: var(--ink); border-radius: var(--r-s); box-shadow: var(--block); transition: transform 0.08s ease-out, box-shadow 0.08s ease-out; }
#game-root button:active { background: var(--white); transform: translateY(2px); box-shadow: var(--block-down); }
#game-root button.primary { background: var(--blue); color: #ffffff; box-shadow: 0 var(--lift) 0 color-mix(in srgb, var(--blue) 68%, var(--ink)), var(--drop); }
#game-root button.primary:active { background: var(--blue); transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--blue) 68%, var(--ink)), 1px 2px 0 var(--shadow); }
#game-root .small-button, #game-root .small-button:active { background: transparent; box-shadow: none; transform: none; }
#game-root #foot { border: 0; padding: 8px 10px 16px; }
#game-root #buttons { gap: 12px; }
#game-root #buttons button { min-height: 46px; font-weight: 700; }
#game-root #buttons button svg { stroke: var(--ink); stroke-width: 2.2; }
#game-root #undo { height: 46px; padding: 0 16px; background: var(--white); color: var(--ink); border: 0; font-weight: 700; box-shadow: var(--block); bottom: 76px; }
#game-root #undo svg { stroke: var(--blue); stroke-width: 2.4; }
#game-root #undo i { height: 5px; background: var(--gold); }
#game-root #remove { height: 46px; background: var(--red); color: #ffffff; border: 0; font-weight: 700; box-shadow: 0 var(--lift) 0 color-mix(in srgb, var(--red) 66%, var(--ink)), var(--drop); }
#game-root #guide-wrap { border-radius: var(--r-s); bottom: 14px; }
#game-root #guide-wrap svg circle { fill: var(--blue); }
#game-root #tip { border-radius: var(--r-s); }
/* 普通のボタン (PR-7 §15.3): 390 は 44 px のまま・700 px 以上は 36 px と左右 10 px */
@media (min-width: 700px) { #game-root button { min-height: 36px; min-width: 36px; padding: 0 10px; } }
/* 拡大縮小の丸ボタン (PR-7 §15.2): 盤面の右下に 3 つ縦に・700 px 以上だけ (390 はピンチ)・木の板の色の 36 px の丸 */
#game-root #zoom { display: none; }
@media (min-width: 700px) {
  #game-root #zoom { position: absolute; z-index: 3; right: 12px; bottom: 96px; display: flex; flex-direction: column; gap: 10px; }
  #game-root #zoom button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: var(--wood); display: grid; place-items: center; }
  #game-root #zoom button:active { background: var(--wood); }
  #game-root #zoom svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  #game-root #app:has(#title:not([hidden])) #zoom, #game-root #app:has(#overlay:not([hidden])) #zoom { display: none; }
}
/* 700〜899 px は「取り消す」(中央 + 240 px) が右下に来るので、その上へ逃がす */
@media (min-width: 700px) and (max-width: 899px) { #game-root #zoom { bottom: 148px; } }
@media (min-width: 700px) {
  #game-root #stage { --view-top: 128px; --view-bottom: 86px; }
  #game-root #bar, #game-root #goal, #game-root #foot { margin: 0; }
  #game-root #bar { top: 8px; background: var(--wood); box-shadow: var(--board); }
  #game-root #goal { top: 76px; background: var(--wood); box-shadow: var(--board); }
  #game-root #foot { bottom: 0; background: transparent; box-shadow: none; padding: 8px 10px 16px; }
  #game-root #buttons button { font-size: var(--fs-l); }
  #game-root #week-goal { top: 122px; left: 50%; }
  #game-root #banner { top: 160px; }
  #game-root #goal .hint { position: static; padding: 0; background: none; box-shadow: none; border-radius: 0; margin-top: 4px; }
  #game-root #goal.hinting { border-radius: 10px; }
  #game-root #lines-n { display: inline; font-size: var(--fs-s); font-weight: 600; margin-left: 4px; white-space: nowrap; }
  #game-root #undo { bottom: 92px; }
  #game-root #guide-wrap { bottom: 96px; }
  #game-root #app:has(#undo:not([hidden])) #guide-wrap { max-width: min(460px, calc(100% - 20px)); } /* PR-8: 「取り消す」(中央 + 240 px) と重ならないように 2 行に折る */
  /* FF2: HUD の板 / 目標の 1 行 / 週の目標 は 中身の幅 + 左右 16 px で作り中央に置く (空の余白 0・390 は全幅のまま) */
  #game-root #bar, #game-root #goal { width: max-content; max-width: calc(100% - 16px); }
  #game-root #bar { justify-content: flex-start; gap: 16px; padding: 3px 16px; }
  #game-root #score-chip { flex: none; }
  #game-root #score { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
  #game-root #goal { padding: 6px 16px; }
  #game-root #week-goal { padding: 3px 16px; }
}

/* ===== 試作 f 様式 C の面 (F-2): タイトル / 週末のカード / 止める / 結果 / 記録。面は木の板 (上面 + 下の側面 5 px + 接地の硬い影)・出入りは 0.25 秒の拡大 + フェード ===== */
@keyframes face-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
#game-root #overlay { background: rgba(30, 36, 40, 0.28); }
#game-root #overlay.dim { background: rgba(30, 36, 40, 0.45); }
#game-root .panel, #game-root .result-card { background: var(--wood); color: var(--ink); border: 0; border-radius: var(--r-m); box-shadow: 0 var(--lift) 0 var(--wood-side), 4px 10px 0 var(--shadow); animation: face-in 0.25s ease-out both; }
#game-root .panel h2, #game-root .rc-head h2 { font-size: var(--fs-xl); font-weight: 800; text-shadow: 0 1px 0 #ffffff; }
#game-root .panel > *, #game-root .result-card > * { animation: face-in 0.25s ease-out both; }
#game-root .result-card > .confetti { animation: none; }
#game-root .result-card > .rc-ribbon { animation: ribbon-in 0.35s ease-out 0.3s both; } /* 新記録のリボン: 斜めのまま上から落ちて 1 回弾む */
@keyframes ribbon-in { 0% { opacity: 0; transform: translateY(-30px) rotate(35deg); } 65% { opacity: 1; transform: translateY(4px) rotate(35deg); } 100% { transform: rotate(35deg); } }
#game-root .panel > :nth-child(2), #game-root .result-card > :nth-child(2) { animation-delay: 0.05s; } #game-root .panel > :nth-child(3), #game-root .result-card > :nth-child(3) { animation-delay: 0.1s; }
#game-root .panel > :nth-child(4), #game-root .result-card > :nth-child(4) { animation-delay: 0.15s; } #game-root .panel > :nth-child(n+5), #game-root .result-card > :nth-child(n+5) { animation-delay: 0.2s; }
/* 朱の判子 (称号と実績): 木の板に押した朱の字 + 二重の枠・少し傾ける */
#game-root .stamp { display: inline-block; padding: 3px 9px 2px; font-size: var(--fs-m); font-weight: 800; letter-spacing: 1px; color: var(--red); border-radius: 4px; background: color-mix(in srgb, var(--red) 8%, var(--wood)); box-shadow: inset 0 0 0 2.5px var(--red), inset 0 0 0 4.5px var(--wood), inset 0 0 0 5.5px var(--red); transform: rotate(-4deg); white-space: nowrap; }

/* タイトル: 場面の絵をそのまま背景に (覆いなし)・積み木の文字のロゴ・木の板の街選び */
#game-root #title { background: none; }
#game-root .title-top { width: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; animation: face-in 0.25s ease-out both; }
#game-root .logo { width: auto; height: auto; filter: none; margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: var(--fs-xxl); font-weight: 900; line-height: 1; }
#game-root .logo .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; max-width: 100%; } /* 語 (.word) の間は 10 px・狭い幅は語の切れ目で折り返す */
#game-root .logo .word { display: flex; gap: 3px; flex: none; }
#game-root .logo .word .sp { width: 4px; flex: none; } /* 同じ箱の語の間も 3 + 4 + 3 = 10 px */
#game-root .logo .ch { display: grid; place-items: center; width: 32px; height: 38px; color: #ffffff; border-radius: 5px; background: var(--c); box-shadow: inset 0 4px 0 color-mix(in srgb, var(--c) 55%, #ffffff), 0 var(--lift) 0 color-mix(in srgb, var(--c) 64%, var(--ink)), var(--drop); }
#game-root .logo .ch.c1 { --c: var(--blue); } #game-root .logo .ch.c2 { --c: var(--green); } #game-root .logo .ch.c3 { --c: var(--orange); }
#game-root .logo .ch.c4 { --c: var(--red); } #game-root .logo .ch.c5 { --c: var(--gold); color: var(--ink); }
#game-root .logo .ch.up { transform: translateY(-3px); } /* 1 行目の偶数番目 (通し番号は main.js が付ける) */
#game-root .logo .ch.half { width: 16px; letter-spacing: -0.5em; }
#game-root .title-top .title-lead { display: inline-block; margin: 16px 0 0; padding: 5px 14px; font-size: var(--fs-m); font-weight: 700; background: var(--wood); border-radius: 8px; box-shadow: var(--board); }
#game-root #title .title-panel { background: var(--wood); border: 0; border-radius: var(--r-m); box-shadow: 0 var(--lift) 0 var(--wood-side), 4px 10px 0 var(--shadow); padding: 12px 14px 12px; gap: 12px; animation: face-in 0.25s ease-out 0.1s both; }
#game-root #home-map { width: 270px; max-height: min(336px, 34dvh); background: var(--sea); border-radius: 8px; box-shadow: 0 4px 0 var(--side); }
#game-root .hm-sea { fill: var(--sea); } #game-root .hm-side { fill: var(--side); } #game-root .hm-side-low { fill: color-mix(in srgb, var(--side) 70%, var(--ink)); }
#game-root .hm-top { fill: color-mix(in srgb, var(--wood) 80%, var(--orange)); }
#game-root .hm-shadow { fill: var(--shadow); } #game-root .hm-front { fill: var(--white); } #game-root .hm-sidef { fill: color-mix(in srgb, var(--wood) 70%, var(--ink)); } #game-root .hm-topf { fill: #ffffff; }
#game-root .hm-city.on .hm-front { fill: var(--red); } #game-root .hm-city.on .hm-sidef { fill: color-mix(in srgb, var(--red) 70%, var(--ink)); } #game-root .hm-city.on .hm-topf { fill: color-mix(in srgb, var(--red) 55%, #ffffff); }
#game-root .hm-city:focus-visible .hm-front { fill: var(--gold); }
#game-root .hm-pole { fill: var(--wood-side); } #game-root .hm-flag-side { fill: color-mix(in srgb, var(--red) 68%, var(--ink)); } #game-root .hm-flag-top { fill: var(--red); }
#game-root .hm-chipg { display: none; } #game-root .hm-city.on .hm-chipg { display: inline; }
#game-root .hm-chip { fill: var(--wood); stroke: none; } #game-root .hm-chip-side { fill: var(--wood-side); }
#game-root .hm-name, #game-root .hm-name-w { font-size: var(--fs-m); font-weight: 800; } #game-root .hm-name { fill: var(--ink); } #game-root .hm-name-w { fill: #ffffff; }
#game-root .hm-frame { fill: none; stroke: var(--wood); stroke-width: 5; } #game-root .hm-frame-side { fill: none; stroke: var(--side); stroke-width: 5; }
#game-root .home-name { font-size: var(--fs-l); font-weight: 800; text-shadow: 0 1px 0 #ffffff; }
#game-root .rank-board { display: flex; align-items: center; justify-content: center; gap: 12px; }
#game-root .rank-k { font-size: var(--fs-s); font-weight: 700; }
#game-root #title-best { font-size: var(--fs-s); font-weight: 700; }
#game-root .small-button { color: var(--ink); font-weight: 700; }

/* 週末のカード: 木札 (上の角を落とした形 + 紐の穴)・帯は積み木の印・選ぶと 0.15 秒拡大 + 影が深く */
#game-root .week-panel { width: min(100%, 420px); padding: 14px 8px 18px; }
#game-root .week-panel .bonus { display: inline-block; padding: 3px 10px; border-radius: 4px; font-weight: 800; background: color-mix(in srgb, var(--green) 45%, #ffffff); box-shadow: 0 3px 0 color-mix(in srgb, var(--green) 70%, var(--ink)); }
#game-root .week-panel > p { font-weight: 700; }
#game-root .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
#game-root .cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #game-root .cards.n1 { grid-template-columns: minmax(0, 200px); justify-content: center; }
#game-root .card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 30px 3px 12px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; text-align: center; color: var(--ink);
  filter: drop-shadow(0 4px 0 var(--wood-side)) drop-shadow(3px 6px 0 var(--shadow)); transition: transform 0.15s ease-out, filter 0.15s ease-out; animation: face-in 0.25s ease-out both; animation-delay: calc(var(--i, 0) * 0.05s); }
#game-root .card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); clip-path: polygon(16% 0, 84% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); }
#game-root .card.rare::after { background: color-mix(in srgb, var(--gold) 16%, var(--white)); }
#game-root .card::before { content: ""; position: absolute; top: 8px; left: 50%; right: auto; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--side); box-shadow: inset 0 2px 0 var(--ink); }
#game-root .card:active, #game-root .card.chosen { transform: scale(1.06); border: 0; filter: drop-shadow(0 4px 0 var(--wood-side)) drop-shadow(7px 12px 0 var(--shadow)); }
#game-root .card .band { margin: 0 0 2px; padding: 2px 8px; font-size: var(--fs-s); font-weight: 800; font-style: normal; line-height: 18px; white-space: nowrap; border-radius: 4px; color: var(--ink); align-self: center; }
#game-root .card .band.common { background: color-mix(in srgb, var(--green) 45%, #ffffff); box-shadow: 0 3px 0 color-mix(in srgb, var(--green) 70%, var(--ink)); }
#game-root .card .band.rare { background: var(--gold); box-shadow: 0 3px 0 color-mix(in srgb, var(--gold) 64%, var(--ink)); }
#game-root .card svg { width: 96px; height: 96px; flex: none; }
#game-root .card b { font-size: var(--fs-m); font-weight: 800; line-height: 1.3; letter-spacing: -0.5px; align-self: center; }
#game-root .card span { font-size: var(--fs-s); font-weight: 600; line-height: 1.4; }

/* 止めるの面: 押せる積み木のボタン (切ってあるものは溝の色) */
#game-root .pause-panel button { min-height: 46px; font-weight: 700; }
#game-root .pause-panel button[aria-pressed="false"] { background: var(--groove); box-shadow: inset 0 3px 0 var(--wood-side); }

/* 結果カード: 木の板・主役は点 (28 px の彫った数字)・称号は朱の判子・2 × 4 の表は白い積み木の札・縮小絵は濃い茶の縁 */
#game-root .rc-head { background: none; padding: 12px 16px 6px; }
#game-root .rc-lm-dot { fill: var(--white); stroke: var(--side); stroke-width: 3; }
#game-root .rc-lm { filter: none; }
#game-root .rc-ribbon { background: var(--gold); color: var(--ink); font-weight: 800; box-shadow: 0 3px 0 color-mix(in srgb, var(--gold) 64%, var(--ink)); }
#game-root .rc-head-row { align-items: center; }
#game-root .rc-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-m); }
#game-root .rc-title .rc-k { padding: 0; background: none; font-size: var(--fs-s); font-weight: 700; line-height: 1; }
#game-root .rc-points { display: flex; align-items: baseline; gap: 3px; }
#game-root .rc-points b { font-size: var(--fs-xxl); font-weight: 800; line-height: 1; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #ffffff; }
#game-root .rc-points span { font-size: var(--fs-m); font-weight: 700; }
#game-root .thumb { border-radius: 8px; box-shadow: 0 4px 0 var(--side); }
#game-root .rc-why { color: var(--red); font-weight: 700; }
#game-root .rc-stats { gap: 6px; padding: 0; margin: 10px 16px; }
#game-root .rc-stats > div { background: var(--white); border-radius: 8px; padding: 4px 0 5px; box-shadow: 0 3px 0 var(--wood-side); }
#game-root .rc-stats dt { font-weight: 600; } #game-root .rc-stats dd { font-weight: 800; }
#game-root .result-card .next-try { margin: 0 12px 14px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--wood) 70%, var(--white)); box-shadow: inset 0 3px 0 var(--groove); }
#game-root .result-buttons button { min-height: 46px; font-weight: 700; }
#game-root .result-wrap .seed { color: #ffffff; font-weight: 600; }
#game-root .confetti i { border-radius: 1px; box-shadow: 0 2px 0 rgba(30, 36, 40, 0.3); }

/* 記録の面: 統計 4 つは白い積み木の札・称号の梯子 (いまの称号は朱の判子)・実績 20 は印 (達成 = 朱の判子の色・未達成 = 溝の色) */
#game-root .stats-panel h3 { font-size: var(--fs-m); font-weight: 800; text-shadow: 0 1px 0 #ffffff; }
#game-root .st-four div { background: var(--white); border-radius: 8px; box-shadow: 0 3px 0 var(--wood-side); }
#game-root .st-four dd { font-size: var(--fs-l); font-weight: 800; text-shadow: 0 1px 0 #ffffff; }
#game-root .st-ladder li { background: var(--white); border-radius: 6px; box-shadow: 0 3px 0 var(--wood-side); }
#game-root .st-ladder li.past { background: color-mix(in srgb, var(--wood) 60%, var(--white)); }
#game-root .st-ladder li.now { background: color-mix(in srgb, var(--red) 8%, var(--wood)); box-shadow: inset 0 0 0 2.5px var(--red), 0 3px 0 var(--wood-side); color: var(--red); }
#game-root .st-ladder li.now b { font-weight: 800; }
#game-root .st-ach svg { width: 22px; height: 22px; fill: none; stroke: none; }
#game-root .st-ach .ach-side { fill: var(--wood-side); } #game-root .st-ach .ach-disc { fill: var(--groove); } #game-root .st-ach .ach-star { fill: var(--wood-side); }
#game-root .st-ach li.got svg { transform: rotate(-8deg); }
#game-root .st-ach li.got .ach-side { fill: color-mix(in srgb, var(--red) 66%, var(--ink)); } #game-root .st-ach li.got .ach-disc { fill: var(--red); } #game-root .st-ach li.got .ach-star { fill: #ffffff; }
#game-root .st-ach li.got span { font-weight: 700; }
@media (max-width: 699px) { #game-root .st-ach svg { width: 18px; height: 18px; } }

/* F-2 の直し (FF5 / FF7 / FF8 / FF9) */
#game-root .thumb { height: 150px; }
#game-root .rc-stats > div { padding: 2px 0 3px; }
#game-root .rc-head h2 { white-space: nowrap; }
#game-root .cards { align-items: stretch; }
#game-root .card { height: 100%; justify-content: flex-start; }
#game-root .card span { white-space: nowrap; }
#game-root #app svg.mk { display: inline-block; width: 14px; height: 14px; margin: 0 1px; vertical-align: -2px; flex: none; filter: none; }
#game-root .st-ach li span { white-space: nowrap; }

/* F-3: 印 20 個 (icons.js) をボタンへ。色は currentColor・音を切った時は側面の色・止めると 次へ の印 */
#game-root #app button svg.ic { width: 22px; height: 24px; flex: none; stroke: none; fill: none; }
#game-root #pause .ic-pause, #game-root #pause .ic-play { display: inline-flex; } #game-root #pause .ic-play { display: none; }
#game-root #pause.paused .ic-play { display: inline-flex; } #game-root #pause.paused .ic-pause { display: none; }
#game-root #snd[aria-pressed="false"] svg.ic, #game-root #title-snd[aria-pressed="false"] svg.ic { color: var(--wood-side); }
#game-root .result-buttons button, #game-root #start, #game-root .title-row button, #game-root #buttons button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* FF5 1280 の結果カードを 768 以内に (見出しの上の余白を 6 px 詰める) */
#game-root .rc-head { padding: 8px 16px 4px; }
#game-root .thumb { margin: 6px auto 4px; }
/* FF10 週の目標の棒: 文の下に高さ 4 px・板の中身の幅いっぱい・地は濃い木・満ちる部分は緑・達成で金に変わり 0.3 秒 光る */
#game-root #week-goal .wg-t { display: block; }
#game-root #week-goal .wg-bar { display: block; height: 4px; margin: 2px 0 1px; border-radius: 0; background: var(--groove); overflow: hidden; }
#game-root #week-goal .wg-fill { display: block; height: 100%; width: 0; border-radius: 0; background: var(--green); transition: width 0.3s ease-out, background-color 0.3s; }
#game-root #week-goal.done .wg-fill { background: #d9a441; animation: wg-glow 0.3s ease-out; }
@keyframes wg-glow { 0% { filter: brightness(1); } 50% { filter: brightness(1.6); } 100% { filter: brightness(1); } }

/* 試作 g: 地域を選ぶ (木の板 14 枚・横に送る)・ステージの名前・外の陸 */
#game-root .title-top .stage-label { display: block; width: max-content; margin: 14px auto 0; padding: 3px 12px; font-size: var(--fs-m); font-weight: 800; background: var(--wood); border-radius: 8px; box-shadow: var(--board); }
#game-root .title-top .stage-label + .title-lead { margin-top: 10px; }
#game-root .region-pick { display: flex; flex-direction: column; gap: 4px; }
#game-root .rp-head { margin: 0; font-size: var(--fs-s); font-weight: 800; text-align: left; }
#game-root .rp-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
#game-root .rp-card { position: relative; flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px 4px; color: var(--ink); background: var(--white); border: 0; border-radius: 8px; box-shadow: var(--block); scroll-snap-align: start; cursor: pointer; }
#game-root .rp-card svg { width: 66px; height: 40px; display: block; border-radius: 5px; background: var(--sea); }
#game-root .rp-card .rp-land { fill: color-mix(in srgb, var(--wood) 80%, var(--orange)); }
#game-root .rp-card .rp-side { fill: var(--side); }
#game-root .rp-card .rp-out { fill: color-mix(in srgb, var(--wood) 45%, var(--sea)); }
#game-root .rp-card b { font-size: var(--fs-s); font-weight: 800; line-height: 1.2; }
#game-root .rp-card span { font-size: var(--fs-s); font-weight: 600; line-height: 1.2; }
#game-root .rp-card.on { background: var(--wood); box-shadow: inset 0 0 0 3px var(--red), var(--block-down); transform: translateY(2px); }
#game-root .rp-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#game-root .rp-card .rp-stamp { position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; display: grid; place-items: center; font-size: var(--fs-s); font-weight: 800; color: var(--red); border-radius: 50%; background: color-mix(in srgb, var(--red) 8%, var(--white)); box-shadow: inset 0 0 0 2px var(--red); transform: rotate(-12deg); }
#game-root .hm-out { fill: color-mix(in srgb, var(--wood) 45%, var(--sea)); }
#game-root #title #home-map { max-height: min(336px, 25dvh); } /* 試作 g: 地域の板の分だけ地図を低く */
#game-root #day small { font-size: var(--fs-s); font-weight: 700; }
#game-root .rc-fact { margin: 2px 12px 0; font-size: var(--fs-s); font-weight: 600; line-height: 1.45; text-align: left; }
@media (max-height: 820px) { #game-root #title #home-map { max-height: 22dvh; } }
@media (max-width: 699px) { #game-root #day small { display: none; } } /* 390 は「2 日目」だけ (地域名はタイトルと結果に出る) */
#game-root .rc-fact + .rc-head-row + .thumb, #game-root .result-card:has(.rc-fact) .thumb { height: 110px; } /* 試作 g: 事実の 1 文がある時は縮小絵を 110 に */
/* G3-1 地域を選ぶ板 14 枚: 390 = 2 列 × 7 行・1280 = 7 列 × 2 行。列の数は --rp-cols の 1 か所 (枚数が増えても行が増えるだけ) */
#game-root .rp-list { --rp-cols: 2; display: grid; grid-template-columns: repeat(var(--rp-cols), minmax(0, 1fr)); gap: 10px 8px; overflow: visible; padding: 8px 2px 6px; scroll-snap-type: none; }
#game-root .rp-card { flex: none; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 7px; row-gap: 0; padding: 6px 7px 5px; text-align: left; transform: translateY(2px); box-shadow: var(--block-down); }
#game-root .rp-card svg { grid-row: 1 / 3; width: 58px; height: 40px; }
#game-root .rp-card b { align-self: end; min-width: 0; font-size: var(--fs-m); white-space: nowrap; } /* 入らない名前は main.js の fitRpNames が rp-long → rp-wrap を付ける (切って隠さない) */
#game-root .rp-card span { align-self: start; white-space: nowrap; }
#game-root .rp-card.on { transform: translateY(-2px); box-shadow: inset 0 0 0 3px var(--red), var(--block); }
#game-root .rp-card .rp-stamp { top: -6px; left: -4px; right: auto; width: 28px; height: 28px; background: var(--white); }
#game-root .rp-card .rp-near { position: absolute; top: -9px; right: 5px; padding: 0 5px; font-size: var(--fs-s); font-style: normal; font-weight: 800; line-height: 18px; color: var(--red); background: var(--white); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--red); transform: rotate(-3deg); }
@media (min-width: 1000px) {
  #game-root #title .title-panel { width: min(100%, 1240px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 18px; align-items: start; }
  #game-root #title .title-panel > * { grid-column: 2; }
  #game-root #title .title-panel > .region-pick { grid-column: 1 / -1; grid-row: 1; }
  #game-root #title .title-panel > .home-map-wrap { grid-column: 1; grid-row: 2 / span 6; }
  #game-root .rp-list { --rp-cols: 7; }
}
#game-root .rp-card { grid-template-columns: 50px minmax(0, 1fr); column-gap: 6px; padding: 6px 6px 5px; }
#game-root .rp-card svg { width: 50px; height: 38px; }
#game-root .rp-card b.rp-long { font-size: var(--fs-s); letter-spacing: -0.02em; } /* 板の幅に入らない名前 (オーストラリアなど) は 13 px で 1 行に */
#game-root .rp-card b.rp-wrap { white-space: normal; overflow-wrap: anywhere; } /* 13 px でも入らない名前は 2 行に */
@media (max-width: 999px) {
  #game-root #title .title-panel { padding-left: 10px; padding-right: 10px; }
  #game-root .rp-list { gap: 10px 6px; }
  #game-root #title #start { position: sticky; bottom: 8px; z-index: 2; } /* 板が 7 行で縦に流れても「はじめる」は画面の下に残す */
  #game-root #title .region-pick { padding-bottom: 80px; } /* 下に残る「はじめる」(高さ 52 + 画面の下からの 20 + 間 8) の分だけ一覧の下を空け、一番下まで送った時に最後の行を隠さない (通常の面と育てる回線の面) */
}
/* G3-4 今日の挑戦の板: 木の板 1 枚 (地域の名前 + 挑戦する) */
#game-root .daily-board { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: var(--white); border-radius: 10px; box-shadow: var(--block-down); }
#game-root .daily-k { margin: 0; font-size: var(--fs-m); font-weight: 700; text-align: left; }
#game-root .daily-k b { color: var(--red); font-weight: 800; }
#game-root .daily-go { min-height: 40px; padding: 0 14px; font-size: var(--fs-m); font-weight: 700; color: var(--white); background: var(--red); border: 0; border-radius: 8px; box-shadow: 0 3px 0 color-mix(in srgb, var(--red) 60%, var(--ink)); }
#game-root .daily-go:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--red) 60%, var(--ink)); }
@media (min-width: 1000px) { #game-root #title .title-panel > .daily-board { grid-column: 2; } }
/* カードの絵「回線 +1」の字 (SVG の font-size 属性は置かない規約 = CSS の class で持つ・盤面の単位 18) */
#game-root .card-art-n { font-size: 18px; font-weight: 800; }

/* PR-4 今日の挑戦: 題の面の板の下の 1 行 (もう遊んだ / いま始められない)・結果カードの下の「ランキングに載せる」欄 (木の板 + 押せる積み木のボタン) */
#game-root .daily-board { flex-wrap: wrap; }
#game-root .daily-msg { flex-basis: 100%; margin: 0 6px 4px 0; font-size: var(--fs-s); font-weight: 600; line-height: 1.5; text-align: left; }
#game-root .daily-msg a, #game-root .daily-send a { color: var(--blue); font-weight: 700; }
#game-root .daily-send { margin: 0; padding: 12px 14px; display: grid; gap: 6px; background: var(--wood); color: var(--ink); border-radius: var(--r-m); box-shadow: 0 var(--lift) 0 var(--wood-side), 4px 10px 0 var(--shadow); text-align: left; }
#game-root .daily-send label { font-size: var(--fs-s); font-weight: 700; }
#game-root .daily-send .ds-row { display: flex; gap: 8px; }
#game-root .daily-send .ds-row[hidden] { display: none; }
#game-root .daily-send input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; font: inherit; font-size: var(--fs-m); color: var(--ink); background: var(--white); border: 0; border-radius: 8px; box-shadow: inset 0 2px 0 var(--wood-side); }
#game-root .daily-send .ds-go { flex: 0 0 auto; font-weight: 700; color: #ffffff; background: var(--red); border-radius: 8px; box-shadow: 0 3px 0 color-mix(in srgb, var(--red) 60%, var(--ink)); }
#game-root .daily-send .ds-go:disabled { opacity: 0.6; }
#game-root .daily-send .ds-note, #game-root .daily-send .ds-out { margin: 0; font-size: var(--fs-s); line-height: 1.5; }
#game-root .daily-send .ds-out b { font-size: var(--fs-m); font-weight: 700; }

/* PR-4 ランキングの面 (/{lang}/game/ranking・#game-root の外 = サイトの --fs-* と色)。表は 3 列以上を中央揃え・自分の行は青の地 + 太字 */
.game-rank__day { margin: 1.5rem 0; }
.game-rank__players { margin: 0.25rem 0; font-size: var(--fs-s); font-weight: 700; color: var(--text-primary); }
.game-rank__empty { margin: 0.5rem 0; min-height: 1.7em; color: var(--text-primary); }
.game-rank__table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); table-layout: auto; }
.game-rank__table th, .game-rank__table td { padding: 0.45rem 0.35rem; text-align: center; vertical-align: middle; line-height: 1.5; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.game-rank__table th { font-weight: 700; }
.game-rank__table td.nick { overflow-wrap: anywhere; word-break: break-word; max-width: 9em; }
.game-rank__table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-rank__table tr.me td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }
.game-rank__table tbody.loading tr td { height: 2.4em; }
.game-rank__me-row { margin: 0.5rem 0; font-weight: 700; color: var(--text-primary); }
/* 「今日の挑戦を遊ぶ」は a に主ボタンの型を付けた物。記事の面の .article-page a (0,1,1) の青の字と下線が勝って青の地に青の字になるので、祖先付きで主ボタンの字に戻す */
.game-rank__play a.connection-test__start-btn { color: var(--btn-text, #fff); text-decoration: none; }

/* PR-6 育てる回線 (/{lang}/game/grow・DESIGN §13): 題の面の入口の板 / 網の板 (#grow-board) / 戻った時のまとめ / 引っ越しの確認。
   様式 C = 木の板 + 押せる積み木・硬い影・ぼかし 0。字は既存の --fs-* だけ (s / m / l / xl / xxl) */
#game-root .grow-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left; color: var(--ink); text-decoration: none; background: var(--white); border-radius: 10px; box-shadow: var(--block-down); }
#game-root .grow-entry b { font-size: var(--fs-m); font-weight: 900; color: var(--green); }
#game-root .grow-entry span { font-size: var(--fs-s); font-weight: 700; line-height: 1.5; }
#game-root .grow-entry:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-side); }
@media (min-width: 1000px) { #game-root #title .title-panel > .grow-entry { grid-column: 2; } }
/* 面 /game/grow: 下の帯 (音 / 止める / やり直す) と倍率の輪は使わない (長く続く網で点の桁が増えても 390 の帯に収める)。題の面は「地域とあなたの街を選ぶ」だけにする */
#game-root #app.grow #combo, #game-root #app.grow .pt-unit, #game-root #app.grow #foot, #game-root #app.grow .daily-board, #game-root #app.grow #title-rank, #game-root #app.grow #title-best, #game-root #app.grow #guide-again { display: none; }
#game-root .grow-board { display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px; background: var(--wood); color: var(--ink); box-shadow: 0 -4px 0 var(--wood-side); }
#game-root #app.grow #goal { white-space: normal; overflow: visible; text-overflow: clip; line-height: 20px; line-break: strict; } /* 常時の目標の 1 行は切らずに 2 行まで折り返す (省略記号を使わない) */
#game-root #app.grow #goal.goal-go { color: var(--blue); font-weight: 600; cursor: pointer; } /* 裁定 19c: 止まった街がある時だけ押せる (サイトの押せる行と同じ リンクの色 + 600) */
#game-root #app.grow #goal.goal-go:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#game-root .grow-board[hidden] { display: none; }
#game-root #app.grow:has(#overlay:not([hidden])) .grow-board { display: none; } /* まとめ / カード / 引っ越しの確認の間は板を畳み、盤面の高さを板に回す */
#game-root .gb-top { display: flex; align-items: center; gap: 10px; }
#game-root .gb-clock { flex: 0 0 auto; margin: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; font-size: var(--fs-m); font-weight: 900; color: var(--ink); background: var(--white); border-radius: 10px; box-shadow: var(--block-down); white-space: nowrap; }
#game-root .gb-clock.glow { color: #ffffff; background: var(--orange); box-shadow: 0 5px 0 color-mix(in srgb, var(--orange) 62%, var(--ink)), 3px 10px 0 var(--shadow); animation: gm-pulse 1.2s ease-in-out infinite; }
#game-root .gb-gen { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.4; }
#game-root .gb-gen b { font-size: var(--fs-m); font-weight: 900; }
#game-root .gb-gen span, #game-root .gb-next { font-size: var(--fs-s); font-weight: 700; }
#game-root .gb-facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-m); font-weight: 800; }
#game-root .gb-emblem { transform: rotate(-2deg); }
#game-root .gb-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#game-root .gb-btns button { flex: 1 1 auto; min-height: 44px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#game-root .gb-btns button:disabled { background: var(--groove); box-shadow: none; transform: none; cursor: default; } /* 押せない時は溝に沈める (字は本文の色のまま) */
/* PR-6c: 運転のボタン = 名前 + 小さくスタミナ (押せない時は次の 1 回復までの分) */
#game-root .gb-btns .gb-drive { flex-direction: column; gap: 0; padding: 4px 12px; line-height: 1.3; }
#game-root .gb-drive small { font-size: var(--fs-s); font-weight: 700; }
#game-root .gb-btns #snd svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#game-root .gb-next { margin: 0; line-height: 1.5; text-align: left; }
#game-root .gb-guide { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--white); border-radius: 10px; box-shadow: inset 0 0 0 2.5px var(--orange); }
#game-root .gb-guide p { flex: 1 1 auto; margin: 0; font-size: var(--fs-m); font-weight: 800; line-height: 1.5; text-align: left; }
#game-root .gb-guide button { flex: 0 0 auto; }
/* fix5 (裁定 17): 699 px 以下は盤面の高さを fix1 の値に固定し、回線の板はその下に今の並びのまま続ける。
   画面の下にはみ出す分 (世代の行より下・依頼の帯・ボタン) はページのスクロールで見る (増える物は下に積む)。
   511 = 390 × 844 で fix1 の盤面 333 px になる値 (844 − 333)。言語で上の説明文の行数が変わっても盤面は同じ高さ。
   まとめ / カード / 引っ越しの確認の間 (板を畳む間) は今までどおり盤面が残りの高さを全部使う */
@media (max-width: 699px) {
  #game-root #app.grow:not(:has(#overlay:not([hidden]))) { height: auto; min-height: calc(100dvh - var(--site-head, 0px)); }
  #game-root #app.grow:not(:has(#overlay:not([hidden]))) #stage { flex: none; height: max(333px, calc(100dvh - 511px)); } /* 低い画面 (667) でも盤面は 333 px を下回らない */
  /* PR-11 (DESIGN §18.4): タイトルの面 (地域と街を選ぶ間) は箱の高さを中身に合わせる。上の 2 行は遊ぶ面の高さ (盤面 333 + 網の板) の予約で、
     タイトルの面では網の板が隠れるので盤面の下に約 380 px の空の海が残り、題の板は 333 px の中でスクロールしていた。
     題の板を流れに戻して箱を中身の高さにし、盤面の canvas は箱いっぱいの背景にする (canvas の大きさは render.js が毎こま追う)。遊ぶ面に移るのは押した後なので CLS に数えない */
  #game-root #app.grow:has(#title:not([hidden])) { height: auto; min-height: 0; }
  #game-root #app.grow:has(#title:not([hidden])) #stage { height: auto; }
  #game-root #app.grow:has(#title:not([hidden])) #map { position: absolute; inset: 0; }
  #game-root #app.grow #title:not([hidden]) { position: relative; inset: auto; overflow: visible; flex: 1 1 auto; min-width: 0; } /* 流れに戻した題の面は #stage の幅いっぱい (中身の幅に縮むと題の板が左に寄る) */
  /* 一覧の下の 80 px (内側のスクロールで最後の行を「はじめる」に隠さないための空き) は、ページのスクロールになるので要らない (残すと一覧と地図の間に 100 px の空き) */
  #game-root #app.grow #title:not([hidden]) .region-pick { padding-bottom: 0; }
}
@media (min-width: 700px) {
  #game-root #app.grow #stage { --view-bottom: 304px; } /* 網の板の高さ (依頼の箱つき 287〜296 px) + 8 */
  #game-root .grow-board { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(720px, calc(100% - 16px)); z-index: 4; border-radius: 14px; box-shadow: var(--board); }
}
/* fix1 R2: 1024 以上は網の板を右の列 (幅 392・高さいっぱい) にし、盤面は残りの幅と高さを全部使う。
   盤面の見える範囲 = #stage を列の分だけ狭める (視点の計算は #stage の大きさのまま)。HUD / 目標の 1 行は見える範囲の中央。
   まとめ / カード / 引っ越しの確認の間も列は残し (盤面の幅が跳ねない)、中身だけ隠す。700〜1023 は下の板のまま */
@media (min-width: 1024px) {
  #game-root #app.grow { --grow-col: 392px; }
  #game-root #app.grow #stage { right: var(--grow-col); --view-bottom: 16px; } /* 下の帯 (#foot) は隠れているので下は縮尺の印の分だけ */
  #game-root #app.grow:has(#title:not([hidden])) #stage { right: 0; } /* 題の面の間は板が隠れて列が空 = 列を取らず、題の面の中身を画面の中央に */
  #game-root #app.grow #bar, #game-root #app.grow #goal { left: calc((100% - var(--grow-col)) / 2); max-width: calc(100% - var(--grow-col) - 16px); }
  #game-root #app.grow .grow-board { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: var(--grow-col); box-sizing: border-box; border-radius: 0; overflow-y: auto; align-content: start; gap: 10px; padding: 14px 16px; box-shadow: -4px 0 0 var(--wood-side); }
  #game-root #app.grow .grow-board .gb-quests { grid-template-columns: 1fr; gap: 6px; }
  /* fix2 R5: 板の下の空きに街の一覧。列の高さに収まらない分は一覧だけを縦に送る (列全体は動かさない) */
  #game-root #app.grow .grow-board { display: flex; flex-direction: column; overflow: hidden; }
  #game-root #app.grow .grow-board > * { flex: none; }
  #game-root #app.grow .grow-board[hidden] { display: none; }
  #game-root #app.grow .grow-board > .gb-towns { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
  #game-root .gb-towns ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0 0 4px; list-style: none; display: grid; gap: 4px; align-content: start; }
  #game-root .gb-towns button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-size: var(--fs-m); font-weight: 700; text-align: left; }
  #game-root .gl-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; } /* 1 行目 = 名前 (止まった街は赤の印と字)・2 行目 = 段と届いた数 */
  #game-root .gl-name { display: flex; align-items: center; gap: 6px; }
  #game-root .gl-name b, #game-root .gl-name .tone-bad { white-space: nowrap; }
  #game-root .gl-name b { font-weight: 900; }
  #game-root .gl-name .tone-bad { font-size: var(--fs-s); font-weight: 900; }
  #game-root .gl-stop { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
  #game-root .gl-lv { font-size: var(--fs-s); font-variant-numeric: tabular-nums; line-break: strict; }
  #game-root #app.grow:has(#overlay:not([hidden])) .grow-board:not([hidden]) { display: flex; }
  #game-root #app.grow:has(#overlay:not([hidden])) .grow-board > * { pointer-events: none; } /* 列の中身は見せたまま押せなくする (まとめの間に空の列を見せない) */
}
/* 戻った時のまとめ: 主役は届いた数 1 つ (28 px)・残りは本文の大きさの行 */
#game-root .grow-sum { display: grid; gap: 8px; text-align: left; }
#game-root .grow-sum h2 { margin: 0; text-align: center; }
#game-root .grow-sum p { margin: 0; }
#game-root .gs-away { font-weight: 800; text-align: center; }
#game-root .gs-capped { font-size: var(--fs-s); font-weight: 700; text-align: center; }
#game-root .gs-hero { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 8px 12px; background: var(--white); border-radius: 10px; box-shadow: var(--block-down); }
#game-root .gs-hero span { font-size: var(--fs-m); font-weight: 800; }
#game-root .gs-hero b { font-size: var(--fs-xxl); font-weight: 900; color: var(--green); font-variant-numeric: tabular-nums; }
#game-root .gs-rows, #game-root .gs-events { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
#game-root .gs-rows li { padding: 4px 10px; font-size: var(--fs-m); font-weight: 700; background: color-mix(in srgb, var(--white) 70%, var(--wood)); border-radius: 8px; }
#game-root .grow-sum h3 { margin: 2px 0 0; font-size: var(--fs-m); font-weight: 900; }
#game-root .gs-events li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; font-size: var(--fs-s); font-weight: 700; background: var(--white); border-radius: 999px; }
#game-root .gs-events svg { width: 24px; height: 24px; flex: none; }
#game-root .grow-sum .gs-go { min-height: 48px; margin-top: 4px; font-size: var(--fs-l); font-weight: 900; }
#game-root .grow-move { display: grid; gap: 10px; }
#game-root .grow-move h2, #game-root .grow-move p { margin: 0; }
#game-root .gm-btns { display: flex; gap: 8px; }
#game-root .gm-btns button { flex: 1; font-weight: 800; }
/* PR-6b: 良い数字は青・悪い数字は赤 (DESIGN §14.6・色は既存の表から・青は字に使うので墨を混ぜて濃く) */
#game-root .tone-good { color: color-mix(in srgb, var(--blue) 70%, var(--ink)); }
#game-root .tone-bad { color: var(--red); }
#game-root .gs-hero b.tone-good { color: color-mix(in srgb, var(--blue) 70%, var(--ink)); } /* まとめの主役 (届いた数) も良い数字の青 */
#game-root .gb-funds b { font-weight: 900; font-variant-numeric: tabular-nums; }
/* 網の板の依頼の箱: きょうの依頼 2 行 + 今週の依頼 1 行 (行 = 名前 + 進み + 受け取る) */
#game-root .gb-quests { display: grid; gap: 4px; padding: 6px 10px 8px; background: var(--white); border-radius: 10px; box-shadow: var(--block-down); }
#game-root .gb-quests ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
#game-root .gq-part { display: grid; gap: 4px; align-content: start; }
@media (min-width: 700px) { /* 1280: きょうの依頼と今週の依頼を横に並べ、板の高さを抑える (盤面の見える高さは --view-bottom で板の分を空ける) */
  #game-root .gb-quests { grid-template-columns: 2fr 1fr; gap: 4px 16px; }
}
#game-root .gq-h { margin: 0; font-size: var(--fs-s); font-weight: 900; text-align: left; }
#game-root .gb-quests li { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--fs-m); font-weight: 700; text-align: left; }
#game-root .gq-name { flex: 1 1 auto; min-width: 0; line-height: 1.4; line-break: strict; }
#game-root .gq-n { flex: 0 0 auto; font-weight: 900; font-variant-numeric: tabular-nums; }
#game-root .gb-quests .gq-claim { flex: 0 0 auto; min-height: 32px; padding: 0 10px; font-size: var(--fs-s); font-weight: 900; }
#game-root .gq-ok { flex: 0 0 auto; font-size: var(--fs-s); font-weight: 900; }
/* fix1 R1: 390〜699 は依頼を板の中の 1 行の帯にする (押すと依頼の板)。700 以上は依頼の箱のまま */
#game-root .gb-qstrip { display: flex; align-items: center; gap: 8px; }
#game-root .gq-open { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: var(--fs-m); font-weight: 800; text-align: left; }
#game-root .gq-open .gq-h { font-size: var(--fs-m); }
#game-root .gq-done { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
#game-root .gq-done b { font-weight: 900; }
#game-root .gb-qstrip .gq-claim { flex: 0 0 auto; min-height: 44px; padding: 0 14px; font-weight: 900; }
#game-root .grow-board .gb-quests { display: none; }
#game-root .gb-towns { display: none; } /* 街の一覧は 1024 以上の右の列だけ */
@media (max-width: 699px) { #game-root .grow-board { gap: 6px; padding: 8px 12px 10px; } } /* 390: 板を 300 px 以下に抑え、盤面の見える高さを 330 px 以上に */
@media (min-width: 700px) {
  #game-root .grow-board .gb-qstrip { display: none; }
  #game-root .grow-board .gb-quests { display: grid; }
  #game-root .grow-quests .gb-quests { grid-template-columns: 1fr; } /* 依頼の板の中は縦に積む */
}
/* 街の板と復旧の板 (盤面の上の板・まとめと同じ型) */
#game-root .grow-town, #game-root .grow-fix, #game-root .grow-quests { display: grid; gap: 8px; text-align: left; }
#game-root .grow-town p, #game-root .grow-fix p, #game-root .grow-quests p, #game-root .grow-town h2, #game-root .grow-quests h2, #game-root .grow-fix h2, #game-root .grow-town h3 { margin: 0; }
#game-root .gt-head { display: flex; align-items: center; gap: 10px; }
#game-root .gt-head .gt-pic { flex: none; width: 64px; height: auto; }
#game-root .gt-head h2 { font-size: var(--fs-xl); }
#game-root .gt-head p { font-weight: 800; line-height: 1.4; }
#game-root .gt-demand { font-weight: 700; line-height: 1.5; }
#game-root .gt-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#game-root .gt-bar h3 { font-size: var(--fs-l); font-weight: 900; }
#game-root .gt-funds { font-weight: 800; }
#game-root .gt-funds b { font-weight: 900; font-variant-numeric: tabular-nums; }
#game-root .gt-upg { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#game-root .gt-upg li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--white); border-radius: 10px; box-shadow: var(--block-down); }
#game-root .gt-txt { flex: 1 1 auto; min-width: 0; }
#game-root .gt-name { display: flex; align-items: center; gap: 8px; }
#game-root .gt-name b { font-weight: 900; }
#game-root .gt-desc { font-size: var(--fs-s); font-weight: 700; line-height: 1.4; line-break: strict; }
#game-root .gt-marks { display: inline-flex; gap: 3px; }
#game-root .gt-marks i { width: 10px; height: 10px; border-radius: 2px; background: var(--groove); }
#game-root .gt-marks i.on { background: var(--orange); box-shadow: 0 2px 0 color-mix(in srgb, var(--orange) 62%, var(--ink)); }
#game-root .gt-upg .gt-buy, #game-root .gt-upg .gt-repair { flex: 0 0 auto; min-height: 44px; max-width: 46%; padding: 0 10px; font-size: var(--fs-s); font-weight: 900; line-height: 1.3; }
#game-root .grow-town button:disabled, #game-root .grow-fix button:disabled, #game-root .grow-sum .gs-all:disabled { background: var(--groove); box-shadow: none; transform: none; cursor: default; color: var(--ink); } /* 押せない時は溝に沈める (字は本文の色のまま) */
#game-root .gt-close { min-height: 44px; font-weight: 800; }
#game-root .gf-why { font-weight: 800; line-height: 1.5; }
#game-root .gf-btns { display: grid; gap: 8px; }
#game-root .gf-btns button { min-height: 48px; font-weight: 900; }
#game-root .gf-upg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 10px; }
#game-root .gf-upg small { font-size: var(--fs-s); font-weight: 800; }
#game-root .grow-sum .gs-all { min-height: 44px; font-weight: 800; }
#game-root .grow-sum .gs-all[hidden] { display: none; }
#game-root .stats-panel .st-grow { margin-bottom: 8px; }
/* fix3 (DESIGN §15.5): 状態の行 (板の最上段・次の日までは右端) / いまやること (押すと的へ) / 光る的の輪 (1 つだけ) */
#game-root .gb-state { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: var(--fs-m); font-weight: 700; line-height: 1.5; text-align: left; }
@media (max-width: 699px) { #game-root .gb-state .gb-day { display: none; } #game-root .grow-board:has(.gb-result) .gb-away { display: none; } } /* 699 以下: 結果の行と留守の間は 1 枠 (操作の後は結果の行) */
#game-root button.gb-next { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 44px; padding: 4px 12px; font-size: var(--fs-m); font-weight: 700; line-height: 1.4; text-align: left; }
#game-root .gb-next b { flex: none; font-weight: 900; }
#game-root p.gb-next { display: flex; gap: 8px; font-size: var(--fs-m); }
#game-root .grow-board button.glow:not(.gb-clock), #game-root .grow-town button.glow { outline: 3px solid var(--orange); outline-offset: 2px; animation: gb-ring 1.2s ease-in-out infinite; }
@keyframes gb-ring { 0%, 100% { outline-color: var(--orange); } 50% { outline-color: transparent; } }
/* fix3 §15.5 の 3〜5: 結果の行 (操作の直後・次の操作まで) / 留守の間の 1 行 (次の留守まで) / 街の板の状態の行 */
#game-root .gb-result, #game-root .gb-away { margin: 0; font-size: var(--fs-m); font-weight: 700; line-height: 1.5; text-align: left; }
#game-root .gb-away { display: flex; flex-wrap: wrap; gap: 0 8px; }
#game-root .gb-away b { font-weight: 900; }
#game-root .grow-town .gb-result, #game-root .grow-quests .gb-result { padding: 6px 10px; background: var(--white); border-radius: 10px; box-shadow: var(--block-down); }
#game-root .gt-head .gt-state { font-weight: 700; }
#game-root .gt-buy .gt-cost, #game-root .gt-repair .gt-cost { white-space: nowrap; }
/* PR-6c 点検: 街の板の点検のボタン (済んだ日も同じ高さの押せないボタン)・依頼の見出しの行の右端の「点検 N / M」・街の一覧の点検済みの印 (止まった街の丸を青で) */
#game-root .grow-town .gt-inspect { min-height: 44px; font-weight: 800; }
/* PR-6d 保守: 点検の直下の 1 行 (強化の行と同じ箱・ボタンは 3 状態で同じ高さ)・網の板の状態の行の「回線の傷み 平均」 */
#game-root .gt-upkeep .gt-wear { font-weight: 800; line-height: 1.4; }
#game-root .gb-state .gb-wear { font-variant-numeric: tabular-nums; }
#game-root .gq-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#game-root .gq-ins { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-s); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 390〜699 の依頼の帯: 見出しは 1 行のまま・入り切らない時は「点検 N / M」を 2 行目の右端へ折る (受け取るのボタンが並ぶ時) */
#game-root .gq-open { flex-wrap: wrap; row-gap: 0; }
#game-root .gq-open .gq-h { white-space: nowrap; }
#game-root .gl-stop.gl-ins { background: color-mix(in srgb, var(--blue) 70%, var(--ink)); }
/* 面 /game/grow の題字のロゴ (#game-root の外・DESIGN §18.2 C・ユーザー判定 10-21)。面の高さは main.js が #game-root の上端から引く。
   左右はサイトの header の器 (header nav) と同じ箱 = 幅 1280 の中央・内側 1.5rem (767 以下は 1rem) で、題字の左端がロゴの左端と揃う。縦は 上 16 / 紋と題字の行 → 導きの板 8 / 板 → 盤面の箱 16。
   紋 = 60 px の箱 (main.js が assets-art.js の GROW_EMBLEM を入れる・JS が無い時は :empty で畳む)・題字 = 28 px 800 の海の色・側面なし (10-21 ユーザー判定「文字が読みにくい」= 濃い側面が画数の多い字の隙間を塞ぐ・紋と導きの板が立体を担う)・
   導きの板 = 主ゲームの .title-top .title-lead と同じ木の板 (1 文ずつ span.s で文の切れ目でだけ折れる) */
.game-page--grow .grow-head { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 16px 1.5rem; }
@media (max-width: 767px) { .game-page--grow .grow-head { padding-left: 1rem; padding-right: 1rem; } } /* header nav の 767 以下の内側と同じ */
.game-page--grow .grow-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--fs-xxl); font-weight: 800; line-height: 1.15; color: var(--sea);
  word-break: keep-all; overflow-wrap: anywhere; }
.game-page--grow .grow-emblem { flex: none; display: block; width: 60px; height: 60px; }
.game-page--grow .grow-emblem:empty { display: none; }
.game-page--grow .grow-emblem svg { display: block; width: 60px; height: 60px; }
.game-page--grow .grow-name { min-width: 0; }
.game-page--grow .grow-lead { display: inline-block; max-width: 100%; margin: 8px 0 0; padding: 5px 14px; font-size: var(--fs-m); font-weight: 700; line-height: 1.45; color: var(--ink); background: var(--wood); border-radius: 8px; box-shadow: var(--board); }
.game-page--grow .grow-lead .s { display: inline-block; }
/* ダーク (サイトの地が暗い時): 題字は海の色を白へ寄せた明るい面 (木の板は板の地の上なので墨の字のまま) */
@media (prefers-color-scheme: dark) { :root:not([data-high-contrast="true"]):not([data-theme="light"]) .game-page--grow .grow-title { color: color-mix(in srgb, var(--sea) 40%, #ffffff); } }
:root[data-theme="dark"] .game-page--grow .grow-title, [data-high-contrast="true"] .game-page--grow .grow-title { color: color-mix(in srgb, var(--sea) 40%, #ffffff); }
/* 自著カードの主枠 (views/game.ejs の #game-root の直後) はタイトルの面だけに見せる = 遊び方と遊ぶ面 (結果の板も) では隠す。
   data-screen は main.js の setMode が mode と同じ値にする。見せる側の規則は書かない (出す冊が無い時に own-book.js が付ける hidden を上書きしないため) */
#game-root:not([data-screen="title"]) + .own-book-slot { display: none; }
/* 自著カードの枠 (/game・/game/grow・/game/ranking): 幅は記事の面 (.article-page) と同じ 800 + 左右 1.5rem (main の全幅に広げると 1280 で見本の画像が巨大になる)・
   下は 24 = 次の箱 (説明の節) や footer の罫に付けない (10-20 の間隔の規則・実測 0 → 24)。上はカードの既存の 32 */
.game-page > .own-book-slot, .game-rank + .own-book-slot { max-width: 800px; margin: 0 auto 24px; padding: 0 1.5rem; }
@media (max-width: 767px) { .game-page > .own-book-slot, .game-rank + .own-book-slot { padding: 0 1rem; } } /* .article-page の狭い幅と同じ (順位表の文とカードの左端を揃える) */
/* 遊び方の節 (/game・/game/grow で同じ部品 views/partials/gameAbout.ejs・DESIGN §18.3)。容れ物は記事の面 (.article-page) と同じ 800 + 左右 1.5rem (767 以下は 1rem)・
   盤面の箱から 24・下も 24 (次の自著カードや footer の罫に付けない)。項目は「印 56 px + 短い題名 + 文」のカード (罫 1 px・角丸 12・中の余白 16・カードの間 16)。字の大きさは本文と同じ */
.game-page > .game-about { max-width: 800px; margin: 24px auto; padding: 0 1.5rem; color: var(--text-primary); }
@media (max-width: 767px) { .game-page > .game-about { padding: 0 1rem; } }
.game-about h2 { margin: 0 0 16px; padding-bottom: 8px; font-size: var(--fs-xl); font-weight: 700; line-height: 1.4; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.game-about__how { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.game-about__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); }
.game-about__art { display: block; width: 56px; height: 56px; }
.game-about__art svg { display: block; width: 56px; height: 56px; }
.game-about__body { min-width: 0; }
.game-about .game-about__name { margin: 0 0 8px; font-size: var(--fs-m); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.game-about__body p, .game-about .game-about__note { margin: 0; font-size: var(--fs-m); line-height: 1.8; color: var(--text-primary); overflow-wrap: anywhere; }
.game-about .game-about__note { margin-top: 16px; }
.game-about .game-about__links { margin-top: 16px; grid-template-columns: minmax(0, 1fr); } /* 押せる行は 1 列 (.related-list の 2 列を 1 列に) */
/* 順位表の article は下に 24 (390) / 20 (1280) の余白を持つので、カードの上の 32 を重ねない (実測 56 → 24) */
.game-rank + .own-book-slot .own-book-card { margin-top: 0; }
.game-about + .own-book-slot .own-book-card { margin-top: 0; } /* /game/grow: 遊び方の節の下 24 とカードの上 32 を重ねない (実測 56 → 24) */
/* 別の端末で続けるの入口 (views/partials/gameAbout.ejs の押せる行の下の文字のリンク 1 本・DESIGN game-save-transfer-2026-10-22 v1.4 §6)。
   本文の大きさ・リンクの色・ボタンや絵にしない。日替わりの面 (/game) は遊んでいる間 (data-screen が title 以外) は隠す = 途中の回を置いて移らない。
   育てる回線 (/game/grow) は盤面が常に開いている面なので隠さない (入口を押すと main.js が今の状態を 1 回書いてから移る) */
.game-about .game-about__transfer { margin: 16px 0 0; font-size: var(--fs-m); line-height: 1.8; }
.game-about__transfer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.game-page:not(.game-page--grow):has(> #game-root:not([data-screen="title"])) .game-about__transfer { display: none; }
/* 別の端末で続けるの面 (/{lang}/game/transfer・骨組み = views/game-transfer.ejs・配線 = public/js/game/transfer-page.js)。
   地と枠はゲームの部品 = 海の地 (--sea) の上に木の板 (--wood + --board の影)・ボタンは積み木 (--white + --block)。字は墨 (--ink)・注意の色・リンクの色だけ (灰の字なし)。
   板の中の幅が 680 以上なら 持ち出す | 受け取る の 2 列 (container の問い合わせ)・足りなければ 1 列。隙間は 8 / 16 / 24・押せる物の高さは 44 以上。
   入力欄の字は 16 px (iOS が 16 px 未満の入力欄で面を拡大しないように) */
.tr-crumb { max-width: 800px; margin: 0 auto; padding: 16px 1.5rem; color: var(--text-primary); }
/* パンくずの字は本文の色とリンクの色だけ (サイトの .breadcrumb の既定は --text-secondary の灰・この面では使わない) */
.tr-crumb .breadcrumb__item a { color: var(--accent); }
.tr-crumb .breadcrumb__item:not(:last-child)::after { color: var(--text-primary); }
@media (max-width: 767px) { .tr-crumb { padding: 16px 1rem; } }
.tr-face { margin: 0 0 24px; padding: 24px 16px; background: var(--sea); color: var(--ink); }
.tr-face * { box-sizing: border-box; }
.tr-board { max-width: 800px; margin: 0 auto; padding: 16px; background: var(--wood); color: var(--ink); border-radius: var(--r-m); box-shadow: var(--board); container-type: inline-size; }
.tr-face h1, .tr-face h2, .tr-face p { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.tr-face .tr-title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.tr-face .tr-lead { margin: 8px 0 24px; font-size: var(--fs-m); line-height: 1.6; }
.tr-face h2 { font-size: var(--fs-l); font-weight: 700; line-height: 1.4; }
.tr-face .tr-ico { display: block; flex: none; width: 24px; height: 24px; }
.tr-face .tr-note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-m); font-weight: 600; line-height: 1.6; color: color-mix(in srgb, var(--red) 62%, var(--ink)); }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container (min-width: 680px) { .tr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tr-out, .tr-in { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-veil { display: flex; align-items: center; justify-content: center; min-height: 44px; background: var(--white); border: 2px dashed var(--wood-side); border-radius: var(--r-s); color: var(--ink); }
.tr-veil[hidden] { display: none; }
.tr-face textarea { display: block; width: 100%; margin: 0; padding: 8px; font: inherit; font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--white); border: 2px solid var(--wood-side); border-radius: var(--r-s); resize: vertical; }
.tr-face textarea[hidden] { display: none; }
.tr-face .tr-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; overflow-y: auto; }
.tr-face textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tr-label { font-size: var(--fs-m); font-weight: 600; }
.tr-btns { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: var(--lift); }
.tr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font: inherit; font-size: var(--fs-m); font-weight: 700; color: var(--ink); background: var(--white); border: 0; border-radius: var(--r-s); box-shadow: var(--block); cursor: pointer; transition: transform 0.08s ease-out, box-shadow 0.08s ease-out; }
.tr-btn:active { transform: translateY(2px); box-shadow: var(--block-down); }
.tr-btn:focus-visible, .tr-pick:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.tr-btn:disabled { color: var(--ink); background: transparent; border: 2px dashed var(--wood-side); box-shadow: none; transform: none; cursor: not-allowed; }
.tr-btn--main { color: #ffffff; background: var(--blue); box-shadow: 0 var(--lift) 0 color-mix(in srgb, var(--blue) 68%, var(--ink)), var(--drop); }
.tr-btn--main:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--blue) 68%, var(--ink)), 1px 2px 0 var(--shadow); }
.tr-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue), var(--block-down); }
/* 「コピー」と「コピーしました」を同じ升に重ね、長い方の幅を取っておく (押した後に列が組み直されない) */
#tr-copy { display: inline-grid; justify-items: center; align-items: center; }
#tr-copy > span { grid-area: 1 / 1; }
#tr-copy .tr-copy-b, #tr-copy.copied .tr-copy-a { visibility: hidden; }
#tr-copy.copied .tr-copy-b { visibility: visible; }
/* ファイルを選ぶ = ファイルの入力を包むラベルをボタンの見た目に (入力そのものは見えなくして、押すのはラベル) */
.tr-pick { position: relative; }
.tr-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.tr-ask, .tr-result { margin-top: 24px; padding: 16px; background: var(--white); border-radius: var(--r-s); box-shadow: var(--block-down); }
.tr-ask[hidden], .tr-result[hidden] { display: none; }
.tr-face .tr-ask-q { font-size: var(--fs-m); font-weight: 600; line-height: 1.6; }
.tr-face .tr-ask-sum { margin-top: 8px; font-size: var(--fs-m); line-height: 1.6; }
.tr-ask .tr-btns { margin-top: 16px; }
.tr-face .tr-result { display: flex; align-items: center; gap: 8px; font-size: var(--fs-m); font-weight: 700; line-height: 1.6; }
.tr-face .tr-result.bad { color: color-mix(in srgb, var(--red) 62%, var(--ink)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--red) 62%, var(--ink)); }
.tr-result .tr-ico--bad, .tr-result.bad .tr-ico--ok { display: none; }
.tr-result.bad .tr-ico--bad { display: block; }
.tr-face .tr-back { margin-top: 24px; font-size: var(--fs-m); line-height: 1.6; }
/* 木の板の地は明暗どちらでも同じ明るい色なので、リンクの字は明暗とも同じ値 (サイトのライトのリンクの色・板の上で約 5.4 : 1) を使う */
.tr-face { --tr-link: #084ec0; }
.tr-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--tr-link); text-decoration: underline; text-underline-offset: 3px; }