/* 算数計算の条件設定。明るいテーマだけに適用し、表示条件と操作位置は維持する。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) {
  --calc-setting-selected: #c4ed48;
  --calc-setting-hover: #e3f4ff;
  --calc-setting-primary: #83d4fa;
  --calc-setting-challenge: #ffbf63;
  --calc-setting-radius: 12px;
  --calc-setting-button-shadow: 2px 3px 0 #15364f;
}
html[data-iroiro-pop="pop"] {
  --calc-setting-selected: #ead7ff;
  --calc-setting-hover: #f4eaff;
  --calc-setting-primary: #bfeaf8;
  --calc-setting-challenge: #ffd0e5;
  --calc-setting-radius: 17px;
  --calc-setting-button-shadow: 0 3px 0 #c6a8da;
}

html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings {
  background: var(--calc-panel);
  color: var(--calc-ink);
  border: 2px solid var(--calc-border);
  border-radius: var(--calc-setting-radius);
  box-shadow: 0 5px 0 var(--calc-shadow);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .settings { border-color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings-title,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings :is(.spin-mini .lab, .check-row .lab, .spin-unit) {
  color: var(--calc-muted);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .card-top > span[style] {
  color: var(--calc-muted) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.operand-card, .operator-card) {
  color: var(--calc-ink);
  background: var(--calc-soft);
  border: 2px solid var(--calc-border);
  border-radius: var(--calc-setting-radius);
  box-shadow: inset 0 2px 0 #fff;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings .digit-box {
  color: var(--calc-ink) !important;
  background: #fff !important;
  border-color: var(--calc-border) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings .digit-box.filled {
  border-color: var(--calc-accent) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings .digit-box.active {
  color: var(--calc-ink) !important;
  background: var(--calc-setting-selected) !important;
  border-color: var(--calc-accent) !important;
}
/* 数を決める枠：カーソルのときは、もとの色のまま少し暗く（選んだ色をかぶせると、もとの色より薄く見えた。2026-10-07） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings .digit-box:hover:not(.active) { filter: brightness(0.95); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.box-dot, .op-symbol, .op-corner-sym) {
  color: var(--calc-accent);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .box-maybe-dot { color: var(--calc-muted); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .box-fracbar { background: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.chk-btn, .mini-btn, .spin-btn, .opsel-btn, .op-corner-chk, .type-btn, .op-rand-btn, .op-symbol-btn) {
  color: var(--calc-ink);
  background: #fff;
  border-color: var(--calc-border);
  box-shadow: none;
}
/* 選んだ（.on・.active）ボタンには、カーソルの色をかぶせない（かぶせると選んだ色より薄くなった。2026-10-07の指示「カーソルが
   のっているときに色が薄くなる現象は起こらないように」） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.chk-btn, .mini-btn, .spin-btn, .opsel-btn, .op-corner-chk, .type-btn, .op-rand-btn, .op-symbol-btn):hover:not(:disabled):not(.on):not(.active) {
  color: var(--calc-ink);
  background: var(--calc-setting-hover);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.chk-btn.on, .opsel-btn.active, .op-corner-chk.on, .type-btn.active, .op-rand-btn.active),
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .vertical-type-toggles .type-btn.active {
  color: var(--calc-ink);
  background: var(--calc-setting-selected);
  border-color: var(--calc-accent);
  box-shadow: inset 0 1px 0 #ffffffb3;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .op-corner-chk.on .op-corner-sym { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.btn-reset-all, .opclear-btn, .op-sub) {
  color: var(--calc-danger);
  background: #fff4f2;
  border-color: #e5a6a3;
  box-shadow: none;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.btn-reset-all, .opclear-btn, .op-sub):hover {
  background: #ffe3de;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .op-add {
  color: var(--calc-accent);
  background: #fff;
  border-color: var(--calc-border);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .op-add:hover:not(:disabled) { background: var(--calc-setting-hover); }

/* ON/OFFの強弱と元の無効状態を保ったまま、文字とつまみを明るい面に合わせる。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-wrap,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-wrap:hover { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-wrap:hover { background: var(--calc-setting-hover); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-off,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-wrap:has(input:checked) .multi-toggle-on { color: var(--calc-accent); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-on,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-wrap:has(input:checked) .multi-toggle-off { color: var(--calc-muted); opacity: .65; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-toggle-wrap:has(input:checked) .multi-toggle-on { opacity: 1; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-slider {
  background: #fff;
  border-color: var(--calc-border);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-slider::before { background: var(--calc-muted); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-switch input:checked + .multi-slider {
  background: var(--calc-setting-selected);
  border-color: var(--calc-accent);
  box-shadow: none;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-switch input:checked + .multi-slider::before { background: var(--calc-accent); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .multi-switch input:focus-visible + .multi-slider {
  outline: 3px solid var(--calc-accent);
  outline-offset: 3px;
}

html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .grade-preset-btn {
  color: var(--calc-ink);
  background: #fff;
  border-color: var(--calc-border);
}
/* カーソルをのせても薄くしない：もとの色のまま少し暗く（前は白に近いパネルの色に変わって薄く見えた。2026-10-07の指示） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .grade-preset-btn:hover { filter: brightness(0.95); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .grade-preset-menu {
  color: var(--calc-ink);
  background: var(--calc-panel);
  border: 2px solid var(--calc-border);
  box-shadow: 0 7px 20px var(--calc-shadow);
  min-width: min(320px, calc(100vw - 56px));
  max-width: min(460px, calc(100vw - 56px));
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .gp-grade { color: var(--calc-ink); font-weight: 800; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .gp-grade:hover { background: var(--calc-setting-hover); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .gp-item { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .gp-item:hover {
  color: var(--calc-ink);
  background: var(--calc-setting-selected);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.div-options-wrap, .div-option-item:hover) { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .div-option-item input[type="checkbox"] { accent-color: var(--calc-accent); }

html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .gen-row { gap: 14px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings .btn-gen {
  color: var(--calc-ink);
  background: var(--calc-setting-primary);
  border: 2px solid var(--calc-border);
  border-radius: var(--calc-setting-radius);
  box-shadow: var(--calc-setting-button-shadow);
  padding: 12px 18px;
  line-height: 1.6;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .settings .btn-gen-challenge { background: var(--calc-setting-challenge); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .settings .btn-gen { border-color: var(--calc-ink); }
/* 問題を作るボタンも、数学アプリと同じ淡いパステルにそろえる。 */
html[data-iroiro-pop="pop"] .settings .btn-gen { color: #316781; background: linear-gradient(180deg, #dcf7ff, #c6f0ff); border-color: #fff; box-shadow: 0 3px 0 #d5a6d4; }
html[data-iroiro-pop="pop"] .settings .btn-gen-challenge { color: #714717; background: linear-gradient(180deg, #fff0ac, #ffe68a); }

/* 数字と演算子の小窓。絶対位置や開閉の指定は既存のまま使う。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.keypad-pop, .sp-op-pop) {
  color: var(--calc-ink);
  background: var(--calc-panel);
  border-color: var(--calc-border);
  box-shadow: 0 7px 20px var(--calc-shadow);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.kp-grid button, .oppad-grid button, .sp-op-choice) {
  color: var(--calc-ink);
  background: var(--calc-soft);
  border-color: var(--calc-border);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.kp-grid button, .oppad-grid button, .sp-op-choice):hover {
  color: var(--calc-ink);
  background: var(--calc-setting-hover);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.kp-grid .kp-clear, .sp-op-choice.on) {
  color: var(--calc-ink);
  background: var(--calc-setting-selected);
  border-color: var(--calc-accent);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .operator-card::after { color: var(--calc-muted); }

@media (max-width: 520px) {
  /* 320pxでも「数・演算子・数」を一列に保ち、数字の小枠をカード内へ収める。 */
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .operand-wrapper .operand-card {
    width: clamp(102px, calc((100vw - 116px) / 2), 128px);
  }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .operator-card { width: 44px; padding-inline: 2px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .operator-card .digit-box { width: 34px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .box-preview > .box-line { width: 100%; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .vertical-type-toggles { gap: 3px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .vertical-type-toggles .type-btn { width: clamp(32px, calc((100vw - 128px) / 6), 40px); }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .gen-row .btn-gen { min-width: 0; flex-basis: 230px; padding-inline: 12px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .gp-item { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .operand-card .digit-box { width: 24px; height: 40px; font-size: 1.3em; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .operand-card .box-line { gap: 2px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .check-row { gap: 2px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .chk-btn { padding-inline: 4px; }
}