:root{color-scheme:dark;--ink:#070b1c;--panel:#111936;--cyan:#35e9ff;--violet:#9c62ff;--coral:#ff5b69;--gold:#ffd166;--muted:#9ba8ca;--white:#f8fbff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#202d63 0,#090d21 48%,#050713 100%);color:var(--white);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{display:grid;place-items:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow-x:hidden}.game-shell{width:min(1180px,100%)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px}.brand{display:flex;gap:10px;align-items:center}.brand p{margin:0;color:#9db0da;font-weight:800;font-size:.69rem;letter-spacing:.12em;text-transform:uppercase}.brand h1{font-size:clamp(1.1rem,3vw,1.65rem);margin:1px 0 0;font-style:italic;letter-spacing:.03em}.brand-mark{position:relative;width:36px;height:36px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 16px #35e9ff88}.brand-mark:before,.brand-mark:after,.brand-mark i{content:"";position:absolute;left:16px;top:30px;width:3px;height:18px;background:var(--cyan);transform-origin:top;border-radius:3px}.brand-mark:before{transform:rotate(35deg)}.brand-mark:after{transform:rotate(-35deg)}.brand-mark i{top:33px;left:9px;height:15px;transform:rotate(50deg)}.top-actions{display:flex;gap:8px}.icon-button{width:42px;height:42px;border:1px solid #6c78a5;background:#151e42;color:#fff;border-radius:12px;font-weight:900;font-size:1.1rem;cursor:pointer}.icon-button:hover{border-color:var(--cyan);background:#1c2853}.icon-button:focus-visible,button:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.arena{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 105px);background:#080d20;border:1px solid #34477d;border-radius:20px;overflow:hidden;box-shadow:0 20px 70px #000a,inset 0 0 35px #13245c}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;z-index:4;inset:14px 14px auto;display:flex;gap:8px;align-items:stretch;pointer-events:none}.hud>div{background:#081026d9;border:1px solid #6478b65c;box-shadow:0 4px 14px #0007;border-radius:10px;padding:6px 9px;backdrop-filter:blur(4px)}.hud span,.boss-hud span,.result-grid span,.mini-stats span,.big-score span{font-size:.58rem;font-weight:900;color:#aab8dc;letter-spacing:.1em}.hud b{display:block;font-size:.9rem}.hud-block{width:min(210px,24vw)}.meter{height:7px;border-radius:9px;background:#27304e;overflow:hidden;margin:3px 0}.meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3f65,#ff8f68);transition:width .2s}.special-block{margin-left:auto}.special-block .meter i{width:0;background:linear-gradient(90deg,var(--violet),var(--cyan))}.hud-stat{text-align:center;min-width:72px}.boss-hud{position:absolute;z-index:5;top:76px;left:22%;right:22%;padding:7px 12px;background:#080d20e8;border:1px solid #ff746d;border-radius:10px;text-align:center;pointer-events:none}.boss-hud .meter{height:11px}.boss-hud .meter i{background:linear-gradient(90deg,#ff2d55,#ffb239)}
.overlay{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(16px,5vw,64px);background:radial-gradient(circle at 50% 35%,#263b7de8,#070a18f7 66%);backdrop-filter:blur(5px)}[hidden]{display:none!important}.overlay h2{margin:.15em 0;font-size:clamp(2rem,7vw,4.8rem);font-weight:1000;font-style:italic;letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 4px 0 #18102f,0 0 25px #35e9ff7a}.overlay>p:not(.eyebrow):not(.hint){max-width:620px;margin:.5em auto 1.4em;color:#d7e0fa;font-size:clamp(.9rem,2.1vw,1.1rem)}.eyebrow{margin:0;color:var(--cyan);font-size:.7rem;font-weight:1000;letter-spacing:.16em;text-transform:uppercase}.eyebrow.danger{color:#ff8590}.overlay-actions{display:flex;gap:12px}.primary-button,.secondary-button{border:0;border-radius:13px;padding:12px 23px;font:900 1rem inherit;cursor:pointer}.primary-button{color:#071126;background:linear-gradient(135deg,var(--cyan),#61ffca);box-shadow:0 8px 24px #35e9ff45}.secondary-button{color:#fff;background:#25315c;border:1px solid #7182be}.primary-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.secondary-button:hover{background:#334276}.hero-emblem{position:relative;width:80px;height:100px;margin-bottom:8px}.hero-emblem span{position:absolute;left:23px;top:0;width:38px;height:38px;border:6px solid var(--cyan);border-radius:50%;box-shadow:0 0 22px var(--cyan)}.hero-emblem:before,.hero-emblem:after,.hero-emblem i,.hero-emblem b{content:"";position:absolute;left:39px;top:36px;width:6px;height:54px;background:linear-gradient(var(--cyan),var(--violet));border-radius:7px;transform-origin:top}.hero-emblem:before{transform:rotate(44deg)}.hero-emblem:after{transform:rotate(-44deg)}.hero-emblem i{top:80px;height:31px;transform:rotate(42deg)}.hero-emblem b{top:80px;height:31px;transform:rotate(-42deg)}
.compact-overlay{background:#070a18ed}.compact-overlay h2{font-size:clamp(2rem,6vw,4rem)}.instructions{display:grid;gap:8px;width:min(520px,95%);margin:15px auto}.instructions div{display:flex;align-items:center;gap:7px;padding:8px 12px;background:#172044;border-radius:10px;text-align:left}.instructions span{margin-left:auto;color:#dce4fa;font-weight:700}kbd{min-width:30px;padding:5px 7px;border:1px solid #8394ca;border-bottom-width:3px;border-radius:6px;background:#26335f;color:#fff;font:900 .8rem inherit}.hint{font-size:.8rem;color:#aebce1;margin:0 0 14px}.mini-stats,.result-grid{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:10px;margin:15px 0;width:min(430px,90%)}.mini-stats div,.result-grid div,.big-score{padding:12px;border:1px solid #53669c;background:#141d3d;border-radius:12px}.mini-stats b,.result-grid b,.big-score b{display:block;font-size:1.35rem;color:#fff}.big-score{width:190px;margin:15px}.victory-screen{background:radial-gradient(circle at 50% 25%,#314a88ef,#090a1af7 67%)}
.announcer,.combo-pop{position:absolute;z-index:8;left:50%;transform:translate(-50%,-50%) scale(.7);top:36%;opacity:0;pointer-events:none;text-align:center;font-weight:1000;font-style:italic;text-transform:uppercase;text-shadow:0 4px 0 #111,0 0 18px #000}.announcer{font-size:clamp(1.6rem,5vw,4rem);color:#fff}.combo-pop{top:28%;left:auto;right:5%;transform:scale(.7);color:var(--gold);font-size:clamp(1.1rem,3vw,2.1rem)}.announcer.show{animation:announce 1.15s ease}.combo-pop.show{animation:combo .7s ease}@keyframes announce{15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}@keyframes combo{25%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px) scale(1.05)}}
.touch-controls{position:absolute;z-index:10;inset:auto 10px 10px;display:flex;justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:8px}.touch-controls button{pointer-events:auto;width:56px;height:56px;border:1px solid #ffffff55;border-radius:50%;background:#0c1434c7;color:#fff;font-weight:1000;font-size:1.25rem;box-shadow:0 5px 14px #0008;touch-action:none;user-select:none}.touch-controls button.active{transform:scale(.92);background:#3957a5}.touch-action .quick{border-color:var(--cyan);color:var(--cyan)}.touch-action .heavy{border-color:var(--gold);color:var(--gold)}.touch-action .special{border-color:var(--violet);color:#c5a8ff}.footer-note{text-align:center;margin:8px 0 0;color:#7f8cb2;font-size:.7rem}
@media (hover:hover) and (pointer:fine){.touch-controls{display:none!important}}
@media (max-width:720px){body{padding:0;background:#060916}.game-shell{width:100%}.topbar{padding:5px 9px}.brand-mark{transform:scale(.75);margin-right:-4px}.brand p{display:none}.brand h1{font-size:1rem}.icon-button{width:36px;height:36px;border-radius:9px}.arena{border-radius:0;border-left:0;border-right:0;max-height:none;aspect-ratio:16/9}.hud{inset:5px 5px auto;gap:3px}.hud>div{padding:4px 5px;border-radius:7px}.hud span{font-size:.46rem}.hud b{font-size:.68rem}.hud-block{width:24vw}.hud-stat{min-width:52px}.boss-hud{top:48px;left:18%;right:18%}.overlay{padding:8px 12px 54px}.overlay h2{font-size:clamp(1.55rem,9vw,2.6rem)}.overlay>p:not(.eyebrow):not(.hint){margin:.25em auto .65em;font-size:.76rem}.hero-emblem{display:none}.overlay-actions{flex-direction:row;width:min(300px,96%)}.primary-button,.secondary-button{width:100%;padding:8px 12px;font-size:.8rem}.touch-controls button{width:40px;height:40px;font-size:1rem}.touch-controls{bottom:max(5px,env(safe-area-inset-bottom));left:5px;right:5px}.touch-controls>div{gap:3px}.instructions{gap:3px;margin:5px auto}.instructions div{padding:3px 6px;font-size:.68rem}.instructions kbd{padding:2px 4px;min-width:24px}.footer-note{display:none}}
@media (max-height:500px) and (orientation:landscape){.topbar,.footer-note{display:none}.arena{height:100vh;max-height:none;border:0;border-radius:0}.overlay{padding:8px 18px 60px}.hero-emblem{display:none}.overlay h2{font-size:2rem}.overlay>p:not(.eyebrow):not(.hint){margin:.2em auto .7em}.instructions{grid-template-columns:1fr 1fr;margin:5px auto}.touch-controls button{width:45px;height:45px}.hud{top:4px}.boss-hud{top:45px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.announcer.show,.combo-pop.show{animation-duration:.01ms}}