/* ビートこうば の みため 3 つ(ネオン / おもちゃ / こうぼう)。設計は .claude/rules/beat-kouba/design/theme.md(#574)。
   **機械の形は 1 つのまま、変えるのは色の変数・照明・札の並びだけ。** style.css の後に読む(style.css の :root は寸法だけ)。
   - 行の色相(--row-0..3)を入れ替えない・2 色に寄せない(凍結 4 章)。パッド・譜面・型紙・盤・題名の灯りは全部ここを読む
   - **--bg は単色のまま**(SVG の fill と color-mix が読む)。灯りは background-image にだけ置く
   - 明るさ・不透明度を振らない(灯りは静止した 1 枚。切り替えは床 1000ms の中で 1 回 ← ui.js の themeAt)
   - theme-color の値は js/theme.js の表(--bg と同じ値)。ここを変えたら表も変える
   - --ink-dim(見出し・知らせの薄い字)は 3 組とも地・板の上で 4.5:1 以上(#1860。値は theme.md 3.4) */

:root, html[data-theme="neon"] {
  --bg: #12131f; --bg-2: #1a1c2c; --ink: #fdf6ec; --ink-dim: rgba(253, 246, 236, .80);
  --btn: #262a3d; --btn-ink: #fdf6ec; --line: rgba(253, 246, 236, .18);
  --row-0: #ff7a45; --row-1: #9d7bff; --row-2: #2fd6c9; --row-3: #ff5fb8;
  --pat-0: #ffe08a; --pat-1: #8fc8ff; --pat-2: #9fe8a0;
  --pad-off-a: .10; --pad-on-a: .32; --pad-off-ink-a: .55; --pad-off-line-a: .45; --glow: 1;
  /* 同じ 色の 3 つ組(color-mix の 無い 古い 端末の 下書き rgba() が 読む ← #1621) */
  --ink-rgb: 253, 246, 236; --row-0-rgb: 255, 122, 69; --row-1-rgb: 157, 123, 255; --row-2-rgb: 47, 214, 201; --row-3-rgb: 255, 95, 184; --pat-0-rgb: 255, 224, 138; --pat-1-rgb: 143, 200, 255; --pat-2-rgb: 159, 232, 160;
}
html[data-theme="toy"] {
  --bg: #fff4e4; --bg-2: #fbe7cf; --ink: #2b2530; --ink-dim: rgba(43, 37, 48, .72);
  --btn: #ffffff; --btn-ink: #2b2530; --line: rgba(43, 37, 48, .18);
  --row-0: #d94f1e; --row-1: #6a4fd8; --row-2: #0b8a82; --row-3: #d63c8f;
  --pat-0: #a06d00; --pat-1: #2f6fd6; --pat-2: #2e8b57;
  --pad-off-a: .10; --pad-on-a: .45; --pad-off-ink-a: .6; --pad-off-line-a: .5; --glow: 0;
  /* 同じ 色の 3 つ組(color-mix の 無い 古い 端末の 下書き rgba() が 読む ← #1621) */
  --ink-rgb: 43, 37, 48; --row-0-rgb: 217, 79, 30; --row-1-rgb: 106, 79, 216; --row-2-rgb: 11, 138, 130; --row-3-rgb: 214, 60, 143; --pat-0-rgb: 160, 109, 0; --pat-1-rgb: 47, 111, 214; --pat-2-rgb: 46, 139, 87;
}
/* こうぼう = 灯りの下の木の作業台と真鍮の金具(theme.md 3.2)。--line = 真鍮の縁が材質の手掛かりの本体。
   --pat-1 / --pat-2 はいま誰も読まないが、欠けると :root のネオンが漏れるので 3 組とも持つ */
