:root {
  --bg: #101418; --panel: #1b2027; --line: #2c3a4a; --text: #e8ecef;
  --dim: #8a939c; --accent: #5aa9e6; --danger: #d04040;
  --light: #ede8d8; --dark: #6e7b62;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: #101418; color: #e8ecef;
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
}
header { padding: 1.6rem 2rem 0.6rem; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: 0.02em; }
.sub { margin: 0.4rem 0 0; color: #8a939c; max-width: 42rem; }
main {
  display: grid; grid-template-columns: minmax(320px, 560px) 1fr;
  gap: 1.6rem; padding: 1.2rem 2rem 3rem; align-items: start;
}
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

.board-host { width: 100%; aspect-ratio: 1; }
.board { width: 100%; height: 100%; border-radius: 6px; }
rect.light { fill: #ede8d8; }
rect.dark { fill: #6e7b62; }
rect.selected { fill: #c8b45a; }
rect.pending { fill: #9aa8c8; }
text.piece {
  font-size: 46px; text-anchor: middle; dominant-baseline: central;
  pointer-events: all; user-select: none;
}
text.coord { font-size: 11px; fill: #33383a; opacity: 0.75; user-select: none; }
circle.target { fill: #2b3a2b; opacity: 0.45; }
circle.capture { fill: none; stroke: #2b3a2b; stroke-width: 5; opacity: 0.45; }

.status { margin: 0.9rem 0 0; font-size: 1.05rem; }
.colour { margin: 0.2rem 0 0; color: #8a939c; font-size: 0.9rem; }

.side { display: grid; gap: 1rem; }
.panel { background: #1b2027; border-radius: 10px; padding: 1rem 1.1rem; }
.panel h2 { margin: 0 0 0.7rem; font-size: 0.85rem; text-transform: uppercase;
            letter-spacing: 0.08em; color: #8a939c; }
button {
  background: #2c3a4a; color: #e8ecef; border: 0; border-radius: 7px;
  padding: 0.6rem 1rem; font: inherit; cursor: pointer;
}
button:hover { background: #35485c; }
button:disabled { opacity: 0.4; cursor: default; }
button.danger { background: #3a2426; color: #e6a0a0; }
button.danger:hover:not(:disabled) { background: #4d2c2f; }
.join-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
#code {
  flex: 1; background: #101418; border: 1px solid #2c3a4a; border-radius: 7px;
  color: #e8ecef; font: 1.3rem/1 ui-monospace, monospace; letter-spacing: 0.3em;
  padding: 0.55rem 0.7rem; text-transform: uppercase; min-width: 0;
}
.hint { color: #8a939c; font-size: 0.82rem; margin: 0.6rem 0 0; }
.games { list-style: none; margin: 0; padding: 0; }
.games li {
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
  font-family: ui-monospace, monospace; font-size: 0.9rem;
}
.games li:hover { background: #2c3a4a; }
.games li.your-turn { color: #7fd39a; }
.games li.empty { color: #8a939c; cursor: default; font-family: inherit; }
.games li.empty:hover { background: none; }
.moves { font-family: ui-monospace, monospace; font-size: 0.85rem;
         color: #8a939c; word-break: break-all; margin: 0 0 0.9rem; min-height: 3rem; }

.promotion {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: grid; place-items: center;
}
.promotion.hidden { display: none; }
.promotion-inner {
  background: #1b2027; border-radius: 12px; padding: 1.5rem; display: grid;
  gap: 0.5rem; min-width: 16rem;
}
.promotion-inner h2 { margin: 0 0 0.4rem; font-size: 1rem; }