/* 第3の見た目「ポップ」。テーマを戻すと全指定が外れる。
   出題・表示条件・KaTeX・テンキーの位置とドラッグ処理は変更しない。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) {
  --game-ink: #15364f;
  --game-blue: #087bbd;
  --game-lime: #c4ed48;
  --game-orange: #ffaf43;
  --game-paper: #f6fcff;
  color-scheme: light;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) body {
  color: var(--game-ink);
  background-color: #edf8fc;
  background-image: radial-gradient(#70b8d638 1.25px, transparent 1.25px),
    linear-gradient(135deg, #f8fdff 0%, #e7f6fe 55%, #f0f9e8 100%);
  background-size: 18px 18px, auto;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) h1 {
  color: #087bbd; background: none; -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  filter: none; text-shadow: 2px 3px 0 var(--game-ink);
  font-size: clamp(26px, 4.6vw, 37px); letter-spacing: .015em;
  line-height: 1.55; margin-bottom: 8px;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .h1-prefix {
  color: #33596e; -webkit-text-stroke: 0; text-shadow: none;
  font-size: 13px; letter-spacing: .07em; margin-bottom: 6px;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .subtitle { color: #426177; opacity: 1; line-height: 1.8; margin-bottom: 20px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #pop-look-toggle {
  color: var(--game-ink); background: #fff; border: 2px solid var(--game-ink);
  border-radius: 8px; box-shadow: 2px 2px 0 var(--game-ink); font-weight: 800;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #pop-look-toggle:hover { background: #e1f4ff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .usage-wrap .home-btn,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .usage-wrap #sfx-toggle,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .usage-wrap #ruby-toggle {
  background: #fff !important; color: var(--game-ink) !important;
  border: 1.5px solid var(--game-ink) !important; border-radius: 7px !important;
  box-shadow: 2px 2px 0 #15364f30;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-row { gap: 9px; margin-bottom: 18px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-btn {
  min-height: 42px; padding: 8px 19px; border: 2px solid var(--game-ink);
  border-radius: 8px; color: var(--game-ink); background: #fff;
  box-shadow: 2px 3px 0 var(--game-ink); transition: background-color .15s;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-btn.active {
  color: var(--game-ink); background: var(--game-lime); border-color: var(--game-ink);
  box-shadow: 2px 3px 0 var(--game-ink), inset 0 2px #ffffff9c;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-grid { gap: 12px; margin-bottom: 18px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn {
  --game-button: #69c6ef;
  position: relative; min-height: 66px; padding: 14px 8px;
  border: 3px solid var(--game-ink); border-radius: 10px;
  background: var(--game-button); color: #123249;
  box-shadow: 3px 4px 0 var(--game-ink), inset 0 3px #ffffff66;
  text-shadow: none; filter: none; line-height: 1.55;
  transition: transform .14s, background-color .14s, box-shadow .14s;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-1 { --game-button: #ffb65c; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-2 { --game-button: #72c9fa; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-3 { --game-button: #c4ed48; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-4 { --game-button: #73e1dd; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-6 { --game-button: #b0e66f; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-7 { --game-button: #a4d8ff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn-5 {
  --game-button: #ffd24d;
  background-image: repeating-linear-gradient(-55deg, transparent 0 22px, #ffffff27 22px 32px);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn ruby.oj-rb rt { opacity: 1; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn:hover { transform: translateY(-2px); filter: none; box-shadow: 3px 6px 0 var(--game-ink), inset 0 3px #ffffff66; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn.active {
  filter: none; box-shadow: 3px 4px 0 var(--game-ink), inset 0 0 0 3px #fff;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .shape-nav-prev { color: var(--game-ink) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .shape-nav-prev .nav-shape path { fill: #fff; stroke: var(--game-ink); stroke-width: 2; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .shape-nav-current {
  color: var(--game-ink) !important; background: #fff !important;
  border: 2px solid var(--game-ink) !important; border-radius: 8px !important;
  box-shadow: 2px 3px 0 #15364f33 !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .shape-nav-next { color: var(--game-ink) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .shape-nav-next .nav-shape path {
  fill: var(--game-lime); stroke: var(--game-ink); stroke-width: 2;
  filter: drop-shadow(0 3px 0 #15364f33);
}
/* 問題も操作も明るい面に。文字・図・ヒントは同じテーマ内で濃い色に合わせる。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .question-box {
  color: var(--game-ink); background: #f8fdff;
  border: 3px solid var(--game-ink); border-top: 8px solid #149dd7; border-radius: 13px;
  padding-top: 62px; box-shadow: 5px 5px 0 #b2cad4;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .q-text { color: var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .q-note,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-note,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-note-sub { color: #35566b; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .q-hint,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choice-wrong-hint,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #step-results { color: #875014; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-note [style*="color"] { color: var(--game-ink) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-note > [style*="color"] { color: #875014 !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .hint-text { color: #875014 !important; }
/* 正誤の意味は維持し、JSで設定される淡い色だけを読みやすい緑・赤にする。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .hint-text:is([style*="#6ee7b7"], [style*="110, 231, 183"]) { color: #17683f !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .hint-text:is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: #ac3227 !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .hint-text [style*="color"] { color: #875014 !important; }
/* SVGの元の属性は保持する。切り替えるだけで時計・並び・表も元の配色に戻る。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [stroke="#e2e8f0"] { stroke: #274960; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="#e2e8f0"],
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure text[fill="#fff"] { fill: var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [stroke="#fbbf24"] { stroke: #d27100; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="#fbbf24"],
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="#fb923c"] { fill: #a64a0b; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [stroke="#fb923c"] { stroke: #a64a0b; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="rgba(168,85,247,0.10)"],
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="rgba(255,255,255,0.04)"] { fill: #fff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="rgba(168,85,247,0.14)"] { fill: #d8f0fc; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="rgba(168,85,247,0.22)"] { fill: #c5e8fa; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="rgba(251,146,60,0.55)"] { fill: #ffd18b; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #figure [fill="rgba(251,146,60,0.30)"] { fill: #ffedcc; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-chip {
  background: var(--game-lime); border: 2px solid #fff; color: var(--game-ink);
  border-radius: 6px; padding: 4px 11px; box-shadow: none;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-btn {
  color: var(--game-ink); background: var(--game-orange); border: 2px solid #fff;
  border-radius: 7px; box-shadow: 2px 2px 0 #071e2d;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-input-btn,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .tool-btn {
  color: var(--game-ink); background: #a6e6ff; border: 2px solid #fff; border-radius: 7px;
  box-shadow: 2px 2px 0 #071e2d;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-input-btn:hover,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-input-btn.active,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .tool-btn:hover,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .tool-btn.active { color: #fff; background: #086693; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-btn:hover { background: #ffcd77; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-display { color: #764209; background: #fff7d9; border-color: #b37724; border-radius: 8px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .answer-box {
  background: #e4f4fc; color: var(--game-ink); border: 3px solid var(--game-ink); border-radius: 13px;
  padding-top: 60px; box-shadow: 5px 5px 0 #b2cad4;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .restart-btn {
  background: #fff; color: var(--game-ink); border: 1.5px solid #456b83; border-radius: 6px;
  box-shadow: 2px 2px 0 #071e2d;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .restart-btn:hover:not(:disabled) { background: #c7eaff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .restart-btn:disabled { opacity: .35; box-shadow: none; }
/* 押せる操作には厚みを付け、押している間は影を小さくする。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) :is(.answer-btn, .answer-input-btn, .tool-btn, .restart-btn):active:not(:disabled) {
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 #071e2d;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) :is(.answer-btn, .answer-input-btn, .tool-btn):disabled { box-shadow: none; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choice-title { color: var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choice-btn {
  background: #fff; color: var(--game-ink); border: 2px solid #456b83; border-radius: 9px;
  box-shadow: 3px 4px 0 #8bb2c9;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choice-btn:hover:not(:disabled) { background: #caedff; border-color: #176c9a; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choice-btn.correct { color: #195434; background: #ddf5b8; border-color: #478329; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choice-btn.wrong { color: #912c20; background: #ffe0d2; border-color: #c34b32; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-pad {
  background: #bfe5f5; border: 3px solid var(--game-ink); border-radius: 13px;
  box-shadow: 5px 6px 0 #789eb4; padding: 10px 12px 17px;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-grip {
  color: #316079; background: #b7d7e6; border-color: #7caabd;
  border-radius: 5px; width: 76px;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-pad.dragging .calc-grip { background: #95c8df; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-display,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .direct-display {
  color: var(--game-ink); background: #f7ffe7; border: 2px solid #527c47; border-radius: 7px;
  box-shadow: inset 0 3px 0 #d4e7bc;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-unit,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .direct-unit,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-tlab { color: #395a4a; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-tbox { border-color: #93ae7c; border-radius: 5px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-tbox.active { border-color: #587823; background: #d8f58c; box-shadow: 0 0 0 2px #a7c96a66; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-reject { color: #b42318; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-display.correct,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .direct-display.correct { color: #195434; background: #ddf5b8; border-color: #478329; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-display.wrong,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .direct-display.wrong { color: #912c20; background: #ffe0d2; border-color: #c34b32; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn {
  background: #fff; color: var(--game-ink); border: 2px solid var(--game-ink);
  border-radius: 7px; box-shadow: 2px 3px 0 var(--game-ink);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn:hover:not(:disabled) { color: var(--game-ink); background: #d6f2ff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn:active:not(:disabled) { transform: translate(1px, 2px); box-shadow: 1px 1px 0 var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn.op-btn { background: #99dbf6; color: var(--game-ink); border-color: var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn.clr-btn { background: #ffbb69; color: var(--game-ink); border-color: var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn.eq-btn,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-btn.submit-btn { background: var(--game-lime); color: var(--game-ink); border: 2px solid var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain { color: var(--game-ink); background: #fffdf0; border-color: #8aa849; border-radius: 10px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .ai-steps,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .ai-line .katex { color: var(--game-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .ai-reason { color: #875014; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .ai-explain-btn,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .oj-explain-x { color: #385514; background: #e5f5bc; border-color: #779337; border-radius: 7px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .ai-explain-btn:hover,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .oj-explain-x:hover { color: #29450c; background: #d4ed97; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .oj-alt-btn { color: #385514 !important; background: #e5f5bc !important; border-color: #779337 !important; }
/* 手書きは黒・赤で表示し、描画と履歴のデータは保つ。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) body > canvas[style*="z-index: 9998"] { filter: var(--oj-light-ink-filter); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-overlay,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .kiroku-overlay { background: #082132bd !important; backdrop-filter: blur(4px); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-card,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay > div,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .kiroku-overlay > div {
  color: #fff; background: #143a55 !important;
  border: 4px solid #79cbed !important; border-radius: 15px !important;
  box-shadow: 8px 8px 0 #061b2d, 0 20px 60px #071c3652 !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-card::before {
  content: 'CLEAR!'; display: table; margin: -11px auto 14px; padding: 5px 19px;
  background: var(--game-lime); border: 2px solid #fff; border-radius: 5px;
  color: var(--game-ink); box-shadow: 3px 3px 0 #071e2d;
  font: 900 1.12rem/1.2 Arial, sans-serif; letter-spacing: .16em;
  transform: rotate(-3deg);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-label { color: #c8ee75; font-weight: 900; font-size: 1.1em; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-ans { color: #fff2b8; text-shadow: 2px 2px 0 #071e2d; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-btn {
  color: #fff; background: #285b7c; border: 2px solid #8cd3ec; border-radius: 8px;
  box-shadow: 3px 3px 0 #071e2d;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-btn-primary,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-start {
  color: var(--game-ink) !important; background: var(--game-lime) !important;
  border: 2px solid #fff !important; border-radius: 8px !important;
  box-shadow: 3px 3px 0 #071e2d !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-hint { color: #c2dbe7; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-bar {
  color: #d8f885; background: #163c55; border: 2px solid var(--game-ink);
  border-radius: 8px; box-shadow: 3px 3px #9ab9cb;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-giveup-btn {
  color: var(--game-ink); background: #fff; border: 2px solid var(--game-ink);
  border-radius: 8px; box-shadow: 3px 3px #9ab9cb;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-giveup-btn:hover { color: var(--game-ink); background: #dff3ff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-kaisetsu-wrap,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .app-about {
  color: #315368; background: #ffffffed; border: 2px solid var(--game-ink);
  border-radius: 10px; box-shadow: 3px 4px 0 #b5cdd8;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-kaisetsu-sum { color: #125980; padding: 15px 18px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-kaisetsu-sum::before { color: #167bad; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-kaisetsu { color: #315368; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-kaisetsu h3 { color: #125980; border-left-color: #84bf25; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-q { color: #194863; background: #e2f2fb; border-radius: 6px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-a { color: #477217; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-caution { color: #a64319; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .app-about h2 { color: #125980; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .related-app-btn {
  color: #205779; background: #fff; border: 2px solid var(--game-ink);
  border-radius: 8px; box-shadow: 3px 3px 0 #b5cdd8;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .lock-dialog,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .bug-modal { color: #fff; background: #143a55; border: 3px solid #82cdeb; border-radius: 13px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .bug-report-btn {
  color: #43697d !important; background: #edf8fc !important; border-color: #8aacbd !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) footer,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) footer a { color: #43697d !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) button:focus-visible,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) a:focus-visible,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) summary:focus-visible { outline: 3px solid #e37116; outline-offset: 4px; }

@media (max-width: 600px) {
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) h1 { font-size: clamp(21px, 5.5vw, 30px); -webkit-text-stroke-width: 2px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .h1-prefix { display: block !important; font-size: 12px; margin: 5px 0; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .subtitle { margin-bottom: 17px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .pop-look-switch { margin: -6px 0 14px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-row { gap: 7px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-btn { flex: 1; min-width: 0; padding: 7px 4px; border-radius: 7px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-grid { gap: 10px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn { padding-inline: 5px; font-size: clamp(.78rem, 3.25vw, .95rem); border-width: 2px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-grid > #mode-challenge { grid-column: 1 / -1; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .nav-row { flex-wrap: nowrap; gap: 7px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .shape-nav-btn {
    flex: 1; width: auto !important; min-width: 0 !important;
    font-size: .76em !important; padding: 8px 6px !important;
  }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) body.sp-ui .sp-mode-bar { padding: 6px 3px 12px; gap: 12px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) body.sp-ui .sp-mode-bar .mode-btn { border-radius: 9px; border-width: 2px; box-shadow: 3px 4px 0 var(--game-ink); }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) body.sp-ui .sp-mode-bar .mode-btn.active { box-shadow: 3px 4px 0 var(--game-ink), inset 0 0 0 3px #fff; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) body.sp-ui .question-box { padding-top: 62px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .q-text { padding-inline: 4px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .q-text .q-text-line { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .oj-explain .oj-prose-line { white-space: normal; overflow-wrap: anywhere; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .choices { grid-template-columns: minmax(0, 1fr); }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .calc-pad { max-width: 290px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .num-display,
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .direct-display { padding-inline: 8px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .solved-card { padding: 28px 18px; }
}
@media (max-width: 360px) {
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-row { gap: 4px; }
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-btn { padding-inline: 1px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .mode-btn,
  html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .grade-btn { transition: none; }
}

/* 5問チャレンジ案内は、ポップな太枠と明るい紙面で統一する（算数計算マスターと同じ作法。単元ボタンは画面と同じ色のまま枠と影だけそろえる）。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay {
  background: #08213299 !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay > div {
  color: var(--game-ink) !important; background: #f8fdff !important;
  border: 4px solid var(--game-ink) !important; border-radius: 15px !important;
  box-shadow: 8px 8px 0 #15364f, 0 20px 60px #071c3640 !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay > div > div:first-child {
  color: #087bbd !important; text-shadow: 1px 2px 0 #c5e8f8;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay > div > div:nth-child(2) { color: #315368 !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-overlay > div > div:nth-child(3) { color: #426177 !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-grid { gap: 9px !important; margin-top: 10px !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-kind {
  color: #fff !important; border: 2px solid var(--game-ink) !important; border-radius: 8px !important;
  box-shadow: 3px 3px 0 var(--game-ink) !important; text-shadow: 0 1px 0 #0004;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-start {
  color: var(--game-ink) !important; background: var(--game-lime) !important;
  border: 2px solid var(--game-ink) !important; border-radius: 8px !important;
  box-shadow: 3px 3px 0 var(--game-ink) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-start:hover { background: #d8f56e !important; transform: translateY(-1px); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) :is(.challenge-intro-no, .challenge-intro-kiroku) {
  color: var(--game-ink) !important; background: #fff !important;
  border: 2px solid var(--game-ink) !important; border-radius: 8px !important;
  box-shadow: 3px 3px 0 var(--game-ink) !important;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .challenge-intro-kiroku { background: var(--game-orange) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) :is(.challenge-intro-no, .challenge-intro-kiroku):hover { background: #dff3ff !important; }
/* 比の図（2：1＝x：5）は svg に color:#fff の直書き。明るい紙では字色に（2026-09-25） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #direct-fig .oj-eqfig { color: var(--game-ink) !important; }
/* 比の図の「×？」など、svg の中の黄色い字は明るい紙で読めないので、文字 x と同じ濃い橙に（2026-09-25） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) svg text[fill="#fbbf24"] { fill: #a64a0b; }

/* ポップ：手書き（えんぴつ）の入口と道具の帯を、暗い紺の丸から明るい面にする（2026-10-12 本人「直す」。シンプルと同じ形）。
   書いているあいだのえんぴつは、薄い水色で「書ける」状態が分かるようにする。線の色は下の oj-light-ink がもう受けもっている */
