:root {
  --bg: #f4f1ea;
  --panel: #ffffff;
  --text: #2b2620;
  --muted: #7a7166;
  --border: #e2dccf;
  --light-sq: #f0d9b5;
  --dark-sq: #b58863;
  --accent: #3d7a4f;
  --accent-text: #ffffff;
  --last-move: rgba(205, 210, 60, 0.55);
  --selected: rgba(20, 85, 30, 0.45);
  --hint: rgba(20, 85, 30, 0.35);
  --check: radial-gradient(circle, rgba(230, 30, 30, 0.9) 0%, rgba(230, 30, 30, 0.4) 45%, transparent 75%);
  --danger: #b33a3a;
  --radius: 10px;
  --cp-bg: #fff1e0;
  --cp-border: #f6d3a8;
  --cp-text: #5a3b14;
  --cp-head: #a2601a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1b19;
    --panel: #2a2724;
    --text: #ece6dc;
    --muted: #a1978a;
    --border: #3d3934;
    --light-sq: #d8c3a0;
    --dark-sq: #8f6a4a;
    --accent: #5aa86f;
    --danger: #e06666;
    --cp-bg: #3a2a18;
    --cp-border: #6b4a24;
    --cp-text: #f3dcc0;
    --cp-head: #f0a95a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flow-root; /* keeps the screens' top margins inside the page (no extra scroll) */
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

button {
  font: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(0.95); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

[hidden] { display: none !important; }

/* Lobby */
.lobby {
  max-width: 420px;
  margin: 18vh auto 0;
  padding: 0 16px;
  text-align: center;
}
.lobby h1 { font-size: 40px; margin: 0 0 8px; }
.lobby p { color: var(--muted); }
.lobby .primary { font-size: 18px; padding: 12px 28px; }
.error, .lobby .error { color: var(--danger); min-height: 1.4em; }
.name-field { margin: 20px auto 14px; max-width: 260px; text-align: left; }
.name-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.name-field input {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.name-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
a.button {
  display: inline-block; text-decoration: none; padding: 10px 20px; border-radius: 8px; margin-top: 8px;
}
a.button.primary { background: var(--accent); color: var(--accent-text); }
#gate-invite { color: var(--text); font-size: 17px; }
button.link { border: none; background: none; color: var(--muted); margin-top: 12px; text-decoration: underline; }

/* Top bar on the game screen */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 16px 0;
}
.topbar { gap: 12px; }
.topbar .home { color: var(--text); text-decoration: none; font-weight: 700; font-size: 20px; white-space: nowrap; flex: none; }
.topbar .home:hover { color: var(--accent); }

.top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.small-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 9px; white-space: nowrap; }
.small-btn svg { width: 14px; height: 14px; flex: none; }
.icon-btn { padding: 5px 7px; }
.icon-btn svg { width: 16px; height: 16px; }
.call-btn.primary-call { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.call-btn.in-call { color: var(--danger); border-color: var(--danger); }
.voice-status { font-size: 13px; color: var(--muted); }
.voice-status.error { color: var(--danger); }

/* Game layout */
.game {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 16px 24px;
}
.board-col { width: min(88vh - 80px, 640px, 100%); }

.player-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  font-weight: 600;
}
/* Space between the board and the player names above and below it */
#bottom-bar { margin-top: 10px; }
#top-bar { margin-bottom: 10px; }
.player-bar .dot { width: 10px; height: 10px; flex: none; }
.player-bar .dot.online { background: #3cb35a; opacity: 1; }
.player-bar .captured {
  font-weight: 600; color: var(--muted); margin-left: auto; font-size: 13px;
  display: flex; align-items: center; white-space: nowrap;
}
.player-bar .captured img { width: 20px; height: 20px; margin-right: -7px; }
.player-bar .captured img:last-of-type { margin-right: 4px; }
.player-bar .turn-tag {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text);
}

.board-wrap { position: relative; container-type: inline-size; }
.board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  user-select: none;
  touch-action: none;
}

.sq { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sq.light { background: var(--light-sq); }
.sq.dark { background: var(--dark-sq); }
.sq.last::before, .sq.selected::before { content: ""; position: absolute; inset: 0; }
.sq.last::before { background: var(--last-move); }
.sq.selected::before { background: var(--selected); }
.sq.check { background-image: var(--check); }
.sq.hint::after {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: var(--hint); pointer-events: none;
}
.sq.hint.capture::after {
  width: 100%; height: 100%; background: transparent;
  box-shadow: inset 0 0 0 5px var(--hint); border-radius: 50%;
}
.sq.hover { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.65); }

.coord {
  position: absolute; font-size: 11px; font-weight: 700; pointer-events: none;
}
.coord.rank { top: 2px; left: 3px; }
.coord.file { bottom: 1px; right: 4px; }
.sq.light .coord { color: var(--dark-sq); }
.sq.dark .coord { color: var(--light-sq); }

.piece {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.6cqw;
  line-height: 1;
  cursor: grab;
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Apple Symbols", serif;
}
.piece img { width: 92%; height: 92%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.piece.dragging-origin { opacity: 0.3; }
.drag-ghost {
  position: fixed; z-index: 100; pointer-events: none;
  transform: translate(-50%, -50%) scale(1.1);
  display: flex; align-items: center; justify-content: center;
}

/* Promotion picker */
.promo {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0, 0, 0, 0.45);
}
.promo button {
  width: 18%; aspect-ratio: 1; padding: 0; border-radius: 12px;
  background: var(--light-sq); border: none;
}
.promo .piece { cursor: pointer; font-size: 11cqw; }

/* Side panel */
.panel {
  width: 300px;
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 36px;
}
.status {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; font-weight: 600; font-size: 16px;
}
.status:empty { display: none; }
.status small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }

.offer {
  background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.offer .row { display: flex; gap: 8px; }
.offer .row button { flex: 1; }

.history {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.history-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); font-weight: 600;
}
.nav { display: flex; gap: 4px; }
.nav button { padding: 4px 8px; font-size: 12px; }
.moves {
  list-style: none; margin: 0; padding: 6px 0;
  height: 260px; overflow-y: auto;
  font-variant-numeric: tabular-nums;
}
.moves li { display: grid; grid-template-columns: 36px 1fr 1fr; padding: 0 10px; }
.moves .num { color: var(--muted); padding: 3px 0; }
.moves .mv { padding: 3px 6px; border-radius: 4px; cursor: pointer; }
.moves .mv:hover { background: var(--border); }
.moves .mv.current { background: var(--accent); color: var(--accent-text); }
.moves .empty { color: var(--muted); padding: 8px 14px; display: block; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .primary { grid-column: 1 / -1; }

.share-row { display: flex; gap: 6px; margin-top: 4px; }
.share-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
}

