*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;min-height:100vh;background:#1e1e2e;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select,textarea{font-family:inherit}button:focus-visible{outline:2px solid #f9e2af;outline-offset:2px}.room-code-input::placeholder{font-family:Inter Tight,Inter,system-ui,sans-serif}.room-code-input:focus-visible{outline:2px solid rgba(166,227,161,.5);outline-offset:1px}input:focus-visible{outline:2px solid #f9e2af;outline-offset:1px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#11111b80;border-radius:3px}::-webkit-scrollbar-thumb{background:#585b7080;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#585b70b3}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes confetti-sway{0%,to{margin-left:0}25%{margin-left:30px}75%{margin-left:-30px}}.confetti-piece{position:fixed;top:-10px;width:10px;height:10px;animation:confetti-fall linear forwards,confetti-sway ease-in-out infinite}.home-create-btn{padding:18px 48px;border-radius:12px;border:none;background:#89b4fa;box-shadow:0 4px 12px #89b4fa66;color:#1e1e2e;font-size:20px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);margin-top:16px}.home-create-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #89b4fa80;background:#9ec5fe}.home-create-btn:active{transform:scale(.97);box-shadow:0 2px 8px #89b4fa4d}.home-join-btn{padding:12px 24px;border-radius:10px;border:1px solid rgba(166,227,161,.3);background:transparent;color:#a6e3a1;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.home-join-btn:hover{border-color:#a6e3a180;background:#a6e3a114;transform:translateY(-1px)}.home-join-btn:active{transform:scale(.97)}.lobby{display:flex;flex-direction:column;align-items:center;min-height:100vh;background:#1d1d25;color:#cdd6f4;font-family:Inter,system-ui,-apple-system,sans-serif;padding:48px 20px 32px;gap:28px}.lobby-branding{display:flex;flex-direction:column;align-items:center;gap:12px}.lobby-logo{width:72px;height:72px;border-radius:16px}.lobby-title{font-size:28px;font-weight:700;color:#e6e9ef;margin:0;letter-spacing:-.5px}.lobby-subtitle{color:#6c7086;font-size:14px;margin:0}.lobby-room-banner{background:#89b4fa0f;border:1px solid rgba(137,180,250,.15);border-radius:16px;padding:20px 24px;max-width:460px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.lobby-room-label{color:#6c7086;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin:0}.lobby-room-code{color:#cdd6f4;font-size:36px;font-weight:700;letter-spacing:8px;font-family:Inter Tight,Inter,system-ui,sans-serif;margin:0}.lobby-copy-btn{padding:8px 20px;border-radius:20px;border:1px solid rgba(137,180,250,.25);background:#89b4fa14;color:#89b4fa;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.lobby-copy-btn:hover{background:#89b4fa26;border-color:#89b4fa66}.lobby-copy-btn:active{transform:scale(.97)}.lobby-copy-btn.copied{background:#a6e3a11f;border-color:#a6e3a14d;color:#a6e3a1}.lobby-waiting-text{color:#585b70;font-size:13px;margin:0;animation:lobby-pulse 2s ease-in-out infinite}@keyframes lobby-pulse{0%,to{opacity:.6}50%{opacity:1}}.lobby-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px;max-width:460px;width:100%}.lobby-team-col{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;min-height:120px;min-width:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.lobby-team-col[data-team=team1],.lobby-team-col[data-team=team2]{background:#89b4fa0d;border:1px solid rgba(137,180,250,.12)}.lobby-team-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin:0 0 4px 4px}.lobby-team-col[data-team=team1] .lobby-team-label{color:#f38ba899}.lobby-team-col[data-team=team2] .lobby-team-label{color:#89b4fa99}.lobby-vs{display:flex;align-items:center;justify-content:center;align-self:center;color:#45475a;font-size:13px;font-weight:700;letter-spacing:1px;flex-shrink:0;-webkit-user-select:none;user-select:none}.lobby-player-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:#11111b66;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:default;min-height:48px;min-width:0;overflow:hidden;user-select:none;-webkit-user-select:none}.lobby-player-card.draggable{cursor:grab}.lobby-player-card.draggable:hover{background:#11111b99;transform:translateY(-1px);box-shadow:0 4px 12px #00000040}.lobby-player-card.draggable:active{cursor:grabbing}.lobby-player-card.dragging{opacity:.4}.lobby-player-card.drop-target{border-style:dashed;border-color:#cdd6f44d}.lobby-player-card.drag-over{background:#cdd6f41f;border-style:dashed;border-color:#cdd6f480;transform:scale(1.03);box-shadow:0 4px 16px #0000004d}.lobby-player-card.drag-over[data-player=P1]{border-color:#f38ba899;background:#f38ba81f}.lobby-player-card.drag-over[data-player=P2]{border-color:#b4befe99;background:#b4befe1f}.lobby-player-card.drag-over[data-player=P3]{border-color:#a6e3a199;background:#a6e3a11f}.lobby-player-card.drag-over[data-player=P4]{border-color:#f9e2af99;background:#f9e2af1f}.lobby-player-card[data-player=P1]{border-color:#f38ba826}.lobby-player-card[data-player=P2]{border-color:#b4befe26}.lobby-player-card[data-player=P3]{border-color:#a6e3a126}.lobby-player-card[data-player=P4]{border-color:#f9e2af26}.lobby-player-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;border:2px solid;object-fit:cover}.lobby-player-avatar-fallback{display:flex;align-items:center;justify-content:center;background:#313244}.lobby-player-name{flex:1;font-size:15px;font-weight:500;color:#cdd6f4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-player-name-input{flex:1;font-size:15px;font-weight:500;color:#cdd6f4;background:transparent;border:none;border-bottom:1px solid transparent;padding:0;min-width:0;width:0;font-family:inherit;transition:border-color .2s}.lobby-player-name-input:focus{outline:none;border-bottom-color:#cdd6f44d}.lobby-player-name-input::placeholder{color:#585b70}.lobby-player-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;flex-shrink:0;letter-spacing:.3px}.lobby-player-badge.you{background:#a6e3a11f;color:#a6e3a1}.lobby-player-badge.host{background:#f9e2af1f;color:#f9e2af}.lobby-player-badge.bot{background:#cba6f71f;color:#cba6f7}.lobby-player-badge.waiting{background:#585b7026;color:#585b70;animation:lobby-pulse 2s ease-in-out infinite}.lobby-drag-hint{color:#45475a;font-size:12px;margin:0;text-align:center}.lobby-start-btn{padding:14px 56px;border-radius:14px;border:none;background:#a6e3a1;color:#1e1e2e;font-size:17px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.3px}.lobby-start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #a6e3a159}.lobby-start-btn:active{transform:scale(.97);box-shadow:0 2px 8px #a6e3a140}.lobby-start-btn.ready{animation:lobby-glow 2s ease-in-out infinite}@keyframes lobby-glow{0%,to{box-shadow:0 4px 12px #a6e3a140}50%{box-shadow:0 4px 24px #a6e3a173}}.lobby-wait-msg{color:#585b70;font-size:14px;margin:0;font-style:italic}.lobby-settings-toggle{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid rgba(88,91,112,.2);background:#11111b4d;color:#6c7086;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);max-width:420px;width:100%;justify-content:center}.lobby-settings-toggle:hover{background:#11111b80;color:#a6adc8;border-color:#585b7059}.lobby-settings-toggle .chevron{transition:transform .2s;font-size:10px}.lobby-settings-toggle.open .chevron{transform:rotate(90deg)}.lobby-settings-wrapper{max-width:420px;width:100%}@media(max-width:768px){.lobby{padding:32px 16px 24px;gap:20px}.lobby-logo{width:56px;height:56px;border-radius:14px}.lobby-title{font-size:22px}.lobby-room-code{font-size:28px;letter-spacing:6px}.lobby-room-banner{padding:16px 20px}.lobby-teams{gap:8px}.lobby-team-col{padding:10px 8px;gap:6px}.lobby-player-card{padding:8px 10px;min-height:44px;gap:8px}.lobby-player-name,.lobby-player-name-input{font-size:13px}.lobby-player-badge{font-size:10px;padding:2px 6px}.lobby-player-avatar{width:22px;height:22px}.lobby-start-btn{padding:14px 48px;font-size:16px;width:100%;max-width:420px}.game-layout{flex-direction:column!important;padding:8px!important;gap:8px!important}.game-sidebar{flex:0 0 auto!important;max-height:none!important;overflow-y:visible!important;order:2!important;width:100%!important}.game-board-area{flex:0 0 auto!important;order:1!important;width:100%!important}.game-board-area svg{max-width:100%!important;max-height:50vh!important}}