:root{color-scheme:light;--bg:#fff7f2;--paper:#fffdfb;--stroke:#e3d5df;--muted:#766779;--text:#514858;--pink:#f5cfdb;--lavender:#e7ddf6;--mint:#b5dcd5;--accent:#98516d;--green:#315e56;--focus:#795c97;--shadow:#84607916}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:radial-gradient(ellipse 90% 45% at 50% -8%,#2c4162 0%,transparent 75%),var(--bg);color:var(--text)}body{padding:20px 14px 24px}.app{width:min(100%,446px);margin:0 auto}.top{display:flex;align-items:center;justify-content:space-between;margin:0 2px 18px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:#253f53;border:1px solid #497c83;border-radius:14px;font-size:23px;color:var(--mint);transform:rotate(-11deg)}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#90a9c6}.brand h1{font-family:system-ui,sans-serif;font-size:28px;letter-spacing:-1.1px;line-height:1;margin:5px 0 0}.brand h1 span{color:var(--mint)}.version{border:1px solid #3e5567;border-radius:999px;padding:8px 11px;font-size:11px;letter-spacing:1.2px;color:#b9c9da;font-weight:800}.game-panel{border:1px solid #354862;border-radius:20px;background:linear-gradient(145deg,#1a2a42,#142035);padding:12px;box-shadow:0 20px 60px #02071270}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 12px}.hud-label{display:block;color:#a0b2c9;font-size:10px;font-weight:800;letter-spacing:.65px}.score-box{min-width:105px}.score-box strong{display:block;margin-top:3px;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-1px}.next-box{flex:1;text-align:center}.next-contents{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:3px}.next-ball{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border-radius:100%;background:#ebac73;color:#15202e;font-size:12px;font-weight:900;box-shadow:inset -3px -4px 5px #0002,inset 3px 4px 5px #fff5}.next-contents strong{font-size:12px;white-space:nowrap}.restart{cursor:pointer;border:1px solid #4a6077;border-radius:12px;background:#243650;color:#e5f1ff;font-weight:800;font-size:12px;padding:10px;white-space:nowrap}.restart:hover{background:#334a66}.restart:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.board-frame{border:2px solid #56718a;border-radius:11px;overflow:hidden;background:#101d31;box-shadow:inset 0 0 25px #0006}canvas{display:block;width:100%;height:auto;aspect-ratio:360 / 552;touch-action:none;cursor:crosshair}.hint{text-align:center;font-size:12px;color:#bdcee1;margin:11px 0 4px}.hint strong{color:var(--mint)}.legend{margin:14px 2px 0;border:1px solid #35465d;border-radius:18px;padding:16px;background:#182539}.legend-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.legend-header strong{font-size:14px}.legend-header span{font-size:10px;color:#a6b8ca}.levels{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:16px 0 13px}.level-item{text-align:center}.level-orb{width:min(100%,32px);aspect-ratio:1;border-radius:100%;margin:0 auto 6px;display:grid;place-items:center;font-size:12px;color:#122033;font-weight:900;border:1px solid #fff7;box-shadow:inset -3px -4px 5px #0002,inset 3px 4px 5px #fff5}.level-item small{display:block;color:#a7bed0;font-size:10px}.goal{display:flex;justify-content:center;align-items:center;gap:9px;background:#204041;border:1px solid #346968;border-radius:11px;padding:10px;font-size:12px;color:#d6ffeb}.goal-star{font-size:18px;color:#8deccb}.goal b{color:#a7ffe0}footer{text-align:center;color:#758ba4;font-size:11px;margin:16px 0 0}@media(max-width:370px){body{padding:10px 8px 18px}.game-panel{padding:8px}.brand h1{font-size:25px}.score-box strong{font-size:25px}.restart span{display:none}.version{font-size:9px}.legend{padding:12px}.legend-header span{font-size:9px}}
.next-ball.image-orb,.level-orb.image-orb{background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:none;overflow:hidden;border-color:transparent}
.top{gap:10px;flex-wrap:wrap}.audio-controls{display:flex;gap:6px;margin-left:auto}.audio-toggle{min-width:70px;min-height:44px;padding:8px;border:1px solid #4a6077;border-radius:10px;background:#243650;color:#bdcee1;font:800 11px system-ui,sans-serif;cursor:pointer;white-space:nowrap}.audio-toggle[aria-pressed="true"]{background:#204b43;border-color:#81edca;color:#baffdf}.audio-toggle:focus-visible{outline:2px solid var(--mint);outline-offset:2px}@media(max-width:420px){.audio-controls{flex-direction:column;gap:4px}.top .brand{gap:8px}.top .eyebrow{font-size:9px;letter-spacing:1px}}


:root{
  --page-pink:#f5cfdb70;--page-lavender:#e7ddf680;
  --panel-end:#fff4f7;--legend-end:#f5effc;--result-end:#f7eff9;
  --active-border:#8abcb3;--button-border:#cdbddd;--button-hover:#d9cbea;
  --goal-bg:#e6f2ed;--result-overlay:#fff7f2ed;--frame-border:#56718a;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#181c2b;--paper:#262a3e;--stroke:#60536e;
  --muted:#c7bbd2;--text:#f4e7f3;--pink:#493346;--lavender:#373449;
  --mint:#344e4d;--accent:#e3a2c5;--green:#c5e6de;--focus:#d5bee9;--shadow:#00000026;
  --page-pink:#46304730;--page-lavender:#34304b40;
  --panel-end:#2b293e;--legend-end:#302c42;--result-end:#332e45;
  --active-border:#7aaca1;--button-border:#796586;--button-hover:#484058;
  --goal-bg:#293d3c;--result-overlay:#181c2bf2;--frame-border:#86728f;
}
/* Shared shell: theme colors only; canvas artwork and dimensions are unchanged. */
html,body{background:radial-gradient(ellipse at 0% 0%,var(--page-pink),transparent 48%),radial-gradient(ellipse at 100% 25%,var(--page-lavender),transparent 55%),var(--bg)}
.top{gap:12px;align-items:center}
.brand{min-width:0;gap:10px}
.brand-mark{flex-shrink:0;background:var(--pink);border-color:var(--stroke);color:var(--accent);box-shadow:0 5px 12px var(--shadow)}
.eyebrow{color:var(--muted);font-size:9px;letter-spacing:1px}
.brand h1{font-size:27px;line-height:1.3;letter-spacing:-.8px;white-space:nowrap}
.brand h1 span{color:var(--accent)}
.audio-controls{flex-direction:column;gap:5px;flex-shrink:0}
.audio-toggle{color:var(--muted);background:var(--paper);border-color:var(--stroke);box-shadow:0 3px 8px var(--shadow);min-height:44px}
.audio-toggle[aria-pressed="true"]{background:var(--mint);border-color:var(--active-border);color:var(--green)}
.audio-toggle:hover{border-color:var(--focus)}
.audio-toggle:focus-visible,.restart:focus-visible{outline-color:var(--focus)}
.game-panel{background:linear-gradient(145deg,var(--paper),var(--panel-end));border-color:var(--stroke);box-shadow:0 14px 36px var(--shadow)}
.hud-label{color:var(--muted)}
.score-box strong{color:var(--accent)}
.next-contents strong{color:var(--text)}
.restart{min-height:44px;background:var(--lavender);border-color:var(--button-border);color:var(--text);box-shadow:0 3px 8px var(--shadow)}
.restart:hover{background:var(--button-hover)}
.hint{color:var(--muted);line-height:1.65}
.hint strong{color:var(--accent)}
.legend{background:linear-gradient(135deg,var(--paper),var(--legend-end));border-color:var(--stroke);box-shadow:0 8px 24px var(--shadow)}
.legend-header{flex-wrap:wrap;row-gap:5px}
.legend-header span,.level-item small{color:var(--muted)}
.goal{background:var(--goal-bg);border-color:var(--mint);color:var(--green)}
.goal-star,.goal b{color:var(--green)}
footer{color:var(--muted)}
.board-frame{position:relative}
.game-over-panel{position:absolute;inset:0;display:grid;place-items:center;padding:14px;background:var(--result-overlay);pointer-events:none}
.game-over-panel[hidden]{display:none}
.game-over-card{width:100%;min-width:0;padding:26px 10px;text-align:center;border:1px solid var(--stroke);border-radius:22px;background:linear-gradient(155deg,var(--paper),var(--result-end));box-shadow:0 12px 30px var(--shadow)}
.result-caption{margin:0 0 10px;font-size:14px;color:var(--accent);letter-spacing:.08em}
.game-over-card h2{margin:0;font-size:clamp(25px,7vw,32px);letter-spacing:.04em;color:var(--text)}
.result-score{margin:20px 0 24px;color:var(--accent);font-size:14px;font-weight:800}
.result-score strong{display:block;margin-top:4px;font-size:34px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result-date-label{margin:0 0 7px;font-size:13px;color:var(--muted)}
.result-date{margin:0;font-size:clamp(15px,4.4vw,18px);font-weight:750;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.result-help{margin:24px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:370px){.brand h1{font-size:23px}.brand-mark{width:32px;height:36px;font-size:20px;border-radius:11px}.top .brand{gap:6px}.top .eyebrow{font-size:8px;letter-spacing:.5px}.audio-toggle{min-width:66px}.game-over-panel{padding:10px}.game-over-card{padding:22px 8px}}
@media(max-width:310px){.top{justify-content:center}.audio-controls{flex-direction:row;margin-left:0}.hud{flex-wrap:wrap}.score-box{min-width:85px}.result-date{white-space:normal}}

/* The frame is UI chrome; nothing inside the canvas is recolored. */
.board-frame{border-color:var(--frame-border)}
.audio-controls{max-width:100%;flex-wrap:wrap}
.theme-toggle[aria-pressed="true"]{background:var(--lavender);border-color:var(--button-border);color:var(--text)}
/* No theme animation: changing colors immediately also respects reduced motion. */