*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0d2018;color:#fff;font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid #bbff64;outline-offset:3px}#app{max-width:1500px;height:100dvh;margin:auto;padding:0 28px;display:flex;flex-direction:column}header{height:94px;flex:none;display:flex;align-items:center;gap:14px}.brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:900;line-height:1.02;letter-spacing:1px}.brand b{color:#a5ed6b}.brand-icon{font-size:43px;color:#b0f16b}.route{margin:auto;text-align:center;display:flex;flex-direction:column;gap:6px}.route span,.small,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#a6c2b2}.route strong{font-size:17px}.icon-button{height:42px;min-width:42px;background:#1d3428;border:1px solid #385342;border-radius:50%;color:#e5f7ed;font-size:19px;display:flex;align-items:center;justify-content:center;gap:3px}#sound{border-radius:22px;padding:0 10px}#soundState{font-size:9px;letter-spacing:1px}#game{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:20px;border:1px solid #416144;background:#426749;isolation:isolate}#canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none}.pill{display:flex;align-items:center;gap:14px;background:#132b23e8;border:1px solid #ffffff2c;border-radius:13px;padding:12px 16px;box-shadow:0 5px 20px #0002}.pill strong{font-size:23px}.small{font-size:10px;letter-spacing:1.2px}.muted{color:#729681}.lives strong{font-size:17px;letter-spacing:4px;color:#b0f476}.wind{position:absolute;top:90px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;letter-spacing:1px;font-weight:800;background:#fffdf0dc;color:#314a32;padding:9px 14px;border-radius:25px}#hint{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff;font-size:12px;font-weight:bold;letter-spacing:1.5px;background:#12251ecf;padding:12px 20px;border:1px solid #ffffff30;border-radius:30px;pointer-events:none}#hint span{margin:0 10px;color:#aff678}#toast{position:absolute;top:28%;width:100%;text-align:center;color:white;text-shadow:0 3px 10px #173321;font-size:clamp(23px,4vw,44px);font-weight:900;pointer-events:none;transition:opacity .2s}.overlay{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,#0e281fe8,#10251ca8 52%,#0f2c1730);display:flex;align-items:center;padding:6%;backdrop-filter:blur(2px)}.overlay.hidden{display:none}.card{max-width:480px}.eyebrow{color:#b4f283;font-size:12px}h1{font-size:clamp(48px,6vw,82px);line-height:.94;letter-spacing:-4px;margin:22px 0}h1 em{color:#b9f784;font-style:normal}.card p{font-size:16px;line-height:1.6;color:#d4e5da}.primary{border:0;border-radius:12px;background:#b9f784;color:#183121;font-size:17px;font-weight:900;padding:18px 30px;box-shadow:0 5px 0 #6da343;min-width:230px;transition:transform .2s}.primary:hover{transform:translateY(-2px)}.primary:disabled{opacity:.6;cursor:wait}#howto{display:flex;flex-direction:column;gap:12px;margin:24px 0 30px;font-size:14px}#howto b{font-size:11px;color:#b9f784;margin-right:10px}.card .footnote{font-size:12px;letter-spacing:.3px;margin-top:22px;color:#a7c1af}footer{height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;color:#b1c7b8;font-size:12px}.desktop-help{font-size:10px;letter-spacing:1.3px;color:#779e87}#dialogue{position:absolute;bottom:-360px;left:50%;transform:translateX(-50%);width:min(690px,95%);aspect-ratio:1536/864;pointer-events:none;transition:bottom .55s cubic-bezier(.2,1,.3,1);z-index:3}#dialogue.show{bottom:0;transition-duration:.42s}#driverCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}#quip{position:absolute;left:5%;top:39%;width:55%;height:44%;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:clamp(14px,2.2vw,24px);line-height:1.2;color:#253426;padding:8px}#dialogue.angry{filter:drop-shadow(0 0 14px #ed4d373f)}#dialogue.angry.show{animation:shake .15s 6}@keyframes shake{50%{transform:translateX(calc(-50% + 5px))}}#transition{position:absolute;inset:0;background:#10291d;opacity:0;pointer-events:none;transition:opacity .6s;z-index:4}#transition.active{opacity:1}@media(max-width:600px){#app{padding:0 10px}header{height:72px;gap:7px}.brand{font-size:11px;letter-spacing:.7px}.brand-icon{font-size:30px}.route strong{font-size:13px}.route span{font-size:8px;letter-spacing:1px}.icon-button{height:34px;min-width:34px}#game{border-radius:14px}.hud{left:12px;right:12px;top:14px}.pill{padding:10px;gap:9px;border-radius:10px;flex-direction:column;align-items:flex-start}.pill strong{font-size:20px}.lives strong{font-size:13px;letter-spacing:2px}.small{font-size:8px}.wind{top:96px;font-size:9px;max-width:92%;letter-spacing:.6px}footer{height:43px;font-size:10px;line-height:1.3}.desktop-help{display:none}.overlay{padding:8%;align-items:center;background:#0b251ac9}h1{font-size:58px;letter-spacing:-3px}.card p{font-size:14px}#howto{margin:18px 0 23px;gap:10px}#hint{font-size:9px;letter-spacing:.8px;padding:11px 13px;bottom:18px}#hint span{margin:0 5px}#quip{font-size:14px}#dialogue.show{bottom:0}.primary{min-width:210px}}

