/* ===============================================
   bothplay — minimalist dark by default,
   optional white-mode via [data-theme="light"].
   Player colors come from a 5-color palette,
   set dynamically as --p1 and --p2 on :root.
   =============================================== */

:root {
  /* 5-color player palette */
  --c-aqua:     #27819B;
  --c-moss:     #7C9B47;
  --c-orange:   #E78C30;
  --c-ruby:     #A62943;
  --c-amethyst: #9959B8;

  /* Defaults — overridden at runtime from room state */
  --p1: var(--c-ruby);
  --p2: var(--c-aqua);

  /* Dark theme (default) */
  --bg:      #0e0e10;
  --surface: #18181b;
  --surface-2: #232327;
  --ink:     #f4f3ef;
  --muted:   #8a8990;
  --line:    #2a2a2f;
  --accent:  var(--p1);
  --ok:      #4ade80;
  --err:     #f87171;
  --shadow:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);

  /* Neutral board surfaces — minimalist, theme-aware */
  --board-light: #2c2c30;
  --board-dark:  #1a1a1d;
  --board-grid:  #3a3a3f;

  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}

[data-theme="light"] {
  --bg:        #fafaf7;
  --surface:   #ffffff;
  --surface-2: #f1f0eb;
  --ink:       #18181b;
  --muted:     #6b6a72;
  --line:      #e6e4dd;
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  --board-light: #f0e9d8;
  --board-dark:  #c9b89a;
  --board-grid:  #b9a98a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px 40px;
}

.screen { display: none; width: 100%; max-width: 880px; }
.screen.active { display: block; }
.muted { color: var(--muted); }
.muted.small { font-size: 13px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card.center { text-align: center; }

h2 {
  font-size: 13px;
  margin: 18px 0 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
h2:first-child { margin-top: 0; }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }

input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s, background .15s;
  margin-top: 6px;
}
input[type="text"]:focus { outline: none; border-color: var(--p1); }
input[type="text"]::placeholder { color: var(--muted); }

button {
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, opacity .15s, border-color .15s;
  font-family: inherit;
}
button:hover { background: var(--line); }
button:active { transform: scale(.99); }
button:disabled { opacity: .4; cursor: not-allowed; }

button.ghost { background: transparent; color: var(--muted); }
button.ghost:hover { background: var(--surface-2); color: var(--ink); }

button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button.primary:hover { opacity: .9; background: var(--ink); }
button.primary-block { background: var(--ink); color: var(--bg); width: 100%; padding: 13px; font-size: 15px; margin-top: 12px; border: none; }
button.primary-block:hover { opacity: .9; }

button.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }

.btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.divider {
  text-align: center;
  margin: 22px 0 12px;
  position: relative;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--line); z-index: 0;
}
.divider span { background: var(--surface); padding: 0 12px; position: relative; z-index: 1; }

#join-form { display: flex; gap: 8px; }
#join-form input {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  flex: 1;
}

.error { margin: 12px 0 0; color: var(--err); font-size: 13px; }

.code-display {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 36px;
  letter-spacing: 0.3em;
  background: var(--surface-2);
  padding: 18px;
  border-radius: var(--radius);
  margin: 12px 0 16px;
  font-weight: 600;
  color: var(--ink);
}

/* ========= Theme toggle ========= */
#theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
}
#theme-toggle:hover { color: var(--ink); }

/* ========= Range slider ========= */
input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--p1);
}

/* ========= Score bar ========= */
.score-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.sb-player {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px;
  border-left: 3px solid currentColor;
}
.sb-player.p0 { color: var(--p1); }
.sb-player.p1 { color: var(--p2); text-align: right; align-items: flex-end; border-left: none; border-right: 3px solid currentColor; }
.sb-player .sb-name { font-weight: 600; color: var(--ink); font-size: 15px; }
.sb-player .sb-off { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.sb-swatches { display: flex; gap: 4px; margin-top: 2px; }
.sb-player.p1 .sb-swatches { justify-content: flex-end; }
.sb-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer; padding: 0;
  background: var(--c, transparent);
  transition: transform .1s, border-color .15s;
}
.sb-swatch:hover { transform: scale(1.15); }
.sb-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; transform: scale(1.15); }
.sb-swatch.taken { opacity: .25; cursor: not-allowed; }

