:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;line-height:1.5;background-color:#0f1116;color:#f4f4f4}*{box-sizing:border-box}body{margin:0}.app-shell{min-height:100vh;display:flex;flex-direction:column;padding:1.5rem;gap:1.5rem}.top-bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.top-bar h1{margin:0;font-size:1.75rem}.connection-status{display:flex;flex-direction:column;font-size:.9rem;color:#aeb8c6;gap:.25rem}.connection-id{font-size:.75rem;opacity:.75}.lobby{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.input-group{display:flex;flex-direction:column;gap:.4rem}.input-group label{font-size:.85rem;color:#d0d6e0}.input-group input{min-width:16rem;padding:.5rem .75rem;border-radius:.4rem;border:1px solid #283042;background:#161b25;color:inherit}.button-row{display:flex;gap:.75rem}button{cursor:pointer;border:none;border-radius:.4rem;padding:.5rem .85rem;background:#3558ff;color:#fff;font-weight:600;transition:background .15s ease}button:hover{background:#2742c4}button:disabled{background:#394155;cursor:not-allowed}.secondary-button{background:#1f2638;color:#e4e8f2;padding:.45rem .75rem;min-width:92px}.secondary-button:hover:not(:disabled){background:#2d3750}.role-banner{font-size:.95rem;background:#182135;padding:.5rem .75rem;border-radius:.4rem}.game-id-row{display:flex;gap:.5rem;align-items:center}.game-id-row input{flex:1}.copy-notice{font-size:.8rem;color:#7dd77d;margin-top:.25rem}.main-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,26rem);gap:2rem;align-items:start}.board-wrapper{display:flex;flex-direction:column;gap:1rem;align-items:center}.turn-indicator{font-size:1rem;font-weight:600}.board-section{display:flex;flex-direction:column;gap:.75rem;align-items:center;width:100%}.board-container{position:relative;width:min(90vw,520px);max-width:520px;aspect-ratio:9 / 8}.board-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(9,1fr);border:3px solid #0d1018;border-radius:.6rem;overflow:hidden;box-shadow:0 12px 32px #0f111673;background:#f1f3f9}.board-container:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#ff4c4c;transform:translateY(-1px);pointer-events:none}.board-row{display:contents}.board-cell{--cell-color: #f9fafc;display:flex;align-items:center;justify-content:center;background:var(--cell-color);border:1px solid #0d1018;font-size:clamp(.6rem,1.8vw,1rem);font-weight:600;color:#1f2638;transition:background .15s ease,color .15s ease,outline-color .15s ease}.board-cell:hover{filter:brightness(.93)}.board-cell.setup-zone{--cell-color: #d1d3d9}.board-cell.owner-black{--cell-color: #1f283b;color:#f7f9ff}.board-cell.owner-white{--cell-color: #ffffff;color:#1b2132;border-color:#0d1018}.board-cell.setup-piece{--cell-color: #c2c6cf;color:#455067}.board-cell.selected{outline:3px solid #ffc857;outline-offset:-2px}.board-cell.target{--cell-color: #274efd;color:#fff}.board-cell.target:hover{filter:brightness(1.1)}.orientation-hint{font-size:.85rem;color:#9aa6be;text-align:center}.setup-controls{display:flex;flex-direction:column;gap:.75rem;background:#141b29;border:1px solid #283042;padding:.9rem;border-radius:.5rem}.sidebar{display:flex;flex-direction:column;gap:1.25rem}.sidebar-empty{font-style:italic;color:#8b94a9}.scoreboard,.setup-status,.log,.scoring-actions{background:#141b29;border:1px solid #283042;border-radius:.5rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.scoreboard h2,.setup-status h2,.log h2,.scoring-actions h3{margin:0;font-size:1.1rem}.score-row,.setup-row{display:flex;justify-content:space-between;font-size:.95rem}.score-result{font-weight:600;color:#ffc857}.log ul{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}.log-empty{font-size:.9rem;color:#8b94a9;margin:0}.scoring-actions button{width:fit-content}@media (max-width: 960px){.main-layout{grid-template-columns:1fr}}