html[data-theme="wood"] {
  --bg: #2a1c12; --bg-2: #3a2718; --ink: #f7e8cf; --ink-dim: rgba(247, 232, 207, .82);
  --btn: #3d2a1b; --btn-ink: #f7e8cf; --line: rgba(217, 164, 65, .38);
  --row-0: #f0904a; --row-1: #ae8cf0; --row-2: #4fc4a6; --row-3: #ec78b8;
  --pat-0: #e2b04f; --pat-1: #9fc4e8; --pat-2: #a8d8a0;
  --pad-off-a: .10; --pad-on-a: .30; --pad-off-ink-a: .55; --pad-off-line-a: .45; --glow: .5;
  /* 同じ 色の 3 つ組(color-mix の 無い 古い 端末の 下書き rgba() が 読む ← #1621) */
  --ink-rgb: 247, 232, 207; --row-0-rgb: 240, 144, 74; --row-1-rgb: 174, 140, 240; --row-2-rgb: 79, 196, 166; --row-3-rgb: 236, 120, 184; --pat-0-rgb: 226, 176, 79; --pat-1-rgb: 159, 196, 232; --pat-2-rgb: 168, 216, 160;
}
/* 灯り: 上から 1 つの暖かいランプ。静止・1 枚だけ(明るさを振らない)。--bg には入れない(SVG の fill が読むので単色のまま)。
   **ことばの一覧の膜(.veil)には掛けない**(黒い膜の上に灯りを足すと膜の意味が変わる ← theme.md 10 章 5) */
html[data-theme="wood"] body, html[data-theme="wood"] .screen:not(.veil) {
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(255, 196, 120, .06), transparent 70%);
}

/* 絵の対比: おもちゃ(明るい地)では行の色を文字色へ寄せる(パッドの地の上で 3:1 ← pads.md 3.3。
   2026-09-06 の年齢適合レビューが ON 2.1〜2.7 / OFF 2.06〜2.35 を実測)。
   **おとえらび のタイルの絵も、パッドとまったく同じ規則で描く**(2026-09-16 のデザイナー 重大 2)。
   **`[data-row]` で絞る**(= 音の絵を持つタイルだけ)。`.tile` ぜんぶに掛けると [0] もどる / [14] ドラッグ の
   `.pict`(`var(--btn-ink)` の操作の色)まで行の色に染まり、「色 = 意味」が toy でだけ崩れる。
   パターンの絵も toy ではピクトと同じ規則で墨を混ぜる(2026-09-11。行の色そのままだと「ある」の地の上で線が 2.12:1)。
   **こうぼう には要らない** —— 地が暗いので行の色そのままで 3:1 を超える(theme.md 3.3 / 3.4) */
