:root{--night:#090b1d;--panel:#111633;--cream:#fff1c1;--cyan:#35d8d4;--red:#f0443c;--orange:#ff8b2b;--yellow:#ffd94a;--purple:#6d3ea2}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#070817;color:var(--cream);font-family:"DM Sans",sans-serif}
body{display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% -10%,#3b3271 0,#12122b 40%,#05050d 76%);background-attachment:fixed}
button{font:inherit}
.game-shell{width:min(1120px,100%);background:rgba(9,11,29,.82);border:1px solid rgba(130,148,220,.35);border-radius:22px;box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 70px rgba(77,65,170,.18);overflow:hidden;backdrop-filter:blur(18px)}
.topbar{min-height:82px;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(119,132,195,.25);background:linear-gradient(135deg,rgba(27,34,73,.95),rgba(9,12,33,.92))}
.brand{display:flex;align-items:center;gap:15px;color:var(--cream);text-decoration:none;font-family:"Bowlby One SC",sans-serif;font-style:italic;letter-spacing:-1px;font-size:clamp(20px,3vw,34px);text-shadow:3px 3px 0 #d52b36,6px 6px 0 #6b203c}
.brand-mark{display:grid;place-items:center;width:54px;height:54px;background:linear-gradient(145deg,var(--red),#a91f5d);color:var(--yellow);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);font:700 13px/1 "DM Sans",sans-serif;text-shadow:none;filter:drop-shadow(0 6px 12px rgba(240,68,60,.35))}
.sound-button{border:1px solid rgba(53,216,212,.6);border-radius:999px;background:rgba(53,216,212,.08);color:var(--cyan);padding:10px 15px;font-size:10px;font-weight:900;letter-spacing:1.4px;cursor:pointer;transition:.2s}.sound-button:hover{background:rgba(53,216,212,.18);box-shadow:0 0 22px rgba(53,216,212,.15)}
.score-strip{height:72px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(119,132,195,.25);background:rgba(7,10,27,.82)}
.score-strip>div{display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid rgba(119,132,195,.2)}
.score-strip>div:last-child{border:0}.score-strip small{font-size:9px;font-weight:900;color:var(--cyan);letter-spacing:2px}.score-strip strong{font-family:"Courier New",monospace;font-size:22px;color:#fff;font-weight:900;text-shadow:0 0 12px rgba(255,255,255,.25)}.lives strong{color:#ff665e;letter-spacing:4px;text-shadow:0 0 12px rgba(240,68,60,.45)}
.game-stage{height:min(590px,58vw);min-height:440px;position:relative;overflow:hidden;background:#191d43;border-bottom:1px solid rgba(119,132,195,.25)}
canvas{width:100%;height:100%;display:block}.grain{position:absolute;inset:0;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.18) 3px 4px)}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(16,18,48,.38),rgba(5,7,22,.82));backdrop-filter:blur(2px);transition:.35s}.overlay.hidden{opacity:0;pointer-events:none;transform:scale(1.025)}.eyebrow{margin:0 0 12px;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:4px;text-shadow:0 0 15px rgba(53,216,212,.45)}
h1{margin:0;font:clamp(48px,8vw,94px)/.78 "Bowlby One SC",sans-serif;font-style:italic;letter-spacing:-3px;color:var(--yellow);text-shadow:4px 4px 0 var(--red),8px 8px 0 #682147,11px 11px 0 #0a0b19;transform:skew(-4deg)}h1 em{color:var(--orange);font-style:normal}.intro{margin:28px 0 22px;line-height:1.6;font-size:13px;font-weight:bold;color:#fff;text-shadow:2px 2px #111}
.primary-button{padding:15px 22px;border:1px solid rgba(255,255,255,.7);border-radius:10px;color:#17152c;background:linear-gradient(135deg,#ffe474,#ffac3e);box-shadow:0 10px 28px rgba(240,68,60,.35),inset 0 1px rgba(255,255,255,.7);font-size:11px;font-weight:900;letter-spacing:2px;cursor:pointer;transition:.2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(240,68,60,.45)}.primary-button span{margin-left:22px;font-size:17px}.key-hint{margin:22px 0 0;font-size:9px;font-weight:900;letter-spacing:2px;color:var(--cyan)}
kbd{font-family:inherit;font-weight:900;border:2px solid #8589ab;border-bottom-width:4px;border-radius:0;padding:3px 7px;background:#171b39;color:#fff}
.controls{min-height:98px;display:flex;align-items:center;gap:42px;padding:17px 26px;background:linear-gradient(135deg,rgba(20,26,59,.96),rgba(8,10,28,.96))}.controls>div{display:flex;align-items:center;gap:14px}.controls p{margin:0;display:flex;flex-direction:column;font-size:11px;letter-spacing:1px}.controls b{color:var(--yellow)}.controls small{margin-top:4px;color:#979ab6;letter-spacing:0}.keys{display:flex;gap:4px}.space-key{padding-inline:18px}.tip{margin-left:auto!important;font-size:10px!important;display:block!important;max-width:300px;color:#a8abc4}.tip span{color:var(--red);font-weight:900;margin-right:6px}.toast{position:absolute;left:50%;top:26%;padding:11px 16px;border:1px solid rgba(255,217,74,.7);border-radius:8px;background:rgba(17,22,51,.88);backdrop-filter:blur(8px);color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:1px;transform:translate(-50%,-16px) scale(.95);opacity:0;transition:.2s;box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 20px rgba(255,217,74,.12)}.toast.show{transform:translate(-50%,0) scale(1);opacity:1}.mobile-controls{display:none}
@media(max-width:700px){body{padding:0}.game-shell{border-width:0;min-height:100vh}.topbar{min-height:62px;padding:6px 12px}.brand{font-size:20px}.brand-mark{width:40px;height:40px;font-size:10px}.score-strip{height:62px}.score-strip>div{flex-direction:column;gap:1px}.score-strip strong{font-size:15px}.score-strip small{font-size:8px}.game-stage{height:62vh;min-height:420px}h1{font-size:52px}.controls{display:none}.mobile-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;padding:10px;background:#090b1d}.mobile-controls button{min-height:54px;border:3px solid #454c7a;background:#141936;color:white;font-weight:900}.mobile-controls #jumpButton{background:var(--red);border-color:var(--yellow);color:var(--yellow)}}

/* Mid-2000s alpine sports presentation */
:root{--night:#071522;--panel:#142b3d;--cream:#f4fbff;--cyan:#55d8ff;--red:#ff4b28;--orange:#ff7a1a;--yellow:#ffd04a}
html,body{background:#07121c;color:var(--cream)}
body{background:radial-gradient(circle at 50% -10%,#5b89a5 0,#19384d 38%,#07121c 76%)}
.game-shell{background:#081824;border-color:rgba(195,226,240,.48);border-radius:12px;box-shadow:0 35px 100px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.32)}
.topbar{background:linear-gradient(#3b6078 0,#183347 48%,#081824 100%);border-color:rgba(195,226,240,.28)}
.brand{text-shadow:0 2px 0 #07121c,0 0 18px rgba(85,216,255,.3)}
.brand-mark{background:linear-gradient(145deg,#ff9b2e,#ee391f);color:#fff;filter:drop-shadow(0 5px 8px rgba(255,75,40,.4))}
.score-strip{background:linear-gradient(90deg,#071522,#15364b,#071522);border-color:rgba(195,226,240,.24)}
.game-stage{background:#dceef5;border-color:rgba(195,226,240,.25)}
.overlay{background:radial-gradient(circle,rgba(19,54,72,.18),rgba(4,16,25,.76))}
h1{color:#fff;text-shadow:0 3px 0 #7898aa,0 8px 18px rgba(0,0,0,.7)}
h1 em{color:var(--orange);text-shadow:0 3px 0 #9b2d13,0 8px 18px rgba(0,0,0,.7)}
.controls{background:linear-gradient(#1c3b50,#071622)}
.toast{background:rgba(12,38,54,.9);border-color:rgba(85,216,255,.7);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 22px rgba(85,216,255,.22)}