@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme:dark; font-family:'Space Grotesk', 'DM Sans', system-ui, sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#070611; color:#fff; overflow:hidden; }
.app { height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.game-shell { position:relative; height:min(100dvh, 94vh); aspect-ratio:9 / 16; max-width:100vw; overflow:hidden; border:1px solid #33284c; border-radius:12px; isolation:isolate; background:#130b27; box-shadow:0 32px 90px #000b,0 0 80px #3f25811c; }
canvas { position:absolute; width:100%; height:100%; display:block; }
.vignette { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,#10091c77 0%,transparent 25%,transparent 67%,#0a0719aa 100%), radial-gradient(ellipse at 50% 40%,transparent 45%,#05041577 110%); }
.hud { position:absolute; z-index:3; top:0; left:0; right:0; padding:clamp(14px,3vh,25px) 6.5% 0; pointer-events:none; }
.brand { font-size:clamp(10px,1.65vh,13px); letter-spacing:.11em; font-weight:800; white-space:nowrap; display:flex;align-items:center;gap:7px; }
.brand-mark { font-size:24px;color:#f1b66a;line-height:0.7; } .brand-sub {color:#8f85a8;font-size:.65em;letter-spacing:.05em;font-weight:600;}
.hud-stats { display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(20px,4vh,35px); }
.stat {display:flex;flex-direction:column;gap:2px;}.stat-label {font-size:clamp(8px,1.25vh,10px);letter-spacing:.16em;color:#b7acc9;font-weight:700;}.stat strong {font-size:clamp(34px,7.6vh,64px);line-height:1;letter-spacing:-.075em;font-weight:700;color:#ffce79;text-shadow:0 0 28px #ffb93a2f;}.stat.score {text-align:right;}.stat.score strong {font-size:clamp(18px,3.3vh,28px);color:#fff;letter-spacing:-.03em;}
.progress {height:3px;background:#ffffff24;border-radius:8px;margin-top:15px;overflow:hidden;}.progress>div {width:0;height:100%;background:linear-gradient(90deg,#f08d79,#ffd078);transition:width .28s ease;box-shadow:0 0 15px #ffa26e;}
.top-note {z-index:3;position:absolute;top:21%;left:0;right:0;text-align:center;color:#ffffff66;letter-spacing:.24em;font-size:clamp(8px,1.4vh,11px);font-weight:700;pointer-events:none;transition:opacity .3s;}
.bottom-overlay {position:absolute;z-index:4;bottom:0;left:0;right:0;padding:0 6.5% clamp(17px,3vh,27px);background:linear-gradient(transparent,#0d081ce0 75%);}
.status {text-align:center;font-size:clamp(8px,1.4vh,11px);font-weight:700;color:#d3c8e3;letter-spacing:.17em;margin:0 0 16px;}.live-dot {display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffb86f;box-shadow:0 0 12px #ffb86f;margin-right:6px;animation:blink 1.2s infinite;}@keyframes blink {50%{opacity:.35}}
.controls {display:flex;gap:8px;}.controls button {cursor:pointer;color:#fff;border:1px solid #ffffff2c;border-radius:11px;background:#ffffff10;backdrop-filter:blur(20px);height:clamp(40px,6vh,51px);font-weight:800;font-family:inherit;}.controls button:active {transform:scale(.96)}.icon-btn {padding:0 12px;min-width:42px;font-size:16px;}.icon-btn span {font-size:9px;letter-spacing:.06em;}.restart-btn {flex:1;letter-spacing:.13em;font-size:12px!important;background:#ffbf72!important;color:#21132d!important;border-color:#ffbf72!important;box-shadow:0 5px 24px #ffb56524;}
.sound-tip {position:absolute;z-index:5;left:8%;right:8%;bottom:15%;text-align:center;border:1px solid #ffd69d52;border-radius:20px;background:#241438ed;color:#ffdcab;padding:11px;font-size:clamp(8px,1.35vh,10px);font-weight:700;letter-spacing:.06em;pointer-events:none;transition:opacity .5s;animation:tipIn .5s ease;}@keyframes tipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sound-tip.hidden{opacity:0;}
.screen-flash {position:absolute;z-index:7;inset:0;pointer-events:none;background:white;opacity:0;}
.desktop-note {height:6vh;min-height:24px;display:flex;gap:8px;align-items:center;color:#81758d;letter-spacing:.16em;font-size:9px;font-weight:700}.desktop-note span{color:#42384b}
@media(max-width:650px){.game-shell{height:100dvh;max-height:100dvh;max-width:100vw;border:0;border-radius:0;}.desktop-note{display:none;}}
@media(max-aspect-ratio:9/16){.game-shell{height:auto;width:100vw;max-height:100dvh;}.app{justify-content:center;}}