:root{color-scheme:dark}body{background:radial-gradient(ellipse at 50% 0,#253963 0,#101a30 60%,#0c1426 100%);min-height:100vh}main{max-width:1320px;padding:24px 36px 30px}header{padding-bottom:20px;border-bottom:1px solid #ffffff12;margin-bottom:28px}.brand{font-size:18px;letter-spacing:.5px}.brand span:last-child{font-size:12px;opacity:.45;letter-spacing:2px;margin-left:8px}.sun{display:inline-block;text-shadow:0 0 20px #ffc74188;margin-right:8px}.tag{font-size:9px;letter-spacing:1.6px;border-color:#ffffff16;background:#ffffff03;padding:8px 12px}.intro{margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#eab958}h1{font-size:clamp(40px,6vw,66px);font-weight:900;letter-spacing:-3px;margin:8px 0 0;text-shadow:0 3px #9b4829,0 6px 0 #0003}.intro p{font-size:13px;line-height:1.8;color:#9baecb}.shell{padding:12px;background:linear-gradient(145deg,#2e4268,#1d2d4b);border:1px solid #627da455;border-radius:16px;box-shadow:0 30px 70px #0006,inset 0 1px #ffffff15}.bar{padding:3px 6px 14px;font:600 11px ui-monospace,monospace;letter-spacing:1px}.bar>span{color:#cad6eb}.stats{gap:10px;letter-spacing:.4px}.stats span{padding:9px 12px;border-radius:7px;background:#101c3380;border:1px solid #ffffff09}.stats #coins{color:#ffda6d}.stats #lives{color:#ff8577}.stats #distance{color:#9fd5be;min-width:56px;text-align:center}button{border:1px solid #ffffff20;background:#ffffff09;color:#d5dfed;border-radius:7px;transition:background .15s,transform .15s;box-shadow:0 2px 0 #0003}button:hover{background:#ffffff19;color:white}button:active{transform:translateY(2px);box-shadow:none}.bar button{width:34px;height:34px;padding:0}.stage{border-radius:7px;border:1px solid #0d193b;box-shadow:inset 0 0 0 1px #ffffff15}canvas{aspect-ratio:2/1}.overlay{background:#0a193640;backdrop-filter:blur(2px)}.panel{background:linear-gradient(145deg,#172b4ff5,#10203df5);border:1px solid #d4a64c88;border-radius:12px;padding:28px 38px;box-shadow:0 16px 50px #0006,inset 0 1px #fff1}.panel:before{content:'★';display:block;font-size:32px;color:#ffda6d;margin-bottom:10px;text-shadow:0 0 25px #ffce5577}.panel h2{font-size:32px;letter-spacing:1px;color:#fff1c8}.panel p{font-size:13px;color:#a7bad7}.primary{background:linear-gradient(#f14c40,#ce302b);border:1px solid #ff978055;border-bottom:3px solid #8c2429;padding:12px 28px;letter-spacing:.4px}.primary:hover{background:#f15a4a}.footer{padding:20px 5px;font-size:11px;color:#8195b5;align-items:center}.key{background:#20304c;border-color:#4a5d7b;color:#c6d2e8;box-shadow:0 2px #080f22;min-width:23px;text-align:center}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0}.notes>div{padding:16px 18px;border:1px solid #ffffff0b;border-radius:9px;background:#ffffff02;font-size:11px;line-height:1.6}.notes b{font-size:11px;color:#bbcae1;margin-bottom:5px}.progress{height:3px;background:#0a172e;margin:12px 4px 0;border-radius:2px;overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,#e9a845,#ffdf83);transition:width .2s}.touch button{background:#172b4b;min-width:65px}.sound-on{color:#ffda6d!important}@media(max-width:650px){main{padding:15px 12px}.brand{font-size:15px}header{margin-bottom:20px;padding-bottom:16px}.intro{margin-bottom:18px}.intro p{font-size:12px;margin-top:12px}h1{font-size:44px}.shell{padding:7px;border-radius:11px}.bar{font-size:9px;letter-spacing:0;flex-wrap:wrap;padding:4px 2px 10px}.stats{gap:4px}.stats span{padding:7px 6px}.bar button{width:29px;height:29px}.notes{gap:6px}.notes>div{padding:10px;font-size:10px}.panel{padding:14px 18px}.panel:before{display:none}.panel h2{font-size:23px}.panel p{font-size:11px}.footer{gap:13px;align-items:start}canvas{aspect-ratio:2/1}.primary{padding:9px 18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@keyframes coinPop{0%,100%{transform:scale(1)}40%{transform:scale(1.15);background:#80651a;color:#fff8bd}}.coin-pop{animation:coinPop .25s ease-out}@media(prefers-reduced-motion:reduce){.coin-pop{animation:none}}

.back-home{font-size:12px;color:#afc4e4;text-decoration:none;border:1px solid #ffffff20;padding:8px 12px;border-radius:7px}.back-home:hover{color:#ffda6d}@media(max-width:650px){header{flex-wrap:wrap;gap:12px}.back-home{font-size:11px}}

.pipe-help{text-align:center;font-size:11px;letter-spacing:.3px;color:#aac4df;padding:10px 4px 0;min-height:25px}.bar>span span{color:#ffdc77}.touch{gap:8px}.touch button{font-size:12px}