:root{--bg-primary: #0f0e17;--bg-secondary: #1a1830;--bg-card: rgba(255, 255, 255, .05);--bg-card-hover: rgba(255, 255, 255, .1);--bg-glass: rgba(255, 255, 255, .08);--text-primary: #fffffe;--text-secondary: #b8b5c8;--text-muted: #6b6889;--accent-pink: #ff6b9d;--accent-purple: #c471f5;--accent-blue: #6dd5fa;--accent-green: #56ffa4;--accent-yellow: #ffd166;--accent-orange: #ff8a5c;--accent-red: #ff5e5b;--gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-funky: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ffd166 100%);--gradient-cool: linear-gradient(135deg, #6dd5fa 0%, #2980b9 100%);--gradient-fire: linear-gradient(135deg, #f5576c 0%, #ff8a5c 100%);--gradient-neon: linear-gradient(135deg, #c471f5 0%, #6dd5fa 100%);--gradient-success: linear-gradient(135deg, #56ffa4 0%, #59dfb2 100%);--gradient-bg: linear-gradient(150deg, #0f0e17 0%, #1a1830 40%, #2d1b69 100%);--font-display: "Fredoka", sans-serif;--font-body: "Outfit", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3.5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 4px 20px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .35);--shadow-glow-pink: 0 0 30px rgba(255, 107, 157, .3);--shadow-glow-purple: 0 0 30px rgba(196, 113, 245, .3);--shadow-glow-blue: 0 0 30px rgba(109, 213, 250, .3);--shadow-glow-green: 0 0 20px rgba(86, 255, 164, .3);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-smooth: cubic-bezier(.25, .46, .45, .94);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background:var(--gradient-bg);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6}#app{min-height:100vh;position:relative}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit}input,textarea{font-family:inherit}ul,ol{list-style:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c471f54d;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#c471f580}.glass{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1)}.gradient-text{background:var(--gradient-funky);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);transition:all var(--duration-normal) var(--ease-bounce);position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff0;transition:background var(--duration-fast)}.btn:hover:before{background:#ffffff1a}.btn:active{transform:scale(.95)}.btn-primary{background:var(--gradient-funky);color:#fff;box-shadow:var(--shadow-glow-pink)}.btn-primary:hover{box-shadow:0 0 50px #ff6b9d80;transform:translateY(-2px)}.btn-secondary{background:var(--gradient-neon);color:#fff;box-shadow:var(--shadow-glow-purple)}.btn-secondary:hover{box-shadow:0 0 50px #c471f580;transform:translateY(-2px)}.btn-ghost{background:var(--bg-glass);color:var(--text-primary);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-ghost:hover{border-color:#ffffff4d;background:#ffffff1a}.btn-sm{padding:var(--space-sm) var(--space-lg);font-size:var(--text-sm)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.input{width:100%;padding:var(--space-md) var(--space-lg);background:#ffffff0f;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--text-lg);font-family:var(--font-body);transition:all var(--duration-normal) var(--ease-smooth);outline:none}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--accent-purple);box-shadow:var(--shadow-glow-purple);background:#ffffff14}.hidden{display:none!important}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.08)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-15px) rotate(5deg)}66%{transform:translateY(-8px) rotate(-3deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes confettiFall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes popIn{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.1) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #c471f54d}50%{box-shadow:0 0 40px #c471f599}}@keyframes typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes rainbowBorder{0%{border-color:var(--accent-pink)}25%{border-color:var(--accent-purple)}50%{border-color:var(--accent-blue)}75%{border-color:var(--accent-green)}to{border-color:var(--accent-pink)}}.animate-bounce-in{animation:bounceIn .6s var(--ease-bounce)}.animate-slide-up{animation:slideUp .5s var(--ease-smooth)}.animate-fade-in{animation:fadeIn .4s var(--ease-smooth)}.animate-pop-in{animation:popIn .5s var(--ease-bounce)}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-wiggle{animation:wiggle .5s ease-in-out}.animate-float{animation:float 6s ease-in-out infinite}.toast-container{position:fixed;top:var(--space-xl);right:var(--space-xl);z-index:10000;display:flex;flex-direction:column;gap:var(--space-sm)}.toast{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-weight:500;animation:slideDown .4s var(--ease-bounce),fadeOut .3s ease 2.7s forwards;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-width:250px;border:1px solid rgba(255,255,255,.1)}.toast-success{background:#56ffa426;color:var(--accent-green);border-color:#56ffa44d}.toast-error{background:#ff5e5b26;color:var(--accent-red);border-color:#ff5e5b4d}.toast-info{background:#6dd5fa26;color:var(--accent-blue);border-color:#6dd5fa4d}.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);position:relative;overflow:hidden}.landing-doodles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.doodle{position:absolute;font-size:2.5rem;opacity:.15;animation:float 8s ease-in-out infinite;filter:blur(.5px)}.doodle:nth-child(1){top:10%;left:8%;animation-delay:0s;font-size:3rem}.doodle:nth-child(2){top:20%;right:12%;animation-delay:1.5s;font-size:2rem}.doodle:nth-child(3){bottom:25%;left:15%;animation-delay:3s}.doodle:nth-child(4){top:60%;right:8%;animation-delay:.8s;font-size:3.5rem}.doodle:nth-child(5){bottom:10%;right:25%;animation-delay:2.2s}.doodle:nth-child(6){top:40%;left:5%;animation-delay:4s;font-size:2rem}.doodle:nth-child(7){bottom:35%;right:5%;animation-delay:1s;font-size:2.5rem}.doodle:nth-child(8){top:5%;left:45%;animation-delay:2.5s;font-size:1.8rem}.landing-content{text-align:center;z-index:1;max-width:520px;width:100%}.landing-logo{font-size:5rem;margin-bottom:var(--space-md);animation:bounceIn .8s var(--ease-bounce);filter:drop-shadow(0 0 20px rgba(255,107,157,.4))}.landing-title{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;margin-bottom:var(--space-sm);line-height:1.1}.landing-title .word{display:inline-block;animation:bounceIn .6s var(--ease-bounce) backwards}.landing-title .word:nth-child(1){animation-delay:.1s;color:var(--accent-pink)}.landing-title .word:nth-child(2){animation-delay:.2s;color:var(--accent-blue)}.landing-title .word:nth-child(3){animation-delay:.3s;color:var(--accent-yellow)}.landing-subtitle{font-size:var(--text-lg);color:var(--text-secondary);margin-bottom:var(--space-2xl);animation:slideUp .6s var(--ease-smooth) .4s backwards}.landing-card{border-radius:var(--radius-xl);padding:var(--space-2xl);animation:slideUp .6s var(--ease-smooth) .5s backwards}.landing-card .input{text-align:center;font-size:var(--text-xl);letter-spacing:.5px}.username-input-wrapper{margin-bottom:var(--space-lg);position:relative}.username-input-wrapper .input-icon{position:absolute;left:var(--space-lg);top:50%;transform:translateY(-50%);font-size:var(--text-xl);opacity:.6}.username-input-wrapper .input{padding-left:3rem}.landing-actions{display:flex;flex-direction:column;gap:var(--space-md)}.landing-actions .btn{width:100%;font-size:var(--text-xl);padding:var(--space-lg) var(--space-xl)}.join-section{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.1)}.join-section .label{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-sm);text-transform:uppercase;letter-spacing:1.5px;font-weight:500}.join-row{display:flex;gap:var(--space-sm)}.join-row .input{flex:1;text-align:center;letter-spacing:8px;font-size:var(--text-2xl);font-family:var(--font-display)}.join-row .btn{flex-shrink:0}.connection-status{position:fixed;bottom:var(--space-lg);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--text-muted);z-index:100}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-red);transition:background var(--duration-normal)}.connection-dot.connected{background:var(--accent-green);box-shadow:0 0 10px #56ffa480}.connection-dot.connecting{background:var(--accent-yellow);animation:pulse 1s infinite}.lobby{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);position:relative}.lobby-card{max-width:500px;width:100%;border-radius:var(--radius-xl);padding:var(--space-2xl);animation:bounceIn .6s var(--ease-bounce)}.lobby-header{text-align:center;margin-bottom:var(--space-xl)}.lobby-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;margin-bottom:var(--space-md);color:var(--text-primary)}.room-code-section{margin-bottom:var(--space-xl)}.room-code-label{font-size:var(--text-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:var(--space-sm);text-align:center}.room-code{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:#c471f51a;border:2px dashed rgba(196,113,245,.3);cursor:pointer;transition:all var(--duration-normal) var(--ease-bounce)}.room-code:hover{border-color:var(--accent-purple);box-shadow:var(--shadow-glow-purple);transform:scale(1.02)}.room-code-digits{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;letter-spacing:12px;background:var(--gradient-neon);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.room-code-copy{font-size:var(--text-xl);opacity:.5;transition:opacity var(--duration-fast)}.room-code:hover .room-code-copy{opacity:1}.room-code-copied{font-size:var(--text-sm);color:var(--accent-green);text-align:center;margin-top:var(--space-xs);animation:slideUp .3s var(--ease-smooth)}.players-section{margin-bottom:var(--space-xl)}.players-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.players-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}.players-count{font-size:var(--text-sm);color:var(--text-muted);background:#ffffff0f;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full)}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-md)}.player-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);background:#ffffff0a;border:1px solid rgba(255,255,255,.06);animation:popIn .4s var(--ease-bounce);transition:all var(--duration-normal)}.player-card:hover{background:#ffffff14;transform:translateY(-2px)}.player-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:700;font-family:var(--font-display);color:#fff;text-transform:uppercase}.player-name{font-size:var(--text-sm);font-weight:500;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-badge{font-size:var(--text-xs);padding:2px 8px;border-radius:var(--radius-full);background:#ffd16626;color:var(--accent-yellow);font-weight:500}.waiting-indicator{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-lg)}.waiting-dots{display:flex;gap:4px}.waiting-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent-purple);animation:typing 1.4s infinite ease-in-out}.waiting-dots span:nth-child(1){animation-delay:0s}.waiting-dots span:nth-child(2){animation-delay:.2s}.waiting-dots span:nth-child(3){animation-delay:.4s}.lobby-actions{display:flex;flex-direction:column;gap:var(--space-md)}.lobby-actions .btn{width:100%;font-size:var(--text-xl);padding:var(--space-lg)}.back-btn{font-size:var(--text-sm)!important;padding:var(--space-sm) var(--space-md)!important;color:var(--text-muted)}.game{height:100vh;display:grid;grid-template-columns:260px 1fr 300px;grid-template-rows:auto 1fr;grid-template-areas:"header header header" "scoreboard canvas chat";gap:0;overflow:hidden}.game-header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg);background:#0f0e17e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}.game-header-left{display:flex;align-items:center;gap:var(--space-md)}.game-logo{font-size:1.5rem;cursor:default}.game-room-id{font-size:var(--text-sm);color:var(--text-muted);background:#ffffff0d;padding:4px 12px;border-radius:var(--radius-full);font-family:var(--font-display);letter-spacing:2px}.game-header-center{display:flex;align-items:center;gap:var(--space-md);flex:1;justify-content:center}.game-round-info{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}.word-hint{display:flex;gap:6px;align-items:center}.word-hint-char{width:24px;height:32px;border-bottom:3px solid var(--accent-purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--accent-blue)}.word-hint-space{width:12px;border-bottom:none}.word-display{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--accent-green);letter-spacing:3px;text-transform:uppercase}.game-header-right{display:flex;align-items:center;gap:var(--space-md)}.timer-container{position:relative;width:48px;height:48px}.timer-svg{width:48px;height:48px;transform:rotate(-90deg)}.timer-bg{fill:none;stroke:#ffffff14;stroke-width:4}.timer-progress{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .5s}.timer-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-sm);font-weight:700}@keyframes timerShake{0%,to{transform:translate(0)}20%{transform:translate(-3px) rotate(-2deg)}40%{transform:translate(3px) rotate(2deg)}60%{transform:translate(-2px) rotate(-1deg)}80%{transform:translate(2px) rotate(1deg)}}@keyframes timerGlow{0%,to{box-shadow:0 0 15px #ffd1664d}50%{box-shadow:0 0 30px #ffd16699}}@keyframes timerCriticalGlow{0%,to{box-shadow:0 0 15px #ff5e5b66}50%{box-shadow:0 0 40px #ff5e5bcc}}@keyframes screenFlash{0%,to{opacity:0}50%{opacity:1}}.timer-urgent{animation:timerGlow 1.5s ease-in-out infinite;border-radius:50%}.timer-critical{animation:timerCriticalGlow .8s ease-in-out infinite;border-radius:50%}.timer-critical .timer-text{font-size:var(--text-base)}.game.timer-danger:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 100px #ff5e5b26;animation:screenFlash 1s ease-in-out infinite}.scoreboard{grid-area:scoreboard;background:#0f0e1799;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden}.scoreboard-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;padding:var(--space-md) var(--space-lg);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:var(--space-sm)}.scoreboard-list{flex:1;overflow-y:auto;padding:var(--space-sm)}.score-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);transition:all var(--duration-normal);margin-bottom:2px}.score-item:hover{background:#ffffff0a}.score-item.is-drawing{background:#c471f51a;border:1px solid rgba(196,113,245,.2)}.score-item.has-guessed{background:#56ffa414}.score-rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;font-family:var(--font-display);flex-shrink:0}.score-rank.rank-1{background:linear-gradient(135deg,gold,#fa0);color:#1a1830}.score-rank.rank-2{background:linear-gradient(135deg,silver,#a0a0a0);color:#1a1830}.score-rank.rank-3{background:linear-gradient(135deg,#cd7f32,#b56929);color:#1a1830}.score-rank.rank-other{background:#ffffff14;color:var(--text-muted)}.score-avatar-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;font-family:var(--font-display);color:#fff;text-transform:uppercase;flex-shrink:0}.score-info{flex:1;min-width:0}.score-name{font-size:var(--text-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-status{font-size:var(--text-xs);color:var(--text-muted)}.score-status.drawing{color:var(--accent-purple)}.score-status.guessed{color:var(--accent-green)}.score-points{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--accent-yellow);flex-shrink:0}.canvas-area{grid-area:canvas;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-md);position:relative;background:#0f0e174d}.canvas-wrapper{position:relative;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);max-width:100%;max-height:100%}.canvas-wrapper canvas{display:block;cursor:crosshair}.canvas-wrapper.disabled canvas{cursor:default}.draw-toolbar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);margin-top:var(--space-md);animation:slideUp .4s var(--ease-smooth)}.color-palette{display:flex;gap:4px}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all var(--duration-fast);position:relative}.color-swatch:hover{transform:scale(1.2)}.color-swatch.active{border-color:#fff;box-shadow:0 0 10px currentColor;transform:scale(1.15)}.toolbar-divider{width:1px;height:24px;background:#ffffff26}.brush-size-group{display:flex;align-items:center;gap:var(--space-sm)}.brush-size-group label{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}.brush-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:4px;border-radius:2px;background:#ffffff26;outline:none}.brush-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-purple);cursor:pointer;transition:all var(--duration-fast)}.brush-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--accent-pink)}.tool-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);color:var(--text-secondary);transition:all var(--duration-fast);background:#ffffff0d}.tool-btn:hover{background:#ffffff1f;color:#fff}.tool-btn.active{background:#c471f533;color:var(--accent-purple)}.chat-panel{grid-area:chat;display:flex;flex-direction:column;background:#0f0e1799;border-left:1px solid rgba(255,255,255,.06);overflow:hidden}.chat-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;padding:var(--space-md) var(--space-lg);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:var(--space-sm)}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column;gap:2px}.chat-msg{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-sm);animation:slideUp .2s var(--ease-smooth);word-break:break-word}.chat-msg-sender{font-weight:600;margin-right:var(--space-xs)}.chat-msg.system{color:var(--accent-blue);font-style:italic;font-size:var(--text-xs);padding:var(--space-sm);background:#6dd5fa14;border-radius:var(--radius-md);text-align:center;margin:var(--space-xs) 0}.chat-msg.correct-guess{background:#56ffa41f;color:var(--accent-green);font-weight:600;border-radius:var(--radius-md);padding:var(--space-sm);text-align:center;animation:popIn .4s var(--ease-bounce)}.chat-input-area{padding:var(--space-sm) var(--space-md);border-top:1px solid rgba(255,255,255,.06);display:flex;gap:var(--space-sm)}.chat-input-area .input{font-size:var(--text-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full)}.chat-send-btn{width:40px;height:40px;border-radius:50%;background:var(--gradient-neon);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);flex-shrink:0;transition:all var(--duration-fast)}.chat-send-btn:hover{transform:scale(1.1);box-shadow:var(--shadow-glow-purple)}.word-select-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}.word-select-card{text-align:center;padding:var(--space-2xl) var(--space-3xl);border-radius:var(--radius-xl);animation:bounceIn .6s var(--ease-bounce);max-width:500px;width:90%}.word-select-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-sm)}.word-select-subtitle{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-xl)}.word-select-timer{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;color:var(--accent-yellow);margin-bottom:var(--space-lg);animation:pulse 1s infinite}.word-options{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.word-option{padding:var(--space-lg) var(--space-2xl);border-radius:var(--radius-lg);font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:#fff;cursor:pointer;transition:all var(--duration-normal) var(--ease-bounce);border:2px solid transparent;min-width:130px;animation:popIn .4s var(--ease-bounce) backwards}.word-option:nth-child(1){background:var(--gradient-fire);animation-delay:.1s}.word-option:nth-child(2){background:var(--gradient-neon);animation-delay:.2s}.word-option:nth-child(3){background:var(--gradient-cool);animation-delay:.3s}.word-option:hover{transform:translateY(-6px) scale(1.05);box-shadow:var(--shadow-lg)}.round-end-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}.round-end-card{text-align:center;padding:var(--space-2xl) var(--space-3xl);border-radius:var(--radius-xl);animation:bounceIn .6s var(--ease-bounce);max-width:450px;width:90%}.round-end-emoji{font-size:4rem;margin-bottom:var(--space-md);animation:wiggle .6s ease-in-out}.round-end-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-sm)}.round-end-word{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;margin-bottom:var(--space-lg);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);display:inline-block}.round-end-countdown{font-size:var(--text-sm);color:var(--text-muted)}.status-banner{text-align:center;padding:var(--space-sm) var(--space-md);font-family:var(--font-display);font-size:var(--text-base);font-weight:600;animation:slideDown .3s var(--ease-smooth);border-radius:var(--radius-md);margin:var(--space-xs) var(--space-md)}.status-banner.drawing{background:#c471f526;color:var(--accent-purple);border:1px solid rgba(196,113,245,.3)}.status-banner.guessing{background:#6dd5fa26;color:var(--accent-blue);border:1px solid rgba(109,213,250,.3)}.status-banner.waiting{background:#ffd16626;color:var(--accent-yellow);border:1px solid rgba(255,209,102,.3)}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:10px;height:10px;animation:confettiFall 3s linear forwards}@media(max-width:1024px){.game{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "canvas" "chat"}.scoreboard{display:none}.chat-panel{max-height:250px;border-left:none;border-top:1px solid rgba(255,255,255,.06)}}