.sb-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb-center .sb-num { font-family: ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 700; line-height: 1; }
.sb-center .sb-num.p0 { color: var(--p1); }
.sb-center .sb-num.p1 { color: var(--p2); }
.sb-center .sb-sep { color: var(--muted); margin: 0 4px; }
.sb-center .sb-target { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.score-bar.big { padding: 24px; }
.score-bar.big .sb-num { font-size: 40px; }

/* ========= Game picker / hub ========= */
.last-result {
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 13px;
  text-align: center;
}
.hub-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-tab {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.cat-tab:hover { color: var(--ink); }
.cat-tab.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.game-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.game-card {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-weight: 500;
  transition: border-color .15s, background .15s, transform .1s;
}
.game-card:hover { background: var(--line); border-color: var(--muted); }
.game-card:active { transform: scale(.98); }
.game-thumb {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
}
.game-thumb svg { width: 80%; height: 80%; display: block; }
.game-card .game-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-dots { display: flex; gap: 5px; justify-content: center; align-items: center; }
.game-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.game-dot.on { background: var(--ink); }

.hub-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.history { flex: 1; }
.history summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.hist-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.hist-row:last-child { border-bottom: none; }

/* ========= Modal ========= */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}
.modal-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  max-height: 80vh;
  overflow-y: auto;
}
.modal-card h2 {
  margin: 0 0 14px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 20px;
  font-weight: 600;
}
.modal-card ol {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
.modal-card ol li { margin-bottom: 6px; }

/* ========= Game screen ========= */
.game-title-bar { text-align: center; margin-bottom: 4px; }
.game-title-bar h2 { color: var(--ink); font-size: 13px; margin: 0; font-weight: 600; }

.status {
  text-align: center;
  margin: 12px auto;
  font-size: 15px;
  color: var(--muted);
  min-height: 22px;
}
.status.win { color: var(--ok); font-weight: 600; font-size: 17px; }

#board-host {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 16px 0;
  gap: 12px;
}

.game-footer {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; margin-top: 16px; flex-wrap: wrap;
}

/* ========= Chat FAB ========= */
#chat-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#chat-toggle {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  border: none;
  position: relative;
  box-shadow: var(--shadow);
}
#chat-fab .badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--p1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
#chat-panel {
  width: 280px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  padding: 12px;
}
#chat-log {
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  color: var(--ink);
}
#chat-log .msg b { color: var(--p1); }
#chat-log .msg.system { color: var(--muted); font-style: italic; }
#chat-log:empty::after {
  content: 'Noch keine Nachrichten.';
  color: var(--muted);
  font-size: 12px;
}
#chat-form { display: flex; gap: 6px; }
#chat-form input { flex: 1; padding: 8px 10px; font-size: 13px; }
#chat-form button { padding: 8px 12px; font-size: 13px; }

/* ===============================================
   GAME BOARDS — neutralized, theme-aware
   =============================================== */

/* ========= Tic Tac Toe ========= */
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  grid-template-rows: repeat(3, 88px);
  gap: 4px; background: var(--line); padding: 4px;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.ttt-cell {
  background: var(--surface); border: none; border-radius: 6px;
  font-size: 42px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; color: var(--ink);
}
.ttt-cell:hover:not(:disabled) { background: var(--surface-2); }
.ttt-cell:disabled { cursor: default; }
.ttt-cell.p0 { color: var(--p1); }
.ttt-cell.p1 { color: var(--p2); }
.ttt-cell.win { background: var(--surface-2); }

