/* styles.css - dark theme matching the site palette. Cards are opaque, outlined in their suit color:
   red for hearts/diamonds, white for spades/clubs. Selectable cards read brighter than the rest. */

:root {
  /* Three user-editable primaries (the Colors popup sets these). */
  --color-bg: #111214;
  --color-text: #eaeaea;
  --color-accent: #C5283D;

  /* The rest are derived from the three above, so they rescale automatically when a primary changes. */
  --color-surface: color-mix(in srgb, var(--color-bg), white 5%);       /* panels/cards base, just above bg */
  --color-border: color-mix(in srgb, var(--color-bg), white 11%);       /* lines, a bit lighter still */
  --color-muted: color-mix(in srgb, var(--color-text), var(--color-bg) 35%); /* dimmed text */
  --color-accent-text: color-mix(in srgb, var(--color-accent), white 25%);   /* lighter accent for text/highlights */

  /* Felt and card faces, also shaded from the background so the whole surface follows the theme. */
  --felt-center: color-mix(in srgb, var(--color-bg), black 10%);   /* lit middle of the table */
  --felt-edge:   color-mix(in srgb, var(--color-bg), black 55%);   /* darker rail */
  --card-face:       color-mix(in srgb, var(--color-bg), white 9%);  /* solid, clearly above the felt */
  --card-face-lit:   color-mix(in srgb, var(--color-bg), white 18%); /* a playable card */
  --card-face-hover: color-mix(in srgb, var(--color-bg), white 26%); /* the card under the cursor */
  --glow: color-mix(in srgb, var(--color-accent-text) 30%, transparent); /* turn spotlight, follows the accent */

  --suit-red: var(--color-accent-text); /* hearts, diamonds */
  --suit-white: var(--color-text);      /* spades, clubs */

  --card-scale: 1; /* user card-size preference, set from the Size control */
  --card-w: calc(clamp(32px, 4.2vw, 54px) * var(--card-scale));
  --card-h: calc(var(--card-w) * 1.4);
  --radius: calc(var(--card-w) * 0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

/* ---- Top and bottom bars ---- */
#topbar, #bottombar {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
#bottombar { border-top: 1px solid var(--color-border); border-bottom: none; justify-content: space-between; }

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
}

#status { margin: 0; font-size: 0.85rem; color: var(--color-text); }
#auction { font-size: 0.8rem; color: var(--color-muted); margin-left: auto; }

/* ---- Controls ---- */
#controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.level-display { font-size: 0.85rem; color: var(--color-text); }

button {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button:hover:not(:disabled) { border-color: var(--color-accent); background: #24272c; }
#controls button:disabled { opacity: 0.6; cursor: default; }
.hand .card:disabled { opacity: 1; }

.bid { min-width: 2.4rem; font-size: 1.05rem; }
.bid.suit-C, .bid.suit-S { color: var(--suit-white); }
.bid.suit-D, .bid.suit-H { color: var(--suit-red); }
#new-deal { border-color: var(--color-accent); }

#scoreboard { font-size: 0.82rem; color: var(--color-muted); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- The table ---- */
#table {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    ".    top    ."
    "left trick right"
    ".    bottom .";
  gap: 0.25rem;
  padding: 0.5rem 2.5rem;
  overflow: hidden; /* never let a tall side hand push the layout around */
  /* Felt darker than the cards so the opaque surface-toned cards clearly stand out. */
  background: radial-gradient(130% 100% at 50% 50%, var(--felt-center) 0%, var(--felt-edge) 75%);
}

.seat { display: flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 0; position: relative; z-index: 1; }
.pos-top    { grid-area: top;    align-self: start; flex-direction: column; }
.pos-bottom { grid-area: bottom; align-self: end;   flex-direction: column; }
.pos-left   { grid-area: left;   justify-self: start; flex-direction: row; }
.pos-right  { grid-area: right;  justify-self: end;   flex-direction: row; }

.seat-name {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.pos-left .seat-name, .pos-right .seat-name { writing-mode: vertical-rl; }

/* Hands: north/south fan horizontally, west/east stack vertically. */
.hand { display: flex; }
.pos-top .hand, .pos-bottom .hand { flex-direction: row; min-height: var(--card-h); }
.pos-left .hand, .pos-right .hand { flex-direction: column; min-width: var(--card-w); }

/* Face-up hands (you and the revealed dummy): light cascade, each card clearly on top of the previous. */
.pos-top .hand.spread .card + .card, .pos-bottom .hand.spread .card + .card { margin-left: calc(var(--card-w) * -0.30); }
.pos-left .hand.spread .card + .card, .pos-right .hand.spread .card + .card { margin-top:  calc(var(--card-h) * -0.72); }

/* Face-down opponent hands: compact stack, one card resting on another. */
.pos-top .hand.stacked .card + .card, .pos-bottom .hand.stacked .card + .card { margin-left: calc(var(--card-w) * -0.90); }
.pos-left .hand.stacked .card + .card, .pos-right .hand.stacked .card + .card { margin-top:  calc(var(--card-h) * -0.86); }

/* ---- Cards ---- */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  background: var(--card-face); /* shaded from the theme background, clearly above the felt */
  border: 2px solid var(--color-border);
  padding: 0;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Face content and per-suit color: symbol and outline share the suit's color. */
.card.face.red   { color: var(--suit-red);   border-color: var(--suit-red); }
.card.face.black { color: var(--suit-white); border-color: var(--suit-white); }
.card .idx {
  position: absolute;
  top: 4%;
  left: 8%;
  font-size: calc(var(--card-w) * 0.34);
  font-weight: 800;
  line-height: 0.95;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* On the vertical side hands only the top sliver shows, so put rank and suit on ONE line. */
.pos-left .card .idx, .pos-right .card .idx { flex-direction: row; gap: 1px; align-items: baseline; font-size: calc(var(--card-w) * 0.38); }
.card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-w) * 0.62);
  opacity: 1; /* non-transparent */
}

/* Card back: framed lattice in the accent color. */
.card.back {
  background: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 6px, var(--color-border) 6px, var(--color-border) 12px);
  border: 2px solid var(--color-accent);
}

