:root{--color-primary: #6c5ce7;--color-primary-light: #a29bfe;--color-primary-dark: #5541d7;--color-primary-edge: #4834c7;--color-primary-glow: rgba(108, 92, 231, .4);--color-secondary: #00cec9;--color-secondary-light: #55efc4;--color-secondary-dark: #00b5b0;--color-secondary-edge: #009b97;--color-secondary-glow: rgba(0, 206, 201, .4);--color-success: #00b894;--color-success-light: #55efc4;--color-success-dark: #009775;--color-success-edge: #007d60;--color-danger: #ff7675;--color-danger-light: #fab1a0;--color-danger-dark: #e05554;--color-danger-edge: #c74544;--color-accent: #fdcb6e;--color-accent-light: #ffeaa7;--color-accent-dark: #e0a800;--color-accent-edge: #c79100;--bg-dark: #1a1a2e;--bg-darker: #0f0f1a;--bg-panel: #2d2d44;--bg-panel-light: #3a3a5c;--bg-card: #3a3a5c;--bg-card-hover: #4a4a6c;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .75);--text-muted: rgba(255, 255, 255, .5);--text-accent: #fdcb6e;--border-color: rgba(255, 255, 255, .1);--border-light: rgba(255, 255, 255, .15);--border-highlight: rgba(255, 255, 255, .2);--shadow-dark: rgba(0, 0, 0, .6);--shadow-medium: rgba(0, 0, 0, .4);--shadow-light: rgba(0, 0, 0, .2);--shadow-3d-dark: #1a1a3a;--shadow-3d-panel: #1e1e36;--transition-fast: .1s ease;--transition-medium: .2s ease;--transition-slow: .3s ease;--transition-bounce: .3s cubic-bezier(.34, 1.56, .64, 1);--transition-3d: .15s cubic-bezier(.25, .46, .45, .94);--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--depth-small: 3px;--depth-medium: 5px;--depth-large: 8px}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:var(--font-family);background:linear-gradient(135deg,var(--bg-darker) 0%,var(--bg-dark) 50%,#1e1e3a 100%);overflow:hidden;color:var(--text-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0000004d;border-radius:5px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 100%);border-radius:5px;border:2px solid rgba(0,0,0,.3);box-shadow:inset 0 1px #ffffff1a}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%)}::-webkit-scrollbar-corner{background:transparent}#game-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}#game-container canvas{display:block}#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none}#ui-overlay>*{pointer-events:auto}.ui-panel{pointer-events:auto}.hidden{display:none!important}.btn,.btn-3d,.room-card,.room-item,.tab-btn,.icon-btn,.close-btn,.waiting-player-item,[onclick],[data-action],.clickable{cursor:pointer}.panel-3d{background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 100%);border-radius:16px;border:2px solid var(--border-light);box-shadow:0 var(--depth-medium) 0 var(--shadow-3d-dark),0 calc(var(--depth-medium) + 10px) 30px var(--shadow-dark),inset 0 1px #ffffff1a,inset 0 -1px #0003;position:relative}.panel-3d:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.03);border-radius:10px;pointer-events:none}.card-3d{background:linear-gradient(180deg,var(--bg-card) 0%,#2a2a4a 100%);border-radius:12px;border:2px solid var(--border-light);box-shadow:0 4px 0 var(--shadow-3d-dark),0 8px 16px var(--shadow-medium);transform:translateY(0);transition:transform var(--transition-3d),box-shadow var(--transition-3d),border-color var(--transition-3d);position:relative;overflow:hidden}.card-3d:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}.card-3d:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:0 7px 0 var(--shadow-3d-dark),0 14px 24px var(--shadow-dark),0 0 20px var(--color-primary-glow)}.card-3d:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow-3d-dark),0 4px 8px var(--shadow-medium)}.btn-3d{position:relative;display:inline-block;padding:0;border:none;background:transparent;cursor:pointer;outline-offset:4px;transition:filter var(--transition-medium);font-family:var(--font-family);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn-3d:focus{outline:none}.btn-3d:focus-visible{outline:3px solid var(--color-secondary-light);outline-offset:4px}.btn-3d__shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:var(--shadow-dark);transform:translateY(2px);filter:blur(4px);transition:transform .5s cubic-bezier(.3,.7,.4,1)}.btn-3d__edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:linear-gradient(to left,var(--color-primary-edge) 0%,var(--color-primary-dark) 8%,var(--color-primary-dark) 92%,var(--color-primary-edge) 100%)}.btn-3d__front{display:block;position:relative;padding:14px 32px;border-radius:12px;font-size:1rem;font-weight:700;color:var(--text-primary);background:linear-gradient(180deg,var(--color-primary-light) 0%,var(--color-primary) 30%,var(--color-primary) 100%);transform:translateY(-4px);transition:transform .5s cubic-bezier(.3,.7,.4,1);text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(0,0,0,.2)}.btn-3d:hover{filter:brightness(110%)}.btn-3d:hover .btn-3d__front{transform:translateY(-6px);transition:transform .2s cubic-bezier(.3,.7,.4,1.5)}.btn-3d:hover .btn-3d__shadow{transform:translateY(4px);transition:transform .2s cubic-bezier(.3,.7,.4,1.5)}.btn-3d:active .btn-3d__front{transform:translateY(-2px);transition:transform 34ms}.btn-3d:active .btn-3d__shadow{transform:translateY(1px);transition:transform 34ms}.btn-3d:disabled{filter:grayscale(50%) brightness(70%);cursor:not-allowed}.btn-3d:disabled .btn-3d__front{transform:translateY(-2px)}.btn-3d--secondary .btn-3d__edge{background:linear-gradient(to left,var(--color-secondary-edge) 0%,var(--color-secondary-dark) 8%,var(--color-secondary-dark) 92%,var(--color-secondary-edge) 100%)}.btn-3d--secondary .btn-3d__front{background:linear-gradient(180deg,var(--color-secondary-light) 0%,var(--color-secondary) 30%,var(--color-secondary) 100%)}.btn-3d--success .btn-3d__edge{background:linear-gradient(to left,var(--color-success-edge) 0%,var(--color-success-dark) 8%,var(--color-success-dark) 92%,var(--color-success-edge) 100%)}.btn-3d--success .btn-3d__front{background:linear-gradient(180deg,var(--color-success-light) 0%,var(--color-success) 30%,var(--color-success) 100%)}.btn-3d--accent .btn-3d__edge{background:linear-gradient(to left,var(--color-accent-edge) 0%,var(--color-accent-dark) 8%,var(--color-accent-dark) 92%,var(--color-accent-edge) 100%)}.btn-3d--accent .btn-3d__front{background:linear-gradient(180deg,var(--color-accent-light) 0%,var(--color-accent) 30%,var(--color-accent) 100%);color:#1a1a2e}.btn-3d--danger .btn-3d__edge{background:linear-gradient(to left,var(--color-danger-edge) 0%,var(--color-danger-dark) 8%,var(--color-danger-dark) 92%,var(--color-danger-edge) 100%)}.btn-3d--danger .btn-3d__front{background:linear-gradient(180deg,var(--color-danger-light) 0%,var(--color-danger) 30%,var(--color-danger) 100%)}.btn-3d--large .btn-3d__front{padding:18px 50px;font-size:1.2rem;letter-spacing:2px}.btn-3d--large .btn-3d__shadow,.btn-3d--large .btn-3d__edge,.btn-3d--large .btn-3d__front{border-radius:14px}.btn-3d--small .btn-3d__front{padding:10px 20px;font-size:.85rem;letter-spacing:.5px}.btn-3d--small .btn-3d__shadow,.btn-3d--small .btn-3d__edge,.btn-3d--small .btn-3d__front{border-radius:8px}.btn-3d--full{width:100%}.btn-3d--full .btn-3d__front{text-align:center}.icon-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 100%);border:2px solid var(--border-light);border-radius:12px;color:var(--text-secondary);font-size:18px;cursor:pointer;transition:all var(--transition-3d);box-shadow:0 3px 0 var(--shadow-3d-dark),0 6px 12px var(--shadow-medium),inset 0 1px #ffffff1a;transform:translateY(0)}.icon-btn:hover{background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-color:var(--color-primary);color:var(--text-primary);transform:translateY(-2px);box-shadow:0 5px 0 var(--shadow-3d-dark),0 10px 20px var(--shadow-dark),0 0 20px var(--color-primary-glow)}.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow-3d-dark),0 3px 6px var(--shadow-medium)}.settings-icon:hover{transform:translateY(-2px) rotate(90deg)}.tab-container{display:flex;gap:8px;background:#0000004d;padding:8px;border-radius:14px;border:2px solid var(--border-color);box-shadow:inset 0 2px 4px #0000004d}.tab-btn{flex:1;padding:12px 20px;font-size:.9rem;font-weight:600;font-family:var(--font-family);color:var(--text-muted);background:transparent;border:none;border-radius:10px;cursor:pointer;transition:all var(--transition-3d);text-transform:uppercase;letter-spacing:.5px}.tab-btn:hover{color:var(--text-secondary);background:#ffffff0d}.tab-btn.active{color:var(--text-primary);background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);box-shadow:0 3px 0 var(--color-primary-edge),0 6px 15px var(--color-primary-glow),inset 0 1px #fff3;transform:translateY(-2px)}.game-input,.form-group input[type=text],.form-group input[type=password],.form-group select{width:100%;padding:16px 20px;font-size:1rem;font-family:var(--font-family);color:var(--text-primary);background:linear-gradient(180deg,#00000080,#0000004d);border:2px solid var(--border-color);border-radius:12px;transition:all var(--transition-medium);box-shadow:inset 0 4px 8px #0006,inset 0 1px 2px #0003,0 1px #ffffff0d}.game-input:focus,.form-group input[type=text]:focus,.form-group input[type=password]:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:inset 0 4px 8px #0006,inset 0 1px 2px #0003,0 0 0 3px var(--color-primary-glow),0 0 20px var(--color-primary-glow)}.game-input::placeholder,.form-group input::placeholder{color:var(--text-muted)}.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a29bfe' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}.form-group select option{background:var(--bg-dark);color:var(--text-primary);padding:10px}#menu-ui{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center top,rgba(108,92,231,.15) 0%,transparent 50%),linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-darker) 100%);display:flex;justify-content:center;align-items:center;z-index:200}.menu-container{text-align:center;max-width:420px;width:90%;padding:45px 40px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 50%,var(--bg-dark) 100%);border:3px solid var(--border-light);border-radius:24px;box-shadow:0 8px 0 var(--shadow-3d-panel),0 20px 60px var(--shadow-dark),inset 0 1px #ffffff26,inset 0 -2px #0000004d;position:relative}.menu-container:before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.03);border-radius:16px;pointer-events:none}.game-title{font-size:3.5rem;font-weight:900;margin-bottom:10px;text-transform:uppercase;letter-spacing:6px;background:linear-gradient(180deg,#fff 0%,var(--color-primary-light) 50%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 4px 0 var(--color-primary-dark)) drop-shadow(0 6px 10px rgba(0,0,0,.5))}.game-title span{background:linear-gradient(180deg,#fff 0%,var(--color-accent-light) 50%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:35px;letter-spacing:3px;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.3)}.input-group{margin-bottom:30px;text-align:left}.input-label{display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}.menu-buttons{display:flex;flex-direction:column;gap:15px}.character-selector{margin-bottom:25px;text-align:left}.character-carousel{display:flex;align-items:center;gap:8px;margin-top:10px}.carousel-btn{width:32px;height:32px;border:2px solid var(--border-light);border-radius:50%;background:var(--bg-card);color:var(--text-primary);font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;flex-shrink:0}.carousel-btn:hover{background:var(--color-primary);border-color:var(--color-primary);transform:scale(1.1)}.carousel-btn:active{transform:scale(.95)}.carousel-viewport{flex:1;overflow:visible;border-radius:12px}.carousel-track{display:flex;gap:10px;justify-content:center}.character-card{min-width:80px;padding:10px 8px;background:var(--bg-card);border:2px solid var(--border-light);border-radius:10px;text-align:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.character-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}.character-card.active{border-color:var(--color-primary);background:linear-gradient(180deg,rgba(108,92,231,.2) 0%,var(--bg-card) 100%);box-shadow:0 0 15px var(--color-primary-glow)}.character-preview{width:60px;height:60px;margin:0 auto 6px;border-radius:8px;background-size:cover;background-position:center top;border:2px solid var(--border-color);background-color:var(--bg-darker)}.character-preview.soldier{background-image:url(/assets/characters/previews/soldier.png);background-color:#3a4a35}.character-preview.hazmat{background-image:url(/assets/characters/previews/hazmat.png);background-color:#4a4020}.character-preview.redhead{background-image:url(/assets/characters/previews/redhead.png);background-color:#4a2a20}.character-name{display:block;font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-weight:600}#lobby-redirect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#0009;z-index:600;pointer-events:none}#lobby-redirect-overlay.hidden{display:none!important}#lobby-redirect-scroll{position:relative;min-width:280px;max-width:400px;transform-origin:center center}#lobby-redirect-scroll.opening{animation:scroll-unroll .4s cubic-bezier(.34,1.56,.64,1) forwards}#lobby-redirect-scroll.closing{animation:scroll-roll .3s ease-in forwards}.redirect-content{background:linear-gradient(180deg,#d4b896,#c9a882 20%,#d4b896,#c9a882 80%,#d4b896);border-left:3px solid #5c3d1e;border-right:3px solid #5c3d1e;padding:20px 24px;font-family:Cinzel,serif;text-align:center}.redirect-title{font-size:1.1rem;font-weight:700;color:#2c1810;margin-bottom:8px;text-shadow:0 1px 0 rgba(255,255,255,.3)}.redirect-message{font-size:.8rem;color:#5c3d1e;margin-bottom:12px}.redirect-countdown{font-size:1.5rem;font-weight:900;color:#a32a1d;animation:countdown-pulse 1s ease-in-out infinite}#lobby-ui{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center top,rgba(108,92,231,.1) 0%,transparent 50%),linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-darker) 100%)}.lobby-container{width:100%;max-width:750px;padding:35px 40px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 50%,var(--bg-dark) 100%);border:3px solid var(--border-light);border-radius:24px;box-shadow:0 8px 0 var(--shadow-3d-panel),0 20px 60px var(--shadow-dark),inset 0 1px #ffffff26,inset 0 -2px #0000004d;position:relative}.lobby-container:before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.03);border-radius:16px;pointer-events:none}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:25px;border-bottom:2px solid var(--border-color)}.lobby-header h1{font-size:1.8rem;font-weight:800;letter-spacing:4px;background:linear-gradient(180deg,#fff 0%,var(--color-primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.user-info{display:flex;align-items:center;gap:12px}#user-name-display{color:var(--text-primary);font-weight:600;font-size:.95rem;padding:10px 16px;background:linear-gradient(180deg,#0000004d,#00000080);border-radius:10px;border:2px solid var(--border-color);box-shadow:inset 0 2px 4px #0000004d,0 1px #ffffff0d}.room-list-section{margin-bottom:30px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-header h2{color:var(--text-primary);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:10px}.section-header h2:before{content:"";display:inline-block;width:4px;height:20px;background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-secondary) 100%);border-radius:2px}.room-list{max-height:300px;overflow-y:auto;padding:8px;background:linear-gradient(180deg,#0006,#0003);border:2px solid var(--border-color);border-radius:16px;box-shadow:inset 0 4px 8px #0000004d,0 1px #ffffff0d}.room-item{display:flex;align-items:center;padding:16px 20px;margin-bottom:8px;background:linear-gradient(180deg,var(--bg-card) 0%,#2a2a4a 100%);border-radius:12px;border:2px solid var(--border-light);cursor:pointer;transition:all var(--transition-3d);box-shadow:0 4px 0 var(--shadow-3d-dark),0 8px 16px var(--shadow-medium);transform:translateY(0);position:relative;overflow:hidden}.room-item:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%)}.room-item:last-child{margin-bottom:0}.room-item:hover{transform:translateY(-3px);border-color:var(--color-primary);background:linear-gradient(180deg,var(--bg-card-hover) 0%,var(--bg-card) 100%);box-shadow:0 7px 0 var(--shadow-3d-dark),0 14px 24px var(--shadow-dark),0 0 25px var(--color-primary-glow)}.room-item:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow-3d-dark),0 4px 8px var(--shadow-medium)}.room-item-info{flex:1}.room-item-name{color:var(--text-primary);font-size:1.05rem;font-weight:700;margin-bottom:6px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.room-item-meta{display:flex;gap:15px;color:var(--text-muted);font-size:.8rem}.room-item-category{color:var(--color-secondary);font-weight:600}.room-item-players{display:flex;align-items:center;justify-content:center;min-width:60px;padding:8px 14px;background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:20px;color:var(--text-primary);font-weight:800;font-size:.9rem;box-shadow:0 3px 0 var(--color-primary-edge),0 6px 12px var(--color-primary-glow),inset 0 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.3)}.room-status{padding:6px 12px;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-left:12px}.room-status.waiting{background:linear-gradient(180deg,var(--color-success) 0%,var(--color-success-dark) 100%);color:var(--text-primary);box-shadow:0 2px 0 var(--color-success-edge),0 4px 10px #00b8944d}.room-status.playing{background:linear-gradient(180deg,var(--color-danger) 0%,var(--color-danger-dark) 100%);color:var(--text-primary);box-shadow:0 2px 0 var(--color-danger-edge),0 4px 10px #ff76754d}.room-status.full{background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-accent-dark) 100%);color:var(--bg-dark);box-shadow:0 2px 0 var(--color-accent-edge),0 4px 10px #fdcb6e4d}.no-rooms{text-align:center;padding:50px 20px;color:var(--text-muted);font-size:1rem}.no-rooms:before{content:":(";display:block;font-size:3rem;margin-bottom:15px;opacity:.3}.lobby-actions{display:flex;gap:15px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:auto!important;opacity:1;visibility:visible;transition:all var(--transition-slow)}.modal.hidden{opacity:0;visibility:hidden;pointer-events:none!important}.modal-content{position:relative;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 50%,var(--bg-dark) 100%);border:3px solid var(--border-light);border-radius:20px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 0 var(--shadow-3d-panel),0 20px 60px var(--shadow-dark),inset 0 1px #ffffff26,inset 0 -2px #0000004d;transform:scale(1) translateY(0);transition:transform var(--transition-bounce);pointer-events:auto}.modal.hidden .modal-content{transform:scale(.9) translateY(-30px)}.modal-content.small{max-width:380px}.modal-content:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.03);border-radius:12px;pointer-events:none}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:2px solid var(--border-color);background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%)}.modal-header h2{color:var(--text-primary);font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(180deg,#fff 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{width:40px;height:40px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 100%);border:2px solid var(--border-color);border-radius:10px;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;transition:all var(--transition-3d);display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 3px 0 var(--shadow-3d-dark),0 6px 12px var(--shadow-medium);transform:translateY(0)}.close-btn:hover{background:linear-gradient(180deg,var(--color-danger) 0%,var(--color-danger-dark) 100%);border-color:var(--color-danger);color:var(--text-primary);transform:translateY(-2px) scale(1.05);box-shadow:0 5px 0 var(--color-danger-edge),0 10px 20px #ff767566}.close-btn:active{transform:translateY(2px) scale(.95);box-shadow:0 1px 0 var(--shadow-3d-dark),0 3px 6px var(--shadow-medium)}.modal-body{padding:28px}.modal-footer{padding:22px 28px;border-top:2px solid var(--border-color);background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 100%)}.form-group{margin-bottom:22px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;color:var(--text-secondary);font-size:.8rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600}.form-group input[type=range]{width:100%;height:12px;-webkit-appearance:none;background:linear-gradient(180deg,#00000080,#0000004d);border:2px solid var(--border-color);border-radius:6px;outline:none;box-shadow:inset 0 2px 4px #0000004d}.form-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;background:linear-gradient(180deg,var(--color-primary-light) 0%,var(--color-primary) 100%);border:3px solid var(--color-primary-dark);border-radius:50%;cursor:pointer;box-shadow:0 3px 0 var(--color-primary-edge),0 6px 12px var(--color-primary-glow);transition:transform var(--transition-fast)}.form-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.checkbox-group label{display:flex;align-items:center;gap:14px;cursor:pointer;color:var(--text-primary);text-transform:none;font-size:1rem;padding:14px 18px;background:linear-gradient(180deg,#0003,#0000004d);border-radius:12px;border:2px solid var(--border-color);transition:all var(--transition-fast);box-shadow:inset 0 2px 4px #0003}.checkbox-group label:hover{background:linear-gradient(180deg,#0000004d,#0006);border-color:var(--color-primary)}.checkbox-group input[type=checkbox]{width:24px;height:24px;accent-color:var(--color-primary);cursor:pointer}#waiting-room-ui{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(108,92,231,.1) 0%,transparent 60%),linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-darker) 100%)}.waiting-container{width:100%;max-width:580px;padding:40px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 50%,var(--bg-dark) 100%);border:3px solid var(--border-light);border-radius:24px;box-shadow:0 8px 0 var(--shadow-3d-panel),0 20px 60px var(--shadow-dark),inset 0 1px #ffffff26,inset 0 -2px #0000004d;text-align:center;position:relative}.waiting-container:before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.03);border-radius:16px;pointer-events:none}.waiting-header{margin-bottom:28px}.waiting-header h1{color:var(--text-primary);font-size:1.6rem;font-weight:700;margin-bottom:15px;text-shadow:0 2px 4px rgba(0,0,0,.3)}#room-info{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}.badge{padding:8px 16px;border-radius:20px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}#room-category-badge{background:linear-gradient(180deg,var(--color-secondary) 0%,var(--color-secondary-dark) 100%);color:var(--text-primary);box-shadow:0 2px 0 var(--color-secondary-edge),0 4px 10px var(--color-secondary-glow)}#room-question-count{color:var(--text-muted);font-size:.9rem}.waiting-players{background:linear-gradient(180deg,#0006,#0003);border:2px solid var(--border-color);border-radius:16px;padding:24px;margin-bottom:28px;min-height:140px;max-height:240px;overflow-y:auto;box-shadow:inset 0 4px 8px #0000004d,0 1px #ffffff0d}.waiting-player-item{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;margin:6px;background:linear-gradient(180deg,var(--bg-card) 0%,#2a2a4a 100%);border:2px solid var(--border-light);border-radius:25px;color:var(--text-primary);font-size:.9rem;font-weight:600;transition:all var(--transition-3d);box-shadow:0 3px 0 var(--shadow-3d-dark),0 6px 12px var(--shadow-medium)}.waiting-player-item:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 5px 0 var(--shadow-3d-dark),0 10px 20px var(--shadow-dark)}.waiting-player-item.host{background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-accent-dark) 100%);border-color:var(--color-accent-dark);color:var(--bg-dark);box-shadow:0 3px 0 var(--color-accent-edge),0 6px 15px #fdcb6e66}.waiting-player-item.host:before{content:"HOST";font-size:.6rem;background:var(--bg-dark);color:var(--color-accent);padding:3px 8px;border-radius:10px;font-weight:700}.waiting-player-item.me{background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-color:var(--color-primary);box-shadow:0 3px 0 var(--color-primary-edge),0 6px 15px var(--color-primary-glow)}.waiting-actions{display:flex;gap:15px;margin-bottom:28px}.share-section{padding-top:22px;border-top:2px solid var(--border-color)}.share-section label{display:block;color:var(--text-muted);font-size:.75rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}.share-input-group{display:flex;gap:10px}.share-input-group input{flex:1;padding:14px 18px;font-size:.85rem;background:linear-gradient(180deg,#00000080,#0000004d);border:2px solid var(--border-color);border-radius:10px;color:var(--text-muted);box-shadow:inset 0 2px 4px #0000004d}.settings-footer{display:flex;gap:15px}.settings-footer .btn-3d--danger{flex:.7}.settings-footer .btn-3d:last-child{flex:1}#game-ui{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}#game-ui>*{pointer-events:auto}#question-panel{display:none!important;visibility:hidden!important;pointer-events:none!important}#player-list{position:absolute;top:20px;right:20px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 50%,var(--bg-dark) 100%);padding:20px;border-radius:16px;min-width:200px;max-width:280px;border:3px solid var(--border-light);box-shadow:0 6px 0 var(--shadow-3d-panel),0 15px 40px var(--shadow-dark),inset 0 1px #ffffff26}#player-list:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.03);border-radius:10px;pointer-events:none}.player-list-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:15px;padding-bottom:12px;border-bottom:2px solid var(--border-color);display:flex;align-items:center;gap:8px}.player-list-title:before{content:"";display:inline-block;width:3px;height:14px;background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-secondary) 100%);border-radius:2px}.player-list-item{display:flex;align-items:center;padding:10px 14px;margin-bottom:8px;background:linear-gradient(180deg,#0003,#0000004d);border-radius:10px;border:2px solid var(--border-color);transition:all var(--transition-fast);box-shadow:inset 0 2px 4px #0003}.player-list-item:last-child{margin-bottom:0}.player-list-item:hover{background:linear-gradient(180deg,#0000004d,#0006);border-color:var(--color-primary)}.player-list-item.me{background:linear-gradient(180deg,#6c5ce733,#6c5ce71a);border-color:var(--color-primary);box-shadow:inset 0 2px 4px #0003,0 0 15px var(--color-primary-glow)}.player-rank{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.8rem;font-weight:800;margin-right:12px;background:linear-gradient(180deg,var(--bg-panel-light) 0%,var(--bg-panel) 100%);border:2px solid var(--border-color);box-shadow:0 2px 0 var(--shadow-3d-dark)}.player-rank.gold{background:linear-gradient(180deg,gold,#c9a800);border-color:#b8960a;color:#1a1a2e;box-shadow:0 2px #8a7008,0 4px 10px #ffd70066}.player-rank.silver{background:linear-gradient(180deg,silver,#a0a0a0);border-color:#888;color:#1a1a2e;box-shadow:0 2px #666,0 4px 10px #c0c0c066}.player-rank.bronze{background:linear-gradient(180deg,#cd7f32,#a86828);border-color:#8b5a2b;color:#fff;box-shadow:0 2px #704214,0 4px 10px #cd7f3266}.player-name{flex:1;font-size:.9rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-score{font-size:.9rem;font-weight:800;color:var(--color-accent);text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.menu-container,.lobby-container,.waiting-container{margin:15px;padding:28px 24px;border-radius:20px}.game-title{font-size:2.5rem;letter-spacing:4px}.lobby-header h1{font-size:1.4rem;letter-spacing:2px}.lobby-actions,.waiting-actions{flex-direction:column}.btn-3d--large .btn-3d__front{padding:14px 35px;font-size:1rem}.modal-content{margin:15px;max-width:calc(100% - 30px);border-radius:18px}#question-panel{min-width:auto;width:calc(100% - 40px);padding:18px 24px;border-radius:14px}#question-text{font-size:1.15rem}#player-list{display:none}.room-item{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}.room-item-players{align-self:flex-end}}@media(max-width:480px){.game-title{font-size:2rem;letter-spacing:3px}.game-subtitle{font-size:.85rem;letter-spacing:2px}.lobby-header{flex-direction:column;gap:15px;text-align:center}.user-info{width:100%;justify-content:center}.section-header h2{font-size:.9rem}.room-item-name{font-size:.95rem}.waiting-player-item{padding:10px 14px;font-size:.85rem}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--color-primary-glow)}50%{box-shadow:0 0 40px var(--color-primary-glow),0 0 60px var(--color-primary-glow)}}.fade-in{animation:fadeIn .3s ease forwards}.slide-in-up{animation:slideInUp .4s ease forwards}.slide-in-right{animation:slideInRight .4s ease forwards}.bounce-in{animation:bounceIn .5s cubic-bezier(.68,-.55,.265,1.55) forwards}.btn-shine{position:relative;overflow:hidden}.btn-shine:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);transition:left .6s ease}.btn-shine:hover:after{left:100%}.text-gradient{background:linear-gradient(180deg,#fff 0%,var(--color-primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-glow{text-shadow:0 0 20px var(--color-primary-glow)}.box-glow{box-shadow:0 0 30px var(--color-primary-glow)}.box-glow-success{box-shadow:0 0 30px #00b89466}.box-glow-danger{box-shadow:0 0 30px #ff767566}#question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}#question-number{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:20px;font-size:.75rem;color:#fff;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;box-shadow:0 2px 0 var(--color-primary-edge),0 4px 10px var(--color-primary-glow);text-shadow:0 1px 2px rgba(0,0,0,.3)}#timer-text{font-size:1.2rem;font-weight:800;color:var(--color-success);text-shadow:0 0 10px rgba(0,184,148,.5)}#timer-text.warning{color:var(--color-accent);text-shadow:0 0 10px rgba(253,203,110,.5)}#timer-text.danger{color:var(--color-danger);text-shadow:0 0 10px rgba(255,118,117,.5);animation:pulse-text .5s ease infinite}@keyframes pulse-text{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}#zone-counts{position:absolute;bottom:25px;left:50%;transform:translate(-50%);display:flex;gap:40px;pointer-events:none}.zone-count{display:flex;flex-direction:column;align-items:center;padding:18px 35px;border-radius:18px;min-width:120px;box-shadow:0 6px #0006,0 12px 30px #00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.zone-count.zone-yes{background:linear-gradient(180deg,#2ecc71f2,#27ae60f2);border:3px solid rgba(85,239,196,.6);box-shadow:0 6px #27ae60cc,0 12px 30px #00000080,0 0 25px #2ecc7166}.zone-count.zone-no{background:linear-gradient(180deg,#e74c3cf2,#c0392bf2);border:3px solid rgba(250,177,160,.6);box-shadow:0 6px #c0392bcc,0 12px 30px #00000080,0 0 25px #e74c3c66}.zone-label{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:3px;color:#fffffff2;margin-bottom:6px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.zone-players{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 3px 6px rgba(0,0,0,.4);line-height:1}#grab-cooldown{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:center;gap:8px}.cooldown-ring{width:60px;height:60px;position:relative}.cooldown-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.cooldown-bg{fill:none;stroke:#fff3;stroke-width:3}.cooldown-progress{fill:none;stroke:var(--color-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}.cooldown-text{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}#grab-status{position:absolute;bottom:100px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 30px;background:linear-gradient(180deg,#e74c3cf2,#c0392bf2);border-radius:12px;border:2px solid rgba(231,76,60,.5);box-shadow:0 4px #0000004d,0 8px 20px #0006,0 0 30px #e74c3c66;animation:bounce-in .3s ease}.grab-status-text{font-size:1.1rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px}.grab-hint{font-size:.8rem;color:#ffffffb3}@keyframes bounce-in{0%{transform:translate(-50%) scale(.5);opacity:0}70%{transform:translate(-50%) scale(1.1)}to{transform:translate(-50%) scale(1);opacity:1}}.glass-panel{background:#0009;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:16px;box-shadow:0 8px 32px #0000004d}.glass-panel-light{background:#ffffff1a;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:16px;box-shadow:0 8px 32px #0003,inset 0 1px #ffffff1a}.glass-panel-dark{background:#000000b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 12px 40px #0006,inset 0 1px #ffffff0d}.lottie-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;z-index:1000;pointer-events:none}.lottie-indicator.hidden{display:none}.lottie-celebration{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding-top:10%}.lottie-celebration.hidden{display:none}.lottie-trophy{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;z-index:1001;pointer-events:none}.lottie-trophy.hidden{display:none}.zone-count.zone-yes{box-shadow:0 6px #27ae60cc,0 12px 30px #00000080,0 0 30px #2ecc7180,0 0 60px #2ecc714d;border:3px solid rgba(85,239,196,.7);animation:zone-pulse-yes 2s ease-in-out infinite}.zone-count.zone-no{box-shadow:0 6px #c0392bcc,0 12px 30px #00000080,0 0 30px #e74c3c80,0 0 60px #e74c3c4d;border:3px solid rgba(250,177,160,.7);animation:zone-pulse-no 2s ease-in-out infinite}@keyframes zone-pulse-yes{0%,to{box-shadow:0 6px #27ae60cc,0 12px 30px #00000080,0 0 30px #2ecc7180,0 0 60px #2ecc714d}50%{box-shadow:0 6px #27ae60cc,0 12px 30px #00000080,0 0 40px #2ecc71b3,0 0 80px #2ecc7166}}@keyframes zone-pulse-no{0%,to{box-shadow:0 6px #c0392bcc,0 12px 30px #00000080,0 0 30px #e74c3c80,0 0 60px #e74c3c4d}50%{box-shadow:0 6px #c0392bcc,0 12px 30px #00000080,0 0 40px #e74c3cb3,0 0 80px #e74c3c66}}.answer-result-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:998;pointer-events:none;opacity:0;transition:opacity .3s ease}.answer-result-overlay.show{opacity:1}.answer-result-overlay.correct{background:radial-gradient(circle,rgba(46,204,113,.2) 0%,transparent 70%)}.answer-result-overlay.wrong{background:radial-gradient(circle,rgba(231,76,60,.2) 0%,transparent 70%)}.winner-celebration{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1002;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}.winner-celebration.show{opacity:1;visibility:visible}.winner-title{font-size:3rem;font-weight:900;text-transform:uppercase;letter-spacing:8px;margin-bottom:20px;background:linear-gradient(180deg,gold,#fa0,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 4px 8px rgba(255,215,0,.5));animation:winner-glow 1.5s ease-in-out infinite}@keyframes winner-glow{0%,to{filter:drop-shadow(0 4px 8px rgba(255,215,0,.5))}50%{filter:drop-shadow(0 8px 16px rgba(255,215,0,.8))}}.winner-name{font-size:2rem;font-weight:700;color:#fff;margin-bottom:30px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.winner-stats{font-size:1.2rem;color:var(--text-secondary);margin-bottom:40px}@media(prefers-reduced-motion:reduce){.lottie-indicator,.lottie-celebration,.lottie-trophy{display:none!important}.zone-count.zone-yes,.zone-count.zone-no,.winner-title{animation:none!important}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}#ox-quiz-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:flex-start;padding-top:15px;z-index:700;pointer-events:none}#ox-quiz-overlay.hidden{display:none!important}#ox-quiz-scroll{position:relative;min-width:280px;max-width:400px;transform-origin:top center}#ox-quiz-scroll.opening{animation:scroll-unroll .4s cubic-bezier(.34,1.56,.64,1) forwards}#ox-quiz-scroll.closing{animation:scroll-roll .3s ease-in forwards}@keyframes scroll-unroll{0%{opacity:0;transform:scaleY(0) rotateX(-90deg);filter:blur(4px)}50%{opacity:1;filter:blur(0)}to{opacity:1;transform:scaleY(1) rotateX(0);filter:blur(0)}}@keyframes scroll-roll{0%{opacity:1;transform:scaleY(1) rotateX(0)}to{opacity:0;transform:scaleY(0) rotateX(90deg)}}.scroll-edge{height:8px;background:linear-gradient(90deg,#4a3520,#6b4c2a 15%,#8b6340,#6b4c2a 85%,#4a3520);border-radius:4px;box-shadow:0 2px 4px #0006,inset 0 1px #ffffff26}.scroll-top{margin-bottom:-2px;z-index:2;position:relative}.scroll-bottom{margin-top:-2px;z-index:2;position:relative}#ox-quiz-content{background:linear-gradient(180deg,#d4b896,#c9a882 20%,#d4b896,#c9a882 80%,#d4b896);border-left:3px solid #5c3d1e;border-right:3px solid #5c3d1e;padding:10px 14px;font-family:Cinzel,serif;text-align:center;box-shadow:inset 0 0 15px #4a352026;position:relative}#ox-quiz-content:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none}.ox-phase.hidden{display:none!important}.ox-phase{animation:phase-in .25s ease-out forwards}@keyframes phase-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}#ox-quiz-question{padding:4px 0}.question-header{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}.question-badge{background:linear-gradient(180deg,#8b6914,#654d0f);color:#ffedc4;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:2px;letter-spacing:1px;text-shadow:0 1px 1px rgba(0,0,0,.4);box-shadow:0 1px 2px #0000004d}.question-num{color:#5c3d1e;font-size:.7rem;font-weight:600}.question-text{color:#2c1810;font-size:.85rem;font-weight:600;line-height:1.3;text-shadow:0 1px 0 rgba(255,255,255,.3)}#ox-quiz-direction{padding:6px 0}.direction-row{display:flex;align-items:center;justify-content:center;gap:12px}.zone-indicator{display:flex;flex-direction:column;align-items:center;gap:2px}.zone-symbol{font-size:1.4rem;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.3)}.zone-label{font-size:.5rem;font-weight:700;letter-spacing:1px;opacity:.8}.zone-o .zone-symbol{color:#1d7a33;animation:glow-green 1.5s ease-in-out infinite}.zone-o .zone-label{color:#1d7a33}.zone-x .zone-symbol{color:#a32a1d;animation:glow-red 1.5s ease-in-out infinite}.zone-x .zone-label{color:#a32a1d}@keyframes glow-green{0%,to{text-shadow:0 0 4px rgba(29,122,51,.5)}50%{text-shadow:0 0 12px rgba(29,122,51,.8)}}@keyframes glow-red{0%,to{text-shadow:0 0 4px rgba(163,42,29,.5)}50%{text-shadow:0 0 12px rgba(163,42,29,.8)}}.direction-center{padding:0 8px}.direction-arrows{color:#5c3d1e;font-size:.7rem;font-weight:700;letter-spacing:2px;animation:arrow-pulse 1s ease-in-out infinite}@keyframes arrow-pulse{0%,to{opacity:.6}50%{opacity:1}}#ox-quiz-countdown{padding:8px 0}.countdown-container{display:flex;justify-content:center;align-items:center}.countdown-num{font-size:2.5rem;font-weight:900;color:#a32a1d;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.3),0 0 20px rgba(163,42,29,.4);animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{transform:scale(1);text-shadow:0 2px 4px rgba(0,0,0,.3),0 0 10px rgba(163,42,29,.3)}50%{transform:scale(1.08);text-shadow:0 2px 4px rgba(0,0,0,.3),0 0 25px rgba(163,42,29,.6)}}#ox-quiz-reveal{padding:8px 0}.reveal-container{display:flex;flex-direction:column;align-items:center;gap:4px}.reveal-symbol{font-size:2.8rem;font-weight:900;line-height:1;animation:reveal-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}.reveal-symbol.reveal-o{color:#1d7a33;text-shadow:0 0 20px rgba(29,122,51,.6),0 2px 4px rgba(0,0,0,.3)}.reveal-symbol.reveal-x{color:#a32a1d;text-shadow:0 0 20px rgba(163,42,29,.6),0 2px 4px rgba(0,0,0,.3)}.reveal-text{font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase}.reveal-text.text-correct{color:#1d7a33}.reveal-text.text-wrong{color:#a32a1d}@keyframes reveal-pop{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}#ox-quiz-timer{margin-top:8px;height:4px;background:#4a352040;border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 2px #0003}#ox-quiz-timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#1d7a33,#2d9a43);border-radius:2px;transition:width .1s linear;box-shadow:0 0 6px #1d7a3366}#ox-quiz-timer-fill.warning{background:linear-gradient(90deg,#c9a00c,#e6b800);box-shadow:0 0 6px #c9a00c66}#ox-quiz-timer-fill.danger{background:linear-gradient(90deg,#a32a1d,#c9342a);box-shadow:0 0 6px #a32a1d66;animation:timer-danger .5s ease-in-out infinite}@keyframes timer-danger{0%,to{opacity:1}50%{opacity:.7}}#tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#000000bf;z-index:800;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#tutorial-overlay.hidden{display:none!important}#tutorial-scroll{position:relative;min-width:340px;max-width:480px;width:90%;transform-origin:center center;animation:scroll-unroll .5s cubic-bezier(.34,1.56,.64,1) forwards}.tutorial-content{background:linear-gradient(180deg,#d4b896,#c9a882 15%,#d4b896,#c9a882 85%,#d4b896);border-left:4px solid #5c3d1e;border-right:4px solid #5c3d1e;padding:24px 28px;font-family:Cinzel,serif}.tutorial-title{font-size:1.4rem;font-weight:700;color:#2c1810;text-align:center;margin-bottom:20px;text-shadow:0 1px 0 rgba(255,255,255,.4);border-bottom:2px solid #8b6914;padding-bottom:12px}.tutorial-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}.tutorial-step{display:flex;align-items:flex-start;gap:14px;padding:12px;background:#ffffff40;border-radius:8px;border:1px solid rgba(92,61,30,.3)}.step-icon{font-size:1.6rem;min-width:40px;text-align:center}.step-text{flex:1}.step-text strong{display:block;font-size:.95rem;color:#2c1810;margin-bottom:4px}.step-text p{font-size:.8rem;color:#5c3d1e;margin:0;line-height:1.4;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.highlight-o{display:inline-block;padding:2px 8px;background:linear-gradient(180deg,#2ecc71,#27ae60);color:#fff;border-radius:4px;font-weight:700;font-size:.85rem}.highlight-x{display:inline-block;padding:2px 8px;background:linear-gradient(180deg,#e74c3c,#c0392b);color:#fff;border-radius:4px;font-weight:700;font-size:.85rem}.tutorial-controls{background:#2c18101a;border-radius:8px;padding:14px;margin-bottom:18px;border:1px solid rgba(92,61,30,.3)}.controls-title{font-size:.85rem;font-weight:700;color:#2c1810;margin:0 0 10px;text-align:center}.control-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.control-item:not(:last-child){border-bottom:1px dashed rgba(92,61,30,.2)}.control-key{display:inline-block;padding:4px 10px;background:linear-gradient(180deg,#5c3d1e,#3d2812);color:#d4b896;border-radius:4px;font-size:.75rem;font-weight:600;box-shadow:0 2px #2a1a0a}.control-desc{font-size:.8rem;color:#5c3d1e}.tutorial-actions{display:flex;flex-direction:column;gap:12px;align-items:center}.dont-show-again{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.8rem;color:#5c3d1e}.dont-show-again input[type=checkbox]{width:18px;height:18px;accent-color:#8b6914;cursor:pointer}.dont-show-again span{-webkit-user-select:none;user-select:none}.tutorial-actions .btn-3d{width:100%;max-width:200px}@media(max-width:480px){#tutorial-scroll{min-width:auto;width:calc(100% - 30px)}.tutorial-content{padding:18px 20px}.tutorial-title{font-size:1.2rem}.tutorial-step{padding:10px;gap:10px}.step-icon{font-size:1.3rem;min-width:32px}.step-text strong{font-size:.85rem}.step-text p{font-size:.75rem}}