*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a2e;--bg-card:#16213e;--bg-cell:#0f3460;--bg-cell-mid:#1a0a2e;--bg-cell-p1:#0f3460;--bg-cell-p2:#1e0f46;--border:#30305a;--accent:#e94560;--accent2:#0f9b8e;--text:#e0e0f0;--text-dim:#9090b0;--piece-p1:#4ecdc4;--piece-p2:#ff6b6b;--cell-valid:#4ecdc440;--cell-selected:#e9456066;background:var(--bg);color:var(--text);min-height:100vh;font-family:Segoe UI,system-ui,sans-serif;font-size:14px}body{min-height:100vh}h1{letter-spacing:.1em;font-size:2rem;font-weight:700}h2{font-size:1.25rem}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:none;border-radius:4px;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;transition:opacity .15s,background .15s}button:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:#c73550}.btn-ghost{color:var(--text);border:1px solid var(--border);background:0 0}.btn-ghost:hover:not(:disabled){background:#ffffff12}.btn-danger{color:#fff;background:#8b0000}.btn-danger:hover:not(:disabled){background:#a00}.btn-large{padding:.9rem 2.5rem;font-size:1.1rem}.form-error{color:var(--accent);margin-bottom:.5rem;font-size:.85rem}.loading{height:60vh;color:var(--text-dim);justify-content:center;align-items:center;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:2rem;height:2rem;margin:0 auto 1rem;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.auth-page{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100vh;display:flex}.auth-form{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:1rem;width:100%;max-width:360px;padding:2rem;display:flex}.auth-form label{color:var(--text-dim);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.auth-form input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:.5rem .7rem;font-size:.95rem}.auth-form input:focus{border-color:var(--accent);outline:none}.auth-form p{text-align:center;color:var(--text-dim);font-size:.85rem}.lobby-page{flex-direction:column;min-height:100vh;display:flex}.lobby-header{border-bottom:1px solid var(--border);background:var(--bg-card);justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.lobby-player{align-items:center;gap:1rem;display:flex}.lobby-main{flex:1;justify-content:center;align-items:center;display:flex}.waiting{flex-direction:column;align-items:center;gap:.75rem;display:flex}.game-page{flex-direction:column;min-height:100vh;display:flex}.game-header{background:var(--bg-card);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1.2rem;display:flex}.game-controls{gap:.5rem;display:flex}.turn-indicator{color:var(--text-dim);font-weight:700}.turn-indicator.my-turn{color:var(--accent2)}.btn-mode{background:var(--bg);border:1px solid var(--border);color:var(--text)}.btn-mode.active{background:var(--accent2);border-color:var(--accent2);color:#fff}.game-error{color:#ffb3b3;background:#8b000059;padding:.4rem 1rem;font-size:.85rem}.game-board-wrap{flex:1;justify-content:center;align-items:center;padding:1rem;display:flex;overflow:auto}.selection-hint{color:var(--text-dim);background:var(--bg-card);border-top:1px solid var(--border);align-items:center;gap:1rem;padding:.4rem 1rem;font-size:.85rem;display:flex}.board{grid-template-columns:repeat(var(--cols), 40px);grid-template-rows:repeat(var(--rows), 40px);border:1px solid var(--border);background:var(--border);gap:1px;display:grid}.cell{background:var(--bg-cell-p1);cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}.cell:hover{filter:brightness(1.2)}.cell-p1{background:var(--bg-cell-p1)}.cell-p2{background:var(--bg-cell-p2)}.cell-middle{background:var(--bg-cell-mid)}.cell-valid{outline:2px solid var(--accent2);outline-offset:-2px;background:var(--cell-valid)}.cell-placeable{outline:1px dashed var(--accent2);outline-offset:-2px}.cell-setup{background:var(--bg-cell-p1)}.piece{-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:11px;font-weight:700;transition:transform .1s;display:flex}.piece:hover{transform:scale(1.1)}.piece-player1{background:var(--piece-p1);color:#0f3460}.piece-player2{background:var(--piece-p2);color:#3d0000}.piece-selected{outline-offset:1px;outline:2px solid #fff}.piece-revealed{opacity:.85}.setup-phase{flex:1;gap:1.5rem;padding:1rem;display:flex;overflow:auto}.setup-inventory{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex-shrink:0;gap:.3rem;width:180px;padding:.75rem;display:flex}.setup-inventory h3{color:var(--text-dim);margin-bottom:.5rem;font-size:.9rem}.inv-piece{background:var(--bg);border:1px solid var(--border);text-align:left;color:var(--text);border-radius:4px;align-items:center;gap:.4rem;padding:.3rem .5rem;font-size:.8rem;display:flex}.inv-piece:hover:not(:disabled){border-color:var(--accent2)}.inv-selected{border-color:var(--accent2)!important;background:#0f9b8e26!important}.inv-depleted{opacity:.4}.inv-label{width:14px;font-weight:700}.inv-name{flex:1}.inv-count{color:var(--text-dim);font-size:.75rem}.setup-actions{flex-direction:column;gap:.5rem;margin-top:auto;display:flex}.setup-board{flex-direction:column;gap:.25rem;display:flex}.setup-grid{grid-template-columns:repeat(var(--cols), 40px);background:var(--border);border:1px solid var(--border);grid-auto-rows:40px;gap:1px;display:grid}.board-labels-files{gap:1px;padding-left:0;display:flex}.board-labels-files span{text-align:center;width:40px;color:var(--text-dim);font-size:.7rem}.board-labels-ranks{flex-direction:column;justify-content:flex-start;gap:1px;display:flex}.board-labels-ranks span{height:40px;color:var(--text-dim);align-items:center;font-size:.7rem;display:flex}.setup-waiting{height:60vh;color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex}.modal-overlay{z-index:100;background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:10px;width:100%;max-width:360px;padding:2rem}.modal p{margin-bottom:1.25rem}.modal-actions{justify-content:center;gap:.75rem;display:flex}.game-over-modal h2{margin-bottom:.5rem;font-size:2rem}.game-over-reason{color:var(--text-dim);margin-bottom:1.5rem}