/* ===== Cribbage Sudoku — embedded styles =====
 * All puzzle rules are scoped under .cribsud so they can't leak into the host
 * lounge/table CSS (and the host theme can't bleed in). Theme vars are defined
 * locally so the module is self-contained.
 */

.cribsud {
  --bg: #0f1923;
  --surface: #1a2734;
  --surface-hover: #223344;
  --border: #2a3a4a;
  --text: #e8ecf1;
  --text-muted: #8899aa;
  --accent: #4fc3f7;
  --accent-dim: rgba(79, 195, 247, 0.15);
  --warm: #ffb74d;
  --danger: #ef5350;
  --radius: 12px;
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===== Full-screen overlay ===== */
.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000; /* above lounge (max ~10020); drag ghost uses 99999 to float above */
  background: linear-gradient(180deg, #162536 0%, #0f1923 60%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.cs-overlay > .cribsud { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cs-topbar { flex: 0 0 auto; }

/* Body = left chat dock + right puzzle column. The board column blends into
   the overlay (no nested panel / no inner scrollbar). */
.cs-body { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.cs-chat-dock { flex: 0 0 380px; width: 380px; min-height: 0; display: flex; border-right: 1px solid var(--border); background: rgba(0, 0, 0, 0.18); }
.cs-chat-toggle { display: none; } /* desktop: chat is always open; toggle is mobile-only */
.cribsud .cs-body > .cribbage-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;            /* hug the chat dock on the left instead of centering in the wide area */
  max-width: 820px;     /* tighten to the board cluster width so it sits flush-left, not adrift */
  padding: 0.4rem 1rem 1rem; /* tighter top whitespace above the day toggle */
}

/* The borrowed lounge chat panel fills the dock; keep its own handlers/styles. */
.lounge-chat-panel.cs-chat-docked { width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cs-chat-docked .lounge-chat-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cs-chat-docked .lounge-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cs-chat-docked .lounge-mini-bracket { display: none !important; }
/* Quick links belong to the LOUNGE (Damien 2026-09-21). The row lives in the
   chat header, so every overlay that borrows the chat panel — Word of the
   Day, Sudoku, Counter, the Kings table dock — used to carry it along. */
.cs-chat-docked #loungeChatQuickLinks { display: none !important; }
/* Input area: message field on its own full line, option buttons on the line
   below it. */
.cs-chat-docked .lounge-chat-input-area { flex-wrap: wrap; }
.cs-chat-docked .lounge-chat-input { order: -1; flex: 1 1 100%; width: 100%; }
.cs-chat-docked .lounge-chat-send-btn { margin-left: auto; }

body.cs-active { overflow: hidden; }

/* ===== Top bar (back · banner · player) ===== */
.cs-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border);
}

.cs-back-btn {
  justify-self: start;
  padding: 0.45rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cs-back-btn:hover { background: var(--accent); color: #fff; }

.cs-banner { justify-self: center; }
.cs-logo { display: block; width: 100%; max-width: 250px; height: auto; }   /* csnew.webp is 250px native */

.cs-tagline {
  justify-self: end;
  text-align: right;
  max-width: 230px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--warm);
}

/* Bottom-left player avatar — larger, table-style (image + name under it). */
.cs-table-avatar {
  position: fixed;
  left: auto;
  right: 18px; /* far right, clear of the left chat dock */
  bottom: 164px; /* raised off the bottom */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  pointer-events: none;
}
.cs-table-avatar-img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-table-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-table-avatar-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Total score + timer stacked under the avatar (timer carries a clock icon). */
.cribsud .cs-table-avatar .cribbage-total {
  margin: 0.15rem 0 0;
  justify-content: center;
  font-size: 1.25rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cribsud .cs-table-avatar .cribbage-timer {
  margin: 0.1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cs-table-avatar .cs-timer-clock {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* In-flow copy of the total + timer, shown under the card pool only when the
   floating avatar would overlap the board (narrow desktop windows / phones).
   Hidden by default — most resolutions show the avatar block on the right. */
.cribsud .cribbage-inflow-stats { display: none; }

/* ===== Cribbage Section (ported from games.css, scoped) ===== */
.cribsud .cribbage-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 900px;
  margin: 0.5rem auto 2rem;
}

.cribsud .cribbage-header { display: none; }

.cribsud .cribbage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0 1.5rem;
}
.cribsud .cribbage-toolbar > .starter-action-btn:first-child { margin: 0; }
/* Day toggle + Total/Timer on one line. */
.cribsud .cs-daytoggle-row { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 0 0 0.5rem; }
.cribsud .cs-daytoggle-row .day-toggle { margin: 0; }

.cribsud .starter-card-group { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.cribsud .starter-label { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; }

.cribsud .starter-action-btn {
  padding: 0.55rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cribsud .starter-action-btn:hover { background: var(--accent); color: #fff; }
.cribsud .starter-action-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.cribsud .starter-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 48px;
  padding: 0.3rem 0.75rem;
  background: #fff;
  border: 2px solid var(--warm);
  border-radius: 8px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Day Toggle */
.cribsud .day-toggle { display: flex; justify-content: center; margin: 0 0 0.6rem; }
.cribsud .day-toggle-btn {
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.cribsud .day-toggle-btn:first-child { border-radius: 12px 0 0 12px; }
.cribsud .day-toggle-btn:last-child { border-radius: 0 12px 12px 0; }
.cribsud .day-toggle-btn:not(:first-child):not(:last-child) { border-radius: 0; }
.cribsud .day-toggle-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.cribsud .day-toggle-btn:hover:not(.active) { background: var(--surface-hover); color: var(--text); }

/* Grid Layout */
.cribsud .cribbage-grid-area {
  display: grid;
  grid-template-columns: 340px 400px auto;
  grid-template-rows: auto auto auto;
  gap: 0 0.4rem;
  justify-content: start; /* hug the left so the high scores + board sit beside the chat */
}

.cribsud .cribbage-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column: 2;
  grid-row: 2;
  border: 3px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
}

.cribsud .crib-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: 1.1rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
  position: relative;
}
.cribsud .crib-cell[data-col="2"] { border-right: 3px solid var(--accent); }
.cribsud .crib-cell[data-row="1"],
.cribsud .crib-cell[data-row="3"] { border-bottom: 3px solid var(--accent); }
.cribsud .crib-cell.gray { background: #d5dbe1; cursor: default; }
.cribsud .crib-cell.active-empty:hover { background: #d6eeff; }
.cribsud .crib-cell.selected { background: #bde0f7; box-shadow: inset 0 0 0 3px var(--accent); }
.cribsud .crib-cell.given-card { cursor: default; }
.cribsud .crib-cell.given-card .card-text { opacity: 0.65; }
.cribsud .crib-cell.player-card { cursor: pointer; background: #eef8ff; }

/* Card text */
.cribsud .card-text { display: flex; align-items: center; gap: 2px; font-weight: 800; line-height: 1; }
.cribsud .card-rank { font-size: 1.15rem; }
.cribsud .card-suit { font-size: 1.2rem; }
.cribsud .suit-heart, .cribsud .suit-diamond { color: #d32f2f; }
.cribsud .suit-spade, .cribsud .suit-club { color: #1a1a1a; }

/* Box score badge */
.cribsud .box-score-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: #111;
  min-width: 20px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  padding: 0 4px;
  pointer-events: none;
}
.cribsud .box-score-badge.score-partial { color: #ef9a9a; }
.cribsud .box-score-badge.score-complete { color: #a5d6a7; }

/* Row Scores */
.cribsud .cribbage-row-scores { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; }
.cribsud .row-score {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 32px; font-size: 0.85rem; font-weight: 700; color: var(--text-muted);
}
.cribsud .row-score.score-partial { color: #ef9a9a; }
.cribsud .row-score.score-complete { color: #a5d6a7; }

/* Column Scores */
.cribsud .cribbage-col-scores { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: repeat(6, 1fr); }
.cribsud .col-score { text-align: center; padding: 0.35rem 0; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); }
.cribsud .col-score.score-partial { color: #ef9a9a; }
.cribsud .col-score.score-complete { color: #a5d6a7; }

/* Pool + Total */
.cribsud .cribbage-pool { text-align: center; margin: 0.4rem 0; }
.cribsud .cribbage-total {
  font-size: 1.4rem; font-weight: 700; color: var(--warm);
  white-space: nowrap; display: flex; align-items: center; margin-left: 0.5rem;
}
.cribsud .pool-suit-group { display: flex; flex-wrap: nowrap; gap: 0.35rem; margin-bottom: 0.5rem; justify-content: flex-start; width: max-content; max-width: none; }
.cribsud .pool-card {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 34px; padding: 0.2rem 0.5rem;
  background: #fff; border: 2px solid #ccc; border-radius: 7px;
  font-size: 0.9rem; font-weight: 800; cursor: grab; transition: all 0.15s; user-select: none;
}
.cribsud .pool-card:active { cursor: grabbing; }
.cribsud .pool-card:hover { border-color: var(--accent); box-shadow: 0 0 6px rgba(79, 195, 247, 0.25); }
.cribsud .pool-card.selected { background: #d6eeff; border-color: var(--accent); box-shadow: 0 0 10px rgba(79, 195, 247, 0.4); }
.cribsud .pool-card.placed { opacity: 0.15; pointer-events: none; }

.cribsud .cribbage-timer { text-align: center; margin-top: 0.5rem; font-size: 1.1rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cribsud .cribbage-message { text-align: center; margin-top: 0.5rem; font-size: 1rem; font-weight: 600; min-height: 1.5rem; }
.cribsud .cribbage-message.win { color: #4caf50; }

/* Leaderboard */
.cribsud .cribbage-leaderboard { grid-column: 1; grid-row: 2 / 4; align-self: start; padding-right: 1rem; }
.cribsud .cribbage-leaderboard h3 { text-align: center; font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 0.5rem; }
.cribsud .crib-lb-cols { display: flex; gap: 1rem; align-items: flex-start; }
.cribsud .crib-lb-cols > table { flex: 1; min-width: 0; }
.cribsud .cribbage-leaderboard table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cribsud .cribbage-leaderboard th { color: var(--text-muted); font-weight: 600; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); text-align: left; }
.cribsud .cribbage-leaderboard th:first-child { width: 1.5rem; text-align: center; }
.cribsud .cribbage-leaderboard td { padding: 0.3rem 0.4rem; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.cribsud .cribbage-leaderboard td:first-child { text-align: center; color: var(--warm); font-weight: 700; }
.cribsud .cribbage-leaderboard td:nth-child(3) { font-weight: 700; color: var(--accent); }

/* ===== Play-modal preview ===== */
.cs-preview { text-align: center; padding: 0.5rem 0.25rem; }
.cs-preview .cs-banner { display: flex; justify-content: center; }
.cs-preview .cs-logo { max-width: 250px; }
.cs-preview-cols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.cs-preview-board { display: flex; justify-content: center; flex: 0 0 auto; }
/* Needs .cribsud prefix to outrank `.cribsud .cribbage-grid` (which forces 6
   columns) — otherwise the preview renders as a 6-col grid with empty blue
   tracks below the 16 cells. */
.cribsud .cs-preview-grid {
  width: 180px;
  max-width: 55vw;
  pointer-events: none;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.cribsud .cs-preview-grid .crib-cell { min-height: 0; aspect-ratio: 1; font-size: 0.8rem; }
.cribsud .cs-preview-grid .card-rank { font-size: 0.78rem; }
.cribsud .cs-preview-grid .card-suit { font-size: 0.82rem; }

.cs-preview-text { flex: 1 1 240px; max-width: 340px; text-align: left; }
.cs-preview-blurb { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; margin: 0 0 0.7rem; }
.cs-preview-points { margin: 0; padding-left: 1.1rem; color: var(--text); font-size: 0.85rem; }
.cs-preview-points li { margin-bottom: 0.3rem; }

/* ===== Game-type toggle (top of Play modal) =====
   Icon on the LEFT, two-line label on the right (v1.38v) — narrower buttons
   with bigger art, so five game types share the row. */
.lounge-create-gametype-row { display: flex; gap: 0.35rem; justify-content: center; flex-wrap: wrap; margin: 0 0 0.25rem; }
.lounge-create-gametype-btn {
  display: flex; flex-direction: row; align-items: center; gap: 0.3rem;
  flex: 1; max-width: 122px;
  padding: 0.3rem 0.35rem;
  border: 2px solid var(--lounge-border, #2a3a4a);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: #cfd8e3;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.lounge-create-gametype-btn:hover { background: rgba(79, 195, 247, 0.08); }
.lounge-create-gametype-btn.selected { border-color: #4fc3f7; background: rgba(79, 195, 247, 0.15); color: #fff; box-shadow: 0 0 10px rgba(79, 195, 247, 0.25); }
.lounge-create-gametype-icon { height: 36px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lounge-create-gametype-icon img { height: 34px; width: auto; image-rendering: auto; }
.lounge-create-gametype-icon .cs-mini-logo { height: 32px; width: auto; }

/* ===== Cribbage Variations dropdown (Play modal) =====
   One row slot; the trigger looks like the sibling game-type buttons, the
   menu drops below it with the three deal-mode variants. */
.lounge-create-variations-wrap { position: relative; display: flex; flex: 1; max-width: 122px; }
.lounge-create-variations-wrap .lounge-create-variations-btn { flex: 1; max-width: none; }
.lounge-create-variations-caret { margin-left: auto; font-size: 0.75rem; color: #9fb3c8; flex: 0 0 auto; }
.lounge-create-variations-btn.selected .lounge-create-variations-caret { color: #fff; }
/* Idle-trigger fan (Puzzles dropdown; the Variations one has its own logo,
   /images/variations.png). */
.lounge-create-variations-fan { position: relative; }
/* Puzzles trigger fan: the two SVG mini-banners are wide (120×72 viewBox),
   so overlap them a touch. */
.lounge-create-puzzles-fan { width: 52px; }
.lounge-create-puzzles-fan .cs-mini-logo { height: 22px; width: auto; }
.lounge-create-puzzles-fan .cs-mini-logo + .cs-mini-logo { margin-left: -22px; }
.lounge-create-variations-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 168px;
  flex-direction: column; gap: 0.25rem;
  padding: 0.3rem;
  border: 2px solid var(--lounge-border, #2a3a4a);
  border-radius: 10px;
  background: #14202c;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.lounge-create-variations-wrap.open .lounge-create-variations-menu { display: flex; }
.lounge-create-variation-item { max-width: none; flex: 0 0 auto; width: 100%; }

/* ===== Lounge table card (Cribbage Sudoku — non-joinable) ===== */
.lounge-mini-table.cs-mini-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Four stacked items (logo · avatar · name · score) in a 114px card — tight
     gap + slightly smaller logo/avatar so the name + score both fit. */
  gap: 2px;
  cursor: default;
  background: linear-gradient(160deg, #1c2c3e 0%, #14202e 100%);
  border: 1px solid #2a3a4a;
}
.cs-mini-table .cs-mini-logo-wrap { line-height: 0; }
.cs-mini-table .cs-mini-logo { width: 40px; height: auto; }
.cs-mini-table .cs-mini-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #4fc3f7;
  background: #1a2734;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-mini-table .cs-mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-mini-table .cs-mini-name { font-size: 0.72rem; font-weight: 700; color: #cfe6ff; max-width: 100%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Live solo-game score, broadcast as the player plays Sudoku / Counter. */
.cs-mini-table .cs-mini-score {
  font-size: 0.68rem;
  color: #ffd54f;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-mini-table .cs-mini-score b { color: #fff; }
/* Round in brackets — distinct colour while playing. */
.cs-mini-table .cs-mini-round { color: #4fc3f7; font-weight: 700; }
/* Finished — the whole score (number + round) turns green. */
.cs-mini-table .cs-mini-score-done { color: #43e660; }
.cs-mini-table .cs-mini-score-done b,
.cs-mini-table .cs-mini-score-done .cs-mini-round { color: #43e660; }

/* ===== Responsive ===== */

/* Narrow windows: the floating avatar (fixed, far right) starts to overlap the
   board once the viewport drops below ~1340px. At those widths, hide the avatar
   entirely and surface the score + timer in normal flow beneath the card pool,
   where there's still room. Covers narrow desktop windows and phones alike. */
@media (max-width: 1340px) {
  .cs-table-avatar { display: none !important; }
  .cribsud .cribbage-inflow-stats {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.1rem;
    margin: 0.5rem 0 0.2rem;
  }
  .cribsud .cribbage-inflow-stats .cribbage-total { margin: 0; font-size: 1.25rem; }
  .cribsud .cribbage-inflow-stats .cribbage-timer {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1rem;
  }
}

@media (max-width: 760px) {
  .cs-topbar { grid-template-columns: auto 1fr auto; }
  .cs-logo { max-width: 180px; }
  .cs-tagline { font-size: 0.62rem; max-width: 110px; line-height: 1.2; }

  /* Phones: full-height scrollable board; chat is a minimized bar at the
     bottom that expands OVER the board when tapped. */
  .cs-body { flex-direction: column; }
  .cribsud .cs-body > .cribbage-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 52px; /* clear the collapsed chat bar */
  }

  .cs-chat-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 72vh;
    flex-direction: column;
    border-right: none;
    border-top: 1px solid var(--border);
    background: #0f1923; /* opaque so it covers the board when open */
    z-index: 50;
  }
  .cs-chat-dock.cs-chat-collapsed { height: auto; } /* just the bar */
  .cs-chat-collapsed .lounge-chat-panel { display: none; }
  .cs-chat-toggle {
    display: block;
    width: 100%;
    padding: 11px 12px;
    background: #16283a;
    color: #cfe6ff;
    border: none;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
  }

  /* The avatar is already hidden (≤1340px rule above); shrink the under-pool
     score + timer row a touch for phones. */
  .cribsud .cribbage-inflow-stats { gap: 0.6rem; margin: 0.2rem 0 0.4rem; }
  .cribsud .cribbage-inflow-stats .cribbage-total { font-size: 1rem; }
  .cribsud .cribbage-inflow-stats .cribbage-timer { font-size: 0.82rem; }

  /* Smaller card tiles (wrap to ~2 rows), with the rank+suit filling the tile
     — minimal padding + larger glyphs so there's no dead space inside. */
  .cribsud .pool-suit-group { gap: 0.2rem; flex-wrap: wrap; width: auto; justify-content: center; }
  .cribsud .pool-card { min-width: 0; height: 27px; padding: 1px 5px; line-height: 1; border-width: 1px; border-radius: 5px; }
  .cribsud .pool-card .card-text { gap: 1px; }
  .cribsud .pool-card .card-rank { font-size: 1.12rem; }
  .cribsud .pool-card .card-suit { font-size: 1.18rem; }

  .cribsud .cribbage-section { padding: 0.75rem; margin: 0.5rem; }
  .cribsud .cribbage-toolbar { gap: 0.4rem; padding: 0; }
  .cribsud .cribbage-toolbar .starter-action-btn:first-child { margin-left: 0; }
  .cribsud .cribbage-toolbar .starter-action-btn:last-child { margin-right: 0; }
  .cribsud .starter-action-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; border-width: 1px; letter-spacing: 0; }
  .cribsud .starter-label { font-size: 0.75rem; }
  .cribsud .starter-card { min-width: 48px; height: 36px; font-size: 1rem; padding: 0.2rem 0.5rem; }

  .cribsud .crib-cell { min-height: 52px; }
  .cribsud .card-rank { font-size: 1.1rem; }
  .cribsud .card-suit { font-size: 1.15rem; }
  .cribsud .row-score { min-height: 52px; }

  .cribsud .cribbage-grid-area { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto; }
  .cribsud .cribbage-leaderboard { grid-column: 1 / -1; grid-row: 1; padding-right: 0; margin-bottom: 0.5rem; }
  .cribsud .cribbage-grid { grid-column: 1; grid-row: 3; }
  .cribsud .cribbage-row-scores { grid-column: 2; grid-row: 3; }
  .cribsud .cribbage-col-scores { grid-column: 1; grid-row: 4; }

  /* Drop the feature bullet list under the blurb on phones — saves space. */
  .cs-preview-points { display: none; }

  .lounge-create-gametype-row { gap: 0.25rem; }
  /* Five buttons wrap 3+2 on phones — flex-basis forces the break. */
  .lounge-create-gametype-btn { font-size: 0.6rem; padding: 0.25rem 0.3rem; flex: 1 1 30%; max-width: none; }
  /* The Variations dropdown wrap is the row slot on phones, not the trigger
     button inside it — give it the same 30% basis so the row still breaks
     3+2; the trigger just fills it. Menu items keep full menu width. */
  .lounge-create-variations-wrap { flex: 1 1 30%; max-width: none; }
  .lounge-create-variations-wrap .lounge-create-variations-btn,
  .lounge-create-variation-item { flex: 1 1 auto; }
  .lounge-create-gametype-icon { height: 28px; }
  .lounge-create-gametype-icon img, .lounge-create-gametype-icon .cs-mini-logo { height: 26px; }
}

/* ======================= Public page (standalone) + sharing (v1.63d) ======================= */
/* On play.ecribbage.com/cribbage_sudoku the overlay IS the page: no lounge
   behind it, no chat dock, no avatar. The headline sits under the top bar and
   the board column is centred (nothing to hug on the left). The score +
   timer row that normally only appears at narrow widths is always on. */
.cs-overlay-standalone { overflow-y: auto; }
.cs-home-link { text-decoration: none; display: inline-block; }
.cs-home-short { display: none; }
.cs-standalone-head { text-align: center; padding: 0.2rem 1rem 0.4rem; }
.cs-standalone-head h1 {
  margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--text);
  letter-spacing: -0.2px;
}
.cs-standalone-who { margin-top: 0.15rem; font-size: 0.85rem; color: var(--text-muted); }
.cs-standalone-who b { color: var(--accent); }
.cs-overlay-standalone .cs-body { justify-content: center; }
.cs-overlay-standalone .cribsud .cs-body > .cribbage-section { margin: 0 auto; }
.cs-overlay-standalone .cribsud .cribbage-inflow-stats {
  display: flex; align-items: baseline; justify-content: center; gap: 1.1rem; margin: 0.5rem 0 0.2rem;
}
.cs-overlay-standalone .cribsud .cribbage-inflow-stats .cribbage-total { margin: 0; font-size: 1.25rem; }
.cs-overlay-standalone .cribsud .cribbage-inflow-stats .cribbage-timer {
  margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1rem;
}

.cribsud .cs-guest-tag {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem;
  font-size: 0.62rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.4px;
  border-radius: 6px; border: 1px solid var(--border); color: var(--text-muted);
  vertical-align: middle;
}

/* Result block under the win message (both the lounge overlay and the page). */
.cribsud .cs-result {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  margin: 0.4rem auto 0.6rem; max-width: 520px; text-align: center;
}
.cribsud .cs-you-line { font-size: 0.95rem; color: var(--text); min-height: 1.2em; }
.cribsud .cs-you-line b { color: var(--accent); }
.cribsud .cs-you-line:empty { display: none; }
.cribsud .cs-name-prompt {
  width: 100%; max-width: 420px; padding: 0.8rem 1rem; border-radius: 12px; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); text-align: center;
}
.cribsud .cs-name-title { font-size: 1.1rem; font-weight: 800; color: #ffd54f; }
.cribsud .cs-name-sub { font-size: 0.85rem; color: var(--text-muted); margin: 0.2rem 0 0.6rem; }
.cribsud .cs-name-form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.cribsud .cs-name-form input {
  flex: 1 1 160px; min-width: 0; padding: 0.55rem 0.7rem; font-size: 1.05rem;
  border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--text);
}
.cribsud .cs-name-form input:focus { outline: 2px solid var(--accent); }
.cribsud .cs-name-form .starter-action-btn { margin: 0; }
.cribsud .cs-name-err { color: #ff8a80; font-size: 0.85rem; margin-top: 0.4rem; }
.cribsud .cs-name-err:empty { display: none; }

.cribsud .cs-share-row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.cribsud .cs-share-btn {
  padding: 0.45rem 0.9rem; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.9rem;
  border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--text);
  font-family: inherit;
}
.cribsud .cs-share-btn:hover { background: rgba(255,255,255,0.12); }
.cribsud .cs-share-btn:disabled { opacity: 0.85; cursor: default; }
.cribsud .cs-share-fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.cribsud .cs-share-fb:hover { background: #3b8cf5; }
.cribsud .cs-signup-nudge {
  display: inline-block; margin-top: 0.2rem; padding: 0.5rem 1rem; border-radius: 8px;
  background: var(--accent-dim); color: var(--accent); text-decoration: none; font-weight: 700; font-size: 0.9rem;
  border: 1px solid var(--accent);
}
.cribsud .cs-signup-nudge:hover { filter: brightness(1.15); }

@media (max-width: 820px) {
  .cs-standalone-head h1 { font-size: 1.1rem; }
}
@media (max-width: 760px) {
  .cs-home-long { display: none; }
  .cs-home-short { display: inline; }
  /* No chat bar on the public page — give its 52px back. */
  .cs-overlay-standalone .cribsud .cs-body > .cribbage-section { padding-bottom: 1rem; }
}

/* ── Public page fit (v1.63d, Damien): compact top bar, and on wide screens a
   right-hand column — Total + clock pinned at the top so the score is always
   in view, Rules & Scoring beneath. Narrow screens stack the column under the
   board and fall back to the in-flow Total row. ── */
.cs-overlay-standalone .cs-topbar { padding: 0.3rem 1rem; }
.cs-overlay-standalone .cs-logo { max-width: 190px; }
.cs-overlay-standalone .cs-standalone-head { padding: 0.15rem 1rem 0.1rem; }
.cs-overlay-standalone .cribsud .cs-body > .cribbage-section { padding-top: 0.2rem; }
.cs-overlay-standalone .cribsud .cs-daytoggle-row { margin-bottom: 0.35rem; }
.cs-overlay-standalone .cribsud .cribbage-toolbar { margin-bottom: 0.4rem; }

.cs-side { display: flex; flex-direction: column; gap: 0.7rem; }
.cs-side-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.7rem 0.95rem; box-sizing: border-box;
}
.cs-side-score { text-align: center; }
.cribsud .cs-side-total { font-size: 1.9rem; font-weight: 800; color: var(--warm); line-height: 1.1; margin: 0; }
.cribsud .cs-side-timer {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem;
  font-size: 1.05rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.cs-side-score .cs-standalone-who { margin-top: 0.35rem; font-size: 0.78rem; }
.cs-side-rules { font-size: 0.8rem; line-height: 1.4; color: var(--text); }
.cs-side-rules h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--accent); }
.cs-side-rules h4 { margin: 0.6rem 0 0.15rem; font-size: 0.82rem; color: var(--warm); }
.cs-side-rules p { margin: 0 0 0.2rem; }
.cs-side-rules i { color: var(--text-muted); }
.cs-rules-table { width: 100%; border-collapse: collapse; margin: 0.2rem 0; }
.cs-rules-table td { padding: 0.15rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cs-rules-table td:last-child { text-align: right; font-weight: 700; color: var(--accent); white-space: nowrap; }

@media (min-width: 1100px) {
  .cs-overlay-standalone .cs-body {
    display: grid; grid-template-columns: minmax(0, 840px) 300px; justify-content: center;
    align-items: start; column-gap: 1.25rem; padding: 0 1rem;
  }
  .cs-overlay-standalone .cribsud .cs-body > .cribbage-section { margin: 0; max-width: none; }
  .cs-side { position: sticky; top: 0.5rem; padding-top: 0.5rem; max-height: calc(100vh - 1rem); }
  .cs-side-rules { overflow-y: auto; min-height: 0; }
  /* The side card carries the Total up here — no need for the in-flow row
     or the "Playing as" line under the top bar. */
  .cs-overlay-standalone .cribsud .cribbage-inflow-stats { display: none; }
  .cs-overlay-standalone .cs-standalone-head { display: none; }
}
@media (max-width: 1099px) {
  .cs-overlay-standalone .cs-body { flex-direction: column; align-items: center; }
  .cs-side { width: 100%; max-width: 820px; padding: 0 1rem 1.5rem; box-sizing: border-box; }
  .cs-side-score { display: none; }
}

/* The public page is a normal document, not a fixed overlay: the lounge
   overlay is position:fixed + flex so it can sit over the live lounge, but on
   the page that flex column shrinks to the viewport and anything stacked
   below the board (the rules column on narrow screens) overflows on top of
   it. In flow, the page scrolls normally and the side column can be sticky. */
.cs-overlay-standalone { position: static; inset: auto; height: auto; min-height: 100vh; overflow: visible; display: block; }
body.cs-standalone.cs-active { overflow: auto; }
.cs-overlay-standalone > .cribsud { display: block; min-height: 0; }
@media (max-width: 1099px) {
  .cs-overlay-standalone .cs-body { display: block; }
  .cs-side { margin: 0 auto; }
}
@media (max-width: 760px) {
  .cs-overlay-standalone .cribsud .cs-body > .cribbage-section { overflow: visible; flex: none; }
}