/* 共通テンプレの基本スタイル。色は :root の変数だけを使い、アプリ側で直書きしない。
   data-theme="tool"     … 道具系（既存の公開前ストップライトと同じ配色）
   data-theme="chabudai" … ちゃぶ台パズル系（既存のちゃぶ台パズルと同じ配色・文字大きめ） */
[data-theme="chabudai"] {
  --digit-bg:#f5f3ed; --digit-surface:#fffdf7; --digit-surface-raised:#fff;
  --digit-ink:#24312d; --digit-ink-muted:#5a6661; --digit-line:#dcd3c2; --digit-line-control:#948771;
  --digit-signal:#8a5813; --digit-signal-ink:#fff; --digit-signal-deep:#68400b; --digit-soft:#f7ecd8;
  --digit-ok:#1f5c3d; --digit-caution:#7a5200; --digit-danger:#a22626;
  --digit-paper-texture:radial-gradient(#00000005 1px, transparent 1px);
  --digit-font-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --digit-radius-control:6px; --digit-radius-surface:4px; --digit-shadow-one:0 14px 34px #3d2f1a14;
  --digit-focus-ring:#0b5f9c; --digit-trace:#4a3a1c12;
}
/* OS の暗色設定。後置の明示指定は、将来 UI を追加せずに手動切替するための口。 */
@media (prefers-color-scheme: dark) {
  :root, [data-theme="tool"] {
    color-scheme:dark;
    --digit-bg:#0f1512; --digit-surface:#17201d; --digit-surface-raised:#1d2724;
    --digit-ink:#e7efe9; --digit-ink-muted:#9fb0a9; --digit-line:#2f3d38; --digit-line-control:#63817a;
    --digit-signal:#5fd2b2; --digit-signal-ink:#06201a; --digit-signal-deep:#45b998; --digit-soft:#15302a;
    --digit-ok:#5fd2b2; --digit-caution:#f0c06a; --digit-danger:#ff9b91; --digit-shadow-one:0 18px 45px #00000059; --digit-focus-ring:#ffcc33; --digit-trace:#8fd8c41a;
  }
  [data-theme="chabudai"] {
    color-scheme:dark;
    --digit-bg:#17130d; --digit-surface:#201a12; --digit-surface-raised:#282015;
    --digit-ink:#f4ecdd; --digit-ink-muted:#bdae97; --digit-line:#453a28; --digit-line-control:#8b7a5e;
    --digit-signal:#e8b967; --digit-signal-ink:#2a1d07; --digit-signal-deep:#cfa254; --digit-soft:#33280f;
    --digit-ok:#7fcfa4; --digit-caution:#e8b967; --digit-danger:#ff9b91; --digit-shadow-one:0 14px 34px #00000059; --digit-focus-ring:#7cc6ff; --digit-trace:#e8b9671a;
  }
}
:root {
  --digit-font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif; --digit-font-numeric:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --digit-reading-measure:40em; --digit-space-related:12px; --digit-space-section:38px; --digit-cut-size:18px; --digit-measure-frame:1120px;
  --bg:var(--digit-bg); --surface:var(--digit-surface); --ink:var(--digit-ink); --ink-2:var(--digit-ink-muted); --line:var(--digit-line); --fill:var(--digit-soft);
  --accent:var(--digit-signal); --on-accent:var(--digit-signal-ink); --ok:var(--digit-ok); --warn:var(--digit-caution); --danger:var(--digit-danger); --radius:var(--digit-radius-surface); --base:16px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:var(--base); line-height:1.85; letter-spacing:.02em; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:active:not(:disabled) { transform:translateY(1px); }
a { color:var(--accent); text-underline-offset:3px; }
img, svg, canvas { max-width:100%; }

.ai-disclosure { padding:8px 16px; border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink-2); text-align:center; font-size:13px; line-height:1.7; }
.site-header { max-width:880px; margin:0 auto; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; text-decoration:none; }
.brand-mark { width:28px; height:28px; flex:none; }
.badge { border:1px solid var(--line); border-radius:999px; padding:3px 12px; color:var(--ink-2); font-size:12px; font-weight:600; white-space:nowrap; }

main { max-width:1120px; margin:0 auto; padding-block:30px 80px; }
h1 { margin:0 0 12px; font-size:clamp(1.6rem,6vw,2.4rem); line-height:1.35; }
h2 { margin:0 0 12px; font-size:1.2em; line-height:1.5; }
.lead { margin:0 0 20px; font-size:1.05em; }
.muted { color:var(--ink-2); font-size:.9em; }
.card { margin:0 0 20px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.card > :last-child { margin-bottom:0; }

.primary, .secondary { min-height:48px; min-width:48px; border-radius:8px; padding:10px 22px; font-weight:600; }
.primary { border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); }
.secondary { border:1px solid var(--line); background:var(--fill); color:var(--ink); }
.primary:disabled, .secondary:disabled { opacity:.5; cursor:default; transform:none; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }

.ad-slot { min-height:100px; margin:24px 0; padding:16px; display:grid; place-items:center; gap:2px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink-2); text-align:center; }
.ad-slot p, .ad-slot small { margin:0; }
.ad-label { font-size:12px; font-weight:700; }