/* ========= Connect 4 ========= */
.c4-board {
  background: var(--surface-2); padding: 10px; border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(7, 52px); grid-template-rows: repeat(6, 52px);
  gap: 6px; box-shadow: var(--shadow);
}
.c4-cell {
  background: var(--bg); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.c4-cell.p0 { background: var(--p1); }
.c4-cell.p1 { background: var(--p2); }
.c4-cell.win { box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 4px var(--ok); }
.c4-cell.dropped { animation: drop .3s ease; }
@keyframes drop { from { transform: translateY(-280px); } to { transform: translateY(0); } }

/* ========= Gomoku ========= */
.gomoku-board {
  display: grid;
  background: var(--board-light); padding: 12px;
  border-radius: 6px; box-shadow: var(--shadow);
  gap: 1px;
}
.gomoku-cell {
  background: var(--board-light);
  border: 1px solid var(--board-grid);
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.gomoku-cell:hover:not(:disabled) { background: var(--board-dark); }
.gomoku-cell.p0::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--p1); }
.gomoku-cell.p1::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--p2); }
.gomoku-cell.win { box-shadow: 0 0 0 1px var(--ok) inset; }

/* ========= Reversi ========= */
.reversi-board {
  display: grid; grid-template-columns: repeat(8, 44px); grid-template-rows: repeat(8, 44px);
  background: var(--surface-2); padding: 4px; border-radius: var(--radius); gap: 2px;
  box-shadow: var(--shadow);
}
.reversi-cell {
  background: var(--surface); border: none; cursor: pointer;
  border-radius: 4px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.reversi-cell::before { content: ''; width: 32px; height: 32px; border-radius: 50%; display: block; transition: background .2s; }
.reversi-cell.p0::before { background: var(--p1); }
.reversi-cell.p1::before { background: var(--p2); }
.reversi-cell:hover:not(:disabled)::before { background: var(--line); }
.reversi-cell.p0:hover::before { background: var(--p1); }
.reversi-cell.p1:hover::before { background: var(--p2); }
.reversi-score { font-family: ui-monospace, Menlo, monospace; color: var(--muted); font-size: 13px; }
.pass-btn { margin-top: 8px; }

/* ========= Pentago ========= */
.pentago-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.pentago-board {
  display: grid;
  grid-template-columns: repeat(6, 56px);
  grid-template-rows: repeat(6, 56px);
  background: var(--line); padding: 6px; border-radius: var(--radius); box-shadow: var(--shadow);
  gap: 2px;
}
.pentago-cell {
  background: var(--surface); border: none; cursor: pointer; border-radius: 6px;
  padding: 0; display: flex; align-items: center; justify-content: center;
}
.pentago-cell::before { content: ''; width: 36px; height: 36px; border-radius: 50%; display: block; }
.pentago-cell.p0::before { background: var(--p1); }
.pentago-cell.p1::before { background: var(--p2); }
.pentago-cell.win { box-shadow: 0 0 0 2px var(--ok) inset; }
.pentago-rotations { display: flex; flex-direction: column; gap: 6px; }
.pentago-rot-row { display: flex; align-items: center; gap: 6px; }
.pentago-rot-row span { font-size: 12px; color: var(--muted); min-width: 100px; }
.rot-btn { padding: 6px 10px; font-size: 16px; }

/* ========= Hex ========= */
.hex-svg .hex-cell { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: fill .15s; }
.hex-svg .hex-cell:hover { fill: var(--surface-2); }
.hex-svg .hex-cell.p0 { fill: var(--p1); }
.hex-svg .hex-cell.p1 { fill: var(--p2); }
.hex-svg .hex-cell.win { stroke: var(--ok); stroke-width: 3; }

/* ========= Dots and Boxes ========= */
.dots-board { position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin: 8px; border: 1px solid var(--line); }
.dots-board .dot { position: absolute; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.dots-board .edge { position: absolute; background: transparent; border-radius: 2px; cursor: pointer; transition: background .15s; border: 1px dashed var(--line); }
.dots-board .edge.h { height: 6px; transform: translateY(-3px); border-left: none; border-right: none; }
.dots-board .edge.v { width: 6px; transform: translateX(-3px); border-top: none; border-bottom: none; }
.dots-board .edge:hover { background: var(--p1); border-style: solid; }
.dots-board .edge.taken { background: var(--ink); cursor: default; border: none; }
.dots-board .box {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; transition: background .2s; color: #fff;
}
.dots-board .box.p0 { background: var(--p1); }
.dots-board .box.p1 { background: var(--p2); }
.dots-score { font-family: ui-monospace, Menlo, monospace; color: var(--muted); font-size: 13px; }

/* ========= Mancala ========= */
.mancala {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--surface); padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.mancala-store {
  background: var(--surface-2); color: var(--ink);
  width: 56px; height: 140px;
  border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  border: 1px solid var(--line);
}
.mancala-store.mine { box-shadow: 0 0 0 2px var(--p1); }
.mancala-center { display: flex; flex-direction: column; gap: 10px; }
.mancala-row { display: flex; gap: 8px; }
.mancala-pit {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: default;
  border: 1px solid var(--line);
}
.mancala-pit.mine { background: var(--p1); color: #fff; border-color: var(--p1); }
.mancala-pit.mine:hover { opacity: .85; cursor: pointer; }

/* ========= Mühle ========= */
.muehle-svg .muehle-ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.muehle-svg .muehle-point { fill: var(--surface); stroke: var(--ink); stroke-width: 2; cursor: pointer; transition: fill .15s; }
.muehle-svg .muehle-point:hover { fill: var(--surface-2); }
.muehle-svg .muehle-point.p0 { fill: var(--p1); stroke: var(--p1); }
.muehle-svg .muehle-point.p1 { fill: var(--p2); stroke: var(--p2); }
.muehle-svg .muehle-point.sel { stroke: var(--ok); stroke-width: 4; }
.muehle-info { color: var(--muted); font-size: 13px; }

/* ========= Checkers (Dame) ========= */
.ch-board {
  display: grid; grid-template-columns: repeat(8, 44px); grid-template-rows: repeat(8, 44px);
  box-shadow: var(--shadow); border-radius: 6px; overflow: hidden;
}
.ch-sq.light { background: var(--board-light); }
.ch-sq.dark { background: var(--board-dark); }
.ch-sq { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ch-sq.selected { box-shadow: inset 0 0 0 3px var(--ok); }
.ch-piece { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ch-piece.p0 { background: var(--p1); }
.ch-piece.p1 { background: var(--p2); }
.ch-piece.king::after {
  content: '♛'; display: flex; align-items: center; justify-content: center;
  font-size: 18px; height: 100%; color: #fff;
}

/* ========= Chess ========= */
.chess-board {
  display: grid; grid-template-columns: repeat(8, 48px); grid-template-rows: repeat(8, 48px);
  box-shadow: var(--shadow); border-radius: 6px; overflow: hidden;
}
.chess-sq {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  touch-action: none;
}
.chess-sq.light { background: var(--board-light); }
.chess-sq.dark { background: var(--board-dark); }
.chess-sq.selected { box-shadow: inset 0 0 0 3px var(--ok); }
.chess-sq.last-move { background: var(--surface-2) !important; }
.chess-sq.check { box-shadow: inset 0 0 0 3px var(--err); }
/* SVG piece image */
.chess-piece {
  width: 88%; height: 88%;
  display: block; pointer-events: none; user-select: none;
}
.chess-sq.piece-hidden .chess-piece { visibility: hidden; }
/* lichess-style legal-move hints */
.chess-sq.move-dest::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 30%; height: 30%; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(0,0,0,.3);
  pointer-events: none;
}
.chess-sq.move-capture::after {
  content: ''; position: absolute; inset: 3%;
  border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(0,0,0,.3);
  pointer-events: none;
}
.chess-sq.drag-over { box-shadow: inset 0 0 0 4px rgba(20,85,30,.5); }
/* dragged piece ghost following the pointer */
.chess-drag-ghost {
  position: fixed; z-index: 1000; pointer-events: none; user-select: none;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
/* on-board promotion chooser */
.chess-promo-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(0,0,0,.35); }
.chess-promo-col {
  position: fixed; display: flex; flex-direction: column;
  border-radius: 6px; overflow: hidden; box-shadow: var(--shadow);
}
.chess-promo-cell {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.chess-promo-cell:last-child { border-bottom: none; }
.chess-promo-cell:hover { background: var(--surface-2); }

/* ========= Battleship ========= */
.bs-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.bs-grids { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.bs-section { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.bs-title { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.bs-grid {
  display: grid; grid-template-columns: repeat(10, 32px); grid-template-rows: repeat(10, 32px);
  gap: 2px; background: var(--line); padding: 4px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.bs-cell {
  background: var(--surface); border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--ink);
}
.bs-cell.ship { background: var(--p1); }
.bs-cell.preview { background: var(--p1); opacity: .5; }
.bs-cell.hit { background: var(--err); color: #fff; }
.bs-cell.hit::after { content: '✕'; }
.bs-cell.miss { background: var(--surface-2); }
.bs-cell.miss::after { content: '·'; color: var(--muted); font-size: 26px; }
.bs-cell.sunk { background: var(--ink); color: var(--bg); }
.bs-cell.sunk::after { content: '☠'; }
#bs-enemy .bs-cell.ship { background: var(--surface); } /* hide enemy ships */
.bs-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-info { color: var(--muted); font-size: 13px; text-align: center; }

/* ========= Halma ========= */
.halma-board {
  display: grid; grid-template-columns: repeat(8, 44px); grid-template-rows: repeat(8, 44px);
  border-radius: 6px; overflow: hidden; box-shadow: var(--shadow);
}
.halma-sq { display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.halma-sq.light { background: var(--board-light); }
.halma-sq.dark { background: var(--board-dark); }
.halma-sq.selected { box-shadow: inset 0 0 0 3px var(--ok); }
.halma-sq.target::before {
  content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); opacity: .6; pointer-events: none;
}
.halma-piece { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.4); position: relative; }
.halma-piece.p0 { background: var(--p1); }
.halma-piece.p1 { background: var(--p2); }
.halma-info { color: var(--muted); font-size: 13px; }

/* ========= Kniffel ========= */
.kn-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100%; max-width: 520px; }
.kn-dice { display: flex; gap: 10px; }
.kn-die {
  width: 64px; height: 64px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, border-color .15s;
}
.kn-die.empty { opacity: .35; }
.kn-die.kept { border-color: var(--ok); transform: translateY(-4px); }
.kn-die.locked { cursor: default; }
.kn-dice-svg .kn-dice-face {
  fill: #ffffff;
  stroke: #c0c0c0;
  stroke-width: 2;
}
.kn-dice-svg .kn-dice-pip {
  fill: #1c1b1f;
}
.kn-dice-svg.kn-dice-svg-empty .kn-dice-face {
  fill: var(--surface);
  stroke: var(--line);
  stroke-dasharray: 6 4;
}
[data-theme="light"] .kn-dice-svg .kn-dice-face {
  stroke: #4a4a4a;
}
.kn-dice-inline { vertical-align: middle; margin-right: 8px; flex-shrink: 0; }
.kn-cat.with-dice { display: flex; align-items: center; }
.kn-cat-label { vertical-align: middle; }
.kn-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.kn-hint { color: var(--muted); font-size: 13px; }
.kn-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: 14px;
}
.kn-table th, .kn-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.kn-table th { background: var(--surface-2); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.kn-table th.kn-cat-head { text-align: left; }
.kn-table th.kn-head.p0 { color: var(--p1); }
.kn-table th.kn-head.p1 { color: var(--p2); }
.kn-table td.kn-cat { text-align: left; color: var(--ink); }
.kn-table tr:last-child td { border-bottom: none; }
.kn-cell { color: var(--muted); font-family: ui-monospace, Menlo, monospace; min-width: 60px; }
.kn-cell.filled { color: var(--ink); font-weight: 600; }
.kn-cell.avail { color: var(--ok); cursor: pointer; background: var(--surface-2); }
.kn-cell.avail:hover { background: var(--line); }
.kn-cell.p0.filled { color: var(--p1); }
.kn-cell.p1.filled { color: var(--p2); }
.kn-bonus td { background: var(--bg); }
.kn-bonus-cell { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }
.kn-total td { background: var(--surface-2); font-weight: 700; }
.kn-cell-total { font-family: ui-monospace, Menlo, monospace; font-size: 16px; }
.kn-cell-total.p0 { color: var(--p1); }
.kn-cell-total.p1 { color: var(--p2); }

/* ========= UNO ========= */
.uno-wrap { display: flex; flex-direction: column; gap: 18px; align-items: center; width: 100%; max-width: 720px; }
.uno-opp { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.uno-opp-label { color: var(--muted); font-size: 13px; }
.uno-opp-row { display: flex; gap: -8px; }
.uno-opp-row .uno-card { margin-left: -20px; }
.uno-opp-row .uno-card:first-child { margin-left: 0; }
.uno-more { color: var(--muted); font-size: 13px; align-self: center; margin-left: 8px; }

.uno-mid { display: flex; gap: 16px; align-items: center; justify-content: center; }
.uno-pending {
  background: var(--err);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
}

.uno-hand { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; padding: 8px; max-width: 100%; }

.uno-card {
  width: 58px; height: 86px;
  border-radius: 8px;
  border: 2px solid var(--surface);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
  color: #fff;
  cursor: default;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  padding: 0;
  transition: transform .12s, border-color .15s;
}
.uno-card-v { line-height: 1; }
.uno-card.uno-c-r { background: #d62828; }
.uno-card.uno-c-y { background: #f4a900; }
.uno-card.uno-c-g { background: #2a8a2f; }
.uno-card.uno-c-b { background: #1f6fb2; }
.uno-card.uno-c-w {
  background: linear-gradient(135deg, #d62828 0% 25%, #f4a900 25% 50%, #2a8a2f 50% 75%, #1f6fb2 75% 100%);
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,.8);
}
.uno-card.uno-back {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
.uno-card.uno-back::before {
  content: '♦';
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.uno-card.uno-discard { transform: rotate(-3deg); cursor: default; }
.uno-card.uno-draw-btn { cursor: pointer; }
.uno-card.uno-draw-btn:hover:not(:disabled) { border-color: var(--ok); }
.uno-card.uno-draw-btn:disabled { opacity: .5; cursor: not-allowed; }
.uno-deck-count {
  position: absolute;
  bottom: 4px; right: 6px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}
.uno-card.playable { cursor: pointer; }
.uno-card.playable:hover { transform: translateY(-8px); border-color: var(--ok); }
.uno-card.unplayable { opacity: .55; cursor: not-allowed; }
.uno-pass { padding: 10px 16px; font-size: 14px; }

.uno-cp {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 50;
}
.uno-cp-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; text-align: center; }
.uno-cp-row { display: flex; gap: 8px; }
.uno-cp-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.uno-cp-btn.uno-c-r { background: #d62828; }
.uno-cp-btn.uno-c-y { background: #f4a900; }
.uno-cp-btn.uno-c-g { background: #2a8a2f; }
.uno-cp-btn.uno-c-b { background: #1f6fb2; }
.uno-cp-btn:hover { transform: scale(1.1); }

/* ========= Responsive ========= */
@media (max-width: 600px) {
  .ttt-board { grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(3, 72px); }
  .ttt-cell { font-size: 36px; }
  .c4-board { grid-template-columns: repeat(7, 40px); grid-template-rows: repeat(6, 40px); }
  .reversi-board { grid-template-columns: repeat(8, 36px); grid-template-rows: repeat(8, 36px); }
  .pentago-board { grid-template-columns: repeat(6, 44px); grid-template-rows: repeat(6, 44px); }
  .chess-board { grid-template-columns: repeat(8, 40px); grid-template-rows: repeat(8, 40px); }
  /* gomoku sizing handled by the global board scaler now */
  .score-bar { grid-template-columns: 1fr 1fr 1fr; padding: 10px; }
  .sb-center .sb-num { font-size: 22px; }
  #chat-panel { width: calc(100vw - 32px); }
}

[hidden] { display: none !important; }

/* ===============================================
   NEW MINIMAL SHELL — top bar, burger drawer,
   compact score, entry/waiting/series, segmented
   =============================================== */

/* ----- top bar ----- */
#topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
#topbar .topbar-spacer { width: 38px; flex: 0 0 auto; }
#topbar-score { flex: 1; display: flex; justify-content: center; min-height: 26px; }

.icon-btn {
  background: transparent; border: none; color: var(--ink);
  padding: 8px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.round {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%;
  font-size: 22px; font-weight: 400; color: var(--ink);
}
#burger { position: relative; }
#burger-badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--p1); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ----- compact score ----- */
.cscore { display: inline-flex; align-items: baseline; gap: 12px; font-weight: 700; font-variant-numeric: lining-nums; }
.cscore-n { font-size: 20px; padding: 2px 9px; border-radius: 8px; line-height: 1.1; }
.cscore-n.p0 { color: var(--p1); }
.cscore-n.p1 { color: var(--p2); }
.cscore-n.active { box-shadow: inset 0 0 0 2px currentColor; }
.cscore-sep { color: var(--muted); }
.cscore-target { font-size: 11px; color: var(--muted); }

/* ----- scrim + drawer ----- */
#drawer-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90;
  opacity: 0; transition: opacity .2s;
}
#drawer-scrim.open { opacity: 1; }
#drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(88vw, 350px);
  background: var(--surface); z-index: 91;
  box-shadow: 0 0 40px rgba(0,0,0,.4);
  transform: translateX(-100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
#drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.drawer-title { font-weight: 600; font-size: 15px; }
.drawer-body { padding: 14px 16px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.drawer-label { font-size: 13px; color: var(--muted); }
.drawer-input {
  width: 150px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px;
}
.drawer-input:focus { outline: none; border-color: var(--p1); }
.drawer-sep { height: 1px; background: var(--line); margin: 2px 0; }
.drawer-btn {
  width: 100%; text-align: left; background: var(--surface-2);
  border: 1px solid var(--line); padding: 12px 14px; border-radius: 10px;
  font-size: 14px; color: var(--ink);
}
.drawer-btn:hover { background: var(--line); }
.drawer-btn.danger { color: var(--err); }
.drawer-foot { margin-top: 18px; text-align: center; font-size: 12px; opacity: .55; }
.drawer-foot a { color: inherit; text-decoration: none; }
.drawer-foot a:hover { text-decoration: underline; }
.drawer-foot-sep { margin: 0 8px; opacity: .6; }
.drawer-code { display: flex; align-items: center; gap: 8px; }
.drawer-code-val { font-family: ui-monospace, Menlo, monospace; letter-spacing: .15em; font-weight: 700; }

/* ----- segmented control ----- */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.seg-btn { background: transparent; border: none; padding: 5px 13px; border-radius: 999px; font-size: 13px; color: var(--muted); font-weight: 600; }
.seg-btn:hover { background: transparent; color: var(--ink); }
.seg-btn.active { background: var(--ink); color: var(--bg); }
.seg-btn.active:hover { background: var(--ink); color: var(--bg); }

/* ----- drawer chat ----- */
.drawer-chat { display: flex; flex-direction: column; gap: 8px; }
.chat-log {
  max-height: 200px; min-height: 56px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; font-size: 13px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px;
}
.chat-log .msg b { color: var(--p1); }
.chat-log .msg.system { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 6px; }
.chat-form input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px;
}
.chat-form input:focus { outline: none; border-color: var(--p1); }

/* ----- entry ----- */
.entry { min-height: calc(100dvh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.wordmark { font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.wordmark span { color: var(--p1); }
.entry-points { display: flex; align-items: center; gap: 16px; }
.entry-points-val { font-size: 36px; font-weight: 700; font-family: ui-monospace, Menlo, monospace; min-width: 52px; }
.primary.big { font-size: 16px; padding: 14px 30px; border-radius: 12px; }
#join-form { display: flex; gap: 8px; align-items: center; }
#join-form input {
  width: 150px; flex: 0 0 auto; margin-top: 0; text-align: center;
  text-transform: uppercase; letter-spacing: .25em;
  font-family: ui-monospace, Menlo, monospace;
}

/* ----- waiting ----- */
.waiting { min-height: calc(100dvh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--p1); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 9px 16px; border-radius: 999px; font-size: 13px; }
.chip.small { padding: 6px 11px; font-size: 12px; }

/* ----- hub ----- */
.hub { display: flex; flex-direction: column; gap: 14px; }
#search { margin-top: 0; }

/* ----- game ----- */
.game-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ----- series ----- */
.series { min-height: calc(100dvh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.series-crown { color: #f4c41a; }
.series h2 { text-transform: none; letter-spacing: 0; font-size: 20px; color: var(--ink); margin: 0; }

@media (max-width: 600px) {
  .entry-points-val { font-size: 30px; }
  #drawer { width: 86vw; }
}

/* ===============================================
   MINIMAL ONBOARDING v2 — name+color step,
   tile-only hub, floating chat, color picker
   =============================================== */

/* name step */
.entry #nickname { width: 240px; max-width: 80vw; text-align: center; margin-top: 0; }
.color-grid { display: flex; gap: 12px; }
.color-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c); border: 2px solid transparent; padding: 0; cursor: pointer;
  transition: transform .1s;
}
.color-dot:hover { transform: scale(1.1); background: var(--c); }
.color-dot.active { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg) inset; transform: scale(1.12); }

/* hub is just the tile grid, vertically centered-ish */
#screen-hub .game-picker { margin-top: 4px; }

/* floating chat FAB (override old pill styling) */
#chat-fab { flex-direction: column-reverse; }
#chat-toggle {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  padding: 0; box-shadow: var(--shadow);
}
#chat-toggle:hover { background: var(--surface-2); }
#chat-panel {
  width: 280px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.4); padding: 12px;
}
#chat-fab .badge {
  background: var(--p1); color: #fff;
}

/* ===============================================
   ONBOARDING v3 — equal-size button & code field
   =============================================== */
.entry { gap: 16px; }
.entry .primary.big { width: 260px; max-width: 82vw; box-sizing: border-box; }
.entry #nickname { width: 260px; max-width: 82vw; box-sizing: border-box; margin-top: 0; }

#join-form { display: flex; justify-content: center; width: 100%; }
#join-form input {
  width: 260px; max-width: 82vw; box-sizing: border-box;
  flex: 0 0 auto; margin-top: 0;
  padding: 14px; text-align: center; font-size: 16px;
  text-transform: uppercase; letter-spacing: .35em;
  font-family: ui-monospace, Menlo, monospace;
}

.entry-or { width: 260px; max-width: 82vw; height: 1px; background: var(--line); margin: 4px 0; }
.entry-or span { display: none; }

/* ===============================================
   ONBOARDING v4 — no wordmark, subtle "next"
   =============================================== */
.next-btn {
  margin-top: 4px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.next-btn:hover { background: var(--surface-2); color: var(--ink); }

/* Subtle tagline, name screen only — sits quietly at the bottom */
.tagline {
  position: fixed;
  left: 0; right: 0; bottom: 22px;
  margin: 0; padding: 0 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .01em;
  opacity: .8;
  pointer-events: none;
}

/* Kniffel joker (second Yahtzee) */
.kn-hint.joker { color: var(--ok); font-weight: 700; }
.kn-cell.avail.joker { box-shadow: inset 0 0 0 2px var(--ok); }

/* ===============================================
   Auto-scaled board — fills most of the viewport
   =============================================== */
#board-host { overflow: visible; width: 100%; }
#board-inner { display: inline-block; transform-origin: center center; }

/* ===============================================
   In-game layout — board always fully visible,
   no scrolling, with breathing room to the edges.
   =============================================== */
/* Lock the page to exactly one viewport tall so the board area is a
   bounded flex box (no growing-to-content, no scrolling). */
html.in-game, body.in-game { height: 100dvh; min-height: 0; overflow: hidden; }
body.in-game { display: flex; flex-direction: column; }
/* main fills the area below the sticky topbar exactly */
body.in-game main {
  padding: 6px 10px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
#screen-game.active {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;   /* let wide boards use the full width while in-game */
  height: 100%;
  min-height: 0;
}
/* board host is the flexible center; it gives the real available height */
body.in-game #board-host {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  justify-content: center;
}
body.in-game .game-actions { flex: 0 0 auto; margin-top: 8px; }