/* 算数計算マスターの共通配色。元のデザインと計算処理には適用しない。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) {
  --calc-ink: #15364f;
  --calc-muted: #426177;
  --calc-panel: #f8fdff;
  --calc-soft: #e3f3fb;
  --calc-border: #7bafc5;
  --calc-accent: #087bbd;
  --calc-warm: #925010;
  --calc-success: #17683f;
  --calc-danger: #bb2535;
  --calc-shadow: #b2cad4;
}
html[data-iroiro-pop="pop"] {
  --calc-ink: #583179;
  --calc-muted: #795484;
  --calc-panel: #fffaff;
  --calc-soft: #f4e7fc;
  --calc-border: #c8a7df;
  --calc-accent: #8a3c9f;
  --calc-warm: #865017;
  --calc-success: #17683f;
  --calc-danger: #b52a56;
  --calc-shadow: #d5b6e7;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .rotate-hint {
  color: var(--calc-muted);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .app-about {
  color: var(--calc-muted) !important;
  background: var(--calc-panel) !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"]) .app-about h2 {
  color: var(--calc-accent) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.work-footer, .work-footer a) {
  color: var(--calc-muted) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(button, a, summary):focus-visible {
  outline: 3px solid var(--calc-accent);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .top-controls {
    gap: 7px;
  }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .top-controls .shape-nav-btn {
    flex: 1; min-width: 0 !important; width: auto !important;
    padding-inline: 5px !important; font-size: .76em !important;
  }
}
@media (max-width: 600px) {
  /* 縦スマホでも4つの操作を一行に保ち、ボタン名を折り返さない。 */
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .work-btns {
    width: 100%; flex-wrap: nowrap; gap: clamp(4px, 1.5vw, 8px);
  }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .work-btns .wbtn {
    flex: 1 1 auto; min-width: 0; padding: 9px 4px;
    font-size: clamp(10px, 3.1vw, 13px); white-space: nowrap;
  }
}