html[data-iroiro-pop="game"] .sp-hw-tray {
  background: var(--game-paper); border-color: #9fd2e8; box-shadow: 0 3px 12px #087bbd22;
}
html[data-iroiro-pop="game"] :is(.sp-hw-main, .sp-hw-tool) {
  color: var(--game-ink) !important; background: #fff !important;
  border-color: #9fd2e8 !important; box-shadow: none !important;
}
html[data-iroiro-pop="game"] body.sp-hw-on .sp-hw-main { background: #d9f0fb !important; border-color: var(--game-blue) !important; }
html[data-iroiro-pop="game"] .sp-hw-clear::before { filter: brightness(0); opacity: .65; }
/* OJ-TITLE-RING-START 見出し（◯◯マスター）の白いふちは、ふち取り（-webkit-text-stroke）でなく白い影を8方向に重ねて描く（2026-10-15）。
   ⚠️ 学校の電子黒板など古めのブラウザは「ふちを先に描いて字を上に重ねる」（paint-order: stroke fill）を文字に使えず、
      白いふちが字の上に乗って字の内側を削り、字が細く見えていた（本人が電子黒板で確かめて「なおった」）。影なら、どのブラウザでも字の外側にだけ付く。
   ⚠️ ファイルの最後に置く（上の @media の -webkit-text-stroke-width より後ろにしないと、ふち取りがもどる）。ふちの太さは、もとのふち取りの外側の半分。 */
html[data-iroiro-pop="game"] h1 { -webkit-text-stroke: 0; paint-order: normal; text-shadow: 1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff, 1.06px 1.06px 0 #fff, -1.06px 1.06px 0 #fff, 1.06px -1.06px 0 #fff, -1.06px -1.06px 0 #fff, 2px 3px 0 var(--game-ink); }
html[data-iroiro-pop="game"] .h1-prefix { text-shadow: none; }
@media (max-width: 600px) {
  html[data-iroiro-pop="game"] h1 { text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 0.71px 0.71px 0 #fff, -0.71px 0.71px 0 #fff, 0.71px -0.71px 0 #fff, -0.71px -0.71px 0 #fff, 2px 3px 0 var(--game-ink); }
}
/* OJ-TITLE-FONT ポップの見出しの字の太さを、四則マスター（中１数学マスターの正負の数）にそろえる（2026-10-18 本人の指示。正は tools/apply_title_font.js） */
html[data-iroiro-pop="game"] h1 { font-family: 'Helvetica Neue', Arial, sans-serif; }
/* OJ-BTN-FONT 縦スマホのポップでは、ページ全体の字の並びも四則マスターと同じに＝学年・単元のタブなどボタンの字の太さがそろう（2026-10-18 本人の指示「スマホ版で、中１の正負の数（ポップデザイン）だけ、ボタンの文字が太いが、他の章や学年も、この太さにしたい」） */
html[data-iroiro-pop="game"] body.sp-ui { font-family: 'Helvetica Neue', Arial, sans-serif; }
/* OJ-TITLE-RING-END */