/* Players + room link */
.room {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px 14px;
}
.room-head { font-weight: 600; margin-bottom: 4px; }
.room-head span { color: var(--muted); font-weight: 400; }
.room label { display: block; font-size: 13px; color: var(--muted); margin-top: 10px; }
.players { list-style: none; margin: 0; padding: 0; }
.players li { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.players .swatch {
  width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0006; flex: none;
}
.players .swatch.w { background: #fff; }
.players .swatch.b { background: #1a1a1a; }
.players .turn-tag {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text);
}
.players li { min-height: 32px; }
.players .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players .you { color: var(--muted); }
.players .state { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.players .state .dot, .player-bar .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: 0.4;
}
.players .state .dot.online { background: #3cb35a; opacity: 1; }
.players .empty { color: var(--muted); font-style: italic; }

.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.game.panel-hidden .panel { display: none; }
.game.panel-hidden .board-col { width: min(88vh - 80px, 760px, 100%); }

@media (max-width: 900px) {
  .game { flex-direction: column; align-items: center; padding: 12px 16px; }
  .board-col { width: min(100%, 640px); }
  .panel { width: min(100%, 640px); margin-top: 0; }
  .moves { height: 160px; }
}

/* Home screen: games this browser can rejoin */
.saved { margin: 36px auto 0; max-width: 380px; text-align: left; }
.saved h2 {
  font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; margin: 0 0 8px;
}
.saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.saved-list li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.saved-list .what { flex: 1; min-width: 0; }
.saved-list .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-list .meta { font-size: 13px; color: var(--muted); }
.saved-list .meta.turn { color: var(--accent); font-weight: 600; }
.saved-list a.button { margin: 0; padding: 7px 14px; font-size: 14px; }

/* Pre-game lobby */
.muted { color: var(--muted); }
.pregame { max-width: 520px; margin: 4vh auto 0; padding: 0 16px 32px; }
.pregame .card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.pregame h1 { margin: 0 0 4px; font-size: 26px; }
.pregame h1 + p { margin: 0 0 14px; }
.pregame h2 { font-size: 15px; margin: 24px 0 8px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.share-row.big input { font-size: 15px; padding: 11px 12px; }
.passcode-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.passcode-row label { color: var(--muted); font-size: 14px; }
.passcode-row .passcode {
  width: 10.5ch; box-sizing: content-box; font: inherit; font-size: 22px; font-weight: 700; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums; border: 1px dashed var(--border); border-radius: 8px;
  padding: 4px 10px; background: var(--bg); color: var(--text); text-align: center;
}
.share-row.big button { padding: 0 18px; }

.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seat {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; min-height: 64px;
}
.seat.me { border-color: var(--accent); }
.seat .king { font-size: 38px; line-height: 1; width: 40px; text-align: center; flex: none; }
.seat .king.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 2px #000; }
.seat .king.b { color: #1a1a1a; }
.seat .info { flex: 1; min-width: 0; }
.seat-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--text); font-weight: 700; font-size: 16px;
}
.seat.me .seat-avatar { background: var(--accent); color: var(--accent-text); }
.seat .colour { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.seat .name { font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .name .you { color: var(--muted); font-weight: 400; }
.seat .tag {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); margin-left: 6px; vertical-align: 2px;
}
.seat .state { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex: none; }
.seat .state .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: 0.4; }
.seat .state .dot.online { background: #3cb35a; opacity: 1; }
.seat.empty .name { font-weight: 400; color: var(--muted); font-style: italic; display: flex; align-items: center; gap: 8px; }

.seat .ready-tag {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; flex: none;
  border: 1px solid var(--border); color: var(--muted);
}
.seat .ready-tag.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* Room: countdown to the games lobby once both players are here */
.countdown {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  animation: cd-in .35s ease;
}
@keyframes cd-in { from { opacity: 0; transform: translateY(-6px); } }
.cd-row { display: flex; align-items: center; gap: 12px; }
.cd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-text strong { font-size: 16px; }
.cd-text span { color: var(--muted); font-size: 14px; }
.cd-text b { color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-bar { height: 4px; margin-top: 10px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 18%, transparent); overflow: hidden; }
.cd-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; }
button.wide { display: block; width: 100%; margin-top: 16px; padding: 11px; font-size: 16px; }

/* Games lobby */
.games-lobby { max-width: 980px; margin: 0 auto; padding: 4vh 16px 40px; }
.gl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.gl-head h1 { margin: 0 0 2px; font-size: 28px; }
.gl-head p { margin: 0; }
.gl-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-players { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.gl-players li {
  display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border); font-size: 14px; font-weight: 600;
}
.gl-players .seat-avatar { width: 26px; height: 26px; font-size: 13px; }
.gl-players .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .4; }
.gl-players .dot.online { background: #3cb35a; opacity: 1; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.game-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .15s ease;
}
.game-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.game-art { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; gap: 6px; }
.game-body { flex: 1; padding: 14px 16px 4px; }
.game-body h3 { margin: 0 0 2px; font-size: 18px; }
.game-card > .primary { margin: 10px 16px 16px; padding: 10px; font-size: 15px; }
.game-meta { margin: 0; font-size: 13px; color: var(--muted); }
.game-meta:empty { display: none; }
.game-meta.turn { color: var(--accent); font-weight: 600; }
.game-body .game-meta + .game-meta { margin-top: 6px; }
.chess-art { background: var(--dark-sq); }
.chess-art img { width: 84px; height: 84px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.memory-art { background: #f3e9d8; }
.whiteboard-art { background: #e7f0f7; }
.colourin-art { background: #fbeee6; }
.books-art { background: #f6efe2; }
.memory-art img, .whiteboard-art img, .colourin-art img, .books-art img { width: 84px; height: 84px; }
@media (max-width: 480px) {
  .game-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .game-body { padding: 10px 12px 2px; }
  .game-body h3 { font-size: 16px; }
  .game-body .game-meta:first-of-type { display: none; }
  .game-card > .primary { margin: 8px 12px 12px; padding: 8px; }
  .chess-art img { width: 60px; height: 60px; }
  .memory-art img, .whiteboard-art img, .colourin-art img, .books-art img { width: 60px; height: 60px; }
}
.link-btn { border: none; background: none; color: var(--muted); font-size: 12px; padding: 2px 4px; }
.link-btn:hover:not(:disabled) { color: var(--text); filter: none; }
/* p.hint only: .sq.hint is a legal-move square on the chessboard */
p.hint { text-align: center; font-size: 14px; margin: 14px 0 0; min-height: 1.4em; }
.top-left { display: flex; align-items: center; gap: 10px; }


/* Call window: floating (default) or docked as a right sidebar */
:root { --call-bg: #1c1c1e; --call-bar: #151515; --call-fg: #e8e8e8; --dock-w: 320px; }
.call {
  position: fixed; right: 16px; bottom: 16px; z-index: 95; width: 440px; /* the very top layer */
  display: flex; flex-direction: column;
  background: var(--call-bg); color: var(--call-fg);
  border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.call-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 4px 6px 4px 12px; background: var(--call-bar); font-size: 12px; font-weight: 600;
}
.call-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-bar-btns { display: flex; gap: 2px; flex: none; }
.call-icon {
  border: none; background: transparent; color: var(--call-fg); padding: 4px 6px; border-radius: 6px;
  display: inline-flex;
}
.call-icon svg { width: 15px; height: 15px; }
.call-icon:hover { background: #ffffff1f; filter: none; }
.call-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* The two players' tiles sit side by side. */
.call-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 6px 0; }
.tile { position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; border-radius: 8px; }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.local video { transform: scaleX(-1); } /* mirror yourself, like a selfie camera */
.avatar {
  position: absolute; inset: 0; margin: auto; width: 38%; max-width: 72px; aspect-ratio: 1; height: auto;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #3a3a3c; color: #fff; font-size: clamp(16px, 4vw, 28px); font-weight: 600;
}
.tile.local .avatar { background: #48484a; }
.tile-name {
  position: absolute; left: 6px; bottom: 6px; font-size: 11px; color: #fff;
  background: #0009; padding: 1px 6px; border-radius: 4px;
}
.call-status { font-size: 12px; color: #b5b5b8; text-align: center; padding: 8px 10px 0; min-height: 1.4em; }
.call-status.live { color: #7ad48f; }
.call-status.error { color: #ff8a80; }
.call-controls { display: flex; justify-content: center; gap: 10px; padding: 10px; }
.call-ctl {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #3a3a3c; color: #fff;
}
.call-ctl svg { width: 18px; height: 18px; }
.call-ctl:hover { filter: brightness(1.15); }
.call-ctl .slash { display: none; }
.call-ctl.off { background: #f2f2f2; color: #1c1c1e; }
.call-ctl.off .slash { display: inline; }
.call-ctl.hangup { background: #d93025; }

/* Minimised: just the title bar */
.call.min { width: auto; }
.call.min .call-body { display: none; }
.call.min #btn-call-dock { display: none; }

/* Docked: a full-height sidebar on the right; the page makes room for it */
.call-resize { display: none; }
body.call-docked { padding-right: var(--dock-w); }
.call.docked {
  top: 0; right: 0; bottom: 0; width: var(--dock-w);
  border-radius: 0; box-shadow: -2px 0 12px rgba(0, 0, 0, 0.2);
}
.call.docked .call-bar { padding: 8px 8px 8px 14px; font-size: 13px; }
.call.docked .call-body { padding: 12px; overflow-y: auto; }
.call.docked .call-videos { padding: 0; gap: 8px; grid-template-columns: 1fr; } /* stacked top and bottom */
.call.docked .call-controls { margin-top: auto; padding-top: 16px; }
.call.docked .call-resize {
  display: block; position: absolute; left: -3px; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 1;
}
.call.docked .call-resize:hover, .call.resizing .call-resize { background: #ffffff26; }
.call.resizing { user-select: none; }

/* Phones: the call window sits in the page under the board instead of floating. */
@media (max-width: 700px) {
  .call { position: static; width: auto; margin-top: 14px; box-shadow: none; }
  .call.min { width: auto; }
  #btn-call-dock { display: none; }
}

/* Memory: game screen */
.memory { max-width: 620px; margin: 0 auto; padding: 8px 16px 32px; }
/* Cards as big as fit the window's height (up to 160px each), so a bigger deal makes a bigger board;
   280px leaves room for the top bar, the players, New game and the licence line. */
#memory {
  --cols: 4; --rows: 4;
  --card: max(70px, min(160px, (100vh - 280px - (var(--rows) - 1) * 8px) / var(--rows)));
  max-width: calc(var(--cols) * var(--card) + (var(--cols) - 1) * 8px + 32px);
}
.mem-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 14px; }
.mem-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mem-player.right { flex-direction: row-reverse; text-align: right; }
.mem-player .mp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-player .mp-score {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.6ch; text-align: center;
}
.mem-player .turn-tag {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text); white-space: nowrap;
}
.mem-player .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .4; flex: none; }
.mem-player .dot.online { background: #3cb35a; opacity: 1; }
.mem-status { font-weight: 600; text-align: center; font-size: 15px; }
.mem-status small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }

.mem-grid { display: grid; gap: 8px; }
.mem-card {
  aspect-ratio: 1; padding: 0; border: none; background: none; perspective: 600px; cursor: pointer;
}
.mem-card:disabled { cursor: default; opacity: 1; }
.mem-card .inner {
  display: block; position: relative; width: 100%; height: 100%; transition: transform .35s ease; transform-style: preserve-3d;
}
.mem-card.up .inner { transform: rotateY(180deg); }
.mem-card .face {
  position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mem-card .back {
  background: var(--accent);
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%);
  background-size: 22px 22px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.mem-card:not(:disabled):hover .back { filter: brightness(1.08); }
.mem-card .front {
  transform: rotateY(180deg); background: var(--panel); border: 2px solid var(--border);
}
.mem-card .front img { width: 78%; height: 78%; }
.mem-card.mine .front { border-color: var(--accent); }
.mem-card.theirs .front { border-color: #c98a3d; }
.mem-card.matched .front img { opacity: .75; }
.mem-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.credit { margin: 0; font-size: 12px; color: var(--muted); }
.credit a { color: inherit; }
.credits { text-align: center; padding: 0 16px 12px; }
.credits .credit { font-size: 10px; margin: 2px 0; opacity: .7; }
@media (max-width: 600px) {
  .mem-top { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .mem-status { grid-column: 1 / -1; order: -1; }
}

/* Memory: setup screen */
/* minmax(0, 1fr): the four tiles always share the card's width, never push past its edge */
.theme-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  padding: 12px 6px 10px; border-radius: 12px; font-weight: 600;
}
.theme-opt .previews { display: flex; gap: 2px; max-width: 100%; }
.theme-opt .previews img { width: 26px; height: 26px; min-width: 0; }
.theme-opt[aria-checked="true"], .count-opt[aria-checked="true"] {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.count-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.count-opt { flex: 1; min-width: 64px; padding: 8px 6px; border-radius: 10px; line-height: 1.2; }
.count-opt b { display: block; font-size: 18px; }
.count-opt span { font-size: 12px; color: var(--muted); }
#memory-setup .start { margin-top: 22px; text-align: center; }
#memory-setup .start .primary { width: 100%; font-size: 17px; padding: 12px; }
@media (max-width: 600px) { .theme-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Chess setup: colour screen */
.colour-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.colour-seat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 16px 10px 14px; border: 1px solid var(--border); border-radius: 12px; text-align: center;
}
.colour-seat { background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.colour-seat:hover:not(.me) { border-color: var(--accent); filter: none; }
.colour-seat.me {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); cursor: default;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.colour-seat:disabled { opacity: 1; }
.colour-tap { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.colour-seat.me .colour-tap { visibility: hidden; }
.colour-seat .king { width: 56px; height: 56px; }
.colour-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.colour-label small { text-transform: none; letter-spacing: 0; }
.colour-name { font-weight: 700; font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colour-name .you { color: var(--muted); font-weight: 400; font-size: 15px; }
.colour-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
#chess-setup .start { margin-top: 22px; text-align: center; }
#chess-setup .start .primary { width: 100%; font-size: 17px; padding: 12px; }
.colour-actions button { display: inline-flex; align-items: center; gap: 6px; }

/* Checkers */
.checkers-art { background: var(--light-sq); }
.checkers-art .disc, .ck-piece {
  display: block; border-radius: 50%; box-sizing: border-box;
}
.checkers-art .disc {
  width: 56px; height: 56px; background: #3a2a22;
  border: 4px solid #5a4236; box-shadow: inset 0 0 0 4px #3a2a22, inset 0 0 0 7px #5a4236, 0 3px 5px rgba(0,0,0,.3);
}
.checkers-art .disc.light {
  background: #f3e6cf; border-color: #c9b48f; box-shadow: inset 0 0 0 4px #f3e6cf, inset 0 0 0 7px #c9b48f, 0 3px 5px rgba(0,0,0,.3);
  margin-left: -14px; transform: translateY(10px);
}
@media (max-width: 480px) { .checkers-art .disc { width: 42px; height: 42px; } }
.checkers { max-width: 792px; margin: 0 auto; padding: 8px 16px 32px; }
/* As big as fits: up to 760px wide, and short enough to leave room for the bars above and below */
.ck-board { margin: 0 auto; width: min(100%, 100vh - 230px); min-width: min(100%, 320px); container-type: inline-size; }
.ck-board .sq { cursor: default; }
.ck-board .sq.movable { cursor: pointer; }
.ck-board .sq.target { cursor: pointer; }
.ck-piece {
  position: relative; z-index: 1; width: 78%; height: 78%;
  --edge: rgba(0,0,0,.25); /* the deeper edge along the bottom */
  box-shadow: inset 0 -4px 0 var(--edge), 0 2px 4px rgba(0,0,0,.35);
}
/* Both colours drawn the same way: a flat top with a deeper edge along the bottom */
.ck-piece.d { background: #3a2c27; border: 2px solid #1a1311; --edge: #150f0d; }
.ck-piece.l { background: #f3e6cf; border: 2px solid #c9b48f; }
.ck-piece.king::after {
  content: "♛\FE0E"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 6cqw; line-height: 1;
}
.ck-piece.d.king::after { color: #e9c46a; }
.ck-piece.l.king::after { color: #a6762a; }
.ck-piece.big { width: 48px; height: 48px; }
.ck-board .sq.movable .ck-piece { box-shadow: 0 0 0 3px var(--accent), inset 0 -4px 0 var(--edge), 0 2px 4px rgba(0,0,0,.35); }
.ck-board .sq.path::before { content: ""; position: absolute; inset: 0; background: var(--last-move); }
.ck-board .sq.selected::before { content: ""; position: absolute; inset: 0; background: var(--selected); }
.ck-piece.mini { width: 16px; height: 16px; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#checkers-setup .start { margin-top: 22px; text-align: center; }
#checkers-setup .start .primary { width: 100%; font-size: 17px; padding: 12px; }
.mem-player .mp-name { min-width: 3.5ch; }
/* Phones: the status line already says whose move it is, so give the names the room. */
@media (max-width: 600px) { .checkers .mem-player .turn-tag { display: none; } }

/* Whiteboard: fills the window below the top bar. Colours on the left, tools on the right. */
.whiteboard {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--wb-top, 70px)); min-height: 360px;
  border-top: 1px solid var(--border);
}
/* Its controls live in the top bar: zoom and pan in the middle, Undo / Clear / Save on the right. */
.topbar.wb {
  display: grid; grid-template-columns: 1fr auto 1fr auto; padding-bottom: 6px; padding-top: 8px;
}
.topbar.wb .wb-actions { justify-self: end; }
.wb-zoom { display: flex; align-items: center; gap: 8px; }
.wb-zoom[hidden], .wb-actions[hidden] { display: none; }
.wb-icon, .wb-pan {
  width: 40px; height: 40px; padding: 0; border: none; background: none; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer;
}
.wb-icon svg { width: 28px; height: 28px; }
.wb-icon:disabled { opacity: .35; cursor: default; }
.wb-pan { margin-left: 10px; border: 2px solid var(--border); }
.wb-pan svg { width: 24px; height: 24px; }
.wb-pan.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
#wb-zoom { width: 150px; accent-color: var(--accent); cursor: pointer; }
.wb-actions { display: flex; gap: 6px; }
.wb-round {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 4px;
  border: none; background: none; color: var(--accent); cursor: pointer; min-width: 48px;
}
.wb-round .circle {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.wb-round .circle svg { width: 20px; height: 20px; }
.wb-round:hover .circle { filter: brightness(1.08); }
.wb-round .label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.wb-body { flex: 1; min-height: 0; display: flex; }
.wb-colours {
  flex: none; width: 76px; overflow-y: auto; padding: 10px 0; background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  scrollbar-width: none; /* still scrolls, just no bar */
}
.wb-colours::-webkit-scrollbar { display: none; }
.wb-swatch {
  flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative; transition: transform .1s;
}
.wb-swatch:hover { transform: scale(1.08); }
.wb-swatch.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--panel), 0 0 0 5px var(--accent); }
.wb-swatch.on::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 15px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: translate(-50%, -62%) rotate(45deg);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}
.wb-swatch.light.on::after { border-color: #333; filter: none; }

.wb-frame {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 85%, var(--border));
}
.wb-paper { position: absolute; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.12); }
/* Colour In: the picture's lines sit on top of the colouring; white parts let it show through. */
.wb-picture {
  position: absolute; object-fit: contain; pointer-events: none; user-select: none;
  mix-blend-mode: multiply;
}
.wb-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.wb-frame.panning canvas { cursor: grab; }
.wb-frame.grabbing canvas { cursor: grabbing; }
.wb-status {
  position: absolute; left: 12px; top: 12px; pointer-events: none; max-width: calc(100% - 24px);
  padding: 6px 12px; border-radius: 999px; background: var(--panel); color: var(--text);
  font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.wb-tools {
  flex: none; width: 60px; background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  overflow: hidden; padding: 10px 0;
}
.wb-tool {
  position: relative; width: 48px; height: 54px; padding: 0; border: none; background: none; cursor: pointer;
}
.wb-tool svg { width: 40px; height: 50px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.wb-tool .ink { fill: var(--ink, #1f1f1f); }
.wb-tool .edge { stroke: rgba(0,0,0,.18); stroke-width: 1; }
.wb-tool:hover svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.wb-tool.on::after {
  content: "✓"; position: absolute; right: 0; bottom: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--panel); color: var(--accent);
  font-size: 13px; font-weight: 800; line-height: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Phones: colours and tools in rows under the board */
@media (max-width: 700px) {
  /* Two rows: name, Room and call on top; zoom and Undo / Clear / Save underneath. */
  .topbar.wb { grid-template-columns: 1fr auto; row-gap: 6px; }
  .topbar.wb .top-left { grid-area: 1 / 1; }
  .topbar.wb .top-actions { grid-area: 1 / 2; }
  .topbar.wb .wb-zoom { grid-area: 2 / 1; gap: 2px; }
  .topbar.wb .wb-actions { grid-area: 2 / 2; gap: 0; }
  #wb-zoom { width: 70px; }
  .wb-pan { margin-left: 4px; }
  .wb-round { min-width: 42px; padding: 2px; }
  .wb-body { flex-direction: column; }
  .wb-frame { order: 1; }
  .wb-colours {
    order: 2; width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    padding: 8px 10px; border-right: none; border-top: 1px solid var(--border);
  }
  .wb-swatch { width: 34px; height: 34px; }
  .wb-tools {
    order: 3; width: auto; height: auto; flex-direction: row; padding: 6px 10px; gap: 14px;
    border-left: none; border-top: 1px solid var(--border);
  }
  .wb-tool { width: 44px; }
}

/* Desktop: breathing room between the top bar and the game (phones keep the tighter layout). */
@media (min-width: 901px) {
  .game, .memory, .checkers, .tictactoe, .fourinarow { padding-top: 40px; }
  /* Chess: the board sits in the middle of the space between the top bar and the licences
     (42px top bar + 54px for the licences below). */
  .game { min-height: calc(100vh - 96px); align-items: center; padding-top: 28px; padding-bottom: 4px; }
  /* Setup cards (chess, checkers, memory): centred below the top bar (42px), and above the
     licences (54px) on the screens that have them */
  main#chess-setup, main#checkers-setup, main#memory-setup {
    min-height: calc(100vh - 42px); margin-top: 0; display: flex; flex-direction: column; justify-content: center;
    padding-top: 24px; padding-bottom: 24px;
  }
  main#chess-setup, main#memory-setup { min-height: calc(100vh - 96px); padding-top: 28px; padding-bottom: 4px; }
  /* sit a little above the middle */
  main#chess-setup .card, main#checkers-setup .card, main#memory-setup .card { margin-bottom: 10vh; }
  /* Tic-Tac-Toe, 4 in a Row and Checkers: centred in the space below the top bar (42px) */
  main.tictactoe, main.checkers, main.fourinarow {
    min-height: calc(100vh - 42px); display: flex; flex-direction: column; justify-content: center;
    padding-top: 24px; padding-bottom: 24px;
  }
}

/* End of game: celebration card */
.win {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
/* With the call docked at the side, the card (and its dimmed background) covers only the page beside it */
body.call-docked .win { right: var(--dock-w); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.win-card {
  position: relative; width: min(380px, 100%); background: var(--panel); color: var(--text);
  border-radius: 18px; padding: 26px 24px 18px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); animation: win-pop 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
#win .win-card { padding-top: 40px; padding-bottom: 26px; margin-bottom: 10vh; } /* a little above the middle */
.win-emoji { font-size: 64px; line-height: 1; animation: win-bounce 1.2s ease-in-out infinite; }
.win-card h2 { margin: 12px 0 4px; font-size: 26px; }
.win-card p { margin: 0 0 18px; color: var(--muted); }
.win-actions { display: flex; gap: 8px; }
.win-actions button { flex: 1; padding: 11px 10px; font-size: 15px; }
.win-card .link-btn { margin-top: 12px; font-size: 13px; }
@keyframes win-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes win-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .win-card, .win-emoji { animation: none; }
}

/* Home: "or join a room" */
.or { display: flex; align-items: center; gap: 12px; max-width: 260px; margin: 24px auto 4px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.join-fields .name-field { margin: 10px auto; }
.join-fields + .primary { margin-top: 6px; }
.passcode-row { flex-wrap: wrap; }
.passcode-row .roomcode { width: 7.5ch; letter-spacing: 0.06em; text-transform: none; }

/* Room: code and passcode side by side */
.codes { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 12px; align-items: end; }
.code-item label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.code-line { display: flex; gap: 8px; align-items: center; }
.codes .passcode {
  font: inherit; font-size: 22px; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
  border: 1px dashed var(--border); border-radius: 8px; padding: 4px 10px; background: var(--bg);
  color: var(--text); text-align: center; width: 9.5ch; box-sizing: content-box;
}
.codes .roomcode { letter-spacing: 0.08em; width: 7ch; }
@media (max-width: 600px) { .codes { grid-template-columns: 1fr; gap: 10px; } }

/* Colour In: picture gallery */
.colourin-setup { max-width: 760px; }
.ci-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.ci-pic {
  display: block; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ci-pic:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); filter: none; }
.ci-pic img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 12px; }
.ci-pic.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 480px) { .ci-gallery { grid-template-columns: 1fr 1fr; } }

/* Car park (admin only): ideas and feedback under each screen */
/* A quiet button in the bottom-left corner; the notes open as a small panel above it. */
.carpark { position: fixed; left: 12px; bottom: 12px; z-index: 40; }
.cp-pill {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  font-size: 12px; padding: 4px 10px; border-radius: 999px; opacity: .55;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cp-pill:hover, .cp-pill:focus-visible { opacity: 1; color: var(--text); filter: none; }
.cp-pill.has-notes { color: var(--cp-head); border-color: var(--cp-border); }
.cp-box {
  width: min(420px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto;
  background: var(--cp-bg); border: 1px solid var(--cp-border); border-radius: 12px;
  padding: 12px 14px; color: var(--cp-text); box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.cp-head { display: flex; align-items: flex-start; gap: 8px; }
.cp-head .cp-title { flex: 1; }
.cp-close {
  border: none; background: none; color: var(--cp-head); font-size: 14px; line-height: 1;
  padding: 2px 4px; margin: -2px -4px 0 0; opacity: .7;
}
.cp-close:hover { opacity: 1; filter: none; }
.cp-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-head); }
.cp-about { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.cp-list { margin: 0; padding-left: 18px; }
.cp-list li { margin: 4px 0; }
.cp-list li span { white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-del {
  border: none; background: none; padding: 0 4px; margin-left: 6px; font-size: 12px; line-height: 1;
  color: inherit; opacity: .55; vertical-align: 1px;
}
.cp-del:hover, .cp-edit:hover { opacity: 1; filter: none; }
.cp-edit {
  border: none; background: none; padding: 0 4px; margin-left: 6px; font-size: 13px; line-height: 1;
  color: inherit; opacity: .55; vertical-align: 0;
}
.cp-edit + .cp-del { margin-left: 0; }
.cp-list li.editing { list-style: none; margin-left: -18px; }
.cp-edit-text {
  display: block; width: 100%; min-height: 38px; resize: vertical; font: inherit; padding: 8px 10px;
  border: 1px solid var(--cp-border); border-radius: 8px; background: var(--panel); color: var(--text);
}
.cp-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
.cp-edit-actions button { padding: 5px 14px; font-size: 13px; }
.cp-form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.cp-form textarea {
  flex: 1; min-height: 38px; resize: vertical; font: inherit; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
}
.cp-form .primary { padding: 8px 18px; }
.carpark .error:empty { display: none; }
@media (max-width: 600px) { .cp-form { flex-direction: column; align-items: stretch; } }
/* Read-only copy on the games lobby cards */
.cp-mini {
  margin: 10px 16px 0; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  background: var(--cp-bg); border: 1px solid var(--cp-border); color: var(--cp-text);
}
.cp-mini ul { margin: 0; padding-left: 16px; }
.cp-mini li { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Tic-Tac-Toe */
.tictactoe-art { background: #eef3f8; gap: 2px; }
.tictactoe-art svg { width: 64px; height: 64px; }
.tictactoe { max-width: 680px; margin: 0 auto; padding: 8px 16px 32px; }
/* No status text in the middle: just the two players, at either end */
.tictactoe .mem-top, .checkers .mem-top, .memory .mem-top, .fourinarow .mem-top { grid-template-columns: 1fr 1fr; }
#ttt-status, #ck-status, #mem-status, #f4-status { display: none; }
.checkers .mem-foot { margin-top: 24px; } /* a little space under the board */
/* New game in the middle (the scores are by the players' names) */
.tictactoe .mem-foot { justify-content: center; }
.ttt-board {
  /* Three equal rows and columns: what's in a square never changes its size */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  width: 100%; margin: 8px auto 0; aspect-ratio: 1; /* as wide as the score bar above */
  /* on a white card */
  background: var(--panel); border-radius: 16px; padding: 36px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
/* A plain # grid: lines between the squares only */
.ttt-cell {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  padding: 0; border: 0 solid #111; border-radius: 0; background: transparent;
}
.ttt-cell:nth-child(3n+1), .ttt-cell:nth-child(3n+2) { border-right-width: 3px; }
.ttt-cell:nth-child(-n+6) { border-bottom-width: 3px; }
@media (prefers-color-scheme: dark) { .ttt-cell { border-color: var(--text); } }
.ttt-cell:disabled { cursor: default; opacity: 1; }
.ttt-cell:not(:disabled):hover { filter: none; }
.ttt-cell svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.ttt-cell .placed { animation: ttt-in .22s ease-out; }
@keyframes ttt-in { from { transform: scale(.4); opacity: 0; } }
.ttt-cell .ghost { opacity: 0; transition: opacity .12s; }
.ttt-cell:not(:disabled):hover .ghost { opacity: .2; }
.ttt-cell.ttt-win { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ttt-mark { width: 20px; height: 20px; flex: none; }
.ttt-mark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) { .tictactoe .mem-player .turn-tag { display: none; } }

/* Yes / no question */
.ask { z-index: 90; }
.ask .win-card { max-width: 380px; }
.ask-text { margin: 0 0 18px !important; color: var(--text) !important; font-size: 16px; line-height: 1.45; }

/* Books: the shelf */
#books-shelf { max-width: 1040px; } /* a wider shelf, for bigger books */
.book-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-top: 16px; }
.book-card { display: flex; flex-direction: column; gap: 8px; padding: 0; border: none; background: none; text-align: left; cursor: pointer; }
.book-card:hover { filter: none; }
.book-card .cover {
  aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden; background: #fff;
  border: 1px solid var(--border); box-shadow: 0 3px 10px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.book-card:hover .cover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.book-card .cover { display: flex; align-items: center; }
.book-card .cover img { width: 100%; height: 100%; object-fit: contain; display: block; } /* the whole cover, whatever its shape */
.book-card .name { font-weight: 600; font-size: 14px; }
.book-card .meta { font-size: 12px; color: var(--muted); margin-top: -6px; }
.book-card.current .cover { outline: 3px solid var(--accent); outline-offset: 0; }
@media (max-width: 480px) { .book-list { grid-template-columns: 1fr 1fr; } }

/* Books: reading */
/* The book fills the window, with the same side padding as the top bar (16px); the page-turn
   arrows sit over its sides. */
.books {
  padding: 8px 16px 12px; display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--book-top, 70px));
}
/* A turning page leans out towards you, past the book's edges: while one is turning, that
   mustn't make the window grow scroll bars. */
html:has(.book-leaf) { overflow: hidden; }
/* The book and its controls, centred; the attribution sits at the very bottom */
.book-main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.book-stage { position: relative; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
/* layoutSpread (app.js) sizes the pages to the space left after the controls under them */
.book-page { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
/* The end of the book: two buttons over the last page */
.book-end {
  position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(0, 0, 0, 0.45); /* the same grey as behind the end-of-game card */
  animation: book-end-fade .4s ease-out;
}
.book-end[hidden] { display: none; }
.book-end button { min-width: 180px; padding: 12px 22px; font-size: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.18); animation: book-end-in .4s ease-out; }
@keyframes book-end-fade { from { opacity: 0; } }
@keyframes book-end-in { from { transform: translateY(8px); } }
/* One page, or a two-page spread with the pages meeting at the spine. app.js sizes the pages
   (layoutSpread) so the spread is exactly as big as its pages. */
.book-spread { position: relative; display: flex; }
.book-spread img {
  display: block; background: #fff; border-radius: 6px; user-select: none; -webkit-user-drag: none;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.18);
}
.book-spread.two img:first-child { border-radius: 6px 0 0 6px; }
.book-spread.two img:last-child { border-radius: 0 6px 6px 0; }
/* A soft shadow down the spine */
.book-spread.two::after {
  content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 36px; transform: translateX(-50%);
  will-change: transform;
  pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.06) 42%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.06) 58%, transparent);
}
.book-spread.turn { animation: book-in .25s ease-out; }
/* Turning a page over (see turnOver in app.js): the leaf hinges on the spine */
.book-spread { perspective: 2600px; }
.book-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; transform-style: preserve-3d; will-change: transform; }
.book-leaf.fwd { left: 50%; transform-origin: left center; }
.book-leaf.bwd { left: 0; transform-origin: right center; }
.book-leaf .face {
  position: absolute; inset: 0; overflow: hidden; background: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.book-leaf .face img { width: 100%; height: 100%; display: block; border-radius: 0; box-shadow: none; }
/* The grey: black at 10% over the page, so white shows as #E6E6E6 like the spine's darkest point */
.book-leaf .face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; will-change: opacity; }
.book-leaf .back { transform: rotateY(180deg); }
.book-leaf.fwd .front, .book-leaf.bwd .back { border-radius: 0 6px 6px 0; }
.book-leaf.fwd .back, .book-leaf.bwd .front { border-radius: 6px 0 0 6px; }
/* A turn, 1.08s in all, the same forwards and backwards in time. The steps overlap a little
   so the motion flows: the page greys (0-22%), the spine's shadow narrows away (12-30%), the
   page turns over (22-78%), the spine's shadow comes back (72-90%), the grey lifts (82-100%). */
.book-leaf.go { animation: leaf-fwd .6s cubic-bezier(.45, .05, .35, 1) .24s both; }
.book-leaf.bwd.go { animation-name: leaf-bwd; }
@keyframes leaf-fwd { to { transform: rotateY(-180deg); } }
@keyframes leaf-bwd { to { transform: rotateY(180deg); } }
.book-leaf.go .face::after { animation: leaf-shade 1.08s both; }
@keyframes leaf-shade {
  0% { opacity: 0; animation-timing-function: ease-in-out; }
  22% { opacity: .1; }
  82% { opacity: .1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}
.book-spread.turning::after { animation: spine-fold 1.08s both; }
@keyframes spine-fold {
  0%, 12% { transform: translateX(-50%) scaleX(1); animation-timing-function: ease-in-out; }
  30%, 72% { transform: translateX(-50%) scaleX(0); animation-timing-function: ease-in-out; }
  90%, 100% { transform: translateX(-50%) scaleX(1); }
}
/* Opening the cover: the book slides right by half a page (12-32%), overlapping the start of
   the turn, and the spine appears once the cover has landed. Closing: the mirror image. */
.book-spread.closed::after { transform: translateX(-50%) scaleX(0); }
.book-spread.opening, .book-spread.closing { will-change: transform; }
.book-spread.opening { animation: book-open 1.08s both; }
@keyframes book-open {
  0%, 12% { transform: translateX(var(--shift)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  32%, 100% { transform: translateX(0); }
}
.book-spread.opening::after { animation: spine-open 1.08s both; }
@keyframes spine-open {
  0%, 72% { transform: translateX(-50%) scaleX(0); animation-timing-function: ease-in-out; }
  90%, 100% { transform: translateX(-50%) scaleX(1); }
}
.book-spread.closing { animation: book-close 1.08s both; }
@keyframes book-close {
  0%, 68% { transform: translateX(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  88%, 100% { transform: translateX(var(--shift)); }
}
.book-spread.closing::after { animation: spine-close 1.08s both; }
@keyframes spine-close {
  0%, 12% { transform: translateX(-50%) scaleX(1); animation-timing-function: ease-in-out; }
  30%, 100% { transform: translateX(-50%) scaleX(0); }
}

@keyframes book-in { from { opacity: .3; transform: translateX(var(--from, 12px)); } }
/* Under the book: Bookshelf on the left, page turning in the middle, the title on the right */
.book-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 20px; }
.book-turns { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.book-turn {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.book-turn svg { width: 24px; height: 24px; }
.book-turn:disabled { opacity: .3; }
.book-credit { text-align: center; margin-top: 16px; font-size: 10px; opacity: .7; max-width: 760px; margin-left: auto; margin-right: auto; }
.book-credit:empty { display: none; }
.book-count { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 7ch; text-align: center; }
@media (max-width: 600px) {
  /* Phones: the title on its own line above */
  .book-foot { grid-template-columns: 1fr; }
  .book-turns { grid-column: 1; justify-self: center; }
}

/* The admin page */
.admin-page .card { max-width: 400px; margin: 0 auto; }
.signin-card label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.signin-card input {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
}
.signin-card .error:empty { display: none; }
.signin-card .error { margin: 0 0 10px; font-size: 13px; }
#admin-signed-in .button { display: block; text-align: center; text-decoration: none; margin-top: 16px; padding: 11px; font-size: 16px; }

/* The admin area */
.admin-page.signed-in { max-width: 1020px; }
.admin-page.signed-in .card { max-width: none; }

.admin-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.admin-bar span { flex: 1; min-width: 0; font-size: 14px; }
/* Go to PlayMates (a link), Test and Sign out: three matching buttons in a row */
.admin-bar a.small-btn {
  text-decoration: none; color: var(--text); font-size: 13px; line-height: 1.4;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.admin-bar a.small-btn:hover { filter: brightness(0.95); }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.admin-tabs button { border: none; background: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 14px; font-weight: 600; color: var(--muted); }
.admin-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.admin-tabs button:hover { filter: none; color: var(--text); }
.admin-msg { margin: 0 0 12px; font-size: 14px; color: var(--accent); }
.admin-msg.error { color: var(--danger); }
.admin-msg:empty { display: none; }
.admin-panel h2 { margin: 18px 0 8px; }
.admin-panel h2:first-child { margin-top: 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table td:last-child { text-align: right; white-space: nowrap; }
.admin-table td.empty { color: var(--muted); text-align: left; }
.admin-table .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .4; margin-right: 5px; vertical-align: 1px; }
.admin-table .dot.online { background: #3cb35a; opacity: 1; }
.admin-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.admin-inline { display: flex; gap: 8px; margin-top: 12px; }
.admin-inline input { flex: 1; min-width: 0; padding: 9px 12px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }
.admin-note { margin-top: 10px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.admin-note p { margin: 0 0 8px; font-size: 14px; }
.admin-notes-page { font-size: 15px; }
.admin-notes-table .note-text { white-space: pre-wrap; overflow-wrap: anywhere; width: 100%; }
.admin-notes-table .note-age { color: var(--muted); white-space: nowrap; font-size: 13px; }
.admin-notes-table td:last-child button + button { margin-left: 6px; }
.admin-games .grip-col { width: 28px; }
.admin-games td.grip { cursor: grab; color: var(--muted); font-size: 18px; text-align: center; user-select: none; touch-action: none; padding: 8px 4px; }
.admin-games td.grip:hover { color: var(--text); }
.admin-games tr.dragging { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.admin-games tr.dragging td.grip { cursor: grabbing; }
.admin-games .name { font-weight: 600; width: 100%; }
.admin-games .name.off { color: var(--muted); text-decoration: line-through; }
.admin-games .uses { color: var(--muted); }
/* Category, Played and On: centred, headers and all */
.admin-games th:nth-child(n+3), .admin-games td:nth-child(n+3) { text-align: center; }
/* More room between the columns */
.admin-games th:nth-child(n+2), .admin-games td:nth-child(n+2) { padding-left: 14px; padding-right: 14px; }
.admin-games .category {
  min-width: 120px; font: inherit; font-size: 13px; padding: 6px 30px 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background-color: var(--panel); color: var(--text); text-align: left; cursor: pointer;
  /* Our own arrow, with room either side of it (the browser's own sits right up against the text) */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px;
}
.switch { position: relative; display: inline-block; vertical-align: middle; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-upload { display: inline-block; cursor: pointer; padding: 9px 18px; border-radius: 8px; font-weight: 600; background: var(--accent); color: var(--accent-text); }
.admin-upload:hover { filter: brightness(.95); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.admin-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.admin-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 8px; display: block; }
.admin-item .info { padding: 8px 10px; font-size: 13px; flex: 1; }
.admin-item .info strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.admin-item .info span { color: var(--muted); }
.admin-item .del { margin: 0 10px 10px; padding: 6px; font-size: 13px; }
.admin-book-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.admin-book-form label { font-size: 13px; font-weight: 600; color: var(--muted); display: block; }
.admin-book-form input[type=text] { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }
.admin-book-form input[type=file] { display: block; margin-top: 4px; font-size: 13px; max-width: 100%; }
.admin-books { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.admin-book { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.admin-book img { width: 96px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; flex: none; }
.admin-book .info { flex: 1; min-width: 0; font-size: 13px; }
.admin-book .info strong { display: block; font-size: 15px; }
.admin-book .info span { color: var(--muted); }
.admin-book .info small { display: block; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .admin-book-form { grid-template-columns: 1fr; }
  .admin-table .hide-phone { display: none; }
}
/* Only on the narrowest screens (the games table's Played column) */
@media (max-width: 480px) {
  .admin-table .hide-narrow { display: none; }
  .admin-games th:nth-child(n+2), .admin-games td:nth-child(n+2) { padding-left: 6px; padding-right: 6px; }
  .admin-games .category { min-width: 0; }
}

/* Test mode: both players side by side */
.test-view { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); }
.test-view[hidden] { display: none; }
.test-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; }
.test-bar strong { flex: 1; min-width: 0; }
.test-bar #test-room-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); font-weight: 600; }
.test-switch { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.test-switch button { border: none; border-radius: 0; padding: 6px 12px; font-size: 13px; background: none; }
.test-switch button + button { border-left: 1px solid var(--border); }
.test-switch button.on { background: var(--accent); color: var(--accent-text); }
.test-frames { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.test-frames.show-1, .test-frames.show-2 { grid-template-columns: 1fr; }
.test-frames.show-1 .test-frame:nth-child(2), .test-frames.show-2 .test-frame:nth-child(1) { display: none; }
.test-frame { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.test-frame span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 4px 4px; }
.test-frame iframe { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.admin-table td.admin-actions { white-space: normal; }
.admin-table td.admin-actions .small-btn { margin: 2px 0 2px 4px; }

/* ---------- 4 in a Row ---------- */
.fourinarow-art { background: #e8f0fc; gap: 6px; }
.fourinarow-art .f4-chip { width: 34px; height: 34px; }
.fourinarow { max-width: 680px; margin: 0 auto; padding: 8px 16px 32px; }
/* New game in the middle (the scores are by the players' names) */
.fourinarow .mem-foot { justify-content: center; margin-top: 20px; }
:root { --f4-board: #2d6bd0; --f4-red: #e5483f; --f4-yellow: #f6c431; }
.f4-chip { display: inline-block; width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.f4-chip.r { background: var(--f4-red); }
.f4-chip.y { background: var(--f4-yellow); }
/* The board: as wide as the score bar, but short enough to fit the window with the bars around it */
.f4-board {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(100%, (100vh - 240px) * 7 / 6); margin: 8px auto 0; padding: 10px;
  background: var(--f4-board); border-radius: 18px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.12);
}
/* Each column: the space behind the board (seen through the holes), with the discs in it and the
   blue front of the board laid over the top, so discs sit, and fall, behind the blue. */
.f4-col {
  --f4-face: var(--f4-board);
  display: flex; flex-direction: column; padding: 0; border: none; background: var(--bg); border-radius: 0;
  overflow: hidden; isolation: isolate; /* a dropping disc slides in from behind the top edge */
}
.f4-col:disabled { cursor: default; opacity: 1; }
.f4-col:not(:disabled):hover { --f4-face: #477fdc; filter: none; } /* the column you're pointing at lightens */
.f4-slot { position: relative; aspect-ratio: 1; }
/* The board's front: blue all over the slot except a round hole (radius 41%), shaded at its rim */
.f4-slot::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent 72%, rgba(0,0,0,.2) 82%, var(--f4-face) 82%);
  transition: background-color .12s;
}
/* Where your disc would land: a faint preview while you point at the column */
.f4-slot.next::after {
  content: ""; position: absolute; inset: 9%; border-radius: 50%; z-index: 1;
  background: var(--f4-yellow); opacity: 0; transition: opacity .12s;
}
.f4-board.mine-r .f4-slot.next::after { background: var(--f4-red); }
.f4-col:not(:disabled):hover .f4-slot.next::after { opacity: .6; }
.f4-disc { position: absolute; inset: 9%; z-index: 1; border-radius: 50%; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); }
.f4-disc.r { background: var(--f4-red); }
.f4-disc.y { background: var(--f4-yellow); }
/* Falls from above the board: further for lower rows (--fall = rows to fall), speeding up as it goes */
.f4-disc.drop { animation: f4-drop calc(.14s + var(--fall) * .055s) cubic-bezier(.55, 0, 1, .45); }
@keyframes f4-drop { from { transform: translateY(calc(var(--fall) * -122%)); } }
/* The winning line */
.f4-disc.win { box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 0 0 4px #fff; animation: f4-win 1s ease-in-out infinite alternate; }
@keyframes f4-win { to { transform: scale(.9); } }
@media (max-width: 600px) { .fourinarow .mem-player .turn-tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .f4-disc.drop, .f4-disc.win { animation: none; } }
/* The disc that wins: drops in first, then joins the others */
.f4-disc.win.drop {
  animation: f4-drop calc(.14s + var(--fall) * .055s) cubic-bezier(.55, 0, 1, .45),
    f4-win 1s ease-in-out calc(.14s + var(--fall) * .055s) infinite alternate;
}