body.sonic-game { background:#edf9fc; color:#16466a; }
body.sonic-game .site-header,body.sonic-game > footer { display:none; }
body.sonic-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.sn-shell { min-height:100dvh; padding:8px 0 20px; }
.sn-shell * { box-sizing:border-box; letter-spacing:0; }
.sn-shell h1,.sn-shell h2,.sn-shell p { margin-top:0; }
.sn-shell h2:focus { outline:none; }
.sn-shell button,.sn-shell .button,.sn-shell summary { min-height:48px; min-width:48px; border-radius:6px; font-family:inherit; font-weight:700; font-size:17px; line-height:1.3; letter-spacing:0; }
.sn-shell button:focus-visible,.sn-shell a:focus-visible,.sn-shell input:focus-visible,.sn-shell summary:focus-visible { outline:4px solid #cb4c99; outline-offset:3px; }
.sn-shell button { cursor:pointer; }.sn-shell button:disabled { cursor:default; opacity:.55; }
.sn-shell .sn-primary { background:#1767c8; color:white; border:2px solid #144d9c; box-shadow:0 3px 0 #124483; font-size:18px; font-weight:750; padding:11px 20px; }
.sn-shell .sn-primary:hover { background:#1258af; }.sn-shell .sn-secondary { background:#fff; color:#245b7c; border:2px solid #aacfd9; padding:9px 14px; font-size:16px; }
.sn-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:66px; padding-bottom:8px; }
.sn-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 4px; }.sn-toolbar span { font-size:13px; }.sn-toolbar .sn-back { color:#79384b; font-size:14px; padding:8px; white-space:nowrap; }.sn-motion { display:flex; align-items:center; gap:5px; font-size:13px; }.sn-motion input { width:22px; height:22px; accent-color:#1672c8; }.sn-toolbar .sn-sound { width:48px; padding:0; }
.sn-cover { text-align:center; }.sn-cover-heading { max-width:780px; margin:12px auto 18px; }.sn-cover-heading > span { color:#25805e; font-size:15px; font-weight:700; }.sn-cover h2 { font-size:32px; margin:8px 0 12px; color:#155ab4; }.sn-cover p { font-size:19px; line-height:1.5; margin-bottom:18px; }.sn-cover-image { width:100%; height:auto; display:block; }.sn-cover > .sn-cover-image { max-height:420px; object-fit:contain; }.sn-cover .sn-cover-note { font-size:15px; margin:12px 0 0; }.card-art .sn-cover-image { width:100%; height:100%; object-fit:cover; }
.sn-task-top { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; padding:5px 0; }.sn-eyebrow { font-size:14px; display:block; color:#35775f; font-weight:700; }.sn-equation { font-size:36px; font-weight:800; line-height:1.25; }.sn-round { background:#fff5bd; border:2px solid #e2b94e; border-radius:6px; padding:6px 15px; text-align:center; }.sn-round strong { display:block; font-size:26px; }.sn-round span { font-size:14px; }.sn-route { font-size:25px; font-weight:750; text-align:right; }.sn-instruction { font-family:inherit; font-size:21px; line-height:1.3; margin:6px 0 10px; min-height:28px; }
.sn-scene { position:relative; height:clamp(230px,calc(100dvh - 450px),320px); width:100%; border:2px solid #76b8d3; border-radius:6px; isolation:isolate; background:#9ae5ff; }
.sn-landscape { position:absolute; inset:0; height:100%; width:100%; z-index:0; pointer-events:none; }.sn-step-badge { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#fffde4; border:2px solid #b9d2c1; border-radius:5px; padding:6px 12px; color:#215d7c; font-size:18px; font-weight:750; white-space:nowrap; z-index:2; }
/* Only the numerical camera is clipped; controls and page content remain in flow. */
.sn-line-window { --unit:48px; position:absolute; inset:0; overflow:hidden; border-radius:4px; z-index:1; }
.sn-world { position:absolute; top:0; left:50%; width:calc(100 * var(--unit)); height:100%; transform:translateX(calc(-1 * var(--camera-to) * var(--unit))); }
.sn-axis { position:absolute; left:0; top:182px; height:4px; width:100%; background:#257796; }.sn-axis::before { content:''; position:absolute; left:-100vw; right:-100vw; top:-5px; height:68px; background:#fffceb; z-index:-1; border-top:3px solid #c5e8bd; }
.sn-tick { position:absolute; left:calc(var(--n) * var(--unit)); top:177px; height:15px; border-left:2px solid #377c98; }.sn-tick b { position:absolute; top:18px; left:-22px; width:44px; text-align:center; font-size:23px; font-weight:600; color:#245a77; }.sn-decade { height:19px; border-width:3px; border-color:#145594; }.sn-decade b { font-weight:800; }.sn-start-tick b { color:#a52d64; }.sn-goal-tick b { color:#1d7952; }
.sn-runner { position:absolute; top:60px; left:-46px; width:92px; height:112px; transform:translateX(calc(var(--to) * var(--unit))); z-index:4; }.sn-hero { display:block; width:100%; height:100%; }.sn-runner-inner { height:100%; }.sn-line-spring { position:absolute; top:144px; left:calc(var(--n) * var(--unit) - 28px); width:56px; height:35px; z-index:2; }.phase-question .sn-line-spring { opacity:.35; }.sn-line-spring svg { width:100%; height:100%; }
.sn-goal-ring { position:absolute; top:87px; left:calc(var(--n) * var(--unit) - 20px); width:40px; height:47px; z-index:3; }.sn-ring-art { width:100%; height:100%; display:block; }.sn-collected { opacity:0; }.phase-collect .sn-goal-ring { animation:sn-collect .65s ease-out both; }
.sn-axis-direction { position:absolute; bottom:6px; left:0; width:100%; text-align:center; font-size:12px; font-weight:700; color:#174b66; z-index:2; }.sn-camera-moving { animation:sn-camera var(--travel-duration) ease-in-out both; }.sn-moving { animation:sn-run var(--travel-duration) ease-in-out both; }.phase-big { --travel-duration:1.9s; }.phase-correct { --travel-duration:.95s; }.phase-big .sn-runner-inner { animation:sn-bob .18s linear infinite alternate; }.phase-correct .sn-runner-inner { animation:sn-hop .95s ease-in-out both; }.phase-correct .sn-line-spring { animation:sn-compress .3s ease-out; }
.sn-feedback { min-height:84px; padding:9px 12px; margin:10px 0; background:#fff; border:1px solid #b4d6df; border-left:5px solid #e4bc3f; border-radius:5px; font-size:18px; line-height:1.4; display:flex; flex-direction:column; justify-content:center; }.sn-feedback strong { font-size:14px; color:#8a397b; }
.sn-controls { display:flex; gap:14px; align-items:center; justify-content:space-between; min-height:92px; }.sn-springs { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:min(620px,75%); }.sn-shell .sn-spring-choice { display:grid; grid-template-columns:72px auto; grid-template-rows:auto auto; column-gap:8px; align-items:center; text-align:left; padding:6px 12px; min-height:86px; background:#fff; border:2px solid #a6c8d9; box-shadow:0 3px 0 #c7dce3; color:#1a4d70; }.sn-spring-choice svg { width:72px; height:64px; grid-row:1/3; }.sn-spring-choice strong { font-size:29px; line-height:1; }.sn-spring-choice span { font-size:14px; font-weight:600; }.sn-shell .sn-red { border-color:#e38b99; }.sn-shell .sn-blue { border-color:#75afe2; }.sn-spring-choice:hover { background:#fff9d9; }
.sn-answer-form { display:grid; grid-template-columns:auto 110px auto; gap:12px; align-items:center; }.sn-answer-form label { font-size:18px; font-weight:700; }.sn-answer-form input { width:110px; height:56px; border:2px solid #4d93bd; border-radius:5px; background:white; color:#16466a; font-size:30px; font-weight:750; text-align:center; }.sn-help-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:330px; }.sn-help-actions button { font-size:15px!important; }.sn-wait { min-height:56px; display:grid; align-items:center; font-size:20px; font-weight:700; color:#247451; }
.sn-rings { display:flex; justify-content:center; gap:10px; margin:12px auto 0; }.sn-rings > span { width:36px; height:37px; border:2px dashed #9fc3c4; border-radius:50%; color:#6c959c; display:grid; place-items:center; font-size:14px; }.sn-rings > .sn-earned { border-color:transparent; }.sn-earned svg { height:39px; width:33px; }
.sn-finish { text-align:center; }.sn-finish h2 { font-size:30px; margin:12px 0; color:#155ab4; }.sn-finish > p { font-size:19px; line-height:1.45; max-width:830px; margin:0 auto 12px; }.sn-finish-scene { position:relative; height:260px; }.sn-final-hero { position:absolute; left:14%; bottom:15px; height:210px; width:180px; }.sn-final-rings { position:absolute; top:30%; right:12%; width:40%; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.sn-final-rings svg { width:100%; height:70px; }.sn-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }.sn-stats > div { display:flex; gap:12px; align-items:center; background:white; border:1px solid #a5ceda; border-radius:6px; padding:12px; text-align:left; }.sn-stats strong { font-size:33px; color:#1560ae; }.sn-stats span { font-size:15px; line-height:1.4; }.sn-finish-actions { display:flex; gap:12px; justify-content:center; margin:18px 0; }.sn-finish details { text-align:left; max-width:850px; margin:16px auto; font-size:18px; line-height:1.5; }.sn-finish summary { cursor:pointer; padding:10px; }.sn-finish details p { padding:0 10px; }
.sn-help { width:min(600px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; background:#fffef4; color:#16466a; padding:24px; border:2px solid #80b8d0; border-radius:8px; font-size:18px; line-height:1.5; }.sn-help::backdrop { background:#153e6999; }.sn-help h2 { font-size:25px; }
@keyframes sn-camera { from { transform:translateX(calc(-1 * var(--camera-from) * var(--unit))); }to { transform:translateX(calc(-1 * var(--camera-to) * var(--unit))); } }
@keyframes sn-run { from { transform:translateX(calc(var(--from) * var(--unit))); }to { transform:translateX(calc(var(--to) * var(--unit))); } }
@keyframes sn-bob { to { transform:translateY(-6px) rotate(-5deg); } }
@keyframes sn-hop { 50% { transform:translateY(-38px) rotate(-8deg); } }
@keyframes sn-compress { 40% { transform:scaleY(.55); transform-origin:center bottom; } }
@keyframes sn-collect { from { opacity:1; transform:translateY(0) scale(1); }to { opacity:0; transform:translateY(-50px) scale(1.5); } }
.sn-still *,.sn-paused * { animation:none!important; transition:none!important; }
.sn-subtraction .phase-big .sn-hero,.sn-subtraction .phase-question .sn-hero,.sn-addition .phase-correct .sn-hero { transform:scaleX(-1); }
@media (max-width:900px) { .sn-toolbar { grid-template-columns:auto 1fr auto 48px; gap:8px; }.sn-motion { grid-column:1/-1; justify-self:end; }.sn-task-top { grid-template-columns:1fr auto; }.sn-route { grid-column:1/-1; text-align:left; font-size:23px; }.sn-controls { align-items:start; }.sn-answer-form { grid-template-columns:auto 92px; }.sn-answer-form button { grid-column:1/-1; }.sn-answer-form input { width:92px; }.sn-feedback { min-height:108px; }.sn-springs { width:75%; }.sn-help-actions { max-width:190px; } }
@media (max-width:600px) { body.sonic-game #app { width:calc(100% - 14px); }.sn-shell { padding-top:6px; }.sn-toolbar { grid-template-columns:1fr auto 48px; }.sn-toolbar > div { grid-column:1/-1; grid-row:1; }.sn-toolbar .sn-back { grid-row:2; }.sn-toolbar h1 { font-size:18px; }.sn-toolbar [data-sn-action="help"] { grid-column:2; grid-row:2; }.sn-toolbar .sn-sound { grid-column:3; grid-row:2; }.sn-motion { grid-column:1/-1; justify-self:start; margin:2px 0 5px; }.sn-cover h2 { font-size:27px; }.sn-cover p { font-size:17px; }.sn-cover-heading { margin-top:8px; }.sn-cover-note { line-height:1.5; }.sn-task-top { gap:8px; }.sn-equation { font-size:29px; }.sn-round { padding:6px 9px; }.sn-round strong { font-size:23px; }.sn-round span { font-size:12px; }.sn-route { font-size:23px; }.sn-instruction { font-size:19px; min-height:50px; }.sn-scene { height:260px; }.sn-step-badge { font-size:15px; padding:6px; max-width:calc(100% - 12px); white-space:normal; text-align:center; }.sn-line-window { --unit:36px; }.sn-tick b { font-size:21px; }.sn-runner { width:86px; left:-43px; }.sn-feedback { font-size:17px; min-height:126px; }.sn-controls { flex-direction:column; gap:12px; }.sn-springs { width:100%; gap:8px; }.sn-shell .sn-spring-choice { grid-template-columns:1fr; grid-template-rows:46px auto auto; padding:6px 8px 10px; text-align:center; gap:3px; min-width:0; }.sn-spring-choice svg { grid-row:auto; width:70px; height:46px; justify-self:center; }.sn-spring-choice strong { font-size:28px; }.sn-spring-choice span { font-size:13px; }.sn-help-actions { max-width:100%; width:100%; justify-content:flex-start; }.sn-answer-form { width:100%; grid-template-columns:1fr 90px; gap:8px; }.sn-answer-form label { font-size:17px; }.sn-answer-form input { width:90px; }.sn-answer-form button { width:100%; }.sn-rings { gap:7px; }.sn-rings > span { width:29px; height:34px; }.sn-earned svg { width:27px; height:35px; }.sn-finish h2 { font-size:26px; }.sn-finish > p { font-size:17px; }.sn-finish-scene { height:230px; }.sn-final-hero { height:160px; width:125px; left:2%; }.sn-final-rings { right:3%; width:48%; top:29%; gap:5px; }.sn-final-rings svg { height:54px; }.sn-stats { grid-template-columns:1fr; gap:7px; }.sn-finish-actions { flex-direction:column; }.sn-finish-actions > * { width:100%; }.sn-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .sn-shell * { animation:none!important; transition:none!important; } }