/* --row-ink = 下の 3 行の color-mix を 行ごとに 解いた 色(古い 端末の 下書き ← #1621) */
html[data-theme="toy"] .pad[data-row="0"], html[data-theme="toy"] .tile[data-row="0"] { --row-ink: #8b3c26; }
html[data-theme="toy"] .pad[data-row="1"], html[data-theme="toy"] .tile[data-row="1"] { --row-ink: #4e3c8c; }
html[data-theme="toy"] .pad[data-row="2"], html[data-theme="toy"] .tile[data-row="2"] { --row-ink: #195d5d; }
html[data-theme="toy"] .pad[data-row="3"], html[data-theme="toy"] .tile[data-row="3"] { --row-ink: #893264; }
html[data-theme="toy"] .pad .pict, html[data-theme="toy"] .tile[data-row] .pict { color: color-mix(in srgb, var(--row) 55%, var(--ink)); }
/* ノリの ON の段差(#1855 ← pads.md G)。toy は光が 0 なので、黒の .28 ではなく行の濃い色で沈みを言う */
html[data-theme="toy"][data-mode="easy"] .pad[data-kind="phrase"][data-state="on"] { box-shadow: inset 0 var(--lip) 0 var(--row-ink); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { html[data-theme="toy"] .pad .pict, html[data-theme="toy"] .tile[data-row] .pict { color: var(--row-ink, var(--row)); } }
html[data-theme="toy"] .tile .pat path { stroke: color-mix(in srgb, var(--row) 55%, var(--ink)); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { html[data-theme="toy"] .tile .pat path { stroke: var(--row-ink, var(--row)); } }
html[data-theme="toy"] .pad .hold circle { stroke: color-mix(in srgb, var(--row) 55%, var(--ink)); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { html[data-theme="toy"] .pad .hold circle { stroke: var(--row-ink, var(--row)); } }
html[data-theme="toy"] .pad .wave i { border-color: color-mix(in srgb, var(--row) 55%, var(--ink)); }   /* 押した音の輪(#1865)も弧と同じ濃さ */
@supports not (color: color-mix(in srgb, red 50%, blue)) { html[data-theme="toy"] .pad .wave i { border-color: var(--row-ink, var(--row)); } }

/* ---------------------------------------------------------------- 設定の みため の札 3 枚(theme.md 5.1)
   **3 列が既定**(2 列のまま 3 枚目を 2 段目へ落とすと行が 124px 高くなり、360x640 / 812x375 で設定が枠を出る)。
   **名前は 1 行・16 → 12px**(theme.js の fit が `--theme-fs` を 3 枚そろえて決める。語の途中で割らない・2 行にしない)。
   12px でも入らないときだけ `data-fit="list"`(見本が左・名前が右の 1 列の帯)。
   **✓ は流れの外(右上の角)、縁は 2px + 内側 1px のまま**(あそびかた・おてほんの札と同じ文法。選び替えで札の中の幅が
   変わると名前の大きさが跳ねる)。#683 の帯(低い横)の同じ規則はここへ 1 つにまとめた */
#set-theme .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#set-theme .card { position: relative; padding: 8px 3px; }
#set-theme .card > span { font-size: var(--theme-fs, 16px); line-height: 20px; white-space: nowrap; }
#set-theme .card[aria-checked="true"] { border-width: 2px; box-shadow: inset 0 0 0 1px var(--ink); }
#set-theme .card[aria-checked="true"]::after { position: absolute; top: -9px; right: 8px; padding: 0 3px;
  background: var(--btn); font-size: 13px; line-height: 16px; }
#set-theme .cards[data-fit="list"] { grid-template-columns: minmax(0, 1fr); }
#set-theme .cards[data-fit="list"] .card { flex-direction: row; justify-content: flex-start; min-height: 48px; padding: 4px 8px; gap: 10px; }
#set-theme .cards[data-fit="list"] .swatch { width: 56px; height: 28px; flex: 0 0 56px; }

/* 見本(テーマに依らず同じ色 = 焼き込み)。3 つとも「4 色 = 行」を見本の中で言い、**地の材質と形で見分ける**
   (ネオン = 黒地に 4 色の帯 / おもちゃ = 白地に 4 色の丸 / こうぼう = 木目に 4 色の四角。theme.md 5.3)。
   木目は**見本の中だけ**(譜面の後ろに引くと五線・拍の罫線と混ざる ← theme.md 8 章) */
.swatch.neon { background: linear-gradient(90deg, #ff7a45 0 25%, #9d7bff 25% 50%, #2fd6c9 50% 75%, #ff5fb8 75%); border: 6px solid #12131f; }
/* 丸は小さなタイル(幅 = min(16px, 17%))の中の円。% で置く = 箱の幅に固定 px の位置を掛けない(92% の丸が 3 列の札で欠けた ← theme.md 5.3)。
   タイルの幅が箱に比例して縮むので、3 列の狭い札(50〜94px)でも帯(56x28)でも 4 つが欠けず、間が空く */
.swatch.toy { background:
  radial-gradient(circle closest-side, #d94f1e calc(100% - .5px), transparent 100%) 13% 50% / min(16px, 17%) 16px no-repeat,
  radial-gradient(circle closest-side, #6a4fd8 calc(100% - .5px), transparent 100%) 38% 50% / min(16px, 17%) 16px no-repeat,
  radial-gradient(circle closest-side, #0b8a82 calc(100% - .5px), transparent 100%) 63% 50% / min(16px, 17%) 16px no-repeat,
  radial-gradient(circle closest-side, #d63c8f calc(100% - .5px), transparent 100%) 88% 50% / min(16px, 17%) 16px no-repeat,
  #fff; border: 2px solid #ddd; }
/* 四角は 1:1 の小さな SVG(縦横比を持つので、幅 min(10px, 13%) に高さが付いてくる = 狭い札でも四角のまま縮む)。
   3 列の札は見本が 50〜94px(480x280 の 3 列で 50px)。固定 10px だと 50px の箱で 4 つが重なる ← theme.md 5.3 */
.swatch.wood { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23f0904a'/%3E%3C/svg%3E") 13% 50% / min(10px, 13%) auto no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23ae8cf0'/%3E%3C/svg%3E") 38% 50% / min(10px, 13%) auto no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%234fc4a6'/%3E%3C/svg%3E") 63% 50% / min(10px, 13%) auto no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23ec78b8'/%3E%3C/svg%3E") 88% 50% / min(10px, 13%) auto no-repeat,
  repeating-linear-gradient(97deg, #5a3a22 0 5px, #6a452a 5px 7px, #5e3d24 7px 12px);
  border: 3px solid #c9963a; }
/* 帯(56x28)では四角を 8px に(10px だと中の幅 50px で 4 つが接する。13% = 6.5px は小さすぎる ← theme.md 5.3) */
#set-theme .cards[data-fit="list"] .swatch.wood { background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, auto; }