body.subject-breakout{--bg-1: #dff1ee;--bg-2: #e1f3ec;--bg-3: #fff8da;--card-bg: #fffdf7;--text-main: #1f2d3d;--breakout-brick-1: #009E73;--breakout-brick-2: #0072B2;--breakout-brick-3: #E69F00;--breakout-brick-4: #D55E00;--breakout-feedback-ok: #009E73;--breakout-feedback-ko: #D55E00;--breakout-field: #fffdf7;--breakout-ink: #1f2d3d}html:not([data-palette=okabe-ito]) body.subject-breakout{--accent-1: var(--ws-verdigris);--accent-2: var(--ws-hortense-blue);--accent-3: var(--ws-terracotta);--bg-1: #dfeeec;--bg-2: var(--ws-olive-buff);--bg-3: var(--ws-cartridge-buff);--card-bg: var(--ws-ivory);--text-main: var(--ws-slate-black);--breakout-brick-1: #00b49b;--breakout-brick-2: #006eb8;--breakout-brick-3: #fcb315;--breakout-brick-4: #eb5324;--breakout-feedback-ok: var(--ws-cossack-green);--breakout-feedback-ko: var(--ws-jasper-red);--breakout-field: var(--ws-cartridge-buff);--breakout-ink: var(--ws-slate-black)}.game-bubble{display:none}body.subject-breakout .bg-shapes{overflow:hidden}html:not([data-palette=okabe-ito]) .game-bubble{display:block;position:absolute;bottom:-22vh;border-radius:50%;opacity:0;animation-name:gameBubbleRise;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes gameBubbleRise{0%{transform:translateZ(0) scale(.85);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translate3d(var(--bubble-drift, 24px),-128vh,0) scale(1.12);opacity:0}}html:not([data-palette=okabe-ito]) .game-bubble-1{left:6%;width:92px;height:92px;background:radial-gradient(circle at 32% 30%,#2f8e866b,#2f8e8624);animation-duration:30s;animation-delay:-4s;--bubble-drift: 26px}html:not([data-palette=okabe-ito]) .game-bubble-2{left:18%;width:56px;height:56px;background:radial-gradient(circle at 32% 30%,#c8881a6b,#c8881a24);animation-duration:24s;animation-delay:-12s;--bubble-drift: -20px}html:not([data-palette=okabe-ito]) .game-bubble-3{left:34%;width:118px;height:118px;background:radial-gradient(circle at 32% 30%,#3c6e9f61,#3c6e9f1f);animation-duration:38s;animation-delay:-20s;--bubble-drift: 34px}html:not([data-palette=okabe-ito]) .game-bubble-4{left:52%;width:46px;height:46px;background:radial-gradient(circle at 32% 30%,#c8553d6b,#c8553d24);animation-duration:22s;animation-delay:-7s;--bubble-drift: -28px}html:not([data-palette=okabe-ito]) .game-bubble-5{left:68%;width:100px;height:100px;background:radial-gradient(circle at 32% 30%,#2e845566,#2e845521);animation-duration:34s;animation-delay:-16s;--bubble-drift: 22px}html:not([data-palette=okabe-ito]) .game-bubble-6{left:82%;width:64px;height:64px;background:radial-gradient(circle at 32% 30%,#f2c14e70,#f2c14e26);animation-duration:27s;animation-delay:-2s;--bubble-drift: -24px}html:not([data-palette=okabe-ito]) .game-bubble-7{left:92%;width:78px;height:78px;background:radial-gradient(circle at 32% 30%,#2f8e865c,#2f8e861f);animation-duration:32s;animation-delay:-24s;--bubble-drift: 30px}@media (prefers-reduced-motion: reduce){html:not([data-palette=okabe-ito]) .game-bubble{display:none}}html[data-motion=reduce] .game-bubble{display:none}body.subject-breakout .reward-toast{top:16px;bottom:auto;transform:translate(-50%,-24px)}body.subject-breakout .reward-toast.is-visible{transform:translate(-50%)}body.subject-breakout.is-playing .score-bar{display:flex}.score-pill.lives{border-color:var(--accent-3)}.score-pill.level,.score-pill.record{border-color:var(--accent-2)}.intro-note-small{font-size:.85rem;opacity:.8;margin-top:16px}.game-container{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.game-canvas{width:min(100%,900px,102vh);height:auto;aspect-ratio:3 / 2;display:block;border:4px solid var(--accent-1);border-radius:20px;background:var(--breakout-field);box-shadow:0 14px 34px #0000002e;touch-action:none;cursor:none}.game-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.control-btn{padding:10px 18px;border:3px solid var(--accent-1);background:var(--pill-bg);color:var(--text-main);border-radius:50px;font-family:inherit;font-size:.95rem;font-weight:800;cursor:pointer;transition:background .15s,color .15s}.control-btn:hover{background:var(--accent-1);color:#fff}.touch-hint{display:none;font-size:.85rem;font-weight:700;opacity:.75;text-align:center}@media (hover: none){.touch-hint{display:block}}.question-overlay{position:fixed;inset:0;z-index:60;padding:16px;background:#1f2d3db8;max-width:none;align-items:center;justify-content:center;overflow-y:auto}.question-overlay.active{display:flex}.question-card{background:var(--card-bg);border:4px solid var(--accent-1);border-radius:26px;padding:26px;width:100%;max-width:560px;box-shadow:0 18px 40px #0000004d}.question-title{font-family:Fredoka One,Fredoka One Fallback,cursive;font-size:1.3rem;margin-bottom:10px;color:var(--accent-1)}.question-text{font-size:1.1rem;font-weight:700;line-height:1.45;margin-bottom:18px}.question-options{display:grid;gap:10px}.question-option{padding:14px 16px;border:3px solid rgba(0,0,0,.08);background:var(--pill-bg);color:var(--text-main);border-radius:18px;font-family:inherit;font-size:1rem;font-weight:700;text-align:left;cursor:pointer}.question-option:hover:not(:disabled){border-color:var(--accent-1)}.question-option.correct{background:var(--breakout-feedback-ok);border-color:var(--breakout-feedback-ok);color:#fff}.question-option.wrong{background:var(--breakout-feedback-ko);border-color:var(--breakout-feedback-ko);color:#fff}.question-continue{display:block;margin:16px auto 0;border-radius:50px}.question-explanation{margin-top:14px;padding:12px 14px;border-left:5px solid var(--accent-1);border-radius:8px;background:#0000000a;font-size:.92rem;line-height:1.5}@media (max-width: 600px){.game-container{gap:10px}.control-btn{padding:9px 14px;font-size:.85rem}.question-card{padding:18px}}
