*{box-sizing:border-box}
:root{color-scheme:dark;font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',sans-serif;color:#fff}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#100e32 url('assets/cosmos.webp') center/cover fixed}
body::before{content:'';position:fixed;inset:0;background:#07092380;z-index:-1}
header{min-height:80px;padding:12px 22px;display:flex;align-items:center;gap:14px;background:#171337b3;border-bottom:1px solid #d6b9ff55}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:2px solid #fff;border-radius:28px;background:linear-gradient(#fbffff,#b7f3ff);box-shadow:inset 0 2px 2px #fff,0 4px 0 #4a528f;color:#243565;line-height:1.15;font-family:inherit;font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;touch-action:manipulation}
.primary{color:#49266f;background:linear-gradient(#ffe7ff 0%,#eeb8ff 48%,#d790f4 51%,#cba2ff 100%);box-shadow:inset 0 2px 3px #fff,0 5px 0 #7836a2}
.pill:disabled{cursor:wait;filter:saturate(.4)}.pill:hover{filter:brightness(1.07)}.pill:focus-visible,canvas:focus-visible{outline:4px solid #ffdf70;outline-offset:4px}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
#welcome{width:min(100%,1280px);text-align:center}.flyer{position:relative;border:2px solid #dcd5ff;border-radius:26px;overflow:hidden;box-shadow:0 10px 60px #07091faa}.flyer img{width:100%;height:auto;display:block}
#play{position:absolute;bottom:3.4%;left:50%;transform:translateX(-50%);width:26%;min-height:12.6%;padding:8px 6px;white-space:nowrap;font-size:clamp(16px,2.6vw,34px);border:3px solid white;border-radius:50px}
#loading{margin:14px 8px 0;line-height:1.5}#game{width:min(100%,1280px);text-align:center}
#stage{position:relative;width:100%;height:min(65svh,730px);min-height:300px;border:2px solid #dcd5ff;border-radius:24px;overflow:hidden;box-shadow:0 10px 60px #07091faa;background:#15122c url('assets/cosmos.webp') center/cover}
canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-7px}
.hud{position:absolute;inset:14px 16px auto;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}.hud>span,.counter{background:#f8f4fff2;color:#383066;border:2px solid white;border-radius:24px;box-shadow:0 3px 10px #180a4940;padding:9px 16px;font-size:16px;font-weight:bold}.counter{display:flex;align-items:center;gap:10px}
.progress{display:flex;gap:5px}.progress i{width:14px;height:14px;border:2px solid #bc9fe7;border-radius:50%;background:#e7dbf4}.progress i.done{background:#ffdf65;border-color:#d7ac2f}
.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0 6px}.controls button{touch-action:none;user-select:none;-webkit-user-select:none;min-width:125px}.controls .primary{min-width:190px}
#hint{font-size:18px;font-weight:bold;margin:14px 0 10px;min-height:25px;line-height:1.4}#scene-error{position:absolute;inset:0;background:#1b1541ef;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
dialog{border:3px solid #fff;border-radius:30px;background:#f3e8ff;color:#44316c;padding:28px;text-align:center;max-width:min(460px,90vw)}dialog::backdrop{background:#100d3b99;backdrop-filter:blur(5px)}dialog .pill{margin:8px}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){header{padding:8px;gap:8px}.back,#pause{padding:10px;font-size:14px}main{padding:12px 8px}.flyer,#stage{border-radius:18px}#stage{height:61svh;min-height:280px}.hud{inset:10px 8px auto}.hud>span,.counter{padding:8px 10px;font-size:13px}.counter{gap:6px}.progress{gap:3px}.progress i{width:10px;height:10px}.controls{gap:8px}.controls button{font-size:14px;padding:12px 10px;min-width:85px}.controls .primary{min-width:140px}#hint{font-size:15px;margin:12px 4px 8px}#play{width:35%;bottom:3.5%;min-height:44px;font-size:clamp(16px,3vw,24px)}}
@media(max-width:430px){header .music-player{gap:5px;padding:5px 8px 5px 5px;margin-top:0}header .music-player .music-button{min-width:92px;padding:8px;font-size:12px}header .music-player input{width:50px}.controls{gap:6px}.controls button{min-width:76px}.controls .primary{min-width:135px}#pause{order:3;margin:auto}#stage{height:56svh}}
@media(max-height:540px) and (min-width:600px){header{min-height:64px;padding:6px 14px}.music-player{padding-top:3px;padding-bottom:3px}main{padding:8px}#stage{height:calc(100svh - 165px);min-height:200px}.controls{margin:8px 0 0}.controls .pill{min-height:44px;padding:8px 16px}#hint{margin:6px 0;font-size:14px}#welcome{width:min(100%,calc((100svh - 115px)*1.777))}#loading{font-size:13px;margin-top:8px}}

#oops{position:absolute;inset:30% 15%;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid white;border-radius:32px;background:#fff0f9ed;color:#75449a;box-shadow:0 8px 40px #8b59b955;pointer-events:none}#oops[hidden]{display:none}#oops strong{font-size:clamp(36px,7vw,64px)}#oops span{font-size:22px}