@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Chakra+Petch:wght@500;700&display=swap";:root{--bg-dark:#020205;--panel-bg:#0a0a14d9;--accent-red:#ff2a6d;--accent-neon:#05ffa1;--accent-cyan:#00d9ff;--accent-yellow:#dfff11;--text-main:#e0e0e0;--text-muted:#555c6d;--border-glow:0 0 10px #00d9ff80}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}@keyframes glitch{0%{text-shadow:-2px 0 var(--accent-red), 2px 0 var(--accent-cyan);transform:translate(0)}25%{transform:translate(-2px,2px)}50%{text-shadow:2px 0 var(--accent-red), -2px 0 var(--accent-cyan);transform:translate(2px,-2px)}75%{transform:translate(-2px,-2px)}to{transform:translate(0)}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);width:100vw;height:100vh;font-family:Outfit,sans-serif;position:relative;overflow:hidden}body:before{content:" ";z-index:1000;pointer-events:none;background:linear-gradient(#12101000 50%,#00000040 50%) 0 0/100% 2px,linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f) 0 0/3px 100%;display:block;position:absolute;inset:0}#app{background:radial-gradient(circle,#1a1b26 0%,#020205 100%);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}#camera-container:after{content:"";z-index:5;pointer-events:none;opacity:.5;background-image:linear-gradient(#ff2a6d66 2px,#0000 2px),linear-gradient(90deg,#ff2a6d66 2px,#0000 2px);background-size:60px 60px;width:200%;height:200%;animation:2s linear infinite gridMove;position:absolute;bottom:-50%;left:-50%;transform:perspective(600px)rotateX(75deg)}@keyframes gridMove{0%{transform:perspective(600px)rotateX(75deg)translateY(0)}to{transform:perspective(600px)rotateX(75deg)translateY(60px)}}#stimulus-container{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}#stimulus-video{object-fit:cover;opacity:.4;width:100%;height:100%;transition:opacity .5s}.high-distraction #stimulus-video{opacity:.8}#camera-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}#webcam{object-fit:cover;opacity:.3;width:100%;height:100%;transform:scaleX(-1)}#output-canvas{width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.overlay{z-index:20;pointer-events:none;position:absolute}.glass-panel{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:3px solid var(--accent-red);box-shadow:0 0 15px var(--accent-red), inset 0 0 15px var(--accent-red);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);background:#05050ad9;padding:20px;transition:all .3s}#status-panel{border-color:var(--accent-neon);width:300px;box-shadow:0 0 15px var(--accent-neon), inset 0 0 15px var(--accent-neon);flex-direction:column;gap:12px;display:flex;top:30px;right:30px}.stat-item{border-bottom:1px solid #00d9ff1a;justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.stat-label{text-transform:uppercase;letter-spacing:3px;color:var(--accent-cyan);font-family:Chakra Petch,sans-serif;font-size:.7rem}.stat-value{color:#fff;text-shadow:0 0 10px var(--accent-cyan);font-family:Chakra Petch,sans-serif;font-size:1.8rem;font-weight:700}#timer-circle{width:80px;height:80px;margin:0 auto;position:relative}#warning-container{gap:10px;margin-top:5px;display:flex}.warning-light{background:#333;border-radius:50%;width:12px;height:12px;transition:all .3s;box-shadow:inset 0 0 5px #00000080}.warning-light.active{background:var(--accent-red);box-shadow:0 0 15px var(--accent-red)}#score-container{text-align:right;margin-top:10px}#score-val{color:var(--accent-yellow);text-shadow:0 0 10px var(--accent-yellow)}#gesture-intro-overlay{z-index:50;opacity:0;pointer-events:none;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:absolute;inset:0}#gesture-intro-overlay.active{opacity:1;pointer-events:auto}#intro-gesture-card{text-align:center;opacity:0;transition:all .6s cubic-bezier(.175,.885,.32,1.275);transform:scale(.5)}#gesture-intro-overlay.active #intro-gesture-card{opacity:1;transform:scale(1)}.large-gesture-name{color:var(--accent-neon);text-transform:uppercase;letter-spacing:12px;text-shadow:0 0 20px var(--accent-neon);margin-top:30px;font-family:Chakra Petch,sans-serif;font-size:4rem;animation:2s infinite glitch}#society-overlay{text-align:center;width:75%;bottom:40px;left:50%;transform:translate(-50%)}#society-text{color:var(--accent-cyan);letter-spacing:2px;text-transform:uppercase;min-height:2.5em;text-shadow:0 0 10px var(--accent-cyan);font-family:Chakra Petch,sans-serif;font-size:1.6rem}.success-text{text-shadow:0 0 15px var(--accent-neon);color:var(--accent-neon)!important}#instruction-panel{border-color:var(--accent-cyan);width:250px;box-shadow:0 0 15px var(--accent-cyan), inset 0 0 15px var(--accent-cyan);top:30px;left:30px}#target-gesture-img{width:100px;height:100px;filter:drop-shadow(0 0 10px var(--accent-neon));margin:10px auto;display:block}#gesture-name{text-align:center;text-transform:uppercase;font-size:1.2rem;font-weight:600}#intro-screen,#game-over-screen{z-index:100;text-align:center;pointer-events:auto;background:#000000e6;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex;position:absolute;inset:0}.btn-primary{color:var(--accent-neon);border:2px solid var(--accent-neon);cursor:pointer;text-transform:uppercase;letter-spacing:4px;background:0 0;margin-top:30px;padding:15px 40px;font-family:Chakra Petch,sans-serif;font-size:1.2rem;transition:all .3s}.btn-primary:hover{background:var(--accent-neon);color:#000;box-shadow:0 0 30px var(--accent-neon)}@keyframes shake{0%{transform:translate(1px,1px)rotate(0)}10%{transform:translate(-1px,-2px)rotate(-1deg)}20%{transform:translate(-3px)rotate(1deg)}30%{transform:translate(3px,2px)rotate(0)}40%{transform:translate(1px,-1px)rotate(1deg)}50%{transform:translate(-1px,2px)rotate(-1deg)}60%{transform:translate(-3px,1px)rotate(0)}70%{transform:translate(3px,1px)rotate(-1deg)}80%{transform:translate(-1px,-1px)rotate(1deg)}90%{transform:translate(1px,2px)rotate(0)}to{transform:translate(1px,-2px)rotate(-1deg)}}#feedback-flash{pointer-events:none;z-index:99;opacity:0;background:#ff3b3b4d;transition:opacity .1s;position:absolute;inset:0}.flash-active{opacity:1!important}#loader{z-index:1000;background:#000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:5px solid #333;border-top:5px solid var(--accent-neon);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}