/* Playable cards jump out with a distinctly lighter fill, a brighter outline, and a strong suit-colored glow.
   Non-playable cards keep their solid base tone, so nothing dims toward the felt and overlaps stay clean. */
.hand .card:not(:disabled) { background: var(--card-face-lit); cursor: pointer; }
.hand .card.face.red:not(:disabled)   { border-color: var(--suit-red);   box-shadow: 0 0 12px 2px color-mix(in srgb, var(--suit-red) 70%, transparent), 0 2px 8px rgba(0,0,0,0.6); }
.hand .card.face.black:not(:disabled) { border-color: var(--suit-white); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--suit-white) 55%, transparent), 0 2px 8px rgba(0,0,0,0.6); }
.hand .card:not(:disabled):hover { z-index: 20; background: var(--card-face-hover); }

/* ---- Center trick, one card per seat around a cross ---- */
.trick {
  grid-area: trick;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: calc(var(--card-w) * 3.0);
  height: calc(var(--card-h) * 3.0);
}
.slot { position: absolute; }
.slot.pos-top    { top: 0; left: 50%; transform: translateX(-50%); }
.slot.pos-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.slot.pos-left   { left: 0; top: 50%; transform: translateY(-50%); }
.slot.pos-right  { right: 0; top: 50%; transform: translateY(-50%); }
.slot .card { box-shadow: 0 3px 10px rgba(0,0,0,0.8); }