.legal h2 { margin-top:20px; font-size:1.05em; }
.legal p { margin:0 0 8px; }

.site-footer { padding:28px 16px; border-top:1px solid var(--line); color:var(--ink-2); text-align:center; font-size:13px; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.site-footer p { margin:8px 0 0; }
.copyright { font-variant-numeric:tabular-nums; }
[hidden] { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* てんびん */
.symbols{position:absolute;width:0;height:0;overflow:hidden}.status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}.status div{padding:10px;border:1px solid var(--line);border-radius:10px;text-align:center;background:var(--fill)}.status dt{font-weight:700}.status dd{margin:0;font-size:1.55rem;font-variant-numeric:tabular-nums}.question{font-size:1.35rem;font-weight:700}.balance{margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:10px}.balance-name{margin:0;font-weight:700}.beam{display:grid;grid-template-columns:1fr 4px 1fr;align-items:center;height:22px}.beam span{border-top:4px solid var(--ink)}.beam i{height:22px;background:var(--ink)}.pans{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pan{min-width:0;min-height:100px;padding:6px;border:3px solid var(--line);border-top:0;border-radius:0 0 24px 24px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}.item-group{display:grid;justify-items:center;line-height:1.25;font-size:.78rem}.item-picture{width:38px;height:38px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.weight{font-size:clamp(1.75rem,8vw,2.25rem);font-variant-numeric:tabular-nums}.answer-line{min-height:70px;margin:16px 0 8px;padding:6px;border-bottom:3px solid var(--accent);text-align:center;font-size:2.2rem;font-variant-numeric:tabular-nums}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.key{min-height:56px;padding:4px;font-size:1.4rem}.clear{font-size:1rem}.message,.hint,.steps{margin:14px 0;padding:12px;border-left:5px solid var(--accent);background:var(--fill)}.steps p{margin:2px 0}.result-actions{padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:380px){.pan{gap:3px}.item-picture{width:32px;height:32px}.item-group{font-size:.7rem}}
.site-header .brand { min-width:0; }
.site-header .badge { flex:none; white-space:nowrap; }

/* 最初の問題を早く見渡せる密度にしつつ、操作領域は 44px 以上を保つ。 */
.game { padding-top:16px; }
.game .puzzle-title { margin-bottom:4px; }
.game .lead { margin-bottom:14px; }
.game .status { margin-bottom:14px; }

/* digit:unify:v2 */
/* 375px でもブランド名を語中で折らず、必要な分だけ文字を縮める。 */
.site-header .brand {
  min-width:0;
  white-space:nowrap;
  font-size:clamp(.75rem,2.5vw,1rem);
}
.puzzle-heading { text-align:left; }
.puzzle-kicker {text-align:left; margin:0 0 2px; color:var(--ink-2); font-size:.82rem; font-weight:700; line-height:1.5; }
.puzzle-title { text-align:left; }
.prompt-card-note {
  margin:0 0 8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-left:4px solid var(--warn);
  border-radius:8px;
  background:var(--fill);
  color:var(--ink);
  font-size:.9em;
  font-weight:400;
}
/* 狭い幅（<360px）では badge を次の行へ落とし brand と重ねない（ハヤ点検 2026-10-30・縮めない） */
@media (max-width:359px){.site-header{flex-wrap:wrap}.site-header .badge,.site-header .offline{order:3;flex-basis:100%;margin-top:4px}}

body{background:var(--digit-bg);background-image:var(--digit-paper-texture);background-size:14px 14px;color:var(--digit-ink);font-family:var(--digit-font-body)}
.ai-disclosure{text-align:left}.site-header,.site-footer>*{width:min(100% - 40px,var(--digit-measure-frame));margin-inline:auto}.site-header{padding:18px 0}.brand-mark{width:32px;height:32px}.brand-mark,.panel{clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%)}
.intro,.content{max-width:820px}.kicker{display:block;margin:0 0 10px;color:var(--digit-signal);font:700 12px/1.6 var(--digit-font-numeric);letter-spacing:.15em}.intro h1{max-width:20ch;margin:0 0 18px;font-family:var(--digit-font-display);font-size:clamp(32px,5.4vw,60px);line-height:1.14}.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:620px;margin:34px 0 38px;padding:0;list-style:none}.journey>*{border-top:1px solid var(--digit-line);padding:10px 8px 0 0;font-weight:700}.journey>.is-now{border-top-color:var(--digit-signal)}.journey b{display:block;color:var(--digit-signal);font:700 12px/1.6 var(--digit-font-numeric)}
.panel{margin-bottom:24px;padding:26px;background:var(--digit-surface-raised);box-shadow:var(--digit-shadow-one)}details{border-top:1px solid var(--digit-line);padding:10px 0}.copy-row{align-items:center}.site-footer{text-align:left}.symbols { width:100%;max-width:100%;height:auto }
@media (max-width:640px){ main{ padding-inline:16px } }



/* 記号の sprite（defs だけ）は必ず 0×0・inline の max-width/height:auto に勝つ（375px で 391px に広がっていた） */
.symbols{position:absolute;width:0 !important;height:0 !important;overflow:hidden}