:root{--black: #000000;--white: #FFFFFF;--gray: #333333;--dark-gray: #1a1a1a;--accent-red: #FF0000;--accent-blue: #00FFFF;--accent-green: #00FF00;--accent-yellow: #FFFF00;--accent-purple: #FF00FF;font-family:Courier New,Courier,monospace;line-height:1.2;font-weight:700;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;background-color:var(--black);color:var(--white);min-height:100vh;overflow:hidden;font-family:Courier New,monospace}h1,h2,h3{font-weight:900;text-transform:uppercase;letter-spacing:.1em}h1{font-size:3rem;text-shadow:4px 4px 0 var(--accent-red)}button{font-family:Courier New,monospace;font-size:1rem;font-weight:900;text-transform:uppercase;padding:1rem 2rem;border:4px solid var(--white);background-color:var(--black);color:var(--white);cursor:pointer;transition:none;box-shadow:6px 6px 0 var(--white);letter-spacing:.1em}button:hover{background-color:var(--white);color:var(--black);border-color:var(--white)}button:active{box-shadow:2px 2px 0 var(--white);transform:translate(4px,4px)}input{font-family:Courier New,monospace;font-size:1rem;font-weight:700;padding:.75rem;border:4px solid var(--white);background-color:var(--black);color:var(--white);outline:none}input:focus{background-color:var(--gray)}.game-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--black);overflow:hidden}.video-background{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.3;filter:blur(2px);z-index:0}.video-background iframe{width:100%;height:100%;border:none}.game-overlay{position:relative;z-index:1;width:100%;height:100%;pointer-events:none}.note-highway{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:600px;height:100%;perspective:1000px;pointer-events:none}.highway-container{position:relative;width:100%;height:100%;transform:rotateX(45deg);transform-origin:bottom center}.lanes{position:absolute;bottom:0;width:100%;height:100%;display:flex;justify-content:space-between}.lane{flex:1;border-left:4px solid rgba(255,255,255,.3);border-right:4px solid rgba(255,255,255,.3);position:relative;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.05) 100%)}.lane:first-child{border-left:4px solid var(--white)}.lane:last-child{border-right:4px solid var(--white)}.hit-zone{position:absolute;bottom:100px;left:0;width:100%;height:20px;border:4px solid var(--white);background:#ffffff1a;z-index:10}.note{position:absolute;left:0;width:calc(100% - 8px);height:60px;border:4px solid;background:var(--black);box-shadow:0 0 20px;will-change:top;pointer-events:none;margin:0 4px}.note.lane-0{border-color:var(--accent-red);box-shadow:0 0 20px var(--accent-red);background:linear-gradient(180deg,var(--black) 0%,rgba(255,0,0,.2) 100%)}.note.lane-1{border-color:var(--accent-blue);box-shadow:0 0 20px var(--accent-blue);background:linear-gradient(180deg,var(--black) 0%,rgba(0,255,255,.2) 100%)}.note.lane-2{border-color:var(--accent-green);box-shadow:0 0 20px var(--accent-green);background:linear-gradient(180deg,var(--black) 0%,rgba(0,255,0,.2) 100%)}.note.lane-3{border-color:var(--accent-yellow);box-shadow:0 0 20px var(--accent-yellow);background:linear-gradient(180deg,var(--black) 0%,rgba(255,255,0,.2) 100%)}.note.lane-4{border-color:var(--accent-purple);box-shadow:0 0 20px var(--accent-purple);background:linear-gradient(180deg,var(--black) 0%,rgba(255,0,255,.2) 100%)}.key-indicators{position:absolute;bottom:80px;left:50%;transform:translate(-50%);width:600px;display:flex;justify-content:space-between;z-index:20;pointer-events:none}.key-indicator{flex:1;height:80px;border:4px solid;background:transparent;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;transition:all .05s;margin:0 2px}.key-indicator.lane-0{border-color:var(--accent-red);color:var(--accent-red)}.key-indicator.lane-1{border-color:var(--accent-blue);color:var(--accent-blue)}.key-indicator.lane-2{border-color:var(--accent-green);color:var(--accent-green)}.key-indicator.lane-3{border-color:var(--accent-yellow);color:var(--accent-yellow)}.key-indicator.lane-4{border-color:var(--accent-purple);color:var(--accent-purple)}.key-indicator.active{background:currentColor;color:var(--black);box-shadow:0 0 30px currentColor}.hud{position:absolute;top:20px;left:20px;right:20px;z-index:30;pointer-events:none}.score{font-size:3rem;font-weight:900;text-shadow:4px 4px 0 var(--accent-red);letter-spacing:.1em}.combo{font-size:2rem;color:var(--accent-yellow);text-shadow:3px 3px 0 var(--black);margin-top:10px}.multiplier{color:var(--accent-green);font-size:1.5rem}.menu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--black);border:6px solid var(--white);padding:3rem;box-shadow:12px 12px 0 var(--white);z-index:100;pointer-events:all;min-width:600px}.menu h1{margin-bottom:2rem;text-align:center}.menu-input{margin-bottom:1.5rem}.menu-input label{display:block;margin-bottom:.5rem;text-transform:uppercase;font-weight:900;letter-spacing:.1em}.menu-input input{width:100%}.menu-buttons{display:flex;gap:1rem;margin-top:2rem}.menu-buttons button{flex:1}.hit-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;font-weight:900;text-shadow:4px 4px 0 var(--black);animation:feedback .5s ease-out forwards;z-index:40;pointer-events:none}.hit-feedback.perfect{color:var(--accent-green)}.hit-feedback.good{color:var(--accent-blue)}.hit-feedback.miss{color:var(--accent-red)}.hit-feedback.starpower{color:var(--accent-blue);text-shadow:0 0 20px var(--accent-blue);font-size:3rem}@keyframes feedback{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-100%) scale(1.5)}}@keyframes pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.3)}}@keyframes arenaShake{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-.4px,-.4px) rotate(-.1deg)}20%{transform:translate(.4px,.4px) rotate(.1deg)}30%{transform:translate(-.4px,.4px) rotate(-.1deg)}40%{transform:translate(.4px,-.4px) rotate(.1deg)}50%{transform:translate(-.4px,-.4px) rotate(-.1deg)}60%{transform:translate(.4px,.4px) rotate(.1deg)}70%{transform:translate(-.4px,.4px) rotate(-.1deg)}80%{transform:translate(.4px,-.4px) rotate(.1deg)}90%{transform:translate(-.4px,-.4px) rotate(-.1deg)}}@keyframes arenaGlow{0%,to{box-shadow:0 0 20px #00ffff80,0 0 40px #00ffff4d,0 0 60px #0ff3,inset 0 0 20px #00ffff1a}50%{box-shadow:0 0 40px #0ffc,0 0 80px #0ff9,0 0 120px #0ff6,inset 0 0 40px #0ff3}}@keyframes arenaFlash{0%,to{opacity:0}10%,30%,50%,70%,90%{opacity:.1}20%,40%,60%,80%{opacity:0}}@keyframes arenaPulse{0%,to{transform:scale(1);filter:brightness(1.5) saturate(2) hue-rotate(0deg)}50%{transform:scale(1.02);filter:brightness(1.8) saturate(2.5) hue-rotate(10deg)}}#root{width:100vw;height:100vh;margin:0;padding:0}