.glass-panel{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;transition:all var(--transition-normal)}.glass-popover{background:#0e122af2;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-glass-bright);box-shadow:0 20px 50px #0009,var(--glow-cyan)}.app-container{min-height:100vh;width:100%;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.main-viewport{flex:1;display:flex;justify-content:center;align-items:center;padding:24px;width:100%}.ambient-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.6;animation:floatAmbient 10s ease-in-out infinite alternate}.glow-1{width:380px;height:380px;background:radial-gradient(circle,rgba(0,240,255,.22) 0%,transparent 70%);top:-100px;left:-80px}.glow-2{width:420px;height:420px;background:radial-gradient(circle,rgba(255,45,117,.22) 0%,transparent 70%);bottom:-100px;right:-80px;animation-delay:-5s}.glow-3{width:320px;height:320px;background:radial-gradient(circle,rgba(139,92,246,.22) 0%,transparent 70%);top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes floatAmbient{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-25px) scale(1.08)}to{transform:translateY(15px) scale(.95)}}.floating-connection-status{position:fixed;top:18px;right:20px;z-index:999;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);font-size:.82rem;font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-glass);box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.floating-connection-status.is-connected{background:#10b9811f;border-color:#10b9814d;color:var(--accent-green)}.floating-connection-status.is-connected .status-indicator-dot{background:var(--accent-green);box-shadow:0 0 10px var(--accent-green)}.floating-connection-status.is-disconnected{background:#ef44441f;border-color:#ef44444d;color:var(--accent-red)}.floating-connection-status.is-disconnected .status-indicator-dot{background:var(--accent-red);box-shadow:0 0 10px var(--accent-red);animation:blink 1s infinite}.status-indicator-dot{width:8px;height:8px;border-radius:50%}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.join-screen-wrapper{position:relative;width:100%;max-width:480px;display:flex;justify-content:center;animation:modalEnter .5s cubic-bezier(.16,1,.3,1) both}.join-card{width:100%;padding:44px 36px;display:flex;flex-direction:column;align-items:center;text-align:center}.language-selector{position:absolute;top:20px;right:20px;z-index:50}.lang-toggle-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#0d0e18;border:2px solid #1b1c58;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 15px #0006;padding:0}.lang-toggle-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #2b358fd3}.lang-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:175px;border-radius:22px;background:#0d0e18;border:1px solid rgba(255,255,255,.12);padding:10px;display:flex;flex-direction:column;gap:4px;box-shadow:0 20px 50px #000c,0 0 30px #00000080;animation:dropIn .2s cubic-bezier(.16,1,.3,1);z-index:100}.lang-option{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px;border-radius:16px;color:#f1f5f9;font-family:var(--font-display);font-size:.95rem;font-weight:700;transition:all var(--transition-fast);background:transparent;cursor:pointer}.lang-option:hover{background:#ffffff14;color:#fff}.lang-option.active{background:#252834;color:#fff;font-weight:800}.lang-name{font-weight:700;letter-spacing:.2px}.join-header{margin-bottom:32px}.logo-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:26px;background:linear-gradient(135deg,#ff2d7533,#00f0ff33);border:1px solid var(--border-glass-bright);box-shadow:0 10px 30px #00f0ff33;margin-bottom:16px;animation:pulseLogo 3s infinite ease-in-out}.logo-emoji{font-size:2.6rem}.logo-sparkle{position:absolute;top:-4px;right:-4px;color:var(--accent-gold);animation:spinSlow 6s linear infinite}@keyframes pulseLogo{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.brand-title{font-family:var(--font-display);font-size:2.5rem;font-weight:900;letter-spacing:-.5px;background:linear-gradient(135deg,#ffffff 0%,var(--accent-cyan) 60%,var(--accent-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}.brand-tagline{color:var(--text-secondary);font-size:.95rem;font-weight:500}.mode-selection{width:100%;display:flex;flex-direction:column;gap:16px;margin-bottom:28px}.mode-card{width:100%;display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--radius-md);border:1px solid var(--border-glass);background:#ffffff08;text-align:left;transition:all var(--transition-normal);cursor:pointer}.mode-card:hover{transform:translateY(-4px) scale(1.01);background:#ffffff12}.create-mode:hover{border-color:var(--border-neon-pink);box-shadow:0 12px 30px #ff2d7540}.join-mode:hover{border-color:var(--border-neon-cyan);box-shadow:0 12px 30px #00f0ff40}.mode-icon-box{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.create-mode .mode-icon-box{background:linear-gradient(135deg,#ff2d754d,#ff2d751a);color:var(--accent-pink);border:1px solid rgba(255,45,117,.4)}.join-mode .mode-icon-box{background:linear-gradient(135deg,#00f0ff4d,#00f0ff1a);color:var(--accent-cyan);border:1px solid rgba(0,240,255,.4)}.mode-info{display:flex;flex-direction:column;gap:3px}.mode-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}.mode-desc{font-size:.82rem;color:var(--text-muted)}.join-form-wrapper{width:100%;display:flex;flex-direction:column;gap:20px;animation:fadeIn .3s ease}.back-link-btn{align-self:flex-start;display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.85rem;font-weight:600;padding:6px 12px;border-radius:var(--radius-sm);background:#ffffff0a;transition:all var(--transition-fast)}.back-link-btn:hover{color:var(--text-primary);background:#ffffff14}.form-fields{display:flex;flex-direction:column;gap:18px}.input-field-group{display:flex;flex-direction:column;gap:8px;text-align:left}.field-label{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:.85rem;font-weight:600}.input-wrapper{width:100%;position:relative}.input-wrapper input{width:100%;padding:14px 18px;background:var(--bg-input);border:1.5px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-size:.95rem;transition:all var(--transition-normal)}.input-wrapper input:focus{border-color:var(--accent-cyan);box-shadow:0 0 20px #00f0ff33;background:#00f0ff0a}.input-wrapper input::placeholder{color:var(--text-muted)}.room-code-input{text-align:center;font-family:var(--font-mono)!important;font-size:1.3rem!important;font-weight:700!important;letter-spacing:5px;text-transform:uppercase}.player-pills-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.player-pill{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:var(--radius-md);background:#ffffff0a;border:1px solid var(--border-glass);color:var(--text-secondary);font-size:.85rem;font-weight:600;transition:all var(--transition-normal)}.player-pill:hover{background:#ffffff14;color:var(--text-primary)}.player-pill.active{background:linear-gradient(135deg,#00f0ff33,#8b5cf633);border-color:var(--accent-cyan);color:#fff;box-shadow:0 0 15px #00f0ff40}.error-banner{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--radius-md);background:#ef44441f;border:1px solid rgba(239,68,68,.3);color:#ff6b6b;font-size:.85rem;font-weight:600;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.primary-action-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.5px;color:#fff;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.primary-action-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.01);filter:brightness(1.1)}.primary-action-btn:active:not(:disabled){transform:translateY(-1px)}.create-action{background:linear-gradient(135deg,var(--accent-pink),#ff5c8a);box-shadow:0 10px 25px #ff2d7559}.join-action{background:linear-gradient(135deg,var(--accent-cyan),#00b4d8);color:#051421!important;box-shadow:0 10px 25px #00f0ff59}.secondary-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:var(--radius-md);background:#ffffff0f;border:1px solid var(--border-glass);color:var(--text-secondary);font-family:var(--font-display);font-size:.95rem;font-weight:600;transition:all var(--transition-fast)}.secondary-action-btn:hover{background:#ffffff1f;color:var(--text-primary)}.join-footer-features{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px;flex-wrap:wrap}.feature-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);background:#ffffff08;border:1px solid rgba(255,255,255,.05);color:var(--text-muted);font-size:.78rem;font-weight:600}.lobby-wrapper{position:relative;width:100%;max-width:640px;animation:modalEnter .5s cubic-bezier(.16,1,.3,1) both}.lobby-card{width:100%;padding:36px 32px;display:flex;flex-direction:column;gap:28px}.lobby-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--border-glass);flex-wrap:wrap;gap:16px}.lobby-title-area{display:flex;flex-direction:column;gap:4px}.app-badge{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;color:var(--accent-cyan);text-transform:uppercase;letter-spacing:1px}.lobby-heading{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--text-primary)}.room-code-badge{position:relative;display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:var(--radius-md);background:#00f0ff14;border:1px solid var(--border-neon-cyan);cursor:pointer;transition:all var(--transition-fast)}.room-code-badge:hover{background:#00f0ff26;box-shadow:0 0 20px #00f0ff40}.code-label{font-size:.75rem;font-weight:600;color:var(--accent-cyan);text-transform:uppercase}.code-value{font-family:var(--font-mono);font-size:1.3rem;font-weight:800;letter-spacing:3px;color:#fff}.copy-icon-wrap{color:var(--text-secondary)}.copied-icon{color:var(--accent-green)}.copy-toast{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);background:var(--accent-green);color:#062419;font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:var(--radius-full);box-shadow:0 4px 12px #10b98166;animation:popIn .2s ease;white-space:nowrap}.lobby-players-section{display:flex;flex-direction:column;gap:16px}.section-header{display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;align-items:center;gap:8px}.header-left h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-primary)}.player-count-pill{font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-full);background:#ffffff14;color:var(--accent-cyan)}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.lobby-player-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius-md);background:#ffffff08;border:1px solid var(--border-glass);transition:all var(--transition-normal)}.lobby-player-card.is-me{background:#00f0ff0d;border-color:#00f0ff40}.lobby-player-card.is-ready{border-color:#10b98159}.player-avatar-wrap{position:relative;flex-shrink:0}.avatar-ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8b5cf666,#00f0ff66);border:2px solid rgba(255,255,255,.2)}.avatar-letter{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#fff}.crown-badge{position:absolute;top:-8px;right:-6px;color:var(--accent-gold);filter:drop-shadow(0 0 6px var(--accent-gold));animation:floatMini 2s infinite ease-in-out}@keyframes floatMini{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.player-details{display:flex;flex-direction:column;gap:4px;overflow:hidden}.player-name-text{font-size:.95rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me-tag{color:var(--accent-cyan);font-size:.78rem;margin-left:6px;font-weight:600}.status-pill{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);width:fit-content}.status-pill.ready{background:#10b98126;color:var(--accent-green);border:1px solid rgba(16,185,129,.3)}.status-pill.waiting{background:#f59e0b26;color:var(--accent-amber);border:1px solid rgba(245,158,11,.3)}.lobby-player-card.empty-slot{border:1.5px dashed rgba(255,255,255,.08);background:transparent;opacity:.5}.empty-avatar-wrap{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff08;color:var(--text-muted)}.empty-slot-text{font-size:.82rem;color:var(--text-muted);font-style:italic}.lobby-footer-actions{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border-glass);gap:16px;flex-wrap:wrap}.leave-room-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius-md);background:#ef444414;border:1px solid rgba(239,68,68,.2);color:#ff6b6b;font-size:.9rem;font-weight:600;transition:all var(--transition-fast)}.leave-room-btn:hover{background:#ef444429;border-color:#ef444466}.lobby-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all var(--transition-normal)}.ready-btn{background:linear-gradient(135deg,var(--accent-green),#059669);color:#fff;box-shadow:0 8px 20px #10b9814d}.cancel-ready-btn{background:#ffffff14;border:1px solid var(--border-glass-bright);color:var(--text-primary)}.start-game-btn.can-start{background:linear-gradient(135deg,var(--accent-cyan),#0284c7);color:#051421;box-shadow:0 8px 25px #00f0ff66}.start-game-btn.disabled{background:#ffffff0d;color:var(--text-muted);cursor:not-allowed;border:1px solid var(--border-glass)}.pulse-glow{animation:glowPulse 2s infinite ease-in-out}@keyframes glowPulse{0%,to{box-shadow:0 8px 25px #00f0ff4d}50%{box-shadow:0 10px 40px #00f0ffa6,0 0 20px #00f0ff4d}}.gameboard-container{width:100%;max-width:1240px;display:flex;flex-direction:column;gap:18px;animation:fadeIn .4s ease}.game-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}.game-round-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-full);background:#ffffff0f;border:1px solid var(--border-glass);font-size:.85rem;font-weight:700;color:var(--text-primary)}.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}.game-timer-pill{display:flex;align-items:center;gap:8px;padding:8px 20px;border-radius:var(--radius-full);background:#00f0ff1a;border:1.5px solid var(--border-neon-cyan);color:var(--accent-cyan);font-family:var(--font-mono);font-size:1.2rem;font-weight:800;box-shadow:0 0 20px #00f0ff33}.game-timer-pill.timer-critical{background:#ef444426;border-color:#ef444499;color:var(--accent-red);box-shadow:0 0 25px #ef444466;animation:pulseTimer .8s infinite}@keyframes pulseTimer{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.role-tag-badge{display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--radius-full);font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.5px}.role-describer{background:linear-gradient(135deg,#8b5cf640,#ff2d7540);border:1px solid rgba(255,45,117,.4);color:#ff7aa2}.role-painter{background:linear-gradient(135deg,#00f0ff40,#3b82f640);border:1px solid rgba(0,240,255,.4);color:var(--accent-cyan)}.role-spectator{background:#ffffff14;border:1px solid var(--border-glass);color:var(--text-secondary)}.game-layout-grid{display:grid;grid-template-columns:220px 1fr 280px;gap:18px;align-items:stretch;min-height:520px}.players-panel{display:flex;flex-direction:column;padding:18px;gap:14px}.panel-header{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text-primary);padding-bottom:10px;border-bottom:1px solid var(--border-glass)}.players-list-scroll{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.player-roster-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);background:#ffffff05;border:1px solid transparent}.player-roster-item.is-me{background:#00f0ff0f;border-color:#00f0ff33}.roster-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));font-family:var(--font-display);font-weight:700;font-size:.85rem;color:#fff}.roster-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}.roster-name{font-size:.85rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roster-me-pill{font-size:.7rem;color:var(--accent-cyan);font-weight:700}.game-leave-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border-radius:var(--radius-sm);background:#ef444414;border:1px solid rgba(239,68,68,.2);color:#ff6b6b;font-size:.8rem;font-weight:600;transition:all var(--transition-fast)}.game-leave-btn:hover{background:#ef444429}.game-center-workspace{display:flex;flex-direction:column;gap:14px}.describer-workspace,.painter-workspace,.spectator-workspace{display:flex;flex-direction:column;gap:14px;height:100%}.describer-prompt-card{padding:18px 22px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(135deg,#ff2d751a,#8b5cf61a);border-color:#ff2d754d}.prompt-header{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--accent-pink);text-transform:uppercase;letter-spacing:.5px}.prompt-content{display:flex;align-items:center;gap:12px}.prompt-quote-icon{color:var(--accent-pink);opacity:.5;flex-shrink:0}.prompt-text{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:.5px}.prompt-partner-info{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.painter-hint-bar,.spectator-info-bar{padding:12px 18px;display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-secondary)}.pulse-anim{animation:pulseMini 1.5s infinite}@keyframes pulseMini{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.canvas-frame{position:relative;width:100%;flex:1;min-height:380px;padding:0;overflow:hidden;border:1.5px solid var(--border-glass-bright);background:#0c0e1e;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.painter-canvas{border-color:#00f0ff59;box-shadow:0 10px 30px #00000080,inset 0 0 20px #00f0ff0d}.shape-toolbar-dock{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:var(--radius-md);background:#0e122ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-glass-bright);z-index:10}.shape-dock-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);background:#ffffff0a;transition:all var(--transition-fast)}.shape-dock-btn:hover{background:#ffffff1f;color:var(--text-primary)}.shape-dock-btn.active{background:var(--accent-cyan);color:#051421}.painter-controls-dock{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:16px;flex-wrap:wrap}.dock-color-swatches{display:flex;align-items:center;gap:8px}.color-swatch-btn{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.color-swatch-btn:hover{transform:scale(1.2)}.color-swatch-btn.selected{transform:scale(1.25);border-color:#fff;box-shadow:0 0 10px #fff9}.dock-separator{width:1px;height:28px;background:var(--border-glass-bright)}.dock-brush-slider{display:flex;align-items:center;gap:10px}.brush-size-preview-dot{border-radius:50%;border:1px solid rgba(255,255,255,.4)}.brush-radius-label{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);min-width:32px}.styled-range-input{accent-color:var(--accent-cyan);width:90px;cursor:pointer}.dock-action-btns{display:flex;align-items:center;gap:8px}.dock-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid var(--border-glass);color:var(--text-secondary);transition:all var(--transition-fast)}.dock-btn:hover{background:#ffffff1f;color:var(--text-primary)}.undo-btn:hover{color:var(--accent-cyan)}.clear-btn:hover{color:var(--accent-red)}.chat-panel{display:flex;flex-direction:column;padding:16px;gap:12px}.chat-panel-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:var(--radius-md);background:#00000040}.chat-tab-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:.82rem;font-weight:700;transition:all var(--transition-fast)}.chat-tab-btn.active{background:#ffffff14;color:#fff}.chat-tab-btn.team-tab.active{background:#ff2d7533;color:var(--accent-pink)}.chat-stream-container{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;min-height:240px}.chat-empty-state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:.82rem}.chat-message-bubble{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:var(--radius-md);font-size:.85rem;max-width:90%;animation:fadeIn .2s ease;word-break:break-word}.chat-message-bubble.mine{align-self:flex-end;background:#00f0ff1f;border:1px solid rgba(0,240,255,.25)}.chat-message-bubble.mine .sender-tag{color:var(--accent-cyan)}.chat-message-bubble.theirs{align-self:flex-start;background:#ffffff0a;border:1px solid var(--border-glass)}.chat-message-bubble.theirs .sender-tag{color:var(--accent-purple)}.sender-tag{font-size:.72rem;font-weight:700}.msg-body{color:var(--text-primary);line-height:1.35}.shape-drawing-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;z-index:5;touch-action:none;background:#00000003}.shape-preview-svg{width:100%;height:100%;pointer-events:none}.shape-drag-tip-pill{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);background:#0e122ae0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-neon-cyan);color:var(--accent-cyan);font-size:.78rem;font-weight:700;z-index:10;pointer-events:none;box-shadow:0 4px 15px #0006;animation:fadeIn .2s ease}.quick-emojis-bar{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px;border-radius:var(--radius-md);background:#00000040;border:1px solid var(--border-glass);width:100%;box-sizing:border-box;overflow:hidden}.emoji-quick-btn{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:1rem;cursor:pointer;transition:all var(--transition-fast);background:transparent;padding:0}.emoji-quick-btn:hover{transform:scale(1.25);background:#ffffff1f}.chat-input-row{display:flex;align-items:center;gap:8px;background:var(--bg-input);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:6px 8px 6px 12px}.chat-input-row:focus-within{border-color:var(--accent-cyan)}.chat-input-row input{flex:1;background:transparent;color:var(--text-primary);font-size:.85rem}.chat-send-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--accent-cyan);color:#051421;transition:all var(--transition-fast)}.chat-send-btn:disabled{background:#ffffff0d;color:var(--text-muted);cursor:not-allowed}.results-wrapper{position:relative;width:100%;max-width:980px;animation:modalEnter .5s cubic-bezier(.16,1,.3,1) both}.results-container{display:flex;flex-direction:column;gap:20px}.results-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}.header-round-pill{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--text-secondary)}.header-title-badge{display:flex;align-items:center;gap:8px}.header-title-badge h2{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--text-primary)}.header-leave-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);background:#ef444414;border:1px solid rgba(239,68,68,.2);color:#ff6b6b;font-size:.82rem;font-weight:600;transition:all var(--transition-fast)}.header-leave-btn:hover{background:#ef444429}.results-showdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.showdown-card{padding:24px;display:flex;flex-direction:column;gap:16px;min-height:380px}.card-badge{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.target-badge{background:#ff2d7526;border:1px solid rgba(255,45,117,.3);color:var(--accent-pink)}.drawing-badge{background:#00f0ff26;border:1px solid rgba(0,240,255,.3);color:var(--accent-cyan)}.card-inner-content{flex:1;display:flex;align-items:center;justify-content:center;position:relative;border-radius:var(--radius-md)}.target-body{background:#00000040;padding:32px 24px;text-align:center;border:1px dashed var(--border-glass-bright)}.quote-watermark{position:absolute;top:14px;left:14px;color:#ffffff0d}.target-description-text{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:#fff;line-height:1.4}.no-drawing-state{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-muted)}.card-author-pill{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--border-glass)}.role-chip{font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-full)}.describer-chip{background:#ff2d7526;color:var(--accent-pink)}.painter-chip{background:#00f0ff26;color:var(--accent-cyan)}.author-name{font-size:.9rem;font-weight:700;color:var(--text-primary)}.voting-action-box{padding:28px 32px;display:flex;justify-content:center;text-align:center}.voting-interactive-area{display:flex;flex-direction:column;align-items:center;gap:12px}.voting-headline{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--text-primary)}.voting-subhead{font-size:.88rem;color:var(--text-secondary)}.star-rating-row{display:flex;align-items:center;gap:16px;margin-top:8px}.star-score-btn{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all var(--transition-fast)}.star-score-btn:hover{transform:scale(1.25) translateY(-4px)}.score-num{font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--text-muted)}.star-score-btn.active-star .score-num{color:var(--accent-gold)}.voted-success-state{display:flex;align-items:center;gap:16px;padding:10px 24px;border-radius:var(--radius-full);background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.voted-pulse-icon{animation:pulseGreen 2s infinite}@keyframes pulseGreen{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.voted-text-group h4{font-size:1rem;font-weight:700;color:var(--accent-green)}.voted-text-group p{font-size:.8rem;color:var(--text-secondary)}.scoreboard-wrapper{position:relative;width:100%;max-width:680px;animation:modalEnter .5s cubic-bezier(.16,1,.3,1) both}.scoreboard-card{width:100%;padding:40px 32px;display:flex;flex-direction:column;gap:32px}.scoreboard-header{text-align:center}.game-over-banner{display:flex;flex-direction:column;align-items:center;gap:10px}.trophy-sparkle-wrap{position:relative;margin-bottom:4px}.trophy-gold{color:var(--accent-gold);filter:drop-shadow(0 0 20px rgba(251,191,36,.6))}.sparkle-float{position:absolute;top:-8px;right:-12px;color:#fff;animation:spinSlow 4s linear infinite}.game-over-title{font-family:var(--font-display);font-size:2.4rem;font-weight:900;background:linear-gradient(135deg,#ffffff 0%,var(--accent-gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.winner-announce{font-size:1.15rem;font-weight:700;color:var(--accent-cyan)}.round-scores-banner{display:flex;flex-direction:column;align-items:center;gap:8px}.scoreboard-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);background:#fbbf2426;border:1px solid rgba(251,191,36,.3);font-size:.8rem;font-weight:700;color:var(--accent-gold)}.round-scores-title{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--text-primary)}.podium-showcase{display:flex;align-items:flex-end;justify-content:center;gap:16px;padding-top:24px}.podium-column{display:flex;flex-direction:column;align-items:center;width:140px;transition:all var(--transition-normal)}.column-first{order:2;z-index:2}.column-second{order:1}.column-third{order:3}.podium-avatar-card{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}.podium-icon-halo{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid}.halo-1{background:linear-gradient(135deg,#fbbf244d,#fbbf241a);border-color:var(--accent-gold);box-shadow:0 0 25px #fbbf2480;width:64px;height:64px}.crown-icon-glow{color:var(--accent-gold)}.halo-2{background:linear-gradient(135deg,#e2e8f033,#94a3b81a);border-color:#cbd5e1}.medal-silver{color:#e2e8f0}.halo-3{background:linear-gradient(135deg,#cd7f3233,#b453091a);border-color:#cd7f32}.medal-bronze{color:#cd7f32}.podium-player-name{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text-primary);text-align:center;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-score-pill{padding:2px 10px;border-radius:var(--radius-full);background:#ffffff14;font-size:.78rem;font-weight:700;color:var(--accent-cyan)}.pedestal-block{width:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md) var(--radius-md) 0 0;font-family:var(--font-display);font-weight:900;font-size:1.4rem;border:1px solid var(--border-glass-bright)}.block-1{height:120px;background:linear-gradient(180deg,#fbbf2440,#fbbf240d);border-color:#fbbf2466;color:var(--accent-gold)}.block-2{height:90px;background:linear-gradient(180deg,#e2e8f033,#94a3b80d);border-color:#e2e8f04d;color:#e2e8f0}.block-3{height:65px;background:linear-gradient(180deg,#cd7f3233,#b453090d);border-color:#cd7f324d;color:#cd7f32}.leaderboard-others-box{display:flex;flex-direction:column;gap:8px}.others-table-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;color:var(--text-muted);font-size:.78rem;font-weight:700;text-transform:uppercase}.others-rows-scroll{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}.others-table-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-radius:var(--radius-sm);background:#ffffff08;border:1px solid var(--border-glass)}.rank-tag{font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--text-muted)}.user-name{font-size:.9rem;font-weight:600;color:var(--text-primary)}.user-score-tag{font-size:.85rem;font-weight:700;color:var(--accent-cyan)}.scoreboard-footer-actions{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:10px;border-top:1px solid var(--border-glass)}.game-over-actions{display:flex;align-items:center;gap:14px;width:100%;justify-content:center;flex-wrap:wrap}.restart-game-btn{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));box-shadow:0 8px 25px #8b5cf659}.host-control-panel{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.host-guide-text{font-size:.85rem;color:var(--text-secondary)}.host-btn-row{display:flex;align-items:center;gap:14px;width:100%;justify-content:center;flex-wrap:wrap}.next-round-btn{background:linear-gradient(135deg,var(--accent-cyan),#0284c7);color:#051421}.waiting-host-box{display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:.9rem;font-weight:600}.waiting-pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-amber);box-shadow:0 0 10px var(--accent-amber);animation:blink 1.2s infinite}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:9999}.confetti-piece{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:confettiFall linear infinite}.piece-1{background:var(--accent-gold)}.piece-2{background:var(--accent-cyan)}.piece-3{background:var(--accent-pink)}.piece-4{background:var(--accent-purple)}.piece-5{background:var(--accent-green)}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(720deg);opacity:0}}.loading-screen,.error-screen{padding:40px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.loading-spinner{width:44px;height:44px;border:3px solid rgba(0,240,255,.15);border-top-color:var(--accent-cyan);border-radius:50%;animation:spinSlow .8s linear infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modalEnter{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes popIn{0%{opacity:0;transform:translate(-50%,6px) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes dropIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.text-cyan{color:var(--accent-cyan)!important}.text-pink{color:var(--accent-pink)!important}.text-gold{color:var(--accent-gold)!important}.text-green{color:var(--accent-green)!important}.text-muted{color:var(--text-muted)!important}@media(max-width:960px){.game-layout-grid{grid-template-columns:1fr}.players-panel,.chat-panel{max-height:260px}.results-showdown-grid{grid-template-columns:1fr}}@media(max-width:640px){.main-viewport{padding:12px}.join-card,.lobby-card,.scoreboard-card{padding:24px 18px}.brand-title{font-size:2rem}.game-topbar{padding:10px 14px;flex-wrap:wrap;gap:8px}.painter-controls-dock{flex-direction:column;align-items:stretch}.dock-separator{display:none}.podium-showcase{gap:8px}.podium-column{width:100px}.block-1{height:90px}.block-2{height:70px}.block-3{height:50px}}.custom-modal-backdrop{position:fixed;inset:0;background:#040612cc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;animation:modalBackdropFade .2s ease}.custom-modal-card{width:100%;max-width:420px;padding:36px 30px;background:#0d0f22;border:1px solid rgba(255,255,255,.12);border-radius:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 25px 60px #000c,0 0 35px #00f0ff1f;animation:modalPopIn .3s cubic-bezier(.16,1,.3,1) both}.modal-icon-halo{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.modal-room_closed .modal-icon-halo,.modal-warning .modal-icon-halo{background:#ff2d7526;border:2px solid rgba(255,45,117,.4);box-shadow:0 0 25px #ff2d754d}.modal-error .modal-icon-halo{background:#ef444426;border:2px solid rgba(239,68,68,.4);box-shadow:0 0 25px #ef44444d}.modal-info .modal-icon-halo,.modal-success .modal-icon-halo{background:#00f0ff26;border:2px solid rgba(0,240,255,.4);box-shadow:0 0 25px #00f0ff4d}.text-amber{color:var(--accent-amber)!important}.modal-title{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:#fff}.modal-message{font-size:.95rem;color:#94a3b8;line-height:1.5;margin-bottom:6px}.modal-actions{width:100%;display:flex;justify-content:center;margin-top:6px}.modal-confirm-btn{min-width:150px;width:auto;padding:12px 32px;border-radius:50px;background:linear-gradient(135deg,var(--accent-cyan),#0284c7);color:#051421!important;font-weight:800;font-size:.95rem;box-shadow:0 8px 25px #00f0ff59}.modal-confirm-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 30px #00f0ff80}@keyframes modalBackdropFade{0%{opacity:0}to{opacity:1}}@keyframes modalPopIn{0%{opacity:0;transform:scale(.9) translateY(15px)}to{opacity:1;transform:scale(1) translateY(0)}}:root{--bg-darkest: #070814;--bg-primary: #0d0f22;--bg-secondary: #131732;--bg-card: rgba(22, 27, 58, .7);--bg-card-solid: #161b3a;--bg-card-hover: rgba(30, 37, 78, .85);--bg-input: rgba(10, 13, 30, .6);--accent-cyan: #00f0ff;--accent-pink: #ff2d75;--accent-purple: #8b5cf6;--accent-blue: #3b82f6;--accent-green: #10b981;--accent-amber: #f59e0b;--accent-red: #ef4444;--accent-gold: #fbbf24;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--text-glow: rgba(255, 255, 255, .9);--border-glass: rgba(255, 255, 255, .08);--border-glass-bright: rgba(255, 255, 255, .16);--border-neon-cyan: rgba(0, 240, 255, .35);--border-neon-pink: rgba(255, 45, 117, .35);--glass-blur: blur(20px);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .25);--shadow-md: 0 10px 30px -5px rgba(0, 0, 0, .45);--shadow-lg: 0 20px 50px -10px rgba(0, 0, 0, .65);--glow-cyan: 0 0 30px rgba(0, 240, 255, .35);--glow-pink: 0 0 30px rgba(255, 45, 117, .35);--glow-purple: 0 0 30px rgba(139, 92, 246, .35);--font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-spring: .4s cubic-bezier(.175, .885, .32, 1.275)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;min-height:100vh;background-color:var(--bg-darkest);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{overflow-x:hidden;background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(139,92,246,.18),transparent),radial-gradient(ellipse 60% 40% at 90% 80%,rgba(0,240,255,.12),transparent),radial-gradient(ellipse 60% 40% at 10% 90%,rgba(255,45,117,.12),transparent);background-attachment:fixed}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#00f0ff66}::selection{background:#00f0ff4d;color:#fff}button{font-family:var(--font-display);border:none;background:none;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}input,textarea,select{font-family:var(--font-body);border:none;outline:none}