:root{color-scheme:dark;--ink:#e9e3cf;--gold:#e9b949;--red:#c94532;--green:#6fa84a;--panel:rgba(13,20,17,.94)}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#101916;color:var(--ink);font-family:"Arial Narrow",Impact,sans-serif;touch-action:none;user-select:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#18261d}
button{font:inherit;color:inherit}
.hidden{display:none!important}
.screen{position:absolute;inset:0;z-index:20}
.start-screen{display:grid;place-items:center;background:radial-gradient(circle at 52% 45%,rgba(37,61,45,.4),rgba(7,12,10,.92) 70%),linear-gradient(115deg,#111c16,#1f3122)}
.start-screen:before,.start-screen:after{content:"";position:absolute;inset:0;pointer-events:none}
.start-screen:before{opacity:.16;background-image:repeating-linear-gradient(100deg,transparent 0 79px,#9eb28e 80px 81px,transparent 82px 151px);transform:skew(-8deg) scale(1.2)}
.start-screen:after{background:linear-gradient(90deg,rgba(4,8,6,.8),transparent 35%,transparent 65%,rgba(4,8,6,.8)),linear-gradient(0deg,rgba(4,8,6,.9),transparent 45%)}
.mist{position:absolute;width:70vw;height:30vh;border-radius:50%;background:rgba(154,176,143,.08);filter:blur(50px);animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(12vw) scale(1.1)}}
.start-copy{z-index:2;text-align:center;margin-top:-2vh;padding:24px}
.eyebrow{margin:0 0 12px;letter-spacing:.38em;font-weight:600;font-size:clamp(11px,1.3vw,16px);color:var(--gold)}
h1{font-family:"Russo One",Impact,sans-serif;font-size:clamp(68px,12vw,170px);line-height:.73;margin:0;letter-spacing:-.075em;text-shadow:0 8px 0 #09100c,0 16px 28px #000}
h1 span{font-family:Oswald,sans-serif;font-size:.2em;letter-spacing:.1em;color:var(--gold);vertical-align:middle;margin:0 .25em}
.tagline{font-size:clamp(16px,1.55vw,22px);line-height:1.45;letter-spacing:.04em;margin:30px 0 25px;color:#c7c8b9;text-shadow:0 2px 5px #000}
.primary{min-width:265px;border:1px solid #f0c75d;background:linear-gradient(135deg,#d9992e,#f0c75d);color:#1a170e;padding:0;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:0 8px 0 #80541f,0 14px 30px #0008;transform:translateY(0);transition:.15s}
.primary span{padding:16px 22px;font-weight:700;letter-spacing:.11em}
.primary b{border-left:1px solid #9f712c;padding:16px 20px;font-size:22px}
.primary:hover{filter:brightness(1.12);transform:translateY(-2px)}
.primary:active{transform:translateY(5px);box-shadow:0 3px 0 #80541f}
.controls-hint{display:flex;gap:24px;justify-content:center;margin-top:30px;color:#939c8e;font-size:12px;letter-spacing:.08em}
kbd{font-family:inherit;border:1px solid #58665a;background:#1d2921;padding:3px 7px;margin-right:6px;color:#cfd4c8}
.version{position:absolute;z-index:3;bottom:max(18px,env(safe-area-inset-bottom));right:22px;color:#687268;font-size:11px;letter-spacing:.16em}
.hud{position:absolute;inset:0;z-index:10;pointer-events:none;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.topbar{display:flex;justify-content:center;align-items:flex-start}.brand{position:absolute;left:20px;top:18px;display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.14em;text-shadow:0 2px 4px #000}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--gold);color:var(--gold);transform:rotate(45deg);font-family:"Russo One"}.brand-mark::first-letter{transform:rotate(-45deg)}
.timer{background:#111a16dd;border:1px solid #6b755f;padding:6px 18px;font:600 22px "Russo One";letter-spacing:.12em;box-shadow:0 4px 12px #0008}.icon-button{pointer-events:auto;position:absolute;right:20px;top:17px;width:38px;height:38px;border:1px solid #75806e;background:#111a16cc;cursor:pointer}.icon-button:hover{border-color:var(--gold);color:var(--gold)}.sound-button{right:66px;font-size:18px}.sound-button.muted{color:#777;text-decoration:line-through}
.stat{position:absolute;left:20px;bottom:22px;display:flex;align-items:center;gap:8px;text-shadow:0 2px 3px #000}.stat.xp{bottom:52px}.stat-icon{font-size:16px;width:20px;text-align:center}.health .stat-icon{color:#e65342}.xp .stat-icon{color:#7ec55c}.track{width:min(280px,38vw);height:12px;padding:2px;background:#0b100e;border:1px solid #75806e;transform:skew(-10deg)}.track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#9a2e27,#e25c42);transition:width .18s}.xp .track{height:8px}.xp .track i{background:linear-gradient(90deg,#437c32,#91d45a)}.stat b{font-family:"Russo One";min-width:28px;font-size:13px}
.score{position:absolute;right:22px;bottom:20px;text-align:right;text-shadow:0 2px 4px #000}.score small{display:block;color:#9ba396;letter-spacing:.16em}.score strong{font:30px "Russo One"}.wave{position:absolute;left:50%;top:64px;transform:translateX(-50%);font-size:12px;letter-spacing:.25em;color:#aab09f;text-shadow:0 2px 4px #000}.boss-hud{position:absolute;left:50%;top:88px;transform:translateX(-50%);width:min(520px,64vw);text-align:center}.boss-hud span{font:12px "Russo One";letter-spacing:.18em;color:#e8c77a;text-shadow:0 2px 4px #000}.boss-track{height:12px;margin-top:7px;padding:2px;background:#0a0d0b;border:1px solid #9d8248;box-shadow:0 3px 12px #000}.boss-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#7a261f,#dd6b37,#e7bd4c);transition:width .12s}.boss-warning{position:absolute;z-index:30;left:50%;top:32%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 5px 14px #000;animation:bossWarning 2.8s ease both}.boss-warning small{display:block;color:#d7c28d;letter-spacing:.42em}.boss-warning strong{display:block;margin-top:10px;font:clamp(30px,5vw,64px) "Russo One";color:#e8b74e;white-space:nowrap}@keyframes bossWarning{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.08)}}
.modal-screen{display:grid;place-items:center;background:#08100caa;backdrop-filter:blur(5px)}
.panel{width:min(900px,92vw);background:linear-gradient(145deg,#152019f5,#0c120ff5);border:1px solid #6f735e;padding:40px;box-shadow:0 22px 70px #000;position:relative}.panel:before{content:"";position:absolute;inset:6px;border:1px solid #303b31;pointer-events:none}.panel.compact{max-width:520px;text-align:center}.panel h2{font:clamp(32px,5vw,54px) "Russo One";margin:0 0 28px;letter-spacing:-.04em}.secondary{display:block;margin:22px auto 0;border:0;background:none;color:#9da398;letter-spacing:.14em;cursor:pointer}.secondary:hover{color:white}
.upgrade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.upgrade-card{position:relative;text-align:left;background:linear-gradient(160deg,#263528,#172119);border:1px solid #617158;padding:22px;min-height:210px;cursor:pointer;transition:.16s}.upgrade-card:hover,.upgrade-card:focus{outline:0;border-color:var(--gold);transform:translateY(-5px);box-shadow:0 12px 25px #000}.upgrade-card .glyph{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#111914;border:1px solid #a3843e;color:var(--gold);font:25px "Russo One"}.upgrade-card h3{font:23px "Russo One";margin:26px 0 8px}.upgrade-card p{color:#aeb4a8;line-height:1.4;margin:0}.upgrade-card small{position:absolute;right:14px;top:13px;color:#70796e;letter-spacing:.12em}
.results{display:flex;justify-content:center;gap:35px;margin:10px 0 35px}.results div{display:flex;flex-direction:column}.results b{font:28px "Russo One";color:var(--gold)}.results span{font-size:12px;color:#929a8e;letter-spacing:.12em}
.touch-controls{position:absolute;inset:0;z-index:12;pointer-events:none}.joystick{position:absolute;left:max(28px,env(safe-area-inset-left));bottom:max(38px,env(safe-area-inset-bottom));width:112px;height:112px;border:2px solid #d5dcc244;border-radius:50%;background:#10191444;pointer-events:auto}.joystick i{position:absolute;left:35px;top:35px;width:40px;height:40px;border:2px solid #e7eddaaa;border-radius:50%;background:#9ead8c33}.joystick span{position:absolute;width:100%;bottom:-24px;text-align:center;font-size:9px;letter-spacing:.16em;color:#bdc4b777}.aim-stick{left:auto;right:max(28px,env(safe-area-inset-right));border-color:#e9b94955}.aim-stick i{border-color:#efc967bb}.aim-stick span{color:#d9bc7d88}
@media (pointer:coarse),(max-width:780px){.controls-hint{display:none}.touch-controls:not(.hidden){display:block}.joystick{left:max(18px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));width:88px;height:88px}.joystick i{left:28px;top:28px;width:30px;height:30px}.joystick span{bottom:-18px;font-size:8px}.aim-stick{display:none!important}.brand{font-size:0;left:12px;top:12px}.brand-mark{width:26px;height:26px;font-size:12px}.timer{padding:4px 11px;font-size:16px}.icon-button{right:10px;top:11px;width:30px;height:30px;font-size:13px}.sound-button{right:46px;font-size:15px}.score{right:12px;bottom:108px}.score small{font-size:9px}.score strong{font-size:22px}.stat{left:12px;bottom:108px;gap:5px}.stat.xp{bottom:131px}.track{width:29vw;height:9px}.xp .track{height:6px}.stat b{font-size:10px}.stat-icon{font-size:12px;width:15px}.wave{top:48px;font-size:9px}.boss-hud{top:65px;width:68vw}.boss-hud span{font-size:9px}.boss-track{height:9px;margin-top:4px}.boss-warning small{font-size:9px}.boss-warning strong{font-size:clamp(24px,8vw,38px);white-space:normal}.start-copy{padding:16px}.start-copy h1{font-size:min(18vw,88px)}.tagline{font-size:14px;margin:20px 0}.primary{min-width:220px}.primary span{padding:13px 17px}.primary b{padding:13px 16px}.upgrade-cards{grid-template-columns:1fr}.upgrade-card{min-height:104px;padding:12px 12px 12px 72px}.upgrade-card .glyph{left:13px;top:24px;width:44px;height:44px;font-size:20px}.upgrade-card h3{font-size:18px;margin:7px 0}.upgrade-card p{font-size:13px}.panel{padding:22px 16px;max-height:92vh;overflow:auto}.panel h2{font-size:30px;margin-bottom:16px}}
@media (max-height:650px){.tagline{margin:20px 0 16px}.start-copy h1{font-size:min(16vh,100px)}.controls-hint{margin-top:18px}.upgrade-card{min-height:100px}.panel{padding:24px}.panel h2{margin-bottom:16px}}