/* The one motion moment: the newest card slides in from its own player's side. */
@keyframes fly-top    { from { transform: translateY(-220%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fly-bottom { from { transform: translateY(220%);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fly-left   { from { transform: translateX(-260%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fly-right  { from { transform: translateX(260%);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.card.fly-top    { animation: fly-top 0.4s ease-out; }
.card.fly-bottom { animation: fly-bottom 0.4s ease-out; }
.card.fly-left   { animation: fly-left 0.4s ease-out; }
.card.fly-right  { animation: fly-right 0.4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card.fly-top, .card.fly-bottom, .card.fly-left, .card.fly-right { animation: none; }
}
/* ---- Scoreboard: side tab + popup panel ---- */
#sb-toggle {
  position: fixed; right: 0; top: calc(50% - 95px); transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 0.7rem 0.4rem;
  border-radius: 6px 0 0 6px; border-color: var(--color-accent);
  letter-spacing: 0.06em; z-index: 50;
}

#sb-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
#sb-overlay[hidden] { display: none; }

#sb-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  min-width: 360px; max-width: 92vw; max-height: 85vh; overflow: auto;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
}
#sb-panel h2 {
  margin: 0 0 0.8rem; font-family: Georgia, "Times New Roman", serif;
  font-weight: 600; color: var(--color-accent-text);
}

.sb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sb-table th, .sb-table td { padding: 0.35rem 0.7rem; text-align: right; border-bottom: 1px solid var(--color-border); }
.sb-table th:nth-child(2), .sb-table td:nth-child(2) { text-align: left; }
.sb-table thead th { color: var(--color-muted); font-weight: 600; }
.sb-table tfoot td { font-weight: 700; color: var(--color-text); border-top: 2px solid var(--color-border); border-bottom: none; }
.sb-empty { color: var(--color-muted); margin: 0; }

#sb-next { margin-top: 1.1rem; border-color: var(--color-accent); }

.sb-rubber { margin: 0 0 0.9rem; color: var(--color-text); font-size: 0.9rem; line-height: 1.5; }
.sb-rubber strong { color: var(--color-accent-text); }

/* ---- Active-player spotlight (behind the cards) ---- */
#spotlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transition: background 0.25s ease;
}
/* A pool of light near the active seat, fading toward the center of the table. */
.spot-top    { background: radial-gradient(ellipse 42% 55% at 50% 14%, var(--glow), transparent 72%); }
.spot-bottom { background: radial-gradient(ellipse 42% 55% at 50% 86%, var(--glow), transparent 72%); }
.spot-left   { background: radial-gradient(ellipse 55% 42% at 12% 50%, var(--glow), transparent 72%); }
.spot-right  { background: radial-gradient(ellipse 55% 42% at 88% 50%, var(--glow), transparent 72%); }

/* ---- Trump emblem (behind the played cards) ---- */
#trump-emblem {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(6rem, 24vh, 15rem); line-height: 1; opacity: 0.10;
}
#trump-emblem.red { color: var(--suit-red); }
#trump-emblem.white { color: var(--suit-white); }
#trump-emblem.nt { color: var(--color-muted); font-size: clamp(3rem, 12vh, 7rem); font-family: Georgia, serif; letter-spacing: 0.05em; }

/* ---- Each player's latest call, shown just toward the center from their hand ---- */
.call {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.call-item {
  padding: 0.15rem 0.55rem; border-radius: 6px;
  background: rgba(0, 0, 0, 0.6); border: 1px solid var(--color-border);
  font-size: 1.05rem; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.call-item.pass { color: var(--color-muted); }
.call-item.red { color: var(--suit-red); }
.call-item.white { color: var(--suit-white); }
.call-item.dbl { color: var(--color-accent-text); font-weight: 700; }
.pos-top .call    { left: 50%; top: calc(100% + 4px); transform: translateX(-50%); }
.pos-bottom .call { left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); }
.pos-left .call   { top: 50%; left: calc(100% + 6px); transform: translateY(-50%); }
.pos-right .call  { top: 50%; right: calc(100% + 6px); transform: translateY(-50%); }

/* Claimable seat labels (multiplayer): click to sit or leave. */


/* Turn clock in the top bar. */
#clock { font-size: 0.85rem; color: var(--color-muted); min-width: 2.5rem; }
#clock.low { color: var(--color-accent-text); font-weight: 600; }

/* Per-seat controls (sit / leave / add-bot / remove-bot) and the temporary Reset button. */
.seat-controls { display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap; }
.seatbtn {
  font: inherit; font-size: 0.72rem; padding: 0.15rem 0.45rem;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 5px; cursor: pointer;
}
.seatbtn:hover { border-color: var(--color-accent); }
#reset-all { border-color: var(--color-accent); }

/* Card-size preference control (client-side, per user). */
#size-ctl { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--color-muted); }
#card-size { width: 90px; accent-color: var(--color-accent); }

/* ---- Bid-order popup (same look as the scoreboard) ---- */
#bids-toggle {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 0.7rem 0.4rem;
  border-radius: 6px 0 0 6px; border-color: var(--color-accent); letter-spacing: 0.06em; z-index: 50;
}
#bids-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6);
}
#bids-overlay[hidden] { display: none; }
#bids-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.2rem 1.4rem; min-width: 320px; max-width: 92vw; max-height: 85vh; overflow: auto;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
}
#bids-panel h2 { margin: 0 0 0.8rem; font-family: Georgia, "Times New Roman", serif; font-weight: 600; color: var(--color-accent-text); }
#bids-close { margin-top: 1.1rem; border-color: var(--color-accent); }
.bid-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bid-table th, .bid-table td { padding: 0.3rem 0.9rem; text-align: center; border-bottom: 1px solid var(--color-border); }
.bid-table thead th { color: var(--color-muted); font-weight: 600; }
.bid-red { color: var(--suit-red); }
.bid-white { color: var(--suit-white); }
.bid-x { color: var(--color-accent-text); font-weight: 700; }
.bid-empty { color: #555; }

/* ---- Draggable suit-order chips ---- */
#suit-order { display: inline-flex; gap: 3px; }
.suit-chip {
  cursor: grab; user-select: none; padding: 0.1rem 0.4rem; border-radius: 5px;
  background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.95rem;
}
.suit-chip.dragging { opacity: 0.4; }
.suit-chip.red { color: var(--suit-red); }
.suit-chip.white { color: var(--suit-white); }
#spectate.on { border-color: var(--color-accent); color: var(--color-accent-text); }

/* ---- Auth bar + login/signup overlay ---- */
#auth-bar { font-size: 0.8rem; color: var(--color-muted); margin-left: 0.5rem; }
#auth-bar button { font: inherit; font-size: 0.75rem; padding: 0.15rem 0.5rem; margin-left: 0.4rem;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: 5px; cursor: pointer; }

#auth-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7);
}
#auth-overlay[hidden] { display: none; }
#auth-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.4rem 1.5rem; width: 320px; max-width: 92vw; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
  display: flex; flex-direction: column; gap: 0.6rem;
}
#auth-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 600; color: var(--color-accent-text); }
.auth-hint { margin: 0; font-size: 0.8rem; color: var(--color-muted); }
#auth-panel input {
  font: inherit; padding: 0.5rem 0.6rem; border-radius: 6px;
  background: #14161a; border: 1px solid var(--color-border); color: var(--color-text);
}
.auth-error { color: var(--color-accent-text); font-size: 0.82rem; min-height: 1rem; }
.auth-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.auth-actions button { flex: 1; font: inherit; padding: 0.45rem; border-radius: 6px; cursor: pointer;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
#auth-login { border-color: var(--color-accent); }

/* Mode switch link in the top bar. */
#mode-link { font-size: 0.8rem; color: var(--color-accent-text); text-decoration: none; margin-left: 0.5rem; }
#mode-link:hover { text-decoration: underline; }


/* ---- Colour scheme popup ---- */
#colors-toggle {
  position: fixed; right: 0; top: calc(50% + 95px); transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 0.7rem 0.4rem;
  border-radius: 6px 0 0 6px; border-color: var(--color-accent); letter-spacing: 0.06em; z-index: 50;
}
#colors-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6);
}
#colors-overlay[hidden] { display: none; }
#colors-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.4rem 1.5rem; width: 300px; max-width: 92vw; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
  display: flex; flex-direction: column; gap: 0.7rem;
}
#colors-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 600; color: var(--color-accent-text); }
.color-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; color: var(--color-text); }
.color-row input[type="color"] { width: 48px; height: 28px; border: 1px solid var(--color-border); border-radius: 5px; background: none; cursor: pointer; }
#colors-reset { border-color: var(--color-accent); }