/* Emerald lighting and inset highlights give the game frame and counters depth. */
html{background:#061b13}body{background:radial-gradient(ellipse at 14% 0%,#13754b88,transparent 48%),radial-gradient(ellipse at 100% 90%,#08ef8325,transparent 46%),repeating-linear-gradient(125deg,#ffffff03 0 1px,transparent 1px 13px),linear-gradient(145deg,#123f2c,#061c14 58%,#123d2b)}
header{border-bottom:1px solid #87ffc528;text-shadow:0 2px 8px #0007}.brand-icon{filter:drop-shadow(0 0 9px #08ef835c)}.brand b{color:#adffd0}.route strong{color:#f3fff7}.icon-button{background:linear-gradient(145deg,#3c805b,#153f2b 65%,#0d2c1d);border-color:#94ffc34a;box-shadow:inset 0 1px 1px #c8ffdf48,0 4px 10px #0005}.icon-button:hover{border-color:#8dffc1;box-shadow:0 0 15px #08ef8338}
#game{box-shadow:0 0 0 1px #80ffb528,0 12px 38px #0006,0 0 40px #08ef830c;border-color:#8deeb56b}
.pill{background:radial-gradient(ellipse at 15% 0%,#77f7a336,transparent 70%),linear-gradient(150deg,#235d40f5,#0d3225fa 70%,#16452ef5);border:1px solid #a1ffbd6b;border-top-color:#c4ffd99c;box-shadow:inset 0 1px 0 #fff3,inset 0 -3px 8px #00180b7d,0 7px 18px #0005,0 0 18px #08ef8317}.pill .small{color:#d5ffe3}.pill strong{color:#f3fff3;text-shadow:0 0 12px #b6ffc74d}.pill .muted{color:#a0c5ac}
#lives{display:flex;align-items:center;gap:9px;min-height:23px;letter-spacing:0}.life-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#edffd6,#8aff80 45%,#08c95c);box-shadow:0 0 5px #bbffa5,0 0 12px #55ff88a6,0 0 23px #08ef834d;transition:background .25s,box-shadow .25s,opacity .25s}.life-dot.spent{background:#385748;box-shadow:inset 0 1px 3px #0009;border:1px solid #698375;opacity:.65}
.overlay{justify-content:center;text-align:center;padding:24px;overflow-y:auto;align-items:flex-start;background:radial-gradient(ellipse at 50% 12%,#39b36a40,transparent 64%),linear-gradient(135deg,#082d23f2,#0d241ded 55%,#16462bed);backdrop-filter:blur(6px)}
.card{width:min(100%,520px);max-width:520px;flex-shrink:0;margin:auto;padding:28px 30px 23px;border-radius:24px;border:1px solid #b7ffd753;background:radial-gradient(ellipse at 50% 0%,#92ffb524,transparent 63%),linear-gradient(155deg,#245c40cf,#0b2d20eb 67%,#154d32d9);box-shadow:inset 0 1px 0 #d5ffe73b,inset 0 -1px 0 #021d15,0 18px 55px #0006,0 0 45px #08ef8315;display:flex;flex-direction:column;align-items:center;text-align:center}
.card .eyebrow{display:block;color:#bdffcf;letter-spacing:2.6px;font-size:12px;font-weight:900;text-shadow:0 0 14px #08ef8366}.card h1{font-size:clamp(44px,5.3vw,66px);letter-spacing:-2.5px;line-height:1.02;margin:17px 0 12px;color:#fff;text-shadow:0 3px 0 #041e12,0 6px 20px #0005}.card h1 em{color:#b7ff93;text-shadow:0 3px 0 #194c23,0 0 26px #6eff782b}.card p{color:#effff3;font-size:16px;line-height:1.5;margin:7px 0 20px}.card .primary{margin:3px 0 0;width:min(100%,310px);background:linear-gradient(160deg,#ddffb0,#a5f778 55%,#6edf79);border:1px solid #ebffd4;box-shadow:inset 0 2px 0 #fff9,0 5px 0 #377446,0 10px 24px #0005,0 0 25px #91ff6030;color:#133222;letter-spacing:1px;min-height:54px}.card .primary:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff9,0 2px 0 #377446}
#howto{width:100%;align-items:center;gap:9px;margin:26px 0 0;padding-top:19px;border-top:1px solid #acffc036;font-size:14px;line-height:1.4;color:#e6ffed}#howto h2{font-size:14px;letter-spacing:2px;color:#bdffa7;margin:0 0 4px;text-shadow:0 0 12px #08ef8340}#howto b{display:inline-block;color:#c8ffab;font-size:12px;margin-right:5px}#howto .rules{font-size:13px;margin:3px 0 0;color:#d5eadd}#howto .keys{font-size:12px;margin:0;color:#bad2c3}.card .footnote{font-size:12px;color:#b5d6c2;margin:17px 0 0;text-align:center;line-height:1.5}.overlay[data-mode="pause"] .eyebrow{font-size:17px;letter-spacing:4px;margin:0 0 15px}.overlay[data-mode="pause"] h1{display:none}.overlay[data-mode="gameover"] h1{letter-spacing:1px}.overlay[data-mode="pause"] .card{max-width:480px}
@media(max-width:600px){.overlay{padding:16px 12px}.card{padding:23px 17px 20px;border-radius:19px}.card h1{font-size:49px;margin:14px 0 10px}.card p{font-size:14px;margin-bottom:17px}.card .primary{font-size:16px;padding:15px 18px;min-width:0}.life-dot{width:10px;height:10px}#lives{gap:7px;min-height:20px}#howto{font-size:13px;gap:8px;margin-top:22px;padding-top:16px}#howto .rules{font-size:12px}#howto .keys{font-size:12px}.card .eyebrow{font-size:11px}.card .footnote{font-size:12px}.pill .small{font-size:10px}}
@media(max-height:650px){.overlay{padding:12px}.card{padding:17px 22px}.card h1{font-size:42px;margin:10px 0}.card p{margin:5px 0 12px}.card .primary{min-height:44px;padding:12px 20px}#howto{margin-top:18px;padding-top:12px;gap:6px}.card .footnote{margin-top:12px}}

/* The supplied 827 × 1536 artwork is the shared game skin. Keep the logo,
   PAUSE control and emerald frame outside the live canvas in every game state.
   The home controls use matching hit areas over the original menu artwork. */
html{background:#013c1c}
body{display:grid;place-items:center;height:100dvh;background:linear-gradient(90deg,#014d1c,#036324 50%,#013c1c);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{--screen-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));position:relative;display:block;width:min(100%,calc(var(--screen-height)*.5384114583));height:auto;max-width:none;aspect-ratio:827/1536;margin:0;padding:0;background:#00321f url('assets/home-screen.png?v=home-20261013') center/100% 100% no-repeat}
#app header{position:absolute;inset:0 0 auto;height:12.239583%;display:block;border:0;padding:0;margin:0}
#app .brand{left:6.771463%;top:26.063830%;width:34.099154%;height:61.702128%;position:absolute;display:block;border:0}
#app .route,#app #sound,#app footer{display:none}
#app #pause{left:62.636034%;top:40.957447%;width:30.229746%;height:42.021277%;border-radius:999px}
#app #game{left:4.111245%;top:13.085938%;width:91.777509%;height:79.492188%;position:absolute;min-height:0;flex:none;border:0;border-radius:3.1% / 1.9%;box-shadow:none;background:#163e2a}
/* The original cropped artwork fills the rounded frame without stretching. */
#app.home #game,#app.entering-game #game{background:url('assets/home-play-overlay.webp?v=soft-shadow') center / cover no-repeat, #00321f url('assets/home-artwork-20454.webp?v=slight-zoom') center / cover no-repeat}
#app.home #canvas,#app.home .hud,#app.home #wind,#app.home #hint,#app.home #toast,#app.home #dialogue,#app.home #transition{visibility:hidden}
#home{position:absolute;inset:0;z-index:6}
#home[hidden]{display:none}
#app .skin-button{position:absolute;margin:0;padding:0;min-width:0;min-height:0;border:0;background:transparent;box-shadow:none;color:transparent;transition:background-color .15s;touch-action:manipulation}
#app .skin-button:not(:disabled):not([aria-disabled="true"]):hover{background:#baffae12}
#app .skin-button:not(:disabled):not([aria-disabled="true"]):active{background:#001f2450}
#app .skin-button:disabled,#app .skin-button[aria-disabled="true"]{cursor:default;opacity:1}
#app .skin-button:focus-visible,#app .brand:focus-visible{outline:3px solid #fff;outline-offset:2px}
.home-play{left:40.0627%;top:14.1870%;width:55.7737%;height:12.8291%;border-radius:14% / 35%}
.home-levels{left:44.3290%;top:28.5253%;width:51.5074%;height:7.1798%;border-radius:12% / 45%}
.home-cosmetics{left:44.3290%;top:37.2574%;width:51.5074%;height:7.5032%;border-radius:12% / 45%}
.home-howto{left:9.4705%;top:88.6805%;width:38.6046%;height:5.8215%;border-radius:12% / 40%}
.home-settings{left:50.7804%;top:88.6805%;width:39.2289%;height:5.8215%;border-radius:12% / 40%}
#homeStatus{position:absolute;left:15%;bottom:1%;width:70%;margin:0;padding:8px 10px;border-radius:12px;text-align:center;background:#002e24ed;color:#fff;font-size:14px}
#homeStatus:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The game remains portrait on larger screens; its controls scale to the frame,
   not the browser width. */
#app .hud{left:12px;right:12px;top:14px}
#app .pill{padding:10px;gap:8px;border-radius:10px;flex-direction:column;align-items:flex-start}
#app .pill strong{font-size:20px}
#app .pill .small{font-size:10px;letter-spacing:1px}
#app .life-dot{width:10px;height:10px}
#app #lives{gap:7px;min-height:20px}
#app .wind{top:94px;max-width:94%;white-space:normal;text-align:center;font-size:10px;letter-spacing:.4px;padding:7px 10px}
#app #hint{max-width:96%;white-space:normal;text-align:center;font-size:10px;letter-spacing:.4px;padding:10px 12px;bottom:14px}
#app #hint span{margin:0 4px}
#app #quip{font-size:14px}
#app #toast{font-size:clamp(20px,4vw,30px)}
#app .overlay{padding:16px 12px}
#app .card{width:100%;padding:23px 17px 20px;border-radius:19px}
#app .card h1{font-size:clamp(32px,6vw,49px)}
#app .card .primary{font-size:16px;min-width:0;min-height:48px;padding:14px 18px}
#app .card p{font-size:14px}


/* Extend the artwork edge colours into the unused space above and below it. */
#app::before,#app::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
#app::before{bottom:calc(100% - 1px);height:max(0px,calc((var(--screen-height) - 100%)/2 + env(safe-area-inset-top) + 1px));background:linear-gradient(90deg,#014d1c 0%,#01511e 3.125%,#025720 6.25%,#025720 9.375%,#02581f 12.5%,#00581c 15.625%,#03581d 18.75%,#01591d 21.875%,#015a1d 25%,#005a1d 28.125%,#025c1f 31.25%,#015b20 34.375%,#035e21 37.5%,#015f21 40.625%,#026022 43.75%,#016122 46.875%,#036324 50%,#026225 53.125%,#026225 56.25%,#026127 59.375%,#015e25 62.5%,#025d24 65.625%,#025b23 68.75%,#025922 71.875%,#015821 75%,#025720 78.125%,#02521f 81.25%,#034f21 84.375%,#024b20 87.5%,#00471f 90.625%,#01431f 93.75%,#023f1e 96.875%,#013c1c 100%)}
#app::after{top:calc(100% - 1px);height:max(0px,calc((var(--screen-height) - 100%)/2 + env(safe-area-inset-bottom) + 1px));background:linear-gradient(90deg,#00421e 0%,#024420 3.125%,#01481e 6.25%,#014a1d 9.375%,#014f1f 12.5%,#02521f 15.625%,#035821 18.75%,#025b23 21.875%,#035c22 25%,#045f26 28.125%,#036123 31.25%,#046427 34.375%,#056526 37.5%,#046727 40.625%,#056827 43.75%,#056827 46.875%,#056827 50%,#066928 53.125%,#076727 56.25%,#076728 59.375%,#026225 62.5%,#036123 65.625%,#056025 68.75%,#025d22 71.875%,#045b26 75%,#015823 78.125%,#015420 81.25%,#024f21 84.375%,#014c21 87.5%,#02491f 90.625%,#02461f 93.75%,#01411f 96.875%,#043e20 100%)}

/* Reveal the playing field over the home artwork; the outer frame stays put. */
#app.entering-game #canvas,#app.entering-game .hud,#app.entering-game .wind{animation:gameReveal .1s ease both}
@keyframes gameReveal{from{opacity:0}to{opacity:1}}
/* Pause and game-over menus share the same 0.1-second fade. */
#app .overlay.fade{opacity:0;pointer-events:none;transition:opacity .1s ease}
#app .overlay.fade.visible{opacity:1;pointer-events:auto}


/* Exact reference artwork, shown through a panel-only window.
   Reference: 1344x1536; panel window: x=72,y=80,w=1198,h=1352.
   The rounded clip excludes the reference's surrounding neighbourhood. */
#app #game{container-type:inline-size}
#pausePanel{display:none}
#app .overlay[data-mode="pause"]{align-items:center;justify-content:center;padding:0;overflow:hidden;background:#001b0b38;backdrop-filter:blur(6px) brightness(.70);-webkit-backdrop-filter:blur(6px) brightness(.70)}
#app .overlay[data-mode="pause"]>.card{display:none}
#app .overlay[data-mode="pause"] #pausePanel{display:block}
#app .pause-panel{position:relative;flex:none;width:78.25%;aspect-ratio:1198/1352;margin:auto;padding:0;border:0;border-radius:9% / 8%;overflow:hidden;background-image:url('assets/pause-panel-reference.png?v=hq-20261031');background-repeat:no-repeat;background-size:112.1869782972% 113.6094674556%;background-position:49.3150684932% 43.4782608696%;transform:translateY(0);isolation:isolate}
/* Keep semantic controls accessible; all visible text/icons come from the artwork. */
#app .pause-panel h2,#app .pause-action span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app .pause-action svg{display:none}
#app .pause-action{position:absolute;display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:transparent;text-shadow:none;border-radius:14% / 40%;touch-action:manipulation;cursor:pointer}
#app .pause-action::after{display:none}
#app .pause-resume{left:5.008347%;top:26.405325%;width:89.983306%;height:21.671598%;}
#app .pause-restart{left:7.011686%;top:50.887574%;width:85.893155%;height:15.828402%;}
#app .pause-secondary{display:contents}
#app .pause-secondary .pause-action:first-child{left:6.844741%;top:69.748521%;width:42.404007%;height:11.464497%;}
#app .pause-secondary .pause-action:last-child{left:52.086811%;top:69.748521%;width:41.151920%;height:11.464497%;}
#app .pause-home{left:24.540902%;top:84.541420%;width:51.001669%;height:10.281065%;min-height:44px}
#app .pause-action:disabled{opacity:1;cursor:default}
#app .pause-action:not(:disabled):active{background:#001c151f}
#app .pause-action:focus-visible{outline:3px solid white;outline-offset:-3px}

#transition{display:flex;align-items:center;justify-content:center}
.next-stop-route{position:absolute;left:50.9%;top:45.8%;transform:translate(-50%,-50%);display:block;width:56.8%;height:auto;pointer-events:none;}

/* All three panels share the vertical centre of the gameplay frame. */
#app .overlay:is([data-mode="settings"],[data-mode="reset"]){align-items:center;justify-content:center;padding:0;overflow:hidden;background:#001b0b38;backdrop-filter:blur(6px) brightness(.70);-webkit-backdrop-filter:blur(6px) brightness(.70)}
#app .overlay:is([data-mode="settings"],[data-mode="reset"])>.card{display:none}
#settingsPanel,#resetPanel{display:none}
#app .settings-panel,#app .reset-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78.25%;overflow:hidden;isolation:isolate}
#app .settings-panel{aspect-ratio:662/1037;border-radius:8% / 5.1%;background:url('assets/settings-popup.webp') 53.731343% 34.259259% / 110.120846% 110.414658% no-repeat}
#app .reset-panel{aspect-ratio:757/839;border-radius:9% / 8.1%;background:url('assets/reset-popup.webp') 50.877193% 50% / 107.529722% 108.820024% no-repeat}
#app .overlay[data-mode="settings"] #settingsPanel,#app .overlay[data-mode="reset"] #resetPanel{display:block}
#app .panel-action{position:absolute;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:transparent;min-width:0;min-height:0;border-radius:16% / 40%;touch-action:manipulation}
#app .panel-action:disabled{cursor:default}
#app .panel-action:focus-visible{outline:3px solid white;outline-offset:-3px}
#app .panel-action:not(:disabled):active{background:#001c1520}
.settings-music{left:4%;top:18%;width:92%;height:12%}
.settings-effects{left:4%;top:31%;width:92%;height:12%}
.settings-credits{left:4%;top:58%;width:92%;height:12%}
.settings-reset{left:4%;top:73%;width:92%;height:13%}
.settings-back{left:23%;top:88%;width:54%;height:9%}
.reset-cancel{left:5%;top:56%;width:90%;height:19%}
.reset-confirm{left:5%;top:76%;width:90%;height:19%}
.effects-switch{position:absolute;left:73.1%;top:22%;width:21.6%;height:52%;border-radius:999px;background:linear-gradient(#54ff00,#04db00);border:2px solid #bcff7b;box-shadow:0 0 5px #14ff4b,inset 0 0 4px #76ff47}
.effects-switch::after{content:"";position:absolute;right:2%;top:1%;height:98%;aspect-ratio:1;border-radius:50%;background:linear-gradient(130deg,#fff,#ddd);box-shadow:1px 2px 3px #002a0d}
[aria-checked="false"] .effects-switch{background:linear-gradient(#224b36,#173b2a);border-color:#66aa80;box-shadow:inset 0 0 4px #091f13}
[aria-checked="false"] .effects-switch::after{right:auto;left:2%}

.settings-hand-choice{position:absolute;left:51.5%;top:46.5%;width:40.8%;height:6.8%;display:flex;border:2px solid #a7ff81;border-radius:999px;padding:2px;background:linear-gradient(#005619,#002c12);box-shadow:0 2px 4px #000,0 0 4px #37ff49}
#app .hand-choice{flex:1;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#f4fff3;font-size:4.25cqw;font-family:Arial,Helvetica,sans-serif;font-weight:900;line-height:1;text-shadow:0 2px 3px #00210b;box-shadow:none;touch-action:manipulation}
#app .hand-choice[aria-pressed="true"]{background:linear-gradient(#48ff00,#00d600);box-shadow:inset 0 0 0 1px #b4ff84,0 0 5px #10ff25}
#app .hand-choice:focus-visible{outline:2px solid white;outline-offset:0}

/* Home Settings uses the supplied complete page artwork at its original ratio. */
#homeSettingsPage{position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);height:100%;width:auto;max-width:100%;aspect-ratio:882/1644;z-index:20;background:#003b1c;container-type:inline-size}
#homeSettingsPage[hidden]{display:block;opacity:0;pointer-events:none}
#homeSettingsArtwork{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#homeSettingsControls{position:absolute;inset:0}
#homeSettingsPage[data-mode="reset"]::before{z-index:1}
#homeSettingsControls{z-index:2}
#homeSettingsPage[data-mode="reset"]::before{content:"";position:absolute;inset:12.6% 3% 7.3%;background:#0009;border-radius:4% / 2%}
.home-confirm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:71.4%;aspect-ratio:589/613;border-radius:8%;background:url('assets/home-reset.webp') 50% 53.4128% / 140.0679% 250.5709% no-repeat}
#homeSettingsPage .home-hand{left:52%;top:51.2%;width:33.5%;height:4.5%}
#app #homeSettingsPage .hand-choice{font-size:3.5cqw}
#homeSettingsPage .effects-switch{left:72%;top:25%;width:22%;height:52%}
.home-settings-error{position:absolute;left:15%;top:73%;width:70%;color:white;background:#620000;text-align:center}

/* Completion artwork fills the existing gameplay window; its rounded frame clips the image. */
#completionPanel{display:none;position:absolute;inset:0;overflow:hidden}
#app .overlay[data-mode="complete"]{padding:0;overflow:hidden;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#app .overlay[data-mode="complete"]>.card{display:none}
#app .overlay[data-mode="complete"] #completionPanel{display:block}
#completionArtwork{position:absolute;left:-2.7%;top:-2.7%;width:105.4%;height:105.4%;max-width:none;object-fit:cover}
#app #completionReplay{left:6.5%;top:68.7%;width:50%;height:8%}
#app #completionHome{left:6.5%;top:77.6%;width:49%;height:8%}
#app #completionCredits{left:8%;top:86.5%;width:46%;height:8%}

/* Use the existing game frame, clipping the trim embedded in the supplied image. */
#gameOverPanel{display:none;position:absolute;inset:0;overflow:hidden}
#app .overlay[data-mode="gameover"]{padding:0;overflow:hidden;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#app .overlay[data-mode="gameover"]>.card{display:none}
#app .overlay[data-mode="gameover"] #gameOverPanel{display:block}
#gameOverArtwork{position:absolute;left:-2.3%;top:-2.3%;width:104.6%;height:104.6%;max-width:none;object-fit:cover}
#app #gameOverRetry{left:19%;top:19%;width:62%;height:9%}
#app #gameOverHome{left:19%;top:29%;width:62%;height:9%}

/* Shared supplied green surround; original gameplay frame and interior stay put. */
html{background:#20492e}
body {
  background: #066927 url('assets/surround-landscape.jpg') center / cover no-repeat;
}
#app{background:transparent;isolation:isolate}
#app::before,#app::after{content:none}
.outer-frame{position:absolute;inset:0;pointer-events:none;z-index:-1;background:url('assets/home-screen.png?v=home-20261013') center / 100% 100% no-repeat;clip-path:inset(12.565104% 3.264813% 6.901042% round 3.75% / 2%)}
/* Sprite windows include the reference's own shadows, with no added filters. */
.header-art{position:absolute;overflow:hidden;pointer-events:none}
.header-art img{position:absolute;max-width:none;height:auto}
.header-logo{left:5.925%;top:2.734375%;width:35.913%;height:8.594%}
.header-logo img{width:104.38%;left:-1.68%;top:-34.21%}
.header-pause{left:61.427%;top:4.166667%;width:32.648%;height:7.421875%}
.header-pause img{width:113.5%;left:-7.711%;top:-112.85%;transform:scaleY(1.196);transform-origin:top center}
#homeSettingsPage{background:transparent}
#homeSettingsArtwork{mask:url('assets/settings-frame-mask.svg?v=2') center / 100% 100% no-repeat}
#app:has(#homeSettingsPage:not([hidden]))>.outer-frame,#app:has(#homeSettingsPage:not([hidden]))>.header-art,#app:has(#homeSettingsPage:not([hidden]))>header,#app:has(#homeSettingsPage:not([hidden]))>#game{visibility:hidden}

/* Credits share the game window and the between-level green. */
#app .credits-page {
  position: absolute;
  left: 4.111245%;
  top: 13.085938%;
  width: 91.777509%;
  height: 79.492188%;
  z-index: 21;
  border-radius: 3.1% / 1.9%;
  overflow: hidden;
  background: #10291d;
  color: white;
  font: 400 1rem/1.5 Arial, sans-serif;
  animation: gameReveal .1s ease both;
}
.credits-page h2 {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  background: #10291d;
  font-size: 1.35rem;
  text-align: center;
}
.credits-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #72bf8c #10291d;
  scroll-padding: 60px 0 16px;
  padding: 60px 6% 16px;
  overflow-wrap: anywhere;
}
.credits-scroll h3 {
  font-size: 1.12rem;
  margin: 1.5em 0 .55em;
}
.credits-scroll h3:first-child { margin-top: 0; }
.credits-scroll h4 { margin: 1em 0 .4em; }
.credits-scroll p { margin: 0 0 .65em; }
.credits-scroll dt { font-weight: 700; }
.credits-scroll dd { margin: 0 0 .65em; }
.credits-scroll a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 0 6px;
  color: white;
  text-decoration: underline;
  text-underline-offset: .18em;
  touch-action: manipulation;
}
#creditsBack {
  position: absolute;
  z-index: 22;
  left: 62.36%;
  top: 5.05%;
  width: 30.5%;
  height: 5.05%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  touch-action: manipulation;
}
#app:has(#creditsBack:not([hidden])) > .header-pause { visibility: hidden; }
/* Align the new artwork to the old Back outline on Home Settings. */
.settings-back-art {
  position: absolute;
  left: 62.358277%;
  top: 5.048662%;
  width: 30.498866%;
  height: 5.048662%;
  pointer-events: none;
}
#app:has(#homeSettingsPage:not([hidden])) > #creditsBack .back-button-art {
  visibility: hidden;
}

/* Fit the pill itself to the original bounds, leaving room for its shadow. */
.back-button-art {
  position: absolute;
  left: -8.04%;
  top: -25.51%;
  width: 116.46%;
  height: 148.97%;
  max-width: none;
  pointer-events: none;
}
/* Match the soft shadow of PAUSE without the generated asset's dark halo. */
.back-button-art {
  clip-path: inset(17.13% 7.23% 15.75% 6.9% round 13% / 50%);
}
.settings-back-art, #creditsBack {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45));
}


/* Compact HUD spacing follows the game frame in short or narrow windows. */
@container (max-width: 280px) {
  #app .hud { top: 5cqw; left: 4.28cqw; right: 4.28cqw; gap: 3cqw; }
  #app .pill { gap: 2.85cqw; padding: 3.57cqw; }
  #app .pill strong { font-size: 7.14cqw; }
  #app .pill .small { font-size: 3.57cqw; letter-spacing: .35cqw; }
  #app #lives { gap: 2.5cqw; min-height: 7.14cqw; }
  #app .life-dot { width: 3.57cqw; height: 3.57cqw; }
  #app .wind { top: 33.57cqw; padding: 2.5cqw 3.57cqw; font-size: 3.57cqw; }
  #app .pause-home { min-height: 0; }
}

#rotateNotice[open] {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #10291d;
  color: white;
  text-align: center;
}
.rotate-notice-content svg { color: #08ef83; }
#rotateTitle { margin: 12px 0 0; font-size: clamp(1.1rem, 4vw, 1.75rem); }