*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}html{background:#070e1d}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#192e4c,#070e1d 75%);font-family:Helvetica,Arial,sans-serif;color:#effaff;-webkit-font-smoothing:antialiased}#game{width:min(390px,100vw,calc((100dvh - 32px)*390/844));aspect-ratio:390/844;height:auto;position:relative;overflow:hidden;background:#142846;touch-action:none;user-select:none;isolation:isolate}canvas{width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;pointer-events:none}.hidden{display:none!important}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;pointer-events:auto}button:focus-visible{outline:3px solid #edfbff;outline-offset:6px}h1{position:absolute;top:10%;left:12%;width:76%;margin:0}h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 0 #08132a70)}
#menu{background:linear-gradient(#07142c35,transparent 30%)}
#play{position:absolute;top:72%;left:50%;transform:translateX(-50%);width:min(96px,25%);aspect-ratio:1;display:grid;place-items:center;border:2px solid #ff809b;border-radius:50%;padding:0;background:linear-gradient(155deg,#ff537c 0%,#ff235d 48%,#ec174a 100%);box-shadow:0 6px 0 #9b153f,0 8px 0 #071629,0 14px 24px #020b2260,inset 0 2px 0 #ffb0c180,inset 0 -3px 0 #c9164260;transition:filter .15s,transform .15s,box-shadow .15s}#play svg{width:39%;height:44%;margin-left:7%;display:block;filter:drop-shadow(0 2px 0 #b00f3940)}#play:hover{filter:brightness(1.08)}#play:active{transform:translate(-50%,4px);box-shadow:0 2px 0 #9b153f,0 4px 0 #071629,inset 0 2px 0 #ffb0c180}
.scoreboard{position:absolute;top:27px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;line-height:1;font-variant-numeric:tabular-nums}.scoreboard strong{display:block;font-family:Helvetica,Arial,sans-serif;font-size:87px;font-weight:700;letter-spacing:-.055em;color:#00a6b7;text-shadow:0 3px 0 #07344d,0 5px 0 #07182c60}.scoreboard strong.score-pop{animation:score-pop .25s ease-out}@keyframes score-pop{0%{transform:scale(1.18)}100%{transform:scale(1)}}
.sound{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));right:18px;width:44px;height:44px;padding:10px;display:grid;place-items:center;border:1px solid #6c90af55;border-radius:14px;background:linear-gradient(#263c59,#162a46);color:#8fabca;box-shadow:0 3px 0 #071429,inset 0 1px 0 #a6cce91a;transition:color .15s,transform .15s}.sound svg{width:22px;height:22px}.sound[aria-pressed="true"]{color:#6be5fa;border-color:#00a6b770}.sound:active{transform:translateY(2px)}
#over,#paused{background:linear-gradient(#061127b8,#0d2139d9);backdrop-filter:blur(8px)}.result{position:absolute;top:50%;left:12%;width:76%;transform:translateY(-50%);text-align:center;padding:0}.result p{font-size:16px;margin:0 0 16px;color:#a5bfd6}.result h2{font-size:38px;line-height:1.1;font-weight:700;letter-spacing:-.035em;margin:0 0 24px}#over .over-title{font-size:18px;font-weight:700;letter-spacing:.02em;color:#effaff;margin:0 0 18px}#over #result{font-family:Helvetica,Arial,sans-serif;color:#00a6b7;font-size:87px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.055em;margin:0 0 16px;text-shadow:0 3px 0 #07344d}#over #best{font-size:16px;margin-bottom:34px;color:#a8c3da}.round,.text-button{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid #89effa;border-radius:18px;min-height:54px;padding:14px 26px;font-size:16px;font-weight:700;letter-spacing:-.015em;color:#082b40;background:linear-gradient(#69e2f7,#32c9e5);box-shadow:0 4px 0 #11708b,0 6px 0 #07172c;transition:transform .15s,filter .15s}.round svg{width:20px;height:20px}.round:hover,.text-button:hover{filter:brightness(1.07)}.round:active,.text-button:active{transform:translateY(3px)}
@media(min-width:700px){#game{border:1px solid #5c7ba24d;border-radius:26px;box-shadow:0 24px 80px #0008,0 0 0 5px #0b192c}}@media(max-width:600px){#game{width:min(390px,100vw,calc(100dvh*390/844));height:auto;aspect-ratio:390/844;border-radius:0}}@media(max-height:620px){h1{top:6%}.scoreboard{top:14px}.scoreboard strong,#over #result{font-size:60px}#over #best{margin-bottom:24px}}@media(prefers-reduced-motion:reduce){button{transition:none}.scoreboard strong.score-pop{animation:none}}

/* Light facility edition */
html{background:#dae4ea}body{background:radial-gradient(ellipse at 50% 35%,#f9fcfd,#d7e2e9 80%);color:#243e52}#game{background:#e2ebef}h1 img{filter:none}#menu{background:linear-gradient(#ffffff28,transparent 30%)}.scoreboard strong,#over #result{color:#00a6b7;text-shadow:0 2px 0 #ffffff90}.sound{background:linear-gradient(#f6fafc,#d7e5ec);border-color:#a2bac9;color:#647f92;box-shadow:0 3px 0 #a0b7c6,inset 0 1px 0 #fff}.sound[aria-pressed="true"]{color:#087f9c;border-color:#078eae80}#over,#paused{background:linear-gradient(#eef5f9ce,#e0ebf2ed)}.result p,#over #best{color:#617e90}.result h2,#over .over-title{color:#243e52}.round,.text-button{background:linear-gradient(#29bcd3,#0798b5);border-color:#61d3e4;color:#fff;box-shadow:0 4px 0 #086c87,0 6px 0 #99b9c940}button:focus-visible{outline-color:#243e52}#play{box-shadow:0 6px 0 #b21647,0 8px 0 #b4c4cf55,0 14px 24px #668da030,inset 0 2px 0 #ffb0c180,inset 0 -3px 0 #c9164260}@media(min-width:700px){#game{border-color:#adc2cf;box-shadow:0 24px 80px #52748a30,0 0 0 5px #eaf2f6}}



/* Game-over screen is a full-height metal door, using the gameplay shutter finish. */
#game{container-type:inline-size}
#over{z-index:3;pointer-events:auto;backdrop-filter:none;background:repeating-linear-gradient(180deg,transparent 0 119px,#899caa40 119px 121px,#e5e8eb70 121px 122px,transparent 122px 240px),linear-gradient(90deg,#aebbc4 0%,#d8dde1 8%,#cdd4da 18%,#c5cdd4 80%,#b1bdc6 100%);border-left:5px solid #b1bdc6;border-right:5px solid #b1bdc6;border-bottom:8px solid #aebbc4;box-shadow:inset 2px 0 #e5e8eb,inset -2px 0 #e5e8eb,inset 0 -2px #e5e8eb;animation:death-door-close .8s cubic-bezier(.65,0,.25,1) both}
#over .result{left:8%;width:84%;top:49%}
#over .over-title{margin:0 0 28px;font-family:'Arial Black','Avenir Next Heavy',Helvetica,Arial,sans-serif;font-weight:950;font-size:clamp(38px,17cqw,70px);line-height:.9;letter-spacing:-.065em;color:#243e52;text-transform:uppercase;text-shadow:0 2px 0 #e5e8eb;transform:scaleX(1.05)}
#over .over-title span{display:block}
#over .over-title span+span{margin-top:5px}
#over #result{margin-bottom:12px}
#over #best{color:#506b7d;margin-bottom:28px}
#over .round{box-shadow:0 4px 0 #086c87,0 6px 0 #899caa40}
@keyframes death-door-close{from{transform:translateY(-102%)}to{transform:translateY(0)}}
@media(max-height:620px){#over .over-title{font-size:clamp(34px,16cqw,56px);margin-bottom:20px}#over #best{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#over{animation:none}}

@font-face{font-family:LooprArcade;src:url('game-over-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
#over .over-title{font-family:LooprArcade,Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(38px,19cqw,74px);line-height:1;letter-spacing:-.06em;transform:none;text-shadow:none;filter:drop-shadow(0 4px 0 #243e52)}
#over .over-title span{background:linear-gradient(180deg,#b5e7cb 5%,#65caba 42%,#00a6b7 88%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:2px #243e52;paint-order:stroke fill}
#over .over-title span+span{margin-top:0}
@media(max-height:620px){#over .over-title{font-size:clamp(34px,18cqw,60px)}}

#over{background:#cdd4da url("game-over-door.webp") center/100% 100% no-repeat;border:0;box-shadow:none}

/* Two naturally cropped, low-contrast door leaves close toward the centre. */
#over{background:none;animation:none;border:0;box-shadow:none;overflow:hidden}
#over::before,#over::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#cdd4dacc,#cdd4dacc),url("game-over-door.webp") center/cover no-repeat;animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.25,1);animation-fill-mode:both}
#over::before{clip-path:inset(0 0 50% 0);animation-name:death-door-top}
#over::after{clip-path:inset(50% 0 0 0);animation-name:death-door-bottom}
#over .result{z-index:1;animation:death-result-reveal .22s ease-out .7s both}
@keyframes death-door-top{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes death-door-bottom{from{transform:translateY(50%)}to{transform:translateY(0)}}
@keyframes death-result-reveal{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@media(prefers-reduced-motion:reduce){#over::before,#over::after,#over .result{animation:none}}

/* Full-window world with a fixed vertical gameplay scale. */
#viewport{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;left:50%;top:50%;width:390px;height:844px;aspect-ratio:390/844;border:0;border-radius:0;box-shadow:none;transform:translate(-50%,-50%) scale(var(--game-scale,1));transform-origin:center}
h1{top:10%}.scoreboard{top:27px}.scoreboard strong,#over #result{font-size:87px}
#over .over-title{font-size:74px;margin-bottom:28px}#over #best{margin-bottom:28px}
.sound{bottom:16px}

h1{left:50%;transform:translateX(-50%);width:76%;max-width:296px}
.result,#over .result{left:50%;width:84%;max-width:328px;transform:translate(-50%,-50%)}

#orientationNotice{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#e2ebef;color:#243e52;font:700 22px Helvetica,Arial,sans-serif;text-align:center;padding:32px}#orientationNotice[hidden]{display:none}

/* A compact three-button home menu, with Play as the primary action. */
.home-actions{position:absolute;top:72%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:22px;width:max-content;max-width:96%}
.home-actions #play{position:relative;top:auto;left:auto;transform:none;width:96px;flex:0 0 96px}
.home-actions #play:active{transform:translateY(4px)}
.menu-orb{width:64px;height:64px;flex:0 0 64px;display:grid;place-items:center;border-radius:50%;padding:16px;color:#fff;border:2px solid #ffffff50;transition:transform .15s,filter .15s}
.menu-orb svg{width:100%;height:100%}.menu-orb:hover{filter:brightness(1.08)}.menu-orb:active{transform:translateY(3px)}
.menu-orb.teal{background:linear-gradient(145deg,#1ebdd0,#00a6b7);box-shadow:0 4px 0 #087f92,inset 0 2px 0 #ffffff25}
.menu-orb.gold{background:linear-gradient(145deg,#ffc757,#ffb62e);box-shadow:0 4px 0 #dc8c20,inset 0 2px 0 #ffffff40;padding:12px}
.home-back{display:flex;align-items:center;justify-content:center;gap:8px;margin:23px auto 0;background:transparent;color:#466476;border:0;border-radius:12px;padding:10px 18px;font-weight:700;font-size:16px;min-height:44px}.home-back svg{width:20px;height:20px}.home-back:hover{background:#ffffff40}
#menuPanel{margin:auto;width:min(330px,90%);border:1px solid #c4d6df;border-radius:26px;padding:32px 24px;color:#243e52;background:#edf4f7;text-align:center;box-shadow:0 14px 50px #243e5230;font-family:Helvetica,Arial,sans-serif}#menuPanel::backdrop{background:#243e5266;backdrop-filter:blur(5px)}#menuPanel h2{font-size:28px;margin:0 0 24px}#panelContent{font-size:16px;line-height:1.5;margin-bottom:28px}#panelContent strong{display:block;color:#00a6b7;font-size:64px;line-height:1.2}#panelContent p{margin:10px 0;color:#617e90}
@media(prefers-reduced-motion:reduce){.menu-orb{transition:none}}

/* Smooth, softly bevelled discs matching the reference. */
.home-actions{gap:20px}
.home-actions #play{width:112px;flex-basis:112px;border:0;background:linear-gradient(145deg,#f31046,#eb0037 65%,#d90030);box-shadow:inset 0 2px 2px #ff547d55,inset -2px -3px 3px #a7003540;}
.home-actions #play svg{width:42%;height:46%;filter:none}
.home-actions #play:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #a7003530}
.menu-orb{width:72px;height:72px;flex-basis:72px;border:0;padding:17px}
.menu-orb.teal{background:linear-gradient(145deg,#18b4ca,#0fa5bf);box-shadow:inset 0 2px 2px #65deeb55,inset -1px -2px 2px #06768a30}
.menu-orb.gold{padding:10px;background:linear-gradient(145deg,#ffc653,#ffb438);box-shadow:inset 1px 2px 2px #fff3c299,inset -2px -2px 2px #d68a2b44}
@media(orientation:landscape){.home-actions{gap:26px}.home-actions #play{width:140px;flex-basis:140px}.menu-orb{width:90px;height:90px;flex-basis:90px;padding:21px}.menu-orb.gold{padding:13px}}
/* Fine edge highlights and shallow bevels, rather than a flat disc. */
.home-actions{gap:26px}
.home-actions #play{width:106.4px;flex-basis:106.4px;background:radial-gradient(ellipse at 34% 18%,#ff275a45,transparent 62%),linear-gradient(155deg,#f21146 0%,#ee063e 48%,#df0035 100%);box-shadow:inset 0 1px 1px #ff8aa399,inset 1px 0 1px #ff5c7e55,inset -1px -2px 2px #ad003e80,inset 0 -4px 5px #be003040,0 1px 1px #8f254b22}
.menu-orb{width:68.4px;height:68.4px;flex-basis:68.4px}
.menu-orb.teal{background:radial-gradient(ellipse at 32% 18%,#47d1dd35,transparent 65%),linear-gradient(155deg,#18b2c8 0%,#12a9c1 55%,#0e9eb8 100%);box-shadow:inset 0 1px 1px #83e5ec99,inset 1px 0 1px #4fd4df55,inset -1px -2px 2px #06768c66,inset 0 -3px 4px #08798e22,0 1px 1px #22677b18}
.menu-orb.gold{background:radial-gradient(ellipse at 30% 15%,#fff0b54d,transparent 62%),linear-gradient(155deg,#ffc95c 0%,#ffba43 52%,#ffae32 100%);box-shadow:inset 0 1.5px 1.5px #fff7dacc,inset 1px 0 1.5px #ffeab699,inset -1px -2px 2px #db8b3077,inset 0 -3px 4px #e89a302e,0 1px 1px #a7763122}
@media(orientation:landscape){.home-actions{gap:32px}.home-actions #play{width:133px;flex-basis:133px}.menu-orb{width:85.5px;height:85.5px;flex-basis:85.5px}}

.high-score-notice{display:block;position:absolute;top:100%;left:50%;margin-top:10px;white-space:nowrap;font:700 15px/1.2 Helvetica,Arial,sans-serif;letter-spacing:.02em;color:#008b9b;pointer-events:none;animation:high-score-reveal 3.2s ease both}
@keyframes high-score-reveal{0%{opacity:0;transform:translate(-50%,6px) scale(.94)}12%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px) scale(1)}}
@media(prefers-reduced-motion:reduce){.high-score-notice{animation-name:high-score-fade}@keyframes high-score-fade{0%,80%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}}

#over #overHighScore{font:700 16px/1.3 Helvetica,Arial,sans-serif;color:#008b9b;margin:0 0 12px;letter-spacing:.02em}

#firstRunHint{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:max-content;max-width:94%;margin:0;text-align:center;font:400 clamp(12px,3.8vw,20px)/1.4 Helvetica,Arial,sans-serif;color:#456477;pointer-events:none;white-space:nowrap}