/* =====================================================================================
   13 Card Rummy Live — visual system

   The palette takes its cue from C:\Projects\Design: a warm wooden rail around a felt
   table, cream cards with a faint paper grain, gold for anything the player can act on.
   Everything here is CSS and inline SVG, so the whole client is three files and no
   asset pipeline — cards stay crisp from a 320px phone to a 4K monitor.
   ===================================================================================== */

:root {
  /* surface */
  --felt-1: #0e4634;
  --felt-2: #06281d;
  --rail-1: #7a4a26;
  --rail-2: #4a2c15;
  --panel: #12211c;
  --panel-2: #182f27;
  --edge: rgba(212, 163, 74, 0.22);

  /* ink */
  --gold: #d4a34a;
  --gold-bright: #f0c674;
  --text: #f2ead8;
  --muted: #9fb0a6;
  --danger: #e05a4d;
  --good: #4fbf7f;

  /* cards */
  --card-face: #f8f3e8;
  --card-face-2: #e9e0cd;
  --card-red: #c0392b;
  --card-black: #1d2a24;
  --card-back-1: #8c2f28;
  --card-back-2: #5c1c18;

  /* geometry */
  --radius: 12px;
  --radius-sm: 7px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.35);

  --card-w: 74px;
  --card-h: 104px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  color: var(--text);
  background: var(--felt-2);
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(120% 90% at 50% 8%, var(--felt-1) 0%, var(--felt-2) 70%),
    var(--felt-2);
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0 0 0.4em; font-weight: 650; letter-spacing: 0.01em; }
a { color: var(--gold-bright); }

/* ------------------------------------------------------------------ shared controls */

.btn {
  appearance: none;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #23423a, #16302a);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: rgba(0, 0, 0, 0.25);
  color: #2a1c06;
}
.btn-danger { background: linear-gradient(180deg, #a5382e, #7d2820); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

input, select {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
label { display: block; font-size: 0.8rem; color: var(--muted); margin: 0 0 5px; }
.field { margin-bottom: 14px; }

.card-panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.error-text { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin-top: 8px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ============================================================== lobby / landing page */

.shell { max-width: 1080px; margin: 0 auto; padding: 24px 18px 60px; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 22px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--rail-1), var(--rail-2));
  border: 1px solid var(--edge);
  font-size: 1.3rem;
}
.brand h1 { font-size: 1.3rem; margin: 0; letter-spacing: 0.06em; text-transform: uppercase; }
.brand small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.14em; }

.wallet-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.9rem;
}
.wallet-chip b { color: var(--gold-bright); }

