*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #000000;--surface: rgba(18, 18, 42, .85);--surface-solid: #12122a;--surface-2: rgba(26, 26, 58, .85);--border: rgba(42, 42, 90, .6);--text: #e0e0f0;--text-dim: #8888aa;--accent: #6c5ce7;--accent-glow: #a29bfe;--success: #00cec9;--danger: #ff6b6b;--warning: #fdcb6e;--panel-blur: 12px;--pixel-font: "Press Start 2P", monospace}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;height:100vh;overflow:hidden}#app{height:100vh}#join-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#0a0a1a80}#join-rules{text-align:center;margin-bottom:.25rem;color:#000;font-family:var(--pixel-font);font-size:.75rem;line-height:2}#join-form{display:flex;gap:.75rem;padding:1rem 1.5rem;background:repeating-conic-gradient(rgba(108,92,231,.06) 0% 25%,transparent 0% 50%) 0 0 / 4px 4px,var(--surface);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));border:2px solid var(--accent);border-radius:0;box-shadow:4px 4px #6c5ce74d,inset 0 0 20px #6c5ce70d;image-rendering:pixelated}#join-form input{padding:.6rem .8rem;background:repeating-conic-gradient(rgba(162,155,254,.05) 0% 25%,transparent 0% 50%) 0 0 / 3px 3px,#0a0a1ee6;border:2px solid var(--border);border-radius:0;color:var(--text);font-family:var(--pixel-font);font-size:.65rem;width:280px;outline:none;transition:border-color .15s;image-rendering:pixelated}#join-form input::placeholder{color:var(--text-dim);font-family:var(--pixel-font);font-size:.6rem}#join-form input:focus{border-color:var(--accent-glow);box-shadow:0 0 8px #a29bfe4d}#join-form button,#send-btn{padding:.6rem 1.2rem;background:var(--accent);border:2px solid var(--accent-glow);border-radius:0;color:#fff;font-family:var(--pixel-font);font-size:.6rem;cursor:pointer;transition:background .15s,transform .1s;text-transform:uppercase;letter-spacing:1px;image-rendering:pixelated}#join-form button:hover,#send-btn:hover{background:var(--accent-glow);box-shadow:0 0 12px #a29bfe66}#join-form button:active,#send-btn:active{transform:translate(2px,2px);box-shadow:none}#join-error{color:var(--danger);font-family:var(--pixel-font);font-size:.55rem}#join-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1.5rem}#join-screen h1{font-size:3rem;color:var(--accent-glow);text-shadow:0 0 40px rgba(108,92,231,.3)}#join-screen p{color:var(--text-dim);font-size:1.1rem}.hidden{display:none!important}#game-view{position:relative;width:100vw;height:100vh;overflow:hidden}#pixi-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}#dom-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}#dom-overlay>*{pointer-events:auto}#input-area{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);width:400px;max-width:calc(100vw - 2rem)}#input-form{display:flex;gap:.5rem;padding:.75rem;background:repeating-conic-gradient(rgba(108,92,231,.06) 0% 25%,transparent 0% 50%) 0 0 / 4px 4px,var(--surface);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));border:2px solid var(--accent);border-radius:0;box-shadow:4px 4px #6c5ce74d,inset 0 0 20px #6c5ce70d;image-rendering:pixelated}#message-input{flex:1;padding:.5rem .7rem;background:repeating-conic-gradient(rgba(162,155,254,.05) 0% 25%,transparent 0% 50%) 0 0 / 3px 3px,#0a0a1ee6;border:2px solid var(--border);border-radius:0;color:var(--text);font-family:var(--pixel-font);font-size:.6rem;outline:none;transition:border-color .15s;image-rendering:pixelated}#message-input::placeholder{color:var(--text-dim);font-family:var(--pixel-font);font-size:.55rem;letter-spacing:2px}#message-input:focus{border-color:var(--accent-glow);box-shadow:0 0 8px #a29bfe4d}#message-input.input-error{border-color:var(--danger);box-shadow:0 0 8px #ff6b6b66;animation:input-shake .4s ease}@keyframes input-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-3px)}40%,80%{transform:translate(3px)}}#sound-controls{position:absolute;bottom:1rem;left:1rem;display:flex;align-items:center;gap:.5rem}#volume-slider{width:70px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;opacity:.8;transition:opacity .2s}#volume-slider:hover{opacity:1}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text);cursor:pointer}#volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--text);border:none;cursor:pointer}#sound-controls button{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));color:var(--text);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}#sound-controls button:hover{background:var(--surface-2)}#reset-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:overlayIn .3s ease}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}#reset-content{text-align:center;padding:3rem 4rem;background:var(--surface);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));border:2px solid var(--danger);border-radius:16px;box-shadow:0 0 60px #ff6b6b33;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}#reset-content h2{font-size:2rem;color:var(--danger);margin-bottom:.5rem}#reset-content p{color:var(--text-dim);font-size:1.1rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}