:root{--acid:#9cff18;--acid2:#d7ff3d;--ink:#0b0d08;--cream:#f4e7bd;--rust:#a43d20;--panel:rgba(12,15,9,.88)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080b08;color:#fff;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:#111}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.screen{position:fixed;inset:0;display:none;place-items:center;padding:24px;background:radial-gradient(circle at center,rgba(26,39,15,.32),rgba(0,0,0,.72));z-index:10}
.screen.active{display:grid}
#loading{background:#090c08}
.brand-mark,.radiation{font-size:72px;color:var(--acid);filter:drop-shadow(0 0 18px var(--acid));animation:pulse 1.6s infinite}
.screen h1{margin:8px 0 0;text-align:center;font-size:clamp(52px,14vw,110px);line-height:.76;letter-spacing:-.03em;text-shadow:0 5px 0 #000,0 0 25px #000}
.screen h1 span{color:var(--acid);text-shadow:0 5px 0 #243600,0 0 30px rgba(156,255,24,.55)}
.kicker,.subtitle{letter-spacing:.22em;text-align:center;color:var(--cream);font-family:system-ui,sans-serif;font-weight:800}
.loadbar{width:min(78vw,380px);height:10px;border:1px solid rgba(255,255,255,.25);background:#050604;margin-top:34px;transform:skewX(-16deg)}
.loadbar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#547b0a,var(--acid2));box-shadow:0 0 14px var(--acid)}
.tiny{font:600 11px system-ui;letter-spacing:.2em;opacity:.65}
.story-card,.modal,.menu-panel{width:min(92vw,520px);padding:30px;border:1px solid rgba(202,255,80,.3);background:linear-gradient(145deg,rgba(20,25,14,.94),rgba(5,6,4,.94));box-shadow:0 30px 90px #000,inset 0 0 60px rgba(156,255,24,.06);clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.story-card p{min-height:160px;font:800 clamp(23px,6vw,38px)/1.18 system-ui;text-transform:uppercase;letter-spacing:-.03em}
.primary,.ghost{width:100%;padding:15px 20px;margin-top:12px;letter-spacing:.12em;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.primary{background:linear-gradient(#cfff3c,#75b80e);color:#111;box-shadow:0 0 26px rgba(156,255,24,.35)}
.primary:active{transform:translateY(2px)}
.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.huge{font-size:28px;padding:18px}
.menu-panel{text-align:center}.menu-panel .radiation{font-size:54px}.menu-panel h1{font-size:clamp(55px,16vw,92px)}
.best{margin-top:22px;font:700 12px system-ui;letter-spacing:.16em;opacity:.75}.best b{color:var(--acid);font-size:18px}
.modal h2{font-size:45px;margin:0 0 18px;color:var(--acid)}
.modal p{font:600 16px/1.5 system-ui;color:#e8e3d2}.modal.compact{text-align:center}
.control-grid{display:grid;gap:10px}.control-grid div{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);padding:12px}.control-grid span{display:grid;place-items:center;width:58px;height:48px;background:#1e2814;color:var(--acid);font-size:24px}.control-grid b{font:800 13px system-ui;letter-spacing:.08em}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;padding:calc(env(safe-area-inset-top) + 12px) 14px 14px}
.hidden{display:none!important}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;text-shadow:0 2px 8px #000}.hud-top small{display:block;font:800 9px system-ui;letter-spacing:.16em;color:#d8d4bd}.score b{display:block;font-size:30px;color:#fff}.level{text-align:center}.level b{display:block;font-size:16px;color:var(--acid)}
#pauseBtn{pointer-events:auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.4);font-size:20px}
.mutation-wrap{position:absolute;top:calc(env(safe-area-inset-top) + 77px);left:50%;transform:translateX(-50%);width:min(58vw,290px);font:800 9px system-ui;letter-spacing:.16em;text-align:center;text-shadow:0 2px 6px #000}.mutation{height:11px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.32);margin-top:4px;transform:skewX(-12deg)}.mutation i{display:block;height:100%;width:0;background:linear-gradient(90deg,#568a09,var(--acid2));box-shadow:0 0 14px var(--acid)}
.combo{position:absolute;top:118px;left:50%;transform:translateX(-50%) scale(.8);font-size:34px;color:var(--acid2);text-shadow:0 4px 0 #263800,0 0 18px var(--acid);opacity:0;transition:.12s}.combo.show{opacity:1;transform:translateX(-50%) scale(1)}
#controls{position:fixed;z-index:6;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 16px);display:flex;justify-content:center;gap:14px;pointer-events:none}
#controls button{pointer-events:auto;width:70px;height:62px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(rgba(22,27,17,.75),rgba(3,4,3,.75));backdrop-filter:blur(8px);font-size:25px;color:#dfff87;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);text-shadow:0 0 8px var(--acid)}
#controls button:active{background:rgba(156,255,24,.25);transform:translateY(2px)}
.result{text-align:center}.eyebrow{letter-spacing:.22em!important;font-size:11px!important}.result h2{font-size:62px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-grid div{padding:12px 5px;background:rgba(255,255,255,.06)}.result-grid small{display:block;font:700 9px system-ui;letter-spacing:.12em}.result-grid b{font-size:25px;color:var(--acid)}
@keyframes pulse{50%{transform:scale(1.06);filter:drop-shadow(0 0 32px var(--acid))}}
@media(min-width:900px){#controls{opacity:.7}.story-card,.modal{padding:38px}}