.auth-wrap { max-width: 420px; margin: 8vh auto; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabs .btn { flex: 1; }
.tabs .btn[aria-selected="true"] { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #2a1c06; }

.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.table-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.table-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.table-card h3 { margin: 0; font-size: 1.05rem; }

.pill {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  color: var(--gold-bright);
}
.pill.points { border-color: #3f7f5f; color: #7fdcaa; }
.pill.pool   { border-color: #7f6a3f; color: var(--gold-bright); }
.pill.deals  { border-color: #3f5f7f; color: #7fb8dc; }

.table-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); }
.table-actions { display: flex; gap: 8px; margin-top: 4px; }
.table-actions .btn { flex: 1; }

.section-title {
  display: flex; align-items: baseline; gap: 12px;
  margin: 30px 0 14px;
}
.section-title h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0; }
.section-title span { color: var(--muted); font-size: 0.85rem; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
table.data th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
table.data tr:hover td { background: rgba(255,255,255,0.03); }

/* ========================================================================= game table */

.game-body { overflow: hidden; height: 100vh; }
.table-shell > * { min-width: 0; }

.table-shell {
  display: grid;
  /* header, status line, felt (takes the slack), hand zone, ad slot */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

.table-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
  flex-wrap: wrap;
}
.table-top .title { font-weight: 650; letter-spacing: 0.04em; }
.table-top .right { display: flex; gap: 10px; align-items: center; }

.status-line {
  font-size: 0.85rem; color: var(--muted);
  padding: 0 16px 6px;
  min-height: 1.3em;
}

/* felt */
.felt {
  position: relative;
  margin: 4px 14px 10px;
  height: 100%;
  border-radius: 46% / 32%;
  background: radial-gradient(70% 70% at 50% 42%, #12513c 0%, #093023 78%);
  border: 10px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.55),
    0 0 0 10px var(--rail-2),
    0 0 0 13px var(--rail-1),
    var(--shadow);
  min-height: 260px;
}

.seats { position: absolute; inset: 0; }

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 124px;
  text-align: center;
  transition: opacity 0.2s ease;
}
.seat .avatar {
  width: 44px; height: 44px; margin: 0 auto 4px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2e4a3f, #16302a);
  border: 2px solid var(--edge);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem;
  position: relative;
}
.seat.turn .avatar { border-color: var(--gold-bright); box-shadow: 0 0 0 4px rgba(212,163,74,0.25), 0 0 18px rgba(212,163,74,0.5); }
.seat.out { opacity: 0.4; }
.seat .name {
  font-size: 0.8rem; font-weight: 600; line-height: 1.15;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.seat .sub { font-size: 0.7rem; color: var(--muted); }
.seat .mini-hand { display: flex; justify-content: center; gap: 1px; margin-top: 4px; height: 22px; }
.seat .mini-card {
  width: 12px; height: 20px; border-radius: 2px;
  background: linear-gradient(160deg, var(--card-back-1), var(--card-back-2));
  border: 1px solid rgba(0,0,0,0.4);
}
.seat .offline { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.9rem; }

.turn-ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--gold-bright);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* centre: stock, discard, wild */
.center-stack {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 18px;
}
.pile { text-align: center; }
.pile-label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.pile .slot {
  width: var(--card-w); height: var(--card-h);
  border-radius: var(--radius-sm);
  border: 2px dashed rgba(255,255,255,0.16);
  display: grid; place-items: center;
  cursor: default;
}
.pile.actionable .slot { border-style: solid; border-color: var(--gold); cursor: pointer; box-shadow: 0 0 16px rgba(212,163,74,0.35); }
.pile.actionable:hover .slot { transform: translateY(-3px); }

.wild-badge {
  position: absolute; right: 12px; top: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.72rem;
  text-align: center;
}
.wild-badge b { display: block; color: var(--gold-bright); letter-spacing: 0.1em; }

.deal-banner {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 30px;
  text-align: center;
  z-index: 20;
  max-width: 90%;
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------------------- your hand */

.hand-zone {
  position: relative;   /* sits above the felt, which fills the flexible row */
  z-index: 10;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.7));
  border-top: 3px solid var(--rail-2);
  padding: 10px 14px 14px;
}

.hand-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.hand-stats { display: flex; gap: 14px; font-size: 0.8rem; color: var(--muted); align-items: center; }
.hand-stats b { color: var(--text); }
.points-badge {
  background: rgba(0,0,0,0.35); border: 1px solid var(--edge);
  border-radius: 999px; padding: 4px 12px;
}
.points-badge.valid { border-color: var(--good); color: var(--good); }

.timer {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12);
  overflow: hidden; margin-bottom: 8px;
}
.timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-bright), var(--gold)); width: 100%; }
.timer.urgent i { background: linear-gradient(90deg, #ff8a72, var(--danger)); }

/* Never wrap the hand onto a second row: two rows of overlapping cards is unreadable
   and half of them end up under something else. One row that scrolls sideways is how a
   real hand behaves anyway. */
.groups {
  display: flex; gap: 12px; flex-wrap: nowrap; align-items: flex-end;
  min-height: calc(var(--card-h) + 18px);
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.group {
  display: flex;
  padding: 6px 8px 8px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.16);
  min-width: calc(var(--card-w) + 20px);
  min-height: calc(var(--card-h) + 14px);
  align-items: flex-end;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.group.drop-target { border-color: var(--gold); background: rgba(212,163,74,0.16); }
.group.spare {
  min-width: 46px; align-items: center; justify-content: center;
  color: var(--muted); opacity: 0.55;
}
.group.spare .spare-hint { font-size: 1.4rem; line-height: 1; }
.group.spare.drop-target { opacity: 1; }
.group.valid-meld { border-color: var(--good); border-style: solid; }
/* Cards overlap to save width, but every card needs enough of itself showing to be
   grabbed — 22px of a 58px card left only a sliver, which is most of why sorting by
   hand was fiddly. */
.group .card + .card { margin-left: -14px; }
.group .card { transition: margin-left .12s ease, transform .12s ease; }
.group .card:hover { transform: translateY(-4px); z-index: 3; }

/* While a drop is being aimed at this group, fan it out so the insertion caret has
   somewhere visible to sit. */
.group.drop-target .card + .card { margin-left: 2px; }

.insert-caret {
  width: 3px; align-self: stretch; flex: none;
  margin: 0 1px; border-radius: 2px;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(240,198,116,0.9);
}

/* ------------------------------------------------------------------------------ cards */

.card {
  width: var(--card-w); height: var(--card-h);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--card-face), var(--card-face-2));
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: var(--shadow-sm);
  position: relative;
  flex: 0 0 auto;
  cursor: grab;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card { touch-action: none; }   /* the hand owns the gesture, not the scroller */
@media (hover: hover) {
  .card:hover { transform: translateY(-10px); z-index: 5; box-shadow: 0 10px 22px rgba(0,0,0,0.5); }
}
.card.selected { transform: translateY(-16px); box-shadow: 0 0 0 2px var(--gold-bright), 0 12px 24px rgba(0,0,0,0.55); z-index: 6; }
.card.dragging { opacity: 0.35; }
.card.ghost {
  position: fixed; z-index: 100; pointer-events: none;
  transform: translate(-50%, -60%) rotate(-3deg) scale(1.06);
  box-shadow: 0 16px 34px rgba(0,0,0,0.6);
  opacity: 0.95;
}
.card svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
.card.back { background: linear-gradient(160deg, var(--card-back-1), var(--card-back-2)); cursor: default; }
.card.back::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 4px;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 4px, transparent 4px 8px);
}
/* The wild marker, drawn rather than typed. It used to be content: "★", which renders
   from whatever symbol font the device happens to carry — see web/js/suits.js for why
   every pictorial mark on a card is now this project's own geometry. */
