*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #f5f0e6;--color-bg-secondary: #ebe4d6;--color-player1: #deb887;--color-player1-glow: rgba(222, 184, 135, .5);--color-player2: #5c4033;--color-player2-glow: rgba(92, 64, 51, .5);--color-text: #3d2817;--color-text-dim: #8b7355;--color-accent: #8b7355;--color-border: #c4a574;--font-main: "Outfit", Georgia, serif}.theme-earth{--color-bg: #f5f0e6;--color-bg-secondary: #ebe4d6;--color-player1: #deb887;--color-player1-glow: rgba(222, 184, 135, .5);--color-player2: #5c4033;--color-player2-glow: rgba(92, 64, 51, .5);--color-text: #3d2817;--color-text-dim: #8b7355;--color-accent: #8b7355;--color-border: #c4a574}.theme-rose{--color-bg: #fdf2f4;--color-bg-secondary: #fce7eb;--color-player1: #f9a8b8;--color-player1-glow: rgba(249, 168, 184, .5);--color-player2: #be185d;--color-player2-glow: rgba(190, 24, 93, .5);--color-text: #831843;--color-text-dim: #d4648a;--color-accent: #d4648a;--color-border: #f9a8b8}.theme-ocean{--color-bg: #f0f9ff;--color-bg-secondary: #e0f2fe;--color-player1: #38bdf8;--color-player1-glow: rgba(56, 189, 248, .5);--color-player2: #0c4a6e;--color-player2-glow: rgba(12, 74, 110, .5);--color-text: #0c4a6e;--color-text-dim: #4a90a4;--color-accent: #4a90a4;--color-border: #7dd3fc}.theme-violet{--color-bg: #faf5ff;--color-bg-secondary: #f3e8ff;--color-player1: #c084fc;--color-player1-glow: rgba(192, 132, 252, .5);--color-player2: #6b21a8;--color-player2-glow: rgba(107, 33, 168, .5);--color-text: #581c87;--color-text-dim: #8b5cf6;--color-accent: #8b5cf6;--color-border: #d8b4fe}.theme-mono{--color-bg: #f5f5f5;--color-bg-secondary: #e5e5e5;--color-player1: #fafafa;--color-player1-glow: rgba(250, 250, 250, .5);--color-player2: #171717;--color-player2-glow: rgba(23, 23, 23, .5);--color-text: #171717;--color-text-dim: #666666;--color-accent: #666666;--color-border: #a3a3a3}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:var(--font-main);background:var(--color-bg);color:var(--color-text)}#root{position:relative}canvas{display:block;touch-action:none}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.ui-overlay>*{pointer-events:auto}.header{position:absolute;top:0;left:0;right:0;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,rgba(245,240,230,.95),transparent)}.title{font-size:1.25rem;font-weight:600;letter-spacing:.05em;color:var(--color-text)}.turn-indicator{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:var(--color-bg-secondary);border-radius:2rem;border:1px solid var(--color-border);box-shadow:0 2px 8px #5c40331a}.turn-indicator .piece-preview{width:24px;height:24px;border-radius:50%;transition:all .3s ease;border:2px solid rgba(92,64,51,.2)}.turn-indicator .piece-preview.player-0{background:var(--color-player1);box-shadow:0 2px 8px var(--color-player1-glow)}.turn-indicator .piece-preview.player-1{background:var(--color-player2);box-shadow:0 2px 8px var(--color-player2-glow)}.turn-indicator span{font-size:.875rem;font-weight:500;color:var(--color-text-dim)}.turn-indicator .piece-preview.thinking{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}.restart-btn{padding:.5rem 1.25rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text);font-family:var(--font-main);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #5c40331a}.restart-btn:hover{background:var(--color-border);color:#fff}.play-again-hud-btn{padding:.5rem 1.25rem;background:var(--color-player2);border:none;border-radius:.5rem;color:#fff;font-family:var(--font-main);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #5c403340}.play-again-hud-btn:hover{background:#4a3428;transform:translateY(-1px);box-shadow:0 4px 12px #5c403359}.header-buttons{display:flex;gap:.5rem;align-items:center}.rotate-toggle-btn{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-dim);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #5c40331a}.rotate-toggle-btn:hover{background:var(--color-border);color:#fff}.rotate-toggle-btn.active{background:var(--color-player2);border-color:var(--color-player2);color:#fff}.rotate-toggle-btn.active svg{animation:spin 3s linear infinite}.rotate-toggle-btn.active:hover{background:#4a3428}.game-settings{position:absolute;top:5rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem}.mode-selector{display:flex;gap:.25rem;background:var(--color-bg-secondary);padding:.25rem;border-radius:.75rem;border:1px solid var(--color-border);box-shadow:0 2px 8px #5c40331a}.mode-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:none;border-radius:.5rem;color:var(--color-text-dim);font-family:var(--font-main);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.mode-btn:hover{color:var(--color-text)}.mode-btn.active{background:var(--color-player2);color:#fff;box-shadow:0 2px 6px #5c403333}.mode-btn svg{flex-shrink:0}.bot-selector{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;box-shadow:0 2px 8px #5c40331a}.bot-selector label{font-size:.75rem;font-weight:600;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.bot-selector select{background:var(--color-bg);border:1px solid var(--color-border);border-radius:.375rem;padding:.375rem .75rem;font-family:var(--font-main);font-size:.8rem;color:var(--color-text);cursor:pointer;transition:all .2s ease}.bot-selector select:hover{border-color:var(--color-player2)}.bot-selector select:focus{outline:none;border-color:var(--color-player2);box-shadow:0 0 0 2px #5c403333}.single-player-settings{display:flex;gap:.75rem;align-items:center}.color-selector{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;box-shadow:0 2px 8px #5c40331a}.color-selector label{font-size:.75rem;font-weight:600;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.color-buttons{display:flex;gap:.25rem}.color-btn{width:32px;height:32px;padding:0;background:var(--color-bg);border:2px solid var(--color-border);border-radius:.375rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.color-btn:hover{border-color:var(--color-player2);transform:scale(1.05)}.color-btn.active{border-color:var(--color-player2);background:var(--color-player2);box-shadow:0 2px 8px #5c403340}.color-piece{width:18px;height:18px;border-radius:50%;transition:all .2s ease}.light-piece{background:var(--color-player1);border:1px solid rgba(92,64,51,.2)}.dark-piece{background:var(--color-player2);border:1px solid rgba(92,64,51,.3)}.color-btn.active .color-piece{box-shadow:0 2px 6px #0000004d}.instructions{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);text-align:center;color:var(--color-text-dim);font-size:.875rem}.instructions kbd{display:inline-block;padding:.15rem .5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.25rem;font-family:var(--font-main);font-size:.75rem;margin:0 .15rem;color:var(--color-text)}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#f5f0e6e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--color-bg);border:2px solid var(--color-border);border-radius:1.5rem;padding:3rem 4rem;text-align:center;animation:scaleIn .3s ease;box-shadow:0 10px 40px #5c403333}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal h2{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.modal h2.player-0{color:#b8956e;text-shadow:0 2px 10px var(--color-player1-glow)}.modal h2.player-1{color:var(--color-player2);text-shadow:0 2px 10px var(--color-player2-glow)}.modal h2.draw{color:var(--color-accent)}.modal p{color:var(--color-text-dim);margin-bottom:2rem;font-size:1.1rem}.modal-buttons{display:flex;gap:.75rem;justify-content:center}.modal .play-again-btn{padding:.875rem 2rem;background:var(--color-player2);border:none;border-radius:.75rem;color:#fff;font-family:var(--font-main);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #5c40334d}.modal .play-again-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #5c403366}.modal .view-board-btn{padding:.875rem 2rem;background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:.75rem;color:var(--color-text);font-family:var(--font-main);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.modal .view-board-btn:hover{background:var(--color-border);color:#fff;transform:translateY(-2px)}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg)}.loading:after{content:"";width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-player2);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.move-panel{position:absolute;bottom:2rem;right:2rem;background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:1rem;padding:1rem;box-shadow:0 4px 20px #5c403326}.move-panel-header{text-align:center;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-border)}.move-panel-header span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim)}.move-panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.move-panel-cell{width:48px;height:48px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;padding:0}.move-panel-cell:hover:not(.full):not(.disabled),.move-panel-cell.hovered:not(.full):not(.disabled){transform:scale(1.05);box-shadow:0 2px 8px #5c403333}.move-panel-cell.player-0:hover:not(.full):not(.disabled),.move-panel-cell.player-0.hovered:not(.full):not(.disabled){background:var(--color-player1);border-color:var(--color-player1);box-shadow:0 2px 12px var(--color-player1-glow)}.move-panel-cell.player-1:hover:not(.full):not(.disabled),.move-panel-cell.player-1.hovered:not(.full):not(.disabled){background:var(--color-player2);border-color:var(--color-player2);box-shadow:0 2px 12px var(--color-player2-glow)}.move-panel-cell:active:not(.full):not(.disabled){transform:scale(.95)}.move-panel-cell.full{background:var(--color-bg-secondary);opacity:.5;cursor:not-allowed}.move-panel-cell.disabled{cursor:default}.move-panel-cell.winning{animation:winPulse 1s ease-in-out infinite}.move-panel-cell.winning.player-0{box-shadow:0 0 12px var(--color-player1-glow);border-color:var(--color-player1)}.move-panel-cell.winning.player-1{box-shadow:0 0 12px var(--color-player2-glow);border-color:var(--color-player2)}@keyframes winPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}.move-panel-cell.last-move-player-0{animation:lastMovePulse0 1.5s ease-in-out infinite}.move-panel-cell.last-move-player-1{animation:lastMovePulse1 1.5s ease-in-out infinite}@keyframes lastMovePulse0{0%,to{border-color:gold;box-shadow:0 0 8px #ffd70066}50%{border-color:#b8960b;box-shadow:0 0 4px #ffd70033}}@keyframes lastMovePulse1{0%,to{border-color:orange;box-shadow:0 0 8px #ffa50066}50%{border-color:#b87400;box-shadow:0 0 4px #ffa50033}}.fill-indicator{display:flex;flex-direction:column-reverse;gap:2px;height:36px;justify-content:flex-start;align-items:center}.fill-dot{width:8px;height:8px;border-radius:50%;background:transparent;border:1px solid var(--color-border);transition:all .2s ease}.fill-dot.player-0{background:var(--color-player1);border-color:var(--color-player1);box-shadow:0 1px 3px var(--color-player1-glow)}.fill-dot.player-1{background:var(--color-player2);border-color:var(--color-player2);box-shadow:0 1px 3px var(--color-player2-glow)}.move-panel-labels{position:relative;margin-top:.5rem;height:1rem}.axis-label{font-size:.625rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.axis-label.vertical{position:absolute;right:-1rem;top:-5.5rem;writing-mode:vertical-rl;transform:rotate(180deg)}@media (max-width: 768px){.header{padding:1rem 1.25rem}.title{font-size:1.1rem}.game-settings{top:4rem}.mode-btn{padding:.4rem .75rem;font-size:.75rem}.mode-btn svg{width:14px;height:14px}.single-player-settings{flex-direction:column;gap:.5rem}.instructions{display:none}.move-panel{bottom:1rem;right:1rem;padding:.75rem}.move-panel-cell{width:40px;height:40px}.fill-indicator{height:28px}.fill-dot{width:6px;height:6px}}@media (max-width: 600px){.header{padding:.75rem 1rem;flex-wrap:wrap;gap:.5rem}.title{font-size:.95rem;order:1}.turn-indicator{order:3;width:100%;justify-content:center;padding:.35rem .75rem;margin-top:.25rem}.turn-indicator .piece-preview{width:20px;height:20px}.turn-indicator span{font-size:.8rem}.header-buttons{order:2}.restart-btn,.play-again-hud-btn{padding:.4rem .75rem;font-size:.75rem}.rotate-toggle-btn{width:32px;height:32px}.rotate-toggle-btn svg{width:16px;height:16px}.game-settings{top:auto;bottom:1rem;left:1rem;transform:none;align-items:flex-start}.mode-selector{padding:.2rem;border-radius:.5rem}.mode-btn{padding:.35rem .6rem;font-size:.7rem;gap:.35rem}.mode-btn svg{width:12px;height:12px}.bot-selector,.color-selector{padding:.25rem .5rem;border-radius:.375rem}.bot-selector label,.color-selector label{font-size:.65rem}.bot-selector select{padding:.25rem .5rem;font-size:.7rem}.color-btn{width:28px;height:28px}.color-piece{width:14px;height:14px}.move-panel{bottom:.75rem;right:.75rem;padding:.5rem;border-radius:.75rem;border-width:1px}.move-panel-header{margin-bottom:.5rem;padding-bottom:.35rem}.move-panel-header span{font-size:.65rem}.move-panel-grid{gap:3px}.move-panel-cell{width:36px;height:36px;border-radius:4px}.fill-indicator{height:24px;gap:1px}.fill-dot{width:5px;height:5px}.move-panel-labels{margin-top:.35rem;height:.75rem}.axis-label{font-size:.55rem}.axis-label.vertical{right:-.75rem;top:-4rem}}@media (max-width: 400px){.header{padding:.5rem .75rem}.title{font-size:.85rem}.turn-indicator{padding:.3rem .6rem;gap:.5rem}.turn-indicator .piece-preview{width:18px;height:18px}.turn-indicator span{font-size:.75rem}.restart-btn,.play-again-hud-btn{padding:.35rem .6rem;font-size:.7rem}.rotate-toggle-btn{width:28px;height:28px}.rotate-toggle-btn svg{width:14px;height:14px}.game-settings{bottom:.5rem;left:.5rem;gap:.5rem}.mode-btn{padding:.3rem .5rem;font-size:.65rem}.move-panel{bottom:.5rem;right:.5rem;padding:.4rem;border-radius:.5rem}.move-panel-header{margin-bottom:.35rem;padding-bottom:.25rem}.move-panel-header span{font-size:.6rem}.move-panel-grid{gap:2px}.move-panel-cell{width:28px;height:28px;border-radius:3px}.fill-indicator{height:18px;gap:1px}.fill-dot{width:4px;height:4px}.move-panel-labels{display:none}}@media (max-height: 500px) and (orientation: landscape){.header{padding:.5rem 1rem;background:linear-gradient(to bottom,#f5f0e6fa,#f5f0e6b3)}.turn-indicator{order:2;width:auto;margin-top:0}.game-settings{position:absolute;top:50%;left:.75rem;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:.5rem}.mode-selector{flex-direction:column;padding:.2rem}.mode-btn{justify-content:flex-start}.single-player-settings{flex-direction:column;gap:.4rem}.move-panel{position:absolute;top:50%;right:.75rem;bottom:auto;transform:translateY(-50%)}.move-panel-cell{width:32px;height:32px}.fill-indicator{height:22px}.fill-dot{width:4px;height:4px}}@media (max-width: 500px){.modal{padding:2rem 1.5rem;border-radius:1rem;margin:1rem;max-width:calc(100vw - 2rem)}.modal h2{font-size:1.75rem}.modal p{font-size:.95rem;margin-bottom:1.5rem}.modal-buttons{flex-direction:column;gap:.5rem}.modal .play-again-btn,.modal .view-board-btn{padding:.75rem 1.5rem;width:100%;font-size:.9rem}}.online-lobby{position:absolute;top:0;right:0;bottom:0;left:0;background:#f5f0e6f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease;z-index:100}.lobby-card{background:var(--color-bg);border:2px solid var(--color-border);border-radius:1.5rem;padding:2.5rem 3rem;text-align:center;animation:scaleIn .3s ease;box-shadow:0 10px 40px #5c403333;max-width:400px;width:90%}.lobby-card h2{font-size:1.75rem;font-weight:700;color:var(--color-text);margin-bottom:1.5rem}.lobby-section{margin-bottom:1.25rem}.lobby-hint{font-size:.8rem;color:var(--color-text-dim);margin-top:.5rem}.lobby-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--color-text-dim);font-size:.85rem}.lobby-divider:before,.lobby-divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.lobby-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;border-radius:.75rem;font-family:var(--font-main);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.lobby-btn.primary{background:var(--color-player2);color:#fff;box-shadow:0 4px 12px #5c40334d;width:100%}.lobby-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #5c403366}.lobby-btn.secondary{background:transparent;color:var(--color-text-dim);border:none;padding:.5rem 1rem;font-size:.875rem;margin-top:1rem}.lobby-btn.secondary:hover{color:var(--color-text);text-decoration:underline}.lobby-btn:disabled{opacity:.6;cursor:not-allowed}.join-input-group{display:flex;gap:.5rem}.join-input-group input{flex:1;padding:.875rem 1rem;border:2px solid var(--color-border);border-radius:.75rem;font-family:var(--font-main);font-size:1rem;text-align:center;letter-spacing:.15em;text-transform:uppercase;background:var(--color-bg-secondary);color:var(--color-text);transition:all .2s ease}.join-input-group input:focus{outline:none;border-color:var(--color-player2);box-shadow:0 0 0 3px #5c40331a}.join-input-group input::placeholder{text-transform:none;letter-spacing:normal;color:var(--color-text-dim)}.join-input-group .lobby-btn{padding:.875rem 1.5rem;background:var(--color-player2);color:#fff}.join-input-group .lobby-btn:hover:not(:disabled){background:#4a3428}.lobby-card.waiting{max-width:450px}.room-code-display{background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:1rem;padding:1.5rem 2rem;margin-bottom:1.5rem}.room-code-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim);margin-bottom:.5rem}.room-code{display:block;font-size:2.5rem;font-weight:700;letter-spacing:.2em;color:var(--color-text);font-family:SF Mono,Fira Code,monospace}.waiting-text{color:var(--color-text-dim);font-size:.95rem;margin-bottom:1rem}.copy-btn{background:var(--color-player2);color:#fff;width:100%;margin-bottom:1.5rem}.copy-btn:hover:not(:disabled){background:#4a3428}.copy-btn.copied{background:#4a8f4a}.waiting-spinner{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;background:var(--color-bg-secondary);border-radius:.75rem;color:var(--color-text-dim);font-size:.9rem}.spinner{width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-player2);border-radius:50%;animation:spin 1s linear infinite}.spinner.small{width:16px;height:16px;border-width:2px}.lobby-error{background:#fef2f2;border:1px solid #fecaca;border-radius:.75rem;padding:1rem;margin-bottom:1.5rem;color:#dc2626;font-size:.9rem}.lobby-error .error-hint{font-size:.8rem;margin-top:.5rem;color:#7f1d1d}.lobby-error code{background:#dc26261a;padding:.2rem .4rem;border-radius:.25rem;font-family:SF Mono,Fira Code,monospace;font-size:.85em}.online-player-info{position:absolute;left:50%;transform:translate(-50%);top:8rem;font-size:.85rem;color:var(--color-text-dim);background:var(--color-bg-secondary);padding:.4rem .75rem;border-radius:.5rem;border:1px solid var(--color-border)}.player-badge{display:inline-block;padding:.15rem .5rem;border-radius:.25rem;font-weight:600;margin-left:.25rem}.player-badge.player-0{background:var(--color-player1);color:var(--color-text)}.player-badge.player-1{background:var(--color-player2);color:#fff}.leave-btn{padding:.5rem 1rem;background:transparent;border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-dim);font-family:var(--font-main);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.leave-btn:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.modal .leave-game-btn{padding:.875rem 2rem;background:transparent;border:2px solid var(--color-border);border-radius:.75rem;color:var(--color-text-dim);font-family:var(--font-main);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.modal .leave-game-btn:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.mode-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 500px){.lobby-card{padding:1.75rem 1.5rem;border-radius:1rem}.lobby-card h2{font-size:1.5rem;margin-bottom:1.25rem}.lobby-btn{padding:.75rem 1.25rem;font-size:.9rem}.join-input-group{flex-direction:column}.join-input-group input{text-align:center}.join-input-group .lobby-btn{width:100%}.room-code{font-size:2rem}.room-code-display{padding:1rem 1.5rem}.online-player-info{top:5.5rem;font-size:.75rem;padding:.3rem .6rem}.player-badge{padding:.1rem .4rem;font-size:.7rem}}.settings-btn{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-dim);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #5c40331a}.settings-btn:hover{background:var(--color-border);color:#fff}.settings-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;z-index:200}.settings-modal{background:var(--color-bg);border:2px solid var(--color-border);border-radius:1.5rem;padding:2rem 2.5rem;min-width:320px;max-width:90vw;animation:scaleIn .2s ease;box-shadow:0 10px 40px #0003;position:relative}.settings-modal h2{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:1.5rem;text-align:center}.settings-close-btn{position:absolute;top:1rem;right:1rem;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:.5rem;color:var(--color-text-dim);cursor:pointer;transition:all .2s ease}.settings-close-btn:hover{background:var(--color-bg-secondary);color:var(--color-text)}.settings-section{margin-bottom:1.5rem}.settings-section:last-child{margin-bottom:0}.settings-section h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim);margin-bottom:1rem}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.75rem}.theme-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:.75rem;cursor:pointer;transition:all .2s ease}.theme-option:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.theme-option.active{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent)}.theme-preview{width:48px;height:48px;border-radius:.5rem;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px #0000001a}.theme-preview-bg{position:absolute;top:0;right:0;bottom:0;left:0}.theme-preview-pieces{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:4px}.theme-preview-piece{width:14px;height:14px;border-radius:50%}.theme-name{font-size:.75rem;font-weight:600;color:var(--color-text)}@media (max-width: 500px){.settings-modal{padding:1.5rem;border-radius:1rem;margin:1rem}.settings-modal h2{font-size:1.25rem;margin-bottom:1rem}.theme-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.theme-option{padding:.5rem}.theme-preview{width:40px;height:40px}.theme-preview-piece{width:12px;height:12px}.theme-name{font-size:.65rem}.settings-btn{width:32px;height:32px}.settings-btn svg{width:16px;height:16px}}@media (max-width: 400px){.settings-btn{width:28px;height:28px}.settings-btn svg{width:14px;height:14px}}