:root { --bg:#0b0f0a; --tox:#7CFF4F; --amber:#ffb020; --red:#ff3030; --acc:#7CFF4F; }
html,body { background: var(--bg); color: #cfe8c2; font-family: 'VT323', monospace; font-size: 19px; margin:0; }
body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,255,79,.08), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(255,48,48,.07), transparent 50%),
    repeating-linear-gradient(45deg, #0b0f0a 0 22px, #0d120c 22px 44px);
  min-height: 100vh;
}
.stencil { font-family: 'Black Ops One', cursive; letter-spacing: .04em; }
.scanlines { pointer-events:none; position:fixed; inset:0; z-index:100;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.flicker { animation: flick 4s infinite; }
@keyframes flick { 0%,95%,100%{opacity:1} 96%{opacity:.4} 97%{opacity:.9} 98%{opacity:.5} }
.panel { position:relative; background: linear-gradient(160deg,#1a1f17,#121610); border:2px solid #2c3527;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6), 0 0 0 1px #000; padding: 1rem; animation: rise .6s both; }
.panel::before,.panel::after { content:''; position:absolute; top:6px; width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #8a7a5a, #3a2f20); }
.panel::before { left:6px } .panel::after { right:6px }
.panel h2 { font-family:'Black Ops One'; color: var(--acc); font-size: 1.15rem; margin-bottom:.5rem; text-shadow:0 0 8px var(--acc); }
.hazard { height:8px; background: repeating-linear-gradient(-45deg, var(--amber) 0 10px, #111 10px 20px); }
@keyframes rise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.glitch:hover { animation: glitch .25s steps(2) 2; }
@keyframes glitch { 0%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,-1px)} }
.shake { animation: shake .5s; }
@keyframes shake { 0%,100%{transform:none} 20%{transform:translate(-8px,4px)} 40%{transform:translate(7px,-5px)} 60%{transform:translate(-5px,-3px)} 80%{transform:translate(4px,5px)} }
.bigbtn { font-family:'Black Ops One'; padding:.9rem; border:3px solid #000; box-shadow: 0 5px 0 #000, inset 0 -4px 0 rgba(0,0,0,.35);
  transition: transform .08s; width:100%; }
.bigbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.ticker { white-space:nowrap; animation: tick 90s linear infinite; display:inline-block; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.toast { animation: rise .3s both; }
.flash { position:fixed; inset:0; background:#fff; z-index:90; pointer-events:none; animation: fl 1.2s forwards; }
@keyframes fl { 0%{opacity:1} 100%{opacity:0} }
input[type=range] { accent-color: var(--acc); width:100%; }
.mush { animation: mush 2.2s forwards; transform-origin: bottom center; }
@keyframes mush { 0%{transform:scale(0); opacity:1} 60%{transform:scale(1); opacity:1} 100%{transform:scale(1.2); opacity:0} }