/* 文字式固有の項・分数・代入・入力画面。配置・寸法・計算処理は既存のまま。 */
.appearance-switch { margin: 0 0 20px; }
html[data-math-look="pop"] .mode-btn.active,
html[data-math-look="pastel"] .mode-btn.active { outline: 2px solid var(--look-accent); outline-offset: 3px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) {
  --letter-ink: #51419b; --letter-bg: #e5deff; --letter-border: #8d78c7;
  --number-ink: #195d40; --number-bg: #dcf8e9; --number-border: #4b9b75;
}
html:is([data-math-look="pop"], [data-math-look="simple"]) { --letter-ink: #125980; --letter-bg: #a6e6ff; --letter-border: #176c9a; --number-bg: #ddf5b8; }
html[data-math-look="elegant"] {
  --letter-ink: var(--work-positive-ink); --letter-bg: var(--work-positive-bg); --letter-border: var(--work-positive-border);
  --number-ink: var(--work-zero-ink); --number-bg: var(--work-zero-bg); --number-border: var(--work-zero-border);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.var-x, .var-const, .group-tile, .dist-tile, .ghost) {
  color: var(--letter-ink); background: var(--letter-bg); border: 2px solid var(--letter-border);
  border-radius: var(--work-card-radius); box-shadow: var(--work-card-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .var-const {
  color: var(--number-ink); background: var(--number-bg); border-color: var(--number-border);
}
html[data-math-look="elegant"] :is(.group-tile, .dist-tile) {
  color: var(--work-negative-ink); background: var(--work-negative-bg); border-color: var(--work-negative-border);
  box-shadow: inset 0 1px #fff, inset 0 0 0 3px #fffaf066, 0 4px 0 #9e694c, 0 7px 12px #4b351621;
}
html[data-math-look="elegant"] :is(.inner-tile, .var-const) { --term-metal-edge: #7b899d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.group-inner, .dist-inner, .tile-action) { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr, .hyoshi-instruction, .hyoshi-op, .dainyuu-sub-label, .dainyuu-neg-sign, .bracket-prefix, .op, .step-chain) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-hint, .steps-title) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bracket-symbol, .group-paren, .dist-paren, .dist-coeff, .hyoshi-merge-btn, .dainyuu-mul-btn, .dainyuu-add-btn) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.hyoshi-div-btn, .manual-plus-hint) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.group-neg, .dist-neg, .dainyuu-neg-btn) { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .dainyuu-mul-btn.inactive { color: var(--look-muted); opacity: .4; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.hyoshi-bar, .manual-fraction-bar) { background: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.dainyuu-sub-bar, .nbanme-hint-panel, .manual-plus-panel) { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.nbanme-hint-btn, .dainyuu-sub-btn, .manual-plus-btn) {
  color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid var(--tool-frame);
  border-radius: var(--tool-key-radius); box-shadow: var(--tool-control-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.nbanme-hint-btn, .dainyuu-sub-btn):active:not(:disabled) { transform: translateY(2px); box-shadow: var(--tool-control-pressed-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .dainyuu-sub-btn:disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-toggle input { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-toggle input:checked { background: var(--look-accent); }
/* テンキーの位置や幅は変えず、入力とエラーが読みやすい面にする。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#manual-calc-host .manual-calc-panel, .manual-sign-panel) {
  color: var(--look-ink); background: var(--tool-panel); border: 2px solid var(--tool-frame);
  border-radius: var(--tool-radius); box-shadow: var(--tool-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#manual-calc-host .manual-calc-title, .manual-sign-prompt, .manual-fraction-sign, .manual-fraction-box, .manual-calc-panel.yakubun-manual .manual-calc-formula) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-fraction-box.active { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-close-btn { color: var(--look-ink) !important; background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-key.var-key { color: var(--look-success); background: var(--look-success-soft); border-color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manual-calc-display.error, .manual-sign-prompt.error) { color: var(--look-danger); border-color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-calc-display.success { color: var(--look-success); border-color: var(--look-success); }
/* 図の明色ラベルも明るい問題枠で読めるように。図の寸法や描画順は変えない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.nbanme-q-fig, .nbanme-hint-panel, .oj-explain .nbanme-fig) svg text { fill: var(--look-ink); }
@media (max-width: 600px) {
  .appearance-switch { gap: 7px; margin-bottom: 15px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .game-control-buttons { gap: 6px; }
}
/* 表し方・代入とドラッグ中は元のJSが直接色を付けるため、その色だけ対応づける。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost)[style*="background"] {
  color: var(--letter-ink) !important; background: var(--letter-bg) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost)[style*="background"]:not(.drop-target, .merge-join-left, .merge-join-right, .zero-flash) {
  border-color: var(--letter-border) !important; box-shadow: var(--work-card-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost):is([style*="6, 95, 70"], [style*="#065f46"]) {
  --letter-ink: var(--number-ink); --letter-bg: var(--number-bg); --letter-border: var(--number-border);
  --term-metal-edge: #7b899d;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost):is([style*="120, 53, 15"], [style*="#78350f"]) {
  --letter-ink: var(--work-negative-ink); --letter-bg: var(--work-negative-bg); --letter-border: var(--work-negative-border);
  --term-metal-edge: #9e694c;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-op { color: var(--look-accent); }
/* 元のナビゲーションの !important 指定に合わせ、薄い背景でも文字を読める色に。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(#btn-prev, #btn-next, #restart-btn) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #restart-btn {
  background: var(--look-surface) !important; border: 2px solid var(--look-border) !important;
  box-shadow: 0 3px 0 var(--look-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.nbanme-q-fig, .nbanme-hint-panel, .oj-explain .nbanme-fig) [stroke="rgba(255,255,255,0.8)"] { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.nbanme-hint-panel, .oj-explain .nbanme-fig) [stroke="#ffd700"] { stroke: var(--look-warm); } /* 解説枠の図も、文の色（見出し色・赤）と同じにそろえる（2026-09-26） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.nbanme-hint-panel, .oj-explain .nbanme-fig) [stroke="#fb7185"] { stroke: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .nbanme-fig { color: var(--look-muted); } /* 図と図の間の「…」（白の直書き）
/* 直書きの色は #ffd700 の形のまま残ることが多いので、16進の書き方でも拾う（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nbanme-hint-panel :is([style*="#ffd700"], [style*="255, 215, 0"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nbanme-hint-panel :is([style*="#fb7185"], [style*="251, 113, 133"]) { color: var(--look-danger) !important; }
/* n番目の式の解説（.oj-explain）にも同じ桃色の直書きがある */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain :is([style*="#fb7185"], [style*="251, 113, 133"]) { color: var(--look-danger) !important; }
/* 約分の操作枠：かける数（薄灰）・分母のボタン（白）・括線（白）は暗い背景用。明るい見た目では字色と紙色に（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-mult-val { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-bar { background: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-den-btn { color: var(--look-ink); background: var(--look-surface); border-color: var(--look-border); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-den-btn:hover { color: var(--look-accent); background: var(--look-accent-soft); border-color: var(--look-accent); box-shadow: 0 4px 10px rgba(0,0,0,0.16); }
@media (max-width: 600px) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-btns { width: 100%; gap: 6px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-btns > button {
    flex: 1; width: auto !important; min-width: 0 !important; padding-inline: 4px !important; font-size: 11px !important;
  }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-meta { flex-wrap: wrap; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hyoshi-instruction {
    position: static; transform: none; white-space: normal; flex-basis: 100%; order: 4; text-align: center; margin-top: 6px;
  }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-toggle { flex-shrink: 0; gap: 4px; padding: 5px 6px; white-space: nowrap; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .game-control-buttons { flex-wrap: nowrap; gap: 5px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .game-control-buttons button { padding: 6px 5px; white-space: nowrap; font-size: 10px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .game-area-top { gap: 5px; }
}
/* 約分・分配の操作枠の途中で出る字は、暗い背景用の色のままで明るい見た目では読めなかった（2026-09-28・点検で発見）：
   約分したあとの小さな数（黄）・計算欄の「?」（白 45%）・とんでいく係数（黄）・かっこの後ろの数のタイル（白 8% の地に薄灰の字） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-reduced-value { color: var(--look-warm); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .yakubun-question { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coeff-floater { color: var(--look-warm); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bracket-suffix { color: var(--look-ink); background: var(--tool-key); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bracket-suffix:hover { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-warm); }
/* 分配の前の数（5(…) の 5・+4(…) の +4。タップすると分配する）の枠は、暗い見た目用の白っぽい面と枠のままで、
   明るい見た目では紙にとけて枠が見えなかった（2026-10-23 本人の指摘）。分配で飛んでいく数（.coeff-floater）と同じ色（茶系・シンプルは見出しの青）に。
   ふれたときは元の黄色の代わりに、その色でぬって字を白抜きに */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bracket-prefix { background: var(--look-warm-soft); border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bracket-prefix:hover { background: var(--look-warm); border-color: var(--look-warm); color: var(--look-surface); }