:root{--neon-yellow: #FFE600;--neon-pink: #FF0080;--neon-blue: #00D4FF;--neon-green: #39FF14;--neon-orange: #FF5500;--neon-purple: #BF00FF;--bg: #0D0D0D;--wall: #111111;--surface: rgba(20, 20, 20, .9);--text: #F5F5F5;--muted: #888}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Outfit,sans-serif;background-color:#131313;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(255,255,255,.008) 60px,rgba(255,255,255,.008) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.005) 60px,rgba(255,255,255,.005) 61px);color:var(--text);overscroll-behavior:none;min-height:100vh;-webkit-font-smoothing:antialiased}.spray-wrap{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden;clip-path:inset(0)}.spray{position:absolute;border-radius:50%;filter:blur(55px);mix-blend-mode:screen;animation:drift 10s ease-in-out infinite alternate}.spray-a{width:500px;height:500px;background:var(--neon-yellow);opacity:.12;top:-120px;left:-80px;animation-delay:0s}.spray-b{width:400px;height:400px;background:var(--neon-pink);opacity:.1;top:40%;right:-100px;animation-delay:-3s}.spray-c{width:280px;height:280px;background:var(--neon-blue);opacity:.08;bottom:-160px;left:30%;animation-delay:-6s}@keyframes drift{0%{transform:translate(0) scale(1)}to{transform:translate(30px,-20px) scale(1.08)}}@keyframes char-idle{0%{transform:translateY(0) translate(0) rotate(0)}25%{transform:translateY(-1.5px) translate(-1px) rotate(-.5deg)}50%{transform:translateY(1.5px) translate(1px) rotate(.8deg)}75%{transform:translateY(-1px) translate(.5px) rotate(-.5deg)}to{transform:translateY(0) translate(0) rotate(0)}}.idle-char{display:inline-block;animation:char-idle .8s step-end infinite;will-change:transform}@keyframes choppy-anim{0%{transform:translate(0) scale(1) skew(-10deg)}20%{transform:translate(-8px,6px) scale(1.02) skew(-13deg)}40%{transform:translate(10px,-5px) scale(.97) skew(-7deg)}60%{transform:translate(-6px,-8px) scale(1.03) skew(-12deg)}80%{transform:translate(7px,7px) scale(.99) skew(-8deg)}to{transform:translate(0) scale(1) skew(-10deg)}}.choppy-brush{animation:choppy-anim 1.2s step-end infinite;will-change:transform}.font-tag{font-family:Black Han Sans,sans-serif;letter-spacing:.02em}.font-marker{font-family:Jua,sans-serif}.graffiti-title{font-family:Black Han Sans,sans-serif;letter-spacing:-.01em;line-height:.9;text-transform:uppercase;display:inline-block;transform:skew(-4deg);transform-origin:center bottom}.stroke-yellow{color:#ffe600;-webkit-text-stroke:3px #000;text-shadow:2px 2px 0 #000,4px 4px 0 #FF5500,5px 5px 0 #FF5500,6px 6px 0 #000,7px 7px 0 #000,0 0 40px rgba(255,230,0,.35);display:inline-block}.stroke-pink{color:#ff0080;-webkit-text-stroke:3px #000;text-shadow:2px 2px 0 #000,4px 4px 0 #7700CC,5px 5px 0 #7700CC,6px 6px 0 #000,7px 7px 0 #000,0 0 40px rgba(255,0,128,.35);display:inline-block}.stroke-blue{color:#00d4ff;-webkit-text-stroke:3px #000;text-shadow:2px 2px 0 #000,4px 4px 0 #007700,5px 5px 0 #007700,6px 6px 0 #000,7px 7px 0 #000,0 0 40px rgba(0,212,255,.35);display:inline-block}.stroke-green{color:#39ff14;-webkit-text-stroke:3px #000;text-shadow:2px 2px 0 #000,4px 4px 0 #006644,5px 5px 0 #006644,6px 6px 0 #000,7px 7px 0 #000,0 0 40px rgba(57,255,20,.35);display:inline-block}.stroke-orange{color:#f50;-webkit-text-stroke:3px #000;text-shadow:2px 2px 0 #000,4px 4px 0 #990000,5px 5px 0 #990000,6px 6px 0 #000,7px 7px 0 #000,0 0 40px rgba(255,85,0,.35);display:inline-block}.spray-label{font-family:Jua,sans-serif;font-size:.875rem;color:var(--neon-yellow);letter-spacing:.04em;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}.spray-label:before{content:"//";opacity:.5}.g-card{background:var(--surface);border:2px solid var(--neon-yellow);border-radius:4px;padding:1.5rem;box-shadow:4px 4px 0 var(--neon-pink),0 0 30px #ffe60014;transform:rotate(-.4deg);position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .15s,box-shadow .15s}.g-card:hover{transform:rotate(0) translateY(-2px);box-shadow:6px 6px 0 var(--neon-pink),0 0 40px #ffe60026}.g-card-blue{border-color:var(--neon-blue);box-shadow:4px 4px 0 var(--neon-purple),0 0 30px #00d4ff14}.g-card-blue:hover{box-shadow:6px 6px 0 var(--neon-purple),0 0 40px #00d4ff26}.g-card-green{border-color:var(--neon-green);box-shadow:4px 4px 0 var(--neon-blue),0 0 30px #39ff1414}.g-card-orange{border-color:var(--neon-orange);box-shadow:4px 4px 0 var(--neon-yellow),0 0 30px #ff550014}.g-card:before{content:"★";position:absolute;top:-12px;right:12px;font-size:1.25rem;color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow)}.g-card-blue:before{color:var(--neon-blue);text-shadow:0 0 10px var(--neon-blue)}.g-card-green:before{color:var(--neon-green);text-shadow:0 0 10px var(--neon-green)}.g-card-orange:before{color:var(--neon-orange);text-shadow:0 0 10px var(--neon-orange)}button{cursor:pointer;border:none;font-family:Black Han Sans,sans-serif;letter-spacing:.02em;font-size:1.125rem;text-transform:uppercase;border-radius:3px;padding:.75rem 1.5rem;transition:transform .1s,box-shadow .1s;position:relative;-webkit-tap-highlight-color:transparent}button:active{transform:translate(3px,3px)!important;box-shadow:none!important}button:disabled{opacity:.35;cursor:not-allowed;transform:none!important}.btn-spray-yellow{background:var(--neon-yellow);color:#000;box-shadow:4px 4px 0 var(--neon-pink)}.btn-spray-yellow:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--neon-pink)}.btn-spray-green{background:var(--neon-green);color:#000;box-shadow:4px 4px 0 var(--neon-blue)}.btn-spray-green:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--neon-blue)}.btn-spray-orange{background:var(--neon-orange);color:#000;box-shadow:4px 4px 0 var(--neon-yellow)}.btn-spray-orange:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--neon-yellow)}.btn-spray-blue{background:var(--neon-blue);color:#000;box-shadow:4px 4px 0 var(--neon-purple)}.btn-spray-blue:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--neon-purple)}.btn-spray-pink{background:var(--neon-pink);color:#fff;box-shadow:4px 4px 0 var(--neon-purple)}.btn-spray-pink:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--neon-purple)}.btn-outline{background:transparent;color:var(--neon-yellow);border:2px solid var(--neon-yellow);box-shadow:3px 3px 0 var(--neon-yellow)}.btn-outline:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--neon-yellow)}input[type=text],input[type=password]{background:#ffffff0d;border:2px solid rgba(255,230,0,.3);color:var(--text);padding:.75rem 1rem;border-radius:3px;outline:none;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;width:100%;transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--muted);font-weight:400}input:focus{border-color:var(--neon-yellow);box-shadow:0 0 0 3px #ffe60026,3px 3px 0 var(--neon-pink)}input[type=range]{-webkit-appearance:none;height:5px;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:3px;background:var(--neon-yellow);box-shadow:2px 2px 0 var(--neon-pink);cursor:pointer}.container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}.room-row{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;border:1px solid rgba(255,230,0,.15);border-radius:3px;cursor:pointer;transition:all .15s;gap:1rem;background:#ffffff05}.room-row:hover{background:#ffe60012;border-color:var(--neon-yellow)}.room-row.selected{background:#ffe6001a;border-color:var(--neon-yellow);box-shadow:3px 3px 0 var(--neon-pink)}.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .625rem;border-radius:2px;font-family:Black Han Sans,sans-serif;font-size:.9375rem;letter-spacing:.02em}.tag-yellow{background:#ffe60026;border:1px solid var(--neon-yellow);color:var(--neon-yellow)}.tag-pink{background:#ff008026;border:1px solid var(--neon-pink);color:var(--neon-pink)}.tag-blue{background:#00d4ff26;border:1px solid var(--neon-blue);color:var(--neon-blue)}.tag-green{background:#39ff1426;border:1px solid var(--neon-green);color:var(--neon-green)}.tag-orange{background:#ff550026;border:1px solid var(--neon-orange);color:var(--neon-orange)}.alert-error{background:#ff00801f;border:2px solid var(--neon-pink);color:var(--neon-pink);padding:.75rem 1rem;border-radius:3px;font-family:Jua,sans-serif;font-size:1.125rem;box-shadow:3px 3px #ff00804d;animation:shake .35s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px) rotate(-1deg)}75%{transform:translate(6px) rotate(1deg)}}.shake{animation:shake .4s ease}@keyframes guessCorrectFlash{0%{box-shadow:0 0 0 var(--neon-green)}50%{box-shadow:0 0 40px var(--neon-green)}to{box-shadow:0 0 0 var(--neon-green)}}.guess-correct-flash{border-color:var(--neon-green)!important;animation:guessCorrectFlash .6s ease}.toolbar{width:100%;max-width:800px;display:flex;align-items:center;gap:.75rem;background:#0a0a0ae6;border:2px solid rgba(255,230,0,.2);padding:.75rem 1rem;border-radius:4px;margin-bottom:.875rem;overflow-x:auto;flex-wrap:wrap;box-shadow:3px 3px #ff00804d}.spray-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s,box-shadow .12s;flex-shrink:0;padding:0}.spray-swatch:hover{transform:scale(1.25) rotate(5deg)}.spray-swatch.active{border-color:#fff;box-shadow:0 0 0 3px currentColor,0 0 12px currentColor;transform:scale(1.15)}.tool-btn{width:38px!important;height:38px!important;border-radius:3px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#ffffff0f!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important;flex-shrink:0;font-size:0!important;transition:all .12s!important}.tool-btn:hover{background:#ffe6001f!important;border-color:var(--neon-yellow)!important}.tool-btn.active{background:#ffe60026!important;border-color:var(--neon-yellow)!important}.tool-btn-danger{background:#ff00801f!important;border-color:#ff00804d!important}.tool-btn-danger:hover{background:#ff008033!important;border-color:var(--neon-pink)!important}.divider-v{width:1px;height:28px;background:#ffffff1a;flex-shrink:0}.canvas-wrapper{width:100%;max-width:800px;border-radius:3px;overflow:hidden;border:3px solid var(--neon-yellow);box-shadow:6px 6px 0 var(--neon-pink),0 0 40px #ffe6001f}.drawing-card{background:#0f0f0ff2;border:2px solid var(--neon-purple);border-radius:3px;overflow:hidden;box-shadow:4px 4px 0 var(--neon-pink),0 0 20px #bf00ff1a;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;transform:rotate(-.3deg);animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both}.drawing-card:nth-child(2n){transform:rotate(.4deg)}.drawing-card:hover{transform:rotate(0) translateY(-4px) scale(1.01);box-shadow:6px 6px 0 var(--neon-pink),0 0 30px #bf00ff33}.drawing-card-header{padding:.625rem 1rem;background:#bf00ff1a;border-bottom:1px solid rgba(191,0,255,.3);font-family:Jua,sans-serif;font-size:1.125rem;color:var(--neon-purple);text-align:center}.drawing-card-body{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:.5rem;min-height:160px}.lang-btn{position:fixed!important;top:1rem!important;right:1rem!important;z-index:1000;background:#000c!important;color:var(--neon-yellow)!important;border:2px solid var(--neon-yellow)!important;padding:.4rem .875rem!important;border-radius:3px!important;font-family:Black Han Sans,sans-serif!important;font-size:1rem!important;letter-spacing:.06em!important;box-shadow:3px 3px 0 var(--neon-pink)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}.lang-btn:hover{transform:translate(-1px,-1px)!important;box-shadow:4px 4px 0 var(--neon-pink)!important}.topic-display{text-align:center;padding:1.25rem 2rem;background:#ffe6000d;border:2px solid var(--neon-yellow);border-radius:3px;box-shadow:4px 4px 0 var(--neon-pink),0 0 30px #ffe6001a;animation:flicker 4s ease-in-out infinite}@keyframes flicker{0%,to{box-shadow:4px 4px 0 var(--neon-pink),0 0 30px #ffe6001a}92%{box-shadow:4px 4px 0 var(--neon-pink),0 0 30px #ffe6001a}93%{box-shadow:4px 4px 0 var(--neon-pink),0 0 60px #ffe6004d}94%{box-shadow:4px 4px 0 var(--neon-pink),0 0 10px #ffe6000d}95%{box-shadow:4px 4px 0 var(--neon-pink),0 0 50px #ffe60040}}.drip{display:inline-block;position:relative}.drip:after{content:"";position:absolute;bottom:-14px;left:50%;transform:translate(-50%);width:6px;height:18px;background:var(--neon-yellow);border-radius:0 0 50% 50%;opacity:.7}@keyframes sprayIn{0%{opacity:0;transform:scale(1.3) rotate(-3deg);filter:blur(8px)}to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.85) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(-.3deg)}}@keyframes tagSlide{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes wiggle{0%,to{transform:rotate(-.4deg)}50%{transform:rotate(.4deg)}}.animate-spray{animation:sprayIn .5s cubic-bezier(.34,1.56,.64,1) both}.animate-tag{animation:tagSlide .4s ease both}.stagger>*:nth-child(1){animation:sprayIn .5s .05s cubic-bezier(.34,1.56,.64,1) both}.stagger>*:nth-child(2){animation:sprayIn .5s .12s cubic-bezier(.34,1.56,.64,1) both}.stagger>*:nth-child(3){animation:sprayIn .5s .19s cubic-bezier(.34,1.56,.64,1) both}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--neon-yellow);border-radius:0}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}@media (max-width: 640px){.container{padding:1rem .875rem}}