.card.joker-marked::before {
  content: "";
  position: absolute; top: 3px; right: 4px;
  width: 9px; height: 9px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4 14.5 9.3 21.8 9.5 16 13.9 18 20.9 12 16.8 6 20.9 8 13.9 2.2 9.5 9.5 9.3z' fill='rgb(212,163,74)'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------- results */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(2, 12, 8, 0.82);
  display: grid; place-items: center;
  padding: 20px;
}
.overlay .card-panel { max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; }
.result-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.result-row.you { color: var(--gold-bright); font-weight: 650; }
.result-row .reason { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.result-row .gain { color: var(--good); }
.result-row .loss { color: var(--danger); }

/* Everyone's hand, face up, once the deal is over — grouped into the melds it was
   actually scored as, because "why did I lose 69?" is the only question anyone has at a
   showdown and a flat row sorted by suit answers none of it. */
.reveal-hand {
  --card-w: 36px; --card-h: 51px;
  display: flex; padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow-x: auto;
}
.reveal-hand .card + .card { margin-left: -5px; }
.reveal-hand .card { box-shadow: 0 2px 5px rgba(0,0,0,0.45); }

.reveal-hand.grouped {
  /* Smaller than the ungrouped fallback: a hand can be five melds wide, and five groups
     of 36px cards overflow the dialog. It still scrolls if a hand is unusually split. */
  --card-w: 30px; --card-h: 43px;
  gap: 6px; align-items: flex-start;
}
.reveal-group {
  flex: none;
  padding: 4px 5px 2px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
}
.reveal-group .reveal-cards { display: flex; }
.reveal-group small {
  display: block; margin-top: 2px;
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
/* A meld that counted reads green; the cards that did not are the ones that cost you
   points, so they are the ones marked. */
.reveal-group.pure_run,
.reveal-group.tanala { border-color: var(--good); }
.reveal-group.pure_run small,
.reveal-group.tanala small { color: var(--good); }
.reveal-group.impure_run,
.reveal-group.set { border-color: rgba(79,191,127,0.45); }
.reveal-group.deadwood {
  border-color: rgba(224,90,77,0.55);
  background: rgba(224,90,77,0.07);
}
.reveal-group.deadwood small { color: var(--danger); }

/* ------------------------------------------------------------------------------- chat */

/* Chat sits out of the way until you want it: a small tab that expands upward, so it
   never covers the felt or the hand. */
.chat {
  position: fixed; right: 12px;
  bottom: calc(var(--card-h) + 104px);
  width: 250px; z-index: 30;
}
.chat-toggle {
  position: absolute; right: 0; bottom: 0;
  border-radius: 999px; padding: 6px 14px;
}
.chat-panel { display: none; }
.chat.open .chat-panel { display: block; }
.chat.open .chat-toggle { position: static; margin-top: 6px; width: 100%; }
.chat-log {
  max-height: 150px; overflow-y: auto;
  background: rgba(0,0,0,0.45); border: 1px solid var(--edge);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 8px; font-size: 0.78rem;
}
.chat-log b { color: var(--gold-bright); }
.chat form { display: flex; }
.chat input { border-radius: 0 0 0 var(--radius-sm); }
.chat .btn { border-radius: 0 0 var(--radius-sm) 0; }

/* ------------------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  :root { --card-w: 58px; --card-h: 82px; }
  .seat { width: 104px; }
  .center-stack { gap: 10px; }
  .chat { width: 200px; }
}

@media (max-width: 620px) {
  :root { --card-w: 46px; --card-h: 66px; }
  /* "13 CARD RUMMY LIVE" is a long masthead for a phone. The session bar already wraps
     to its own line below it, so the brand has the full width — but at 1.3rem it still
     crowds the edge on a 360px screen. */
  .brand h1 { font-size: 1.05rem; letter-spacing: 0.04em; }
  .seat { width: 78px; font-size: 0.92em; }
  .seat .avatar { width: 34px; height: 34px; font-size: 0.85rem; }
  .felt { margin: 0 6px; min-height: 230px; }
  .group .card + .card { margin-left: -12px; }
  .groups { padding-bottom: 6px; }
  .chat { display: none; }
}

/* ============================================================= playing with friends

   The lobby's create/join strip, and the waiting room on the table page. Both live in
   the same visual family as the table cards, so a table you are hosting looks like a
   table rather than like a settings form.
   ================================================================================== */

.friends-panel { padding: 16px 18px; }
.friends-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.code-form { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.code-form input {
  flex: 1; min-width: 0;
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.code-form input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }

.code-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em; color: var(--gold-bright);
}
.code-chip.big {
  font-size: 1.6rem; font-weight: 700; line-height: 1.2;
  /* the whole point of this element is to be read out loud or copied by hand */
  user-select: all;
}

.waiting-room { margin: 0 10px 18px; }
.waiting-room .card-panel { max-width: 640px; margin: 0 auto; }

.invite-box {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.28);
  border: 1px dashed var(--edge); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 6px;
}
.invite-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.copied { margin: 4px 0 0; color: var(--good); font-size: 0.8rem; }

.seat-list { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.seat-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.seat-row.empty { border-style: dashed; background: none; }
.seat-index {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(212, 163, 74, 0.16);
  font-size: 0.72rem; color: var(--gold-bright);
}
.seat-name { flex: 1; min-width: 0; }
.seat-name small { font-size: 0.76rem; }

.request-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#requests-wrap h3 { margin: 18px 0 6px; font-size: 0.95rem; }
.request-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  background: rgba(212, 163, 74, 0.08);
  padding: 9px 12px;
}

.countdown {
  margin: 10px 0 4px; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(79, 191, 127, 0.12); border: 1px solid rgba(79, 191, 127, 0.4);
  color: var(--good); font-weight: 600; text-align: center;
}

.waiting-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.clock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.clock-row select { width: auto; min-width: 130px; margin: 0; }
/* A guest sees what the clock is set to but cannot touch it. */
.clock-row select:disabled { opacity: 1; color: var(--gold-bright); border-color: transparent;
  background: none; appearance: none; text-align: right; padding-right: 0; }

@media (max-width: 620px) {
  .waiting-room { margin: 0 6px 12px; }
  .waiting-actions .btn { flex: 1; }
  .code-chip.big { font-size: 1.3rem; }
}


/* ================================================================== the ad slot

   Sized here rather than by the ad itself, so the page is laid out around it before
   anything loads and never jumps when the fill arrives. A banner that appears late and
   shoves the hand upward is how a player taps a card — or an ad — they did not mean to.

   `hidden` until js/ads.js has an AdSense client and slot to work with, so an
   unconfigured copy shows no dead space at all.
   ============================================================================== */

.ad-slot {
  display: block;
  width: 100%;
  height: 90px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid var(--edge);
  /* AdSense will not render into a zero-width box, which is what it gets if the slot is
     ever collapsed by a parent's flex/grid rules. */
  min-width: 0;
}
.ad-slot[hidden] { display: none; }

/* The lobby scrolls, so the slot is pinned to the foot of the viewport rather than left
   at the end of the document where nobody would ever scroll to it. `sticky` does not do
   this: a sticky last child only sticks once you have scrolled *past* where it would
   naturally sit, so it stays below the fold until the very bottom of the page.
   The table needs none of this — there the slot is a real row of the grid. */
.shell > .ad-slot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  width: 100%;
  background: rgba(6, 40, 29, 0.94);
  backdrop-filter: blur(8px);
}
/* ...and the page is padded so the last table card is not stuck behind it. Driven by a
   class rather than the slot's own state so an unconfigured build reserves nothing. */
body.ads-on .shell { padding-bottom: 106px; }

@media (max-width: 620px) {
  /* Phones get the shorter unit: 90px of a small screen is a lot of the table. */
  .ad-slot { height: 50px; }
  body.ads-on .shell { padding-bottom: 66px; }
}


/* ------------------------------------------------------------------- table rosters

   A table persists with the people in it, so its card in "Your tables" shows the
   roster: one chip per seat, empty chairs included. An empty chair is the thing you
   tap to invite somebody, so it has to be visible rather than merely absent. */

.seat-strip { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }

.seat-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  padding: 5px 8px 5px 10px; font-size: 0.85rem; background: rgba(0, 0, 0, 0.16);
  min-height: 32px;
}
.seat-chip.empty { border-style: dashed; color: var(--muted); background: none; }
.seat-chip > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.seat-chip .seat-act { padding: 2px 8px; font-size: 0.75rem; flex: none; }

/* `last_seen_at` inside the recency window. A hint about whether it is worth inviting
   somebody, never a promise that they are looking at the screen. */
.dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--muted); opacity: 0.5;
}
.dot.on { background: var(--good); opacity: 1; box-shadow: 0 0 6px rgba(79, 191, 127, 0.6); }

.person-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; margin-bottom: 10px;
}
.person-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  justify-content: flex-start; text-align: left; padding: 8px 12px;
}
.person-row em { margin-left: auto; font-style: normal; font-size: 0.78rem; color: var(--muted); }