*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#141821;color:#f4f4eb;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none;touch-action:none}#stage{width:100%;height:100vh;height:100dvh;position:relative;overflow:hidden;isolation:isolate}canvas{display:block;width:100%;height:100%}header{position:absolute;left:0;right:0;top:0;padding:calc(24px + env(safe-area-inset-top)) 25px 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.logo{font-size:17px;font-weight:900;letter-spacing:-1px}.logo span{color:#c4f36a}.hud{display:flex;align-items:center;gap:9px}#score{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}button{cursor:pointer;color:inherit;font:inherit;border:0;touch-action:manipulation}#pause{pointer-events:auto;margin-left:15px;background:#ffffff0d;width:38px;height:38px;border-radius:50%;font-size:16px}#lives{position:absolute;top:calc(98px + env(safe-area-inset-top));left:25px;font-size:10px;letter-spacing:5px;color:#ec987f}#hint{position:absolute;top:26%;width:100%;text-align:center;font-size:10px;letter-spacing:2px;color:#8f96a0;pointer-events:none;transition:opacity .4s}#overlay{position:absolute;inset:0;background:#141821ef;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 max(32px,calc((100vw - 390px)/2));z-index:3}#overlay.hidden{display:none}.eyebrow{font-size:10px;letter-spacing:3px;color:#9ea6b1;margin-bottom:26px}h1{font-size:clamp(70px,16vh,130px);letter-spacing:-8px;line-height:.82;margin:0 0 28px;font-weight:900}h1 span{color:#c4f36a}#description{font-size:15px;line-height:1.7;color:#a3a9b2;margin:0 0 32px}#start{background:#c4f36a;color:#141821;border-radius:4px;padding:19px 23px;font-size:13px;font-weight:800;letter-spacing:1px;width:100%;max-width:326px;display:flex;align-items:center;justify-content:space-between}#start span{font-size:24px;line-height:12px}small{font-size:11px;line-height:1.9;color:#737d8b;margin-top:21px}footer{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));width:100%;text-align:center;font-size:8px;letter-spacing:2px;color:#626e7b;pointer-events:none}#fullscreen{position:absolute;right:19px;bottom:calc(15px + env(safe-area-inset-bottom));background:transparent;font-size:25px;color:#778391;z-index:4}#feedback{position:absolute;top:33%;text-align:center;width:100%;font-size:15px;font-weight:700;color:#c4f36a;pointer-events:none;opacity:0;transition:opacity .15s}button:focus-visible{outline:2px solid white;outline-offset:5px}@media(min-width:700px){header{padding-left:40px;padding-right:40px}#lives{left:40px}#hint{top:23%}}@media(max-height:550px){#overlay{padding-left:12%;padding-right:12%}h1{font-size:66px;letter-spacing:-4px;margin-bottom:12px}.eyebrow{margin-bottom:14px}#description{font-size:12px;margin-bottom:14px}small{margin-top:12px;font-size:9px}#start{padding:12px 20px}}
/* Pixel arcade theme */
html,body{background:#69bbef;color:#fff4d8;font-family:'Courier New',monospace;font-weight:900}canvas{image-rendering:pixelated;image-rendering:crisp-edges}header{filter:drop-shadow(2px 2px 0 #272547);z-index:2}.logo{font-family:'Courier New',monospace;font-size:20px;letter-spacing:-1px;color:#fff4d8}.logo span{color:#ffdb50}.hud{gap:10px}#score{color:#fff4d8;text-shadow:2px 2px #272547;font-size:25px}#pause{border-radius:0;background:#e39a59;border:3px solid #272547;box-shadow:inset 2px 2px #ffda9e,inset -2px -2px #a9583c;color:#fff4d8;margin-left:9px}#lives{color:#f04b36;font-size:21px;letter-spacing:3px;text-shadow:2px 2px #272547,-1px -1px #fff4d8}#hint{color:#fff4d8;text-shadow:2px 2px #272547;font-size:11px;letter-spacing:1px;top:27%}#overlay{background:linear-gradient(#69bbefed 0%,#69bbefd9 68%,#69bbef00 100%);padding-bottom:65px;align-items:center;text-align:center}.eyebrow{font-size:11px;letter-spacing:2px;color:#fff4d8;text-shadow:2px 2px #365584;margin-bottom:22px}h1{font-family:'Courier New',monospace;font-weight:1000;letter-spacing:-7px;font-size:clamp(76px,15vh,120px);line-height:.85;color:#fff4d8;text-shadow:4px 0 #272547,-4px 0 #272547,0 -4px #272547,0 4px #272547,7px 7px #272547;margin-bottom:27px}h1 span{color:#ffdb50}#description{font-size:13px;line-height:1.8;color:#272547;max-width:330px;margin-bottom:27px;font-weight:900}#start{border-radius:0;border:4px solid #272547;box-shadow:inset 4px 4px #fff0a5,inset -4px -4px #d89029,5px 5px #272547;background:#ffdb50;font:900 15px 'Courier New',monospace;color:#272547;padding:19px 22px;max-width:290px}#start:active{transform:translate(3px,3px);box-shadow:inset 4px 4px #d89029,2px 2px #272547}small{font-size:11px;color:#304969;line-height:1.9;margin-top:24px}footer{color:#fff4d8;text-shadow:2px 2px #713f36;font-size:9px;letter-spacing:1px}#fullscreen{color:#fff4d8;text-shadow:2px 2px #713f36}#feedback{color:#ffdb50;text-shadow:2px 2px #272547,-1px -1px #272547;font-size:22px}button:focus-visible{outline-color:#fff4d8}@media(max-height:550px){#overlay{padding-bottom:10px}h1{font-size:60px;margin-bottom:14px}.eyebrow{margin-bottom:12px}#description{margin-bottom:12px;font-size:11px}small{margin-top:13px;font-size:9px}#start{padding:12px 20px}}

/* Gym interior palette: graphite, electric blue, warm white and oak. */
html,body{background:#111923;color:#f1f3ed}header{filter:drop-shadow(2px 2px 0 #0b1320)}.logo,.hud,#score{color:#f1f3ed}#pause{background:#26394e;border-color:#0a121d;box-shadow:inset 2px 2px #59798e,inset -2px -2px #132234;color:#e9f5fa}#lives{color:#e89f64;text-shadow:2px 2px #101923,-1px -1px #f9ddbd}#hint{color:#f3eedf;text-shadow:2px 2px #101923}#overlay{background:linear-gradient(#101a2aee 0%,#11253bed 55%,#17222b88 83%,#17222b22 100%)}.eyebrow{color:#58cdff;text-shadow:2px 2px #101923}h1{color:#f3f3e9;text-shadow:4px 0 #0c1421,-4px 0 #0c1421,0 -4px #0c1421,0 4px #0c1421,7px 7px #0c1421}h1 span{color:#19b9f5}#description{color:#d7dedf}#start{background:#12aeea;color:#071b2e;border-color:#07121e;box-shadow:inset 4px 4px #71dbff,inset -4px -4px #087bad,5px 5px #07121e}#start:active{box-shadow:inset 4px 4px #087bad,2px 2px #07121e}small{color:#a9bac7}footer,#fullscreen{color:#f4efe5;text-shadow:2px 2px #262523}#feedback{color:#57d3ff;text-shadow:2px 2px #0c1522,-1px -1px #0c1522}

header{justify-content:flex-end}

/* Lives align with the score controls at the top of the playfield. */
#lives{top:calc(27px + env(safe-area-inset-top));left:25px;font-size:29px;line-height:32px;letter-spacing:5px;color:#ff454f;text-shadow:2px 2px #101923,-1px -1px #ff9a9f;pointer-events:none;z-index:2}
@media(min-width:700px){#lives{left:40px}}

#lives{display:flex;gap:9px;line-height:0;letter-spacing:0;text-shadow:none}.pixel-heart{display:block;width:33px;height:30px;flex:none;shape-rendering:crispEdges}

.score-wrap{position:relative;display:inline-flex;justify-content:center;min-width:30px}#score{display:inline-block;transform-origin:center}#score-gains{position:absolute;inset:0;pointer-events:none}.score-gain{position:absolute;left:50%;top:0;white-space:nowrap;color:#57d3ff;font:900 18px/1.4 'Courier New',monospace;text-shadow:2px 2px #0c1522;will-change:transform,opacity}

footer{padding:0 52px;line-height:1.8;letter-spacing:0}

footer{transition:opacity .25s}

/* Double taps control jumps instead of selecting text or opening touch callouts. */
#stage,#stage *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage img{-webkit-user-drag:none}

#overlay h1.home-logo{margin:0 0 34px;line-height:1;text-shadow:none;letter-spacing:0}.home-logo img{display:block;width:min(288px,74vw);height:auto}

[hidden],#start[hidden],#character-picker[hidden]{display:none!important}#character-picker{width:min(310px,80vw)}.choose-label{font:900 11px 'Courier New',monospace;letter-spacing:1px;color:#a9bac7;margin:0 0 15px}.character-options{display:grid;grid-template-columns:1fr 1fr;gap:15px}.character-card{display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 8px 16px;background:#203349;border:3px solid #07121e;box-shadow:inset 2px 2px #50718b,4px 4px #07121e;color:#edf6ff;font:900 12px 'Courier New',monospace}.character-card:hover,.character-card:focus-visible{background:#2a4861;border-color:#19b9f5}.character-card:active{transform:translate(2px,2px);box-shadow:2px 2px #07121e}.character-card svg{display:block;width:80px;height:96px;image-rendering:pixelated}@media(max-height:550px){.character-card{padding:5px 8px 10px;gap:2px}.character-card svg{width:50px;height:60px}.choose-label{margin-bottom:7px}#overlay h1.home-logo{margin-bottom:18px}}

/* Compact mobile start screen with aligned reward thresholds. */
#overlay{padding:24px;overflow-y:auto;background:linear-gradient(#101a2af5,#112235ed 72%,#17222b9c)}
#overlay h1.home-logo{margin:0 0 30px}.home-logo img{width:164px;height:auto}
#description{width:min(286px,100%);max-width:286px;margin:0 0 27px;font-size:12px;line-height:1.7}
.rewards-heading{margin:0 0 13px;font:700 10px/1.5 'Courier New',monospace;letter-spacing:.6px;color:#a5bbc9}
.reward-list{border-top:1px solid #64829b44;border-bottom:1px solid #64829b44;background:#122237b3;padding:2px 12px}
.reward-row{display:flex;align-items:center;gap:18px;text-align:left;min-height:57px;border-bottom:1px solid #64829b2b}.reward-row:last-child{border-bottom:0}
.reward-points{width:48px;flex:none;text-align:center;font-size:23px;line-height:1.05;color:#58c8ff;font-weight:900}
.reward-row small{display:block;margin:0;color:#93a9bb;font:500 10px/1.4 Arial,Helvetica,sans-serif}.reward-points small{font:700 7px/1.7 'Courier New',monospace;letter-spacing:1px;color:#69badd}.reward-name strong{display:block;font:700 14px/1.5 Arial,Helvetica,sans-serif;color:#eef4f8}
#character-picker{width:min(286px,100%)}.choose-label{font-size:10px;letter-spacing:1px;margin-bottom:12px}.character-options{gap:12px}.character-card{padding:8px;min-height:112px;background:#22374bf0}.character-card svg{width:75px;height:90px}
#stage:has(#overlay:not(.hidden))>header,#stage:has(#overlay:not(.hidden))>#lives,#stage:has(#overlay:not(.hidden))>#hint,#stage:has(#overlay:not(.hidden))>footer,#stage:has(#overlay:not(.hidden))>#feedback{visibility:hidden}
@media(max-height:600px){#overlay{padding:18px}#overlay h1.home-logo{margin-bottom:18px}.home-logo img{width:140px}#description{margin-bottom:18px}.reward-row{min-height:45px}.character-card{min-height:85px}.character-card svg{width:55px;height:66px}}
@media(max-height:440px){#overlay:has(.home-logo){justify-content:flex-start}.reward-row{min-height:38px}#overlay h1.home-logo{margin-bottom:12px}.home-logo img{width:120px}.rewards-heading{margin-bottom:8px}#description{margin-bottom:12px}}

/* Center each reward pair while keeping the columns consistently aligned. */
.reward-row{justify-content:center;gap:18px}.reward-name{width:132px;flex:none}

/* Size the shared columns to their visible content, without trailing empty space. */
.reward-list{display:grid;grid-template-columns:max-content max-content;justify-content:center;column-gap:22px}
.reward-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;justify-content:normal;gap:22px}
.reward-points{width:auto;text-align:right}.reward-name{width:auto}

/* Game-over screen: one score, one prize, one action. */
#overlay.result-screen{padding:28px 24px;background:linear-gradient(#101a2af5,#102237f2 75%,#17222bc9)}
#overlay.result-screen h1.home-logo{margin:0 0 35px}
.result-screen .home-logo img{width:138px}
.result-screen #description{width:min(286px,100%);margin:0 0 26px}
.result-total{display:flex;flex-direction:column;align-items:center;gap:13px;margin-bottom:26px}
.result-total>span{font:700 10px/1.5 'Courier New',monospace;letter-spacing:1.5px;color:#9fb7c8}
.result-total>strong{font:900 clamp(58px,15vw,76px)/1 'Courier New',monospace;letter-spacing:-3px;color:#f3f9ff;text-shadow:4px 4px #081522}
.result-prize{padding:21px 16px;border:1px solid #307b9c;background:#123347;box-shadow:3px 3px #081522}
.result-prize>span{display:block;margin-bottom:9px;color:#58c8ff;font:700 10px/1.5 'Courier New',monospace;letter-spacing:1px}
.result-prize>strong{display:block;color:#f3f9ff;font:700 18px/1.45 Arial,Helvetica,sans-serif}
.result-next{padding:19px 12px;border-top:1px solid #62819844;border-bottom:1px solid #62819844}
.result-next>strong{display:block;color:#d6e7f0;font:600 15px/1.6 Arial,Helvetica,sans-serif}
.result-next>span{display:block;margin-top:5px;color:#91aabc;font:400 12px/1.6 Arial,Helvetica,sans-serif}
.result-screen #start{width:min(286px,100%);padding:18px 20px;font-size:13px}
@media(max-height:550px){#overlay.result-screen h1.home-logo{margin-bottom:18px}.result-screen .home-logo img{width:116px}.result-total{gap:8px;margin-bottom:16px}.result-total>strong{font-size:52px}.result-prize,.result-next{padding:12px}.result-screen #description{margin-bottom:18px}}

.prize-icon{display:block;width:72px;height:72px;margin:0 auto 14px;image-rendering:pixelated}.result-screen #claim{display:flex;align-items:center;justify-content:space-between;width:min(286px,100%);padding:18px 20px;border:4px solid #07121e;background:#12aeea;box-shadow:inset 4px 4px #71dbff,inset -4px -4px #087bad,5px 5px #07121e;color:#071b2e;font:900 13px 'Courier New',monospace}.result-screen #claim:active{transform:translate(2px,2px)}.result-screen #start.replay-link{display:block;width:auto;margin:19px 0 0;padding:8px 12px;border:0;background:transparent;box-shadow:none;transform:none;text-align:center;font:500 13px Arial,Helvetica,sans-serif;letter-spacing:0;text-decoration:underline;text-underline-offset:4px;color:#b7cbd9}#claim-message{max-width:286px;margin:17px 0 0;color:#d4e3ed;font:400 12px/1.6 Arial,Helvetica,sans-serif}.result-screen:has(#claim:not([hidden])) .result-total{margin-bottom:18px}.result-screen:has(#claim:not([hidden])) h1.home-logo{margin-bottom:22px}@media(max-height:650px){.prize-icon{width:48px;height:48px;margin-bottom:10px}.result-screen .result-prize{padding:14px}.result-screen:has(#claim:not([hidden])) .result-total>strong{font-size:52px}.result-screen #start.replay-link{margin-top:12px}}

#sound{position:absolute;left:19px;bottom:calc(15px + env(safe-area-inset-bottom));z-index:4;width:36px;height:36px;display:grid;place-items:center;background:#132334b3;border:1px solid #627e9444;color:#d2e3ed}#sound svg{width:22px;height:22px}#sound[aria-pressed="false"]{color:#8195a5}