:root { --acid:#c6ff00; --red:#ff2a2a; --ink:#000; --paper:#f2f2f2; --dim:#8a8a8a; }
* { box-sizing:border-box; margin:0; }
body { background:var(--ink); color:var(--paper); font-family:"Anton",Impact,sans-serif; overflow-x:hidden; cursor:crosshair; }
.mono { font-family:"JetBrains Mono",ui-monospace,monospace; }
.dim { color:var(--dim); }
.acid { color:var(--acid); }
#static { position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; opacity:.09; pointer-events:none; }
.scanlines { position:fixed; inset:0; pointer-events:none; z-index:40; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.sound { position:fixed; top:14px; right:14px; z-index:70; background:#000; color:var(--acid); border:1px solid var(--acid); padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.sound[aria-pressed="true"] { background:var(--acid); color:#000; }
section { padding:14vh 6vw; position:relative; max-width:1200px; margin:0 auto; }
h2 { font-size:clamp(44px,8.5vw,124px); line-height:.9; letter-spacing:-.01em; margin-bottom:18px; text-transform:uppercase; -webkit-text-stroke:2px var(--paper); color:transparent; }
h2:hover { color:var(--acid); -webkit-text-stroke:0; }
.tape { position:relative; overflow:hidden; background:var(--acid); color:#000; transform:rotate(-2deg); margin:0 -4vw; z-index:5; border-block:3px solid #000; }
.tape.bottom { transform:rotate(2deg); margin-top:6vh; }
.tape-track { white-space:nowrap; font-size:clamp(20px,3vw,34px); padding:10px 0; animation:tape 22s linear infinite; }
.tape.bottom .tape-track { animation-direction:reverse; }
@keyframes tape { to { transform:translateX(-50%); } }
.hero { min-height:92vh; min-height:92svh; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.tag { color:var(--red); font-size:13px; letter-spacing:.2em; }
.glitch { display:flex; font-size:clamp(150px,36vw,520px); line-height:.8; letter-spacing:-.03em; color:var(--paper); user-select:none; touch-action:none; }
.glitch span { position:relative; display:inline-block; transition:transform .25s cubic-bezier(.2,1.6,.4,1), color .2s; will-change:transform; }
.glitch span.hit { color:var(--acid); }
.glitch span::before, .glitch span::after { content:attr(data-text); position:absolute; inset:0; overflow:hidden; }
.glitch span::before { color:var(--acid); transform:translate(-4px,0); mix-blend-mode:screen; animation:g1 2.6s infinite steps(1); }
.glitch span::after { color:var(--red); transform:translate(4px,0); mix-blend-mode:screen; animation:g2 3.1s infinite steps(1); }
.glitch span:nth-child(2)::before { animation-delay:-.7s; } .glitch span:nth-child(3)::after { animation-delay:-1.3s; } .glitch span:nth-child(4)::before { animation-delay:-2s; }
@keyframes g1 { 0%,86%,100% { clip-path:inset(0 0 100% 0); } 88% { clip-path:inset(20% 0 55% 0); transform:translate(-10px,2px); } 92% { clip-path:inset(62% 0 12% 0); transform:translate(8px,-2px); } 96% { clip-path:inset(40% 0 40% 0); } }
@keyframes g2 { 0%,80%,100% { clip-path:inset(0 0 100% 0); } 83% { clip-path:inset(70% 0 5% 0); transform:translate(12px,0); } 89% { clip-path:inset(10% 0 75% 0); transform:translate(-8px,3px); } }
body.glitching .glitch span::before, body.glitching .glitch span::after { animation-duration:.25s; }
.sub { font-size:clamp(15px,2vw,22px); }
.blink { animation:blink 1s steps(1) infinite; color:var(--acid); }
@keyframes blink { 50% { opacity:0; } }
.enter, .hold, .small { background:transparent; color:var(--acid); border:2px solid var(--acid); font-weight:800; letter-spacing:.08em; cursor:pointer; }
.enter { align-self:flex-start; margin-top:10px; padding:16px 22px; font-size:16px; }
.enter:hover, .hold:hover { background:var(--acid); color:#000; box-shadow:0 0 40px var(--acid); }
.small { padding:4px 10px; font-size:12px; margin-left:10px; border-width:1px; }
.gauge { position:relative; height:28px; border:2px solid var(--paper); margin:26px 0 12px; background:linear-gradient(90deg,#1a1a1a,#1a1a1a 60%,#3a0000); }
.needle { position:absolute; top:0; bottom:0; left:0; width:12%; background:linear-gradient(90deg,var(--acid),var(--red)); transition:width .3s; }
.reading { font-size:clamp(28px,5vw,56px); font-weight:800; }
.reading .dim { font-size:16px; font-weight:400; }
.arena { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 0; border:2px solid #222; margin:20px 0; overflow:hidden; background:radial-gradient(circle at 50% 40%, #151515, #000 70%); }
.face { width:min(260px,60vw); transition:transform .1s; }
.arena.live { border-color:var(--red); }
.taunt { min-height:1.5em; color:var(--red); font-weight:800; text-align:center; padding:0 10px; }
.timer { font-size:clamp(40px,8vw,80px); font-weight:800; }
.hold { width:100%; padding:22px; font-size:18px; user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; }
.hold.down { background:var(--red); border-color:var(--red); color:#000; box-shadow:0 0 50px var(--red); }
.shave-wrap { display:flex; justify-content:center; margin:20px 0; }
#shaveCanvas { width:min(400px,88vw); height:auto; touch-action:none; cursor:none; border:2px solid #222; background:radial-gradient(circle at 50% 40%, #151515, #000 70%); }
.rows { border-top:2px solid var(--paper); }
.row { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid #333; font-size:clamp(14px,1.8vw,19px); transition:padding .2s; }
.row span { color:var(--dim); letter-spacing:.15em; }
.row b { text-align:right; }
.row:hover { background:var(--acid); color:#000; padding-inline:12px; }
.row:hover span { color:#000; }
ol { padding-left:1.6em; font-size:clamp(16px,2vw,22px); line-height:1.6; }
ol li { margin:14px 0; } ol li::marker { color:var(--acid); font-weight:800; }
footer { text-align:center; padding:12vh 6vw 6vh; letter-spacing:.12em; }
kbd { border:1px solid var(--dim); padding:1px 7px; }
.alert { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; }
.alert span { font-size:clamp(40px,9vw,140px); color:#000; background:var(--acid); padding:0 .3em; transform:rotate(-4deg); text-align:center; }
.alert.on { animation:alert 1.8s ease-out; }
@keyframes alert { 0% { opacity:0; background:rgba(255,42,42,.5); } 10% { opacity:1; } 25% { background:rgba(255,42,42,0); } 30% { background:rgba(255,42,42,.4); } 45% { background:rgba(255,42,42,0); } 80% { opacity:1; } 100% { opacity:0; } }
body.shake { animation:shake .5s linear 2; }
@keyframes shake { 0%,100% { transform:none; } 20% { transform:translate(-6px,3px) rotate(-.5deg); } 40% { transform:translate(5px,-4px); } 60% { transform:translate(-4px,-2px) rotate(.5deg); } 80% { transform:translate(4px,4px); } }
body.invert { filter:invert(1) hue-rotate(180deg); }
.reveal { opacity:0; transform:translateX(-40px); transition:opacity .8s, transform .8s; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }