:root{--bg:#1e2127;--panel:#2a2f37;--panel-border:#3a414c;--text:#e6e8eb;--text-dim:#9aa3ad;--accent:#b4c1d1;--p1:#5f8dd3;--p2:#d35f5f;--cell-bg:#383f49;--cell-bg-hover:#444d5a;--third-gap:0px;--row-gap:8px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text);justify-content:center;margin:0;display:flex}.app{flex-direction:column;align-items:center;gap:18px;width:100%;max-width:720px;padding:24px 20px 48px;display:flex;position:relative}h1{letter-spacing:.02em;margin:0;font-size:28px}.lobby{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;flex-direction:column;gap:16px;width:100%;max-width:460px;padding:20px;display:flex}.lobby fieldset{border:1px solid var(--panel-border);border-radius:8px;flex-direction:column;gap:6px;margin:0;padding:10px 14px 12px;display:flex}.lobby legend{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;padding:0 6px;font-size:13px}.lobby label{cursor:pointer;align-items:center;gap:8px;font-size:15px;display:flex}button.primary,button.ghost{font:inherit;cursor:pointer;border:1px solid var(--panel-border);border-radius:8px;padding:10px 16px}button.primary{background:var(--accent);color:#15191e;border-color:var(--accent);font-weight:600}button.primary:hover{filter:brightness(1.05)}button.ghost{color:var(--text-dim);background:0 0}button.ghost:hover{color:var(--text);border-color:var(--text-dim)}button.primary:disabled{opacity:.5;cursor:not-allowed}.code-input{font:inherit;letter-spacing:.12em;text-align:center;text-transform:uppercase;background:var(--bg);color:var(--text);border:1px solid var(--panel-border);border-radius:6px;width:100%;padding:8px 10px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:22px}.code-input:focus{border-color:var(--accent);outline:none}.error-banner{border:1px solid var(--p2);width:100%;max-width:460px;color:var(--text);background:#d35f5f26;border-radius:8px;padding:10px 14px;font-size:14px}.waiting{background:var(--panel);border:1px solid var(--panel-border);text-align:center;border-radius:10px;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:460px;padding:24px;display:flex}.waiting h2{margin:0;font-size:20px}.waiting-hint{color:var(--text-dim);margin:0;font-size:14px}.room-code{letter-spacing:.18em;background:var(--bg);border:1px solid var(--panel-border);color:var(--text);-webkit-user-select:all;user-select:all;border-radius:8px;padding:12px 20px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:34px}.waiting-actions{gap:8px;display:flex}.hud{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;flex-direction:column;gap:10px;width:100%;padding:12px 14px;display:flex}.hud-turn,.hud-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.hud-actions{justify-content:space-between}.hud-meta{color:var(--text-dim);font-size:14px}.hud-meta strong{color:var(--text);font-weight:600}.hud-hint{color:var(--text-dim);font-size:14px}.player-chip{letter-spacing:.02em;color:#15191e;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;display:inline-block}.player-chip.player-p1{background:var(--p1)}.player-chip.player-p2{background:var(--p2)}.board{gap:var(--row-gap);background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;flex-direction:column;padding:12px;display:flex}.board-row{gap:var(--row-gap);display:flex}.third{gap:var(--third-gap);background:0 0;border:2px solid #0000;border-radius:8px;padding:0;transition:border-color .25s,box-shadow .25s;display:flex}.third.owned-p1{border-color:var(--p1);box-shadow:inset 0 0 0 1px #5f8dd340}.third.owned-p2{border-color:var(--p2);box-shadow:inset 0 0 0 1px #d35f5f40}.cell{background:var(--cell-bg);cursor:default;perspective:600px;border:none;border-radius:0;align-items:center;width:64px;height:128px;padding:0;display:flex;position:relative}.third>.cell:first-child{border-radius:6px 0 0 6px;justify-content:flex-end}.third>.cell:last-child{border-radius:0 6px 6px 0;justify-content:flex-start}.cell.clickable{cursor:pointer}.cell.clickable:not(.filled):hover{background:var(--cell-bg-hover)}.half-piece-img{-webkit-user-select:none;user-select:none;pointer-events:none;backface-visibility:visible;width:auto;height:96%;transition:transform .45s;transform:rotateY(0)}.half-piece-img[data-flipped=true]{transform:rotateY(180deg)}.half-piece-img.preview{opacity:0;transition:opacity .15s,transform .45s}.cell.clickable:not(.filled):hover .half-piece-img.preview{opacity:.35}.game-over{z-index:10;background:#0f1216b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.game-over-card{background:var(--panel);border:1px solid var(--panel-border);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:14px;min-width:280px;padding:24px 28px;display:flex}.game-over-card h2{align-items:center;gap:10px;margin:0;font-size:22px;display:flex}.game-over-meta{color:var(--text-dim);margin:0;font-size:14px}