/* ---- Account cluster (top-right) with avatar ---- */
#account { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
#account-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--color-border); cursor: pointer; background: var(--color-surface);
}
/* Keep the auction line from also grabbing the right edge, so the account stays rightmost. */
#auction { margin-left: 0; }

/* Small avatar beside each seated player. */
.seat-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle;
  border: 1px solid var(--color-border); margin-right: 4px; }

/* ---- Profile popup ---- */
#profile-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
#profile-overlay[hidden] { display: none; }
#profile-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.3rem 1.4rem; width: 380px; max-width: 94vw; max-height: 88vh; overflow: auto;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; gap: 0.8rem;
}
#profile-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--color-accent-text); }
.profile-h3 { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--color-muted); }
.profile-images { display: flex; gap: 1.4rem; justify-content: center; }
.profile-slot { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--color-muted); }
.pfp-circle { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); background: var(--color-bg); cursor: pointer; }
.pfp-card {
  width: 70px; height: 98px; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--color-accent); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 0.7rem; color: var(--color-muted);
  background: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 5px, var(--color-border) 5px, var(--color-border) 10px);
  background-size: cover; background-position: center;
}
#profile-stats { font-size: 0.9rem; color: var(--color-text); text-align: center; }
#profile-history { max-height: 40vh; overflow-y: auto; }
.profile-actions { display: flex; gap: 0.5rem; }
.profile-actions button { flex: 1; }
#profile-logout { border-color: var(--color-accent); }
#profile-close { border-color: var(--color-accent); }

/* Custom card back fills the whole card face-down. */
.card.back.custom-back { border-color: var(--color-border); background-repeat: no-repeat; background-size: cover; background-position: center; }

/* Match cards (rendered in the Profile popup history). */
.match { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; }
.match-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.4rem; gap: 0.5rem; }
.match-head .win { color: var(--suit-white); font-weight: 700; }
.match-date { color: var(--color-muted); font-size: 0.78rem; margin-bottom: 0.4rem; }

/* ---- Player stats popup (from clicking a seat avatar) ---- */
#player-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
#player-overlay[hidden] { display: none; }
#player-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.3rem 1.5rem; width: 280px; max-width: 92vw; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center;
}
#player-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--color-accent-text); }
#player-stats { font-size: 0.9rem; color: var(--color-text); line-height: 1.6; }
#player-close { border-color: var(--color-accent); }
.seat-av { cursor: pointer; }

/* Point-total sign colours (used in profile and player-stats popups). */
.pos { color: var(--suit-white); }
.neg { color: var(--color-accent-text); }

/* ---- Home screen (landing). Sits above the game/tabs but below the popups. ---- */
#home { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: var(--color-bg); }
#home[hidden] { display: none; }
#home-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.home-title { font-family: Georgia, "Times New Roman", serif; color: var(--color-accent-text); font-size: 3rem; margin: 0; letter-spacing: 0.08em; }
#home-auth { color: var(--color-muted); font-size: 0.9rem; min-height: 1.2rem; }
#home-auth button { font: inherit; font-size: 0.8rem; margin-left: 0.4rem; padding: 0.15rem 0.5rem; border-radius: 5px;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-accent); cursor: pointer; }
.home-buttons { display: flex; flex-direction: column; gap: 0.7rem; width: 220px; }
.home-buttons button { padding: 0.9rem; font-size: 1.05rem; border-radius: 8px;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; }
.home-buttons button:hover { border-color: var(--color-accent); }
#home-ranked { border-color: var(--color-accent); }
#home-link { font-size: 0.8rem; color: var(--color-accent-text); text-decoration: none; margin-left: 0.5rem; }
#home-link:hover { text-decoration: underline; }

/* ---- Leaderboard popup ---- */
#lb-overlay { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
#lb-overlay[hidden] { display: none; }
#lb-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.3rem 1.4rem; min-width: 320px; max-width: 92vw; max-height: 85vh; overflow: auto; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75); }
#lb-panel h2 { margin: 0 0 0.8rem; font-family: Georgia, "Times New Roman", serif; color: var(--color-accent-text); }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.lb-table th, .lb-table td { padding: 0.35rem 0.7rem; text-align: right; border-bottom: 1px solid var(--color-border); }
.lb-table th:nth-child(2), .lb-table td:nth-child(2) { text-align: left; }
.lb-table thead th { color: var(--color-muted); font-weight: 600; }
#lb-close { margin-top: 1rem; border-color: var(--color-accent); }

/* Turn timer bar (top of screen), width shrinks as time runs out; colour follows the accent. */
#turn-bar { flex: 0 0 auto; height: 4px; width: 0; background: var(--color-accent); transition: width 0.4s linear; }

.queue-count { font-size: 0.72rem; color: var(--color-muted); }

/* ---- Profile: big centred points, stat rows with proportion bars, history dropdown ---- */
#profile-points { text-align: center; margin: 0.2rem 0; }
#profile-points span { font-size: 2.6rem; font-weight: 800; line-height: 1; }
#profile-points small { display: block; color: var(--color-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.2rem; }
#profile-stats { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-row { display: flex; align-items: center; gap: 0.8rem; }
.stat-label { flex: 0 0 auto; font-size: 0.88rem; color: var(--color-text); white-space: nowrap; }
.stat-label b { color: var(--color-accent-text); font-weight: 700; }
.stat-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--color-bg); border: 1px solid var(--color-border); overflow: hidden; }
.stat-fill { display: block; height: 100%; background: var(--color-accent); }
#profile-history-wrap summary { cursor: pointer; color: var(--color-muted); font-size: 0.9rem; padding: 0.3rem 0; }
#profile-history { max-height: 40vh; overflow-y: auto; margin-top: 0.5rem; }

/* ---- Help & Patch notes popups ---- */
#help-overlay, #notes-overlay { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
#help-overlay[hidden], #notes-overlay[hidden] { display: none; }
#help-panel, #notes-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1.3rem 1.5rem; width: 460px; max-width: 94vw; max-height: 85vh; overflow: auto; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
}
#help-panel h2, #notes-panel h2 { margin: 0 0 0.6rem; font-family: Georgia, "Times New Roman", serif; color: var(--color-accent-text); }
#help-content h3 { margin: 0.9rem 0 0.2rem; font-size: 0.95rem; color: var(--color-accent-text); }
#help-content p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--color-text); }
#help-close, #notes-close { margin-top: 1rem; border-color: var(--color-accent); }
.note { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; }
.note-msg { color: var(--color-text); font-size: 0.88rem; }
.note-date { color: var(--color-muted); font-size: 0.76rem; margin-top: 0.15rem; }
.note-date a { color: var(--color-accent-text); text-decoration: none; }

/* Scoreboard game boundary: shows where a new game starts and game points reset. */
.sb-divider td { text-align: center; color: var(--color-accent-text); font-size: 0.78rem; padding: 0.4rem 0; border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-accent); }