:root{
  --bg:#0c101b; --panel:#11182a; --border:#28334a; --text:#dbe7ff; --muted:#9aa9c4; --accent:#7aa5ff;
  --tile:#0f1626; --tile-stroke:#3a4661;
}
*{ box-sizing:border-box; }
html,body{ height:100%; background:var(--bg); color:var(--text); font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; margin:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(12,16,27,.9); backdrop-filter:saturate(120%) blur(8px); }
.brand{ font-weight:700; letter-spacing:.3px; }
.joiner{ display:flex; gap:8px; align-items:center; }
.joiner input{ background:#0e1526; color:var(--text); border:1px solid var(--border); padding:8px 10px; border-radius:10px; width:180px; }
.joiner button{ background:var(--accent); color:#071224; border:0; padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer; }
.status{ color:var(--muted); font-size:12px; margin-left:6px; }

.layout{ display:grid; grid-template-columns: minmax(320px,1fr) 340px; gap:16px; padding:16px; }
.board-col{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.side-col{ display:flex; flex-direction:column; gap:16px; }

.panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; }
.panel-title{ font-weight:700; margin-bottom:10px; color:#cfe0ff; }

.players{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.players li{ display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:#0e1526; border:1px solid var(--border); border-radius:10px; }
.badge{ margin-left:6px; border:1px solid #3a4661; color:#bfcfff; font-size:11px; padding:1px 6px; border-radius:999px; background:#111a30; }

.chat-log{ background:#0e1526; border:1px solid var(--border); border-radius:10px; height:220px; overflow:auto; padding:8px; margin-bottom:8px; }
.chat-form{ display:flex; gap:6px; }
.chat-form input{ flex:1; background:#0e1526; color:var(--text); border:1px solid var(--border); padding:8px 10px; border-radius:10px; }
.chat-form button{ background:var(--accent); border:0; color:#071224; padding:8px 12px; border-radius:10px; font-weight:600; }

.controls{ display:flex; align-items:center; gap:12px; }
.controls button{ background:#203058; color:#dbe7ff; border:1px solid var(--border); padding:8px 12px; border-radius:10px; cursor:pointer; }
.dice{ color:var(--muted); }

#boardWrap{ position:relative; width:min(90vmin, 720px); aspect-ratio:1; }
.board-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(11,1fr); grid-template-rows:repeat(11,1fr); background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:8px; gap:2px; }
.pawns-layer{ pointer-events:none; position:absolute; inset:0; }

.tile{ position:relative; background:var(--tile); border:1px solid var(--tile-stroke); border-radius:8px; display:flex; align-items:flex-start; gap:6px; padding:6px; overflow:hidden; }
.tile .band{ position:absolute; left:0; top:0; height:12px; width:100%; }
.tile .label{ margin-top:14px; color:#d6e3ff; font-size:12px; line-height:1.15; }
.tile.vert .label{ writing-mode:vertical-rl; text-orientation:mixed; margin-top:0; margin-left:14px; }
.tile .icon{ width:14px; height:14px; margin-top:16px; opacity:.9; }

.center{ grid-column:2 / span 9; grid-row:2 / span 9; background:#0e1526; border:1px dashed var(--border); border-radius:14px; }

.pawn{ position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid rgba(12,16,27,.9); box-shadow:0 0 0 1px #00000022; transform:translate(-50%,-50%); }