/* ===========================
   ド派手版 — 見た目（yorozu-plans ROADMAP 7.39.1 K170、企画書 86）
   色はトークン（--bg / --card / --text / --muted / --accent / --border）だけを使う。演出の場面だけは派手な色を直接持つ（※演出です）。
   点滅は 1 秒に 3 回まで（hade-flash は 400ms。engine.js の FLASH_MIN_MS 340 より遅く）。「視差効果を減らす」なら動きを止める
   =========================== */
/* yorozu-common:begin v2 — サイト共通の土台と皮。正本は youheioonuki.github.io の tools/common/v2/base.css と skin.css（yorozu-plans DESIGN.md）。
   この begin〜end の間は手で直さない（tools/sync-common.mjs で全ツールに配る。ツール固有の上書きは end の後に書く） */
/* yorozu-common v2 土台の層（yorozu-plans ROADMAP 7.98 D369、DESIGN.md）。すべてのページ（見せる・遊ぶ・世界を持つページも）に当てる。
   見た目（色・字・面）は持たない: リセット、押せる高さ、フォーカスの輪、入力の字の大きさ、読み上げの隠し字、動きを減らす設定、印刷で広告を出さない。
   色の値は各ページか共通の皮（skin.css）が --focus-ring・--focus・--muted・--error を決める。無ければ下の既定
   出どころ（v1 から引き継ぎ。2026-10-03 確認、yorozu-plans 企画書 59）: デジタル庁デザインシステム https://design.digital.go.jp/dads/ のコンテンツを加工して作成
   （フォーカスの輪・字の大きさの下限・入力欄のエラー表示。値は @digital-go-jp/design-tokens 2.0.1、MIT, (c) 2023 デジタル庁）。
   GOV.UK Frontend 6.5.1（MIT, (c) Crown copyright）の考え方: visually-hidden、エラーの文の前に読み上げ用の語 */
:root { --tap: 44px; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --fs-s: 0.875rem; --fs-m: 1rem; --fs-l: 1.25rem; --fs-xl: 1.625rem; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 4px solid var(--focus-ring, #000); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus, #ffd43d);
}
@media (forced-colors: active) { :where(a, button, input, select, textarea, summary):focus-visible { outline-color: Highlight; } }
:where(input, select, textarea, button) { font: inherit; color: inherit; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: max(1rem, 16px); }
:where(button, summary, [role="button"]) { min-height: var(--tap); }
/* 1 つだけで置くリンク（nav の並び、使い方から道具へ戻るカード、言語の切り替え、パンくず）も押せる高さに。文中のリンクは対象外（WCAG 2.5.8。K192 の全巡回） */
:where(nav li > a, p.card > a:only-child, .lang-switch a, .crumb a) { display: inline-flex; align-items: center; min-height: var(--tap); }
[aria-invalid="true"] { border-color: var(--error, #ce0000) !important; }
.field-error { color: var(--error, #ce0000); font-weight: 700; margin-top: var(--sp-1); }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media print { ins.adsbygoogle, .google-auto-placed, iframe[id^="aswift"], iframe[id^="google_ads"] { display: none !important; } }
/* yorozu-common v2 共通の皮（B「静かな道具」。yorozu-plans ROADMAP 7.94〜7.99 D364・D366・D369、正典は DESIGN.md）。
   当てるのは計算・制度・道具・読み物・案内（docs/content-classes.csv の「皮」が「共通」）。base.css の後、ページ自身の CSS の前に読む（ページが上書きできる）。
   土台だけのページは <html data-skin="base">（CSV の「皮」から機械で付ける）で、この皮はすべて外れる。同じ CSS を共通と土台のページが使っていても出し分けられる。
   どの規則も :where() で詳細度を上げない（トークンは 0、要素の規則は要素 1 つ分のまま）。影・装飾・2 色以上の強調・端末依存の明朝は使わない */
:where(html:not([data-skin="base"])) {
  color-scheme: light dark;
  --bg: #eef0f2; --bg-2: #e2e6ea; --card: #fbfcfd; --text: #1d2125; --muted: #4c565f;
  --accent: #0e5a6b; --accent-soft: #dcecef; --on-accent: #ffffff;
  --border: #c5ccd3; --input-border: #6b7782;
  --error: #ce0000; --ok: #197a4b; --focus: #ffd43d; --focus-ring: #000;
  --font-ui: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --lh-body: 1.7; --lh-tight: 1.4; --radius: 6px; --line-input: 2px;
}
@media (prefers-color-scheme: dark) {
  :where(html:not([data-skin="base"])) {
    --bg: #15191d; --bg-2: #1c2227; --card: #1a1f24; --text: #e8ecef; --muted: #a8b3bc;
    --accent: #6fc3d4; --accent-soft: #14323a; --on-accent: #0b1a1e;
    --border: #2f373e; --input-border: #7a8792; --error: #ff8a7a; --ok: #6fcf97; --focus: #000; --focus-ring: #ffd43d;
  }
}
:where(html:not([data-skin="base"])) body { font-family: var(--font-ui); background: var(--bg); color: var(--text); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
:where(html:not([data-skin="base"])) h1 { font-size: var(--fs-xl); font-weight: 800; line-height: var(--lh-tight); }
:where(html:not([data-skin="base"])) h2 { font-size: var(--fs-l); font-weight: 800; line-height: var(--lh-tight); }
:where(html:not([data-skin="base"])) h3 { font-size: var(--fs-m); font-weight: 800; }
:where(html:not([data-skin="base"])) a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { :where(html:not([data-skin="base"])) a:hover { text-decoration-thickness: 3px; } }
:where(html:not([data-skin="base"])) :where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
/* 部品: 入力の箱 */
:where(html:not([data-skin="base"])) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { border: var(--line-input) solid var(--input-border); border-radius: var(--radius); background: var(--card); min-height: var(--tap); padding: var(--sp-1) var(--sp-3); }
:where(html:not([data-skin="base"])) :where(input, select, textarea):focus { border-color: var(--text); }
/* 部品: ボタン（主は塗り、副は線） */
:where(html:not([data-skin="base"])) :where(button, .btn) { border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--card); color: var(--text); font-weight: 700; padding: 0 var(--sp-4); cursor: pointer; }
:where(html:not([data-skin="base"])) :where(button[type="submit"], .btn-primary) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* <a> のボタンは a { color } に負けないよう、詳細度を 1 段だけ上げる（D416。主は副の後に書いて勝たせる） */
:where(html:not([data-skin="base"])) a.btn { color: var(--text); }
:where(html:not([data-skin="base"])) a.btn-primary { color: var(--on-accent); }
/* 部品: チップ・面・折りたたみ（開閉の印 ▶ を残すため list-item のまま、高さは上下の余白と土台の min-height で）・結果の数字・注意の帯・固定バー */
:where(html:not([data-skin="base"])) :where(.chip) { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--input-border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 700; }
:where(html:not([data-skin="base"])) :where(.card) { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
:where(html:not([data-skin="base"])) :where(details) > summary { padding-block: var(--sp-2); cursor: pointer; font-weight: 700; }
:where(html:not([data-skin="base"])) :where(.result-num, .money, output) { font-size: var(--fs-xl); font-weight: 800; }
:where(html:not([data-skin="base"])) :where(.notice, [data-keep]) { border-left: 4px solid var(--text); background: var(--bg-2); padding: var(--sp-2) var(--sp-3); }
:where(html:not([data-skin="base"])) :where(.fixed-bar) { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--border); padding: var(--sp-2) var(--sp-4); }
/* yorozu-common:end */
/* --- 土台のページの色と字（<html data-skin="base">。皮のページには当てない。和紙の色で、明暗は端末の設定に従う） --- */
:where(html[data-skin="base"]) {
  color-scheme: light dark;
  --bg: #f0ebe0; --card: #faf6ee; --text: #3a3025; --muted: #6e604f;
  --accent: #8b4513; --border: #cfc0a0; --input-border: #857561; --shadow: rgba(58, 48, 37, 0.12);
  --focus: #ffd43d; --focus-ring: #000;
  --font-ui: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :where(html[data-skin="base"]) {
    --bg: #1c1814; --card: #2b251e; --text: #ece4d6; --muted: #b9ab96;
    --accent: #e0a066; --border: #4a3f33; --input-border: #8c7d68; --shadow: rgba(0, 0, 0, 0.4);
    --focus-ring: #ffd43d; --focus: #000;
  }
}
:where(html[data-skin="base"]) a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { :where(html[data-skin="base"]) a:hover { text-decoration-thickness: 3px; } }


/* --- 土台（ほかのツールと同じ形） --- */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); line-height: 1.7; }
.app-header { text-align: center; padding: 1.4rem 1rem 0.4rem; }
.app-header h1 { color: var(--accent); margin: 0 0 0.3rem; font-size: 1.6rem; }
.subtitle { color: var(--muted); margin: 0; }
.app-main { margin: 0 auto; padding: 0 16px 2rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.field { margin: 0 0 0.9rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.money { display: flex; align-items: center; gap: 0.4rem; }
.money input, .field select { font: inherit; font-size: 1.1rem; padding: 0.45rem 0.6rem; border: 1px solid var(--input-border); border-radius: 6px; background: var(--card); color: var(--text); min-height: 44px; width: 100%; max-width: 16rem; box-sizing: border-box; }
.unit { color: var(--muted); }
.hint, .small { font-size: 0.88rem; color: var(--muted); }
label.inline { display: block; margin: 0.4rem 0; }
details.opt > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: 0.4rem 0 0.8rem; }
.app-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 16px; border-top: 1px solid var(--border); }
.footer-nav ul { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; }

/* --- ド派手版の固有 --- */
.app-main { max-width: 760px; }
.hade-list { list-style: none; padding: 0; }
/* 1 画面目の下・脚の上の案内（D384） */
.hade-about { margin: 2.5rem 0 0; font-size: 0.95rem; }
.hade-about h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.hade-about p { margin: 0 0 0.6rem; }
.hade-about p:last-child { margin-bottom: 0; }
.hade-btn { display: inline-block; font: inherit; font-size: 1.05rem; font-weight: 700; padding: 0.7rem 1.4rem; margin: 0.3rem 0.4rem 0.3rem 0; border-radius: 999px; border: 2px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; min-height: 44px; }
.hade-btn-sub { background: transparent; color: var(--accent); }
/* 暗い表示では --accent が明るい（#e0a066）ので、塗りのボタンの字は暗くする（白では 2.2:1。暗い字で 4.5:1 以上。検収 2026-10-13） */
@media (prefers-color-scheme: dark) { .hade-btn:not(.hade-btn-sub) { color: #1c1814; } }
.hade-go { margin-top: 0.8rem; font-size: 1.2rem; }
.hade-go:disabled { opacity: 0.5; }

/* 舞台: 画面いっぱい（ページの中の要素。本物の窓は開かない） */
.hade-stage { position: fixed; inset: 0; z-index: 100; background: #111; color: #fff; display: flex; flex-direction: column; overflow: auto; }
.hade-notice { margin: 0; padding: 0.35rem 0.8rem; background: #000; color: #ffd43d; font-size: 0.85rem; text-align: center; flex: none; }
.hade-layer { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
.hade-bar { flex: none; display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; background: rgba(0, 0, 0, 0.6); }
.hade-skip, .hade-sound { font: inherit; font-size: 1rem; min-height: 44px; padding: 0.4rem 1rem; border-radius: 999px; border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; }
.hade-stage.is-shake .hade-layer { animation: hade-shake 0.5s linear infinite; }
@keyframes hade-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(3px, -3px); } 75% { transform: translate(-2px, -2px); } }

/* ため（ドラムロールとスポット）・スロット */
.hade-drum-title, .hade-slot-title { font-size: clamp(1.5rem, 6vw, 2.6rem); font-weight: 800; }
.hade-spot { width: 9rem; height: 9rem; margin: 1rem auto; border-radius: 50%; background: radial-gradient(circle, #ffd43d, #e0a066 60%, transparent 70%); animation: hade-flash 400ms steps(2) infinite; }
@keyframes hade-flash { 0% { opacity: 1; } 50% { opacity: 0.35; } }
.hade-slot-row { font-family: ui-monospace, monospace; font-size: clamp(2.6rem, 13vw, 5.5rem); font-weight: 800; margin: 0.6rem 0; }
.hade-digit { display: inline-block; min-width: 0.65em; color: #ffd43d; }
.hade-digit.is-stop { color: #fff; }
.hade-unit { font-size: 0.45em; margin-left: 0.2em; }
.hade-gougai { background: #f4ecd8; color: #1c1814; padding: 1.4rem; max-width: 30rem; border: 6px double #1c1814; animation: hade-spin 0.9s ease-out 1; }
@keyframes hade-spin { from { transform: rotate(-540deg) scale(0.1); } to { transform: rotate(0) scale(1); } }
.hade-gougai-name { font-weight: 800; color: #c00; margin: 0; }
.hade-gougai-head { font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 900; margin: 0.4rem 0; }
.hade-cm { border: 3px solid #ffd43d; padding: 1.2rem; max-width: 30rem; }
.hade-cm-label { display: inline-block; background: #ffd43d; color: #000; font-weight: 800; padding: 0 0.5rem; margin: 0 0 0.6rem; }
.hade-cm-copy { font-size: 1.3rem; font-weight: 700; }
.hade-cm-link { color: #ffd43d; }
.hade-cm-after { opacity: 0.8; margin-top: 1rem; }

/* 決めの画面（画面写しで X に貼る 1 枚。見出し・数字・ツッコミ・サイト名） */
.hade-finale { max-width: 32rem; }
.hade-finale-head { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 900; color: #ffd43d; margin: 0; }
.hade-finale-num { font-size: clamp(2.6rem, 13vw, 5rem); font-weight: 900; margin: 0.2rem 0; font-variant-numeric: tabular-nums; }
.hade-finale-tsukkomi { font-size: 1.2rem; margin: 0 0 0.8rem; }
.hade-finale-site { opacity: 0.85; margin: 0 0 0.8rem; }
.hade-share-note a { color: #ffd43d; }
.hade-finale .hade-btn-sub { color: #fff; border-color: #fff; }

.hade-roll { font-size: clamp(1.6rem, 7vw, 2.8rem); font-weight: 800; min-height: 1.4em; margin: 0.4rem 0; overflow-wrap: anywhere; }

/* 決めの画面の当たり（大写し）と紙吹雪（点滅しない。落ちるだけ） */
.hade-finale-win { font-size: clamp(2.2rem, 11vw, 4.4rem); font-weight: 900; margin: 0.2rem 0; overflow-wrap: anywhere; }
.hade-finale-line { font-size: 1.25rem; font-weight: 700; margin: 0.4rem 0 0.8rem; }
.hade-share-pick { display: block; font-size: 0.9rem; margin-top: 0.6rem; }
.hade-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hade-confetti i { position: absolute; top: -2rem; width: 0.6rem; height: 1rem; animation: hade-fall 2.4s linear forwards; }
@keyframes hade-fall { to { transform: translateY(110vh) rotate(540deg); } }

/* 入力（まじめな版と同じ: 候補を貼る・当たりの数） */
.hade-textarea { font: inherit; width: 100%; box-sizing: border-box; min-height: 9rem; padding: 0.5rem 0.6rem; border: 1px solid var(--input-border); border-radius: 6px; background: var(--card); color: var(--text); }

/* ワードアート（D321）: 見出し・決めの画面だけ。濃い紺の帯に黄色の太字（コントラストは帯に対して測る）、虹色の段の影、斜め。点滅しない。共有の画像は wordart.js が同じ色で描く */
.wordart { display: inline-block; padding: 0.1em 0.45em; background: #1b1464; color: #ffe600; font-weight: 900; font-style: italic; letter-spacing: 0.03em;
  transform: rotate(-3deg) skewX(-10deg); -webkit-text-stroke: 1px #c2185b; paint-order: stroke fill; border-radius: 0.15em;
  text-shadow: 1px 1px 0 #ff1744, 2px 2px 0 #ff9100, 3px 3px 0 #00c853, 4px 4px 0 #2979ff; }
.app-header h1.wordart { color: #ffe600; font-size: 1.8rem; margin: 0.4rem 0 0.6rem; }
.hade-finale-head.wordart { color: #ffe600; }

/* 館の札と入口（D324: 説明の文は無し） */
.hade-tag { display: inline-block; font-size: 0.75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.6em; margin: 0.4rem 0; }
.hade-door { display: block; text-align: center; font-size: clamp(1.8rem, 9vw, 3rem); font-weight: 900; padding: 1.2rem; border-radius: 16px; background: #1b1464; color: #ffe600; text-decoration: none; transform: rotate(-2deg); }
.hade-skip { font-size: 1.4rem; line-height: 1; min-width: 44px; padding: 0.3rem 0.6rem; }
/* 3D の盤（D325）: 舞台いっぱいの canvas。札と × は上に重ねる */
.hade-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hade-stage > .hade-notice, .hade-skip-3d { position: relative; z-index: 2; }
.hade-skip-3d { position: absolute; right: 0.6rem; bottom: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .hade-spot, .hade-gougai, .hade-stage.is-shake .hade-layer { animation: none; }
  .hade-confetti { display: none; }
}

/* 2D の盤（../wheel.js の SVG。D325 の 3D の盤と同じ色）。入口とルーレットの最初の画面。飾り（aria-hidden） */
.hade-wheel { display: block; width: min(58vw, 250px); aspect-ratio: 224 / 230; margin: 0.4rem auto 0; filter: drop-shadow(0 6px 10px var(--shadow)); }
.hade-wheel-svg { display: block; width: 100%; height: 100%; }
.hade-wheel-spin { animation: hade-wheel-idle 40s linear infinite; transform-origin: 0 0; }
@keyframes hade-wheel-idle { to { transform: rotate(360deg); } }
.hade-wheel-label { fill: #1b1464; font-weight: 900; dominant-baseline: middle; text-anchor: middle; font-family: var(--font-ui); }
.hade-go-row { text-align: center; margin: 0.2rem 0 0.4rem; }
.hade-go-row .hade-go { margin: 0.4rem 0 0; min-width: 12rem; font-size: 1.35rem; }
#msg { text-align: center; }
.hade-door .hade-wheel { width: min(60vw, 240px); margin: 0 auto 0.6rem; filter: none; }
.hade-door-name { display: block; }
@media (prefers-reduced-motion: reduce) { .hade-wheel-spin { animation: none; } }

/* ビンゴの発表（K182）: 部屋のコードの欄・最後の番号・出た番号の帯（新しい順） */
.hade-code { font-size: 1.6rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
output#msg, output#conn { display: block; text-align: center; }
.hade-bingo-last { display: block; font-size: clamp(3rem, 18vw, 8rem); font-weight: 900; text-align: center; line-height: 1.1; }
.hade-bingo-num { font-size: clamp(4rem, 26vw, 12rem); line-height: 1.05; }
.hade-bingo-band { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; list-style: none; padding: 0; margin: 0.6rem 0 0; }
.hade-bingo-band li { padding: 0.15rem 0.6rem; border: 2px solid currentColor; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 入口の 2 本目（K182）の番号の玉。飾り */
.hade-ball { display: grid; place-items: center; width: min(40vw, 160px); aspect-ratio: 1; margin: 0 auto 0.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #ffd43d 19% 100%); color: #1c1814; font-size: clamp(1.8rem, 9vw, 2.6rem); font-weight: 900; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }