:root {
  color-scheme: light;
  --felt-dark: #0f2b22;
  --felt: #1b3a2f;
  --felt-light: #234a3c;
  --gold: #c9a24b;
  --gold-bright: #e2c374;
  --cream: #faf6ec;
  --ink: #1a1a1a;
  --red: #a8331f;
  --muted: #9db3a8;
  --danger: #8f2d2d;
  --danger-bright: #b23a3a;
  /* Fixed per-pool colors for the split ELO chart (1v1 vs 3-4 player) —
     distinct from the gold/red/green already used for other meanings
     elsewhere, so two overlapping lines on one chart stay readable. */
  --elo-onevone: #e8b84b;
  --elo-multi: #5ac8e0;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Scrollbars everywhere styled to match the felt/gold palette instead of
   the browser default — a plain white/grey bar looks out of place against
   this dark background. This also fixes overlay-style scrollbars (macOS
   trackpad-style bars that draw on TOP of content instead of reserving
   their own space) visibly covering the last few pixels of right-aligned
   text: styling ::-webkit-scrollbar switches Chrome/Safari out of overlay
   mode into a normal space-reserving track, and scrollbar-width/
   scrollbar-color do the same for Firefox. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 75, 0.45) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 75, 0.4);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 75, 0.65);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  font-family: var(--font-ui);
  color: var(--cream);
  overflow-x: hidden;
}

.hidden { display: none !important; }

/* ---------- Lobby ---------- */

#lobby.screen {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lobby-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  /* Three equal-width columns (.lobby-card, #statsPanel, #boardPreviewPanel
     all share the same max-width via .stats-panel below) plus two gaps:
     3*380 + 2*24 = 1188 — rounded up a bit for breathing room. */
  max-width: 1200px;
}

.lobby-card {
  width: 100%;
  max-width: 380px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
}

.stats-panel {
  width: 100%;
  max-width: 380px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  font-size: 0.85rem;
}

.stats-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 14px;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
}

.stats-line {
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.6;
}
.stats-highlight { margin-right: 14px; white-space: nowrap; }
.stats-highlight strong { color: var(--cream); font-weight: 600; }

.stats-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 162, 75, 0.2);
}
.stats-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.stats-block-title {
  font-weight: 600;
  color: var(--gold-bright);
  font-size: 0.82rem;
}
.stats-block-title em { color: var(--muted); font-style: normal; font-weight: 400; }

.stats-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 2px;
}
.stats-tab {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.stats-tab.active { background: var(--gold); color: #2a2005; font-weight: 600; }

.top-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.83rem;
}
.top-rank { color: var(--muted); width: 18px; flex-shrink: 0; }
.top-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-pct { color: var(--gold-bright); font-weight: 600; }
.top-played { color: var(--muted); font-size: 0.72rem; }

.profile-stats-divider {
  margin: 14px 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-top: 1px solid rgba(201, 162, 75, 0.2);
  padding-top: 10px;
}

@media (max-width: 800px) {
  .lobby-layout { flex-direction: column; align-items: center; }
}

.wordmark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.wordmark .accent { color: var(--gold-bright); }

.tagline {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 26px;
}

.field {
  display: block;
  text-align: left;
  margin-bottom: 14px;
}

#createBtn + #playVsAiBtn {
  margin-top: 10px;
}
.field span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.field input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 8px;
  color: var(--cream);
  font-size: 1rem;
  font-family: var(--font-ui);
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
}
/* Native datetime-local calendar/clock icon renders dark by default —
   invert it so it's visible against our dark field background. */
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

.btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #2a2005;
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}
.btn-danger {
  background: linear-gradient(180deg, var(--danger-bright), var(--danger));
  color: var(--cream);
}

.divider {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  margin: 18px 0;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(201, 162, 75, 0.25);
}
.divider span { padding: 0 10px; }

/* Google/Facebook login buttons are plain <a> tags (they navigate to the
   server's /auth/... OAuth-start route, not a JS click handler), so .btn's
   button-only styling (width, centering, no underline) needs restating
   here — an <a> is inline by default and ignores width. */
.oauth-btn {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  margin-bottom: 10px;
}
.oauth-btn:last-child { margin-bottom: 0; }

.waiting { margin-top: 20px; }
.room-code {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 0.25em;
  color: var(--gold-bright);
  margin: 6px 0;
}
.muted { color: var(--muted); font-size: 0.8rem; }
.error { color: #e08a7a; font-size: 0.85rem; margin-top: 14px; }

/* ---------- Game screen ---------- */

#game.screen {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
}

.deck-pile {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 0;
  height: 0;
}
.deck-trump-card {
  position: absolute;
  top: 4cqw;
  left: 4cqw;
  width: 11cqw; /* matches .slot exactly, so it reads as the same card size as the table */
  aspect-ratio: 5 / 7; /* standard poker-card proportions (2.5in x 3.5in); the active deck art is stretched to fit via background-size — see [data-card-deck="classic"] below */
  transform: rotate(-45deg);
  z-index: 1; /* beneath the stack image */
  display: block;
  border-radius: 6px;
  overflow: hidden;
  color-scheme: light;
}
.deck-stack-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.65cqw; /* 15% larger than a played card */
  aspect-ratio: 84 / 122;
  object-fit: cover;
  border-radius: 6px;
  transform: rotate(45deg);
  z-index: 2; /* on top — the trump card peeks out from underneath */
  pointer-events: none;
  color-scheme: light;
}
.deck-count {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.65cqw;
  aspect-ratio: 84 / 122;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  z-index: 3; /* centered on top of the stack image */
  font-family: var(--font-display);
  font-weight: bold;
  font-size: 7cqw;
  color: #8fbfa8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
  pointer-events: none;
}

.role-banner-onboard {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.8cqw 3.5cqw;
  border-radius: 6px;
  background: rgba(15, 43, 34, 0.62);
  border: 1px solid rgba(201, 162, 75, 0.4);
  font-size: 1.9cqw;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-align: center;
}
.role-banner-onboard.attacker { color: var(--gold-bright); }
.role-banner-onboard.defender { color: #8fbfa8; }

.name-pill-row {
  display: flex;
  justify-content: center;
  padding: 6px 10px 2px;
}
.name-pill-row-bottom { padding: 2px 10px 6px; }
.name-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201, 162, 75, 0.3);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}

.opponent-hand-onboard {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 2;
}
.opponent-hand-onboard .card-back-mini {
  width: 7cqw;
  aspect-ratio: 84 / 122;
  border-radius: 4px;
  margin-left: -3.5cqw;
  background-image: url('/images/trump-stack.png');
  background-size: cover;
  background-position: center;
}
.opponent-hand-onboard .card-back-mini:first-child { margin-left: 0; }

.table-felt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-height: 0;
}

.table-wood {
  position: relative;
  width: min(100%, 1280px, calc((100vh - 150px) * 1.5));
  width: min(100%, 1280px, calc((100dvh - 150px) * 1.5));
  width: min(100%, 1280px, calc((var(--app-vh, 1vh) * 100 - 150px) * 1.5));
  aspect-ratio: 1536 / 1024;
  max-height: 100%;
  color-scheme: light;
  background-image: url('/images/table-wood.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  container-type: inline-size;
  container-name: tablewood;
}

.table-safezone {
  position: absolute;
  top: 16%;
  bottom: 28%;
  left: 10%;
  right: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-slots {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.3cqw;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.slot {
  position: relative;
  width: 11cqw;
  aspect-ratio: 5 / 7; /* standard poker-card proportions (2.5in x 3.5in); the active deck art is stretched to fit via background-size — see [data-card-deck="classic"] below */
  flex-shrink: 0;
  color-scheme: light;
}

.action-row {
  display: flex;
  gap: 10px;
  padding: 4px 16px 8px;
  justify-content: center;
}
.action-row .btn { width: auto; flex: 1; max-width: 220px; }

.hand-cards-onboard {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  z-index: 4; /* stays above the role banner and table cards — it's the interactive hand */
}

/* Playing card */

.card {
  width: 10.7cqw;
  aspect-ratio: 5 / 7; /* standard poker-card proportions (2.5in x 3.5in); the active deck art is stretched to fit via background-size — see [data-card-deck="classic"] below */
  background: var(--cream);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  margin-left: -4.7cqw;
  border: 1px solid rgba(0,0,0,0.15);
}
.card:first-child { margin-left: 0; }

/* Mobile hack: hand cards scale with the table (cqw) like everything else,
   which makes them too small to read comfortably on narrow phone screens.
   On touch devices under 600px wide, size the hand relative to the actual
   viewport instead so it stays legible — this only affects the player's
   own interactive hand, not the table or opponent's cards. */
@media (max-width: 600px) and (pointer: coarse) {
  .card {
    width: 19vw;
    margin-left: -8.4vw;
  }
}
.card:hover { transform: translateY(-16px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.card.disabled { cursor: not-allowed; }

.card.selected {
  outline: 3px solid var(--gold-bright);
  transform: translateY(-10px);
}
.card.selected:hover { transform: translateY(-16px); }

.card.playable {
  animation: card-ready-glow 1.8s ease-in-out infinite;
}
.card.playable:hover {
  animation-play-state: paused;
  filter: none;
}
@keyframes card-ready-glow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(226, 195, 116, 0));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(226, 195, 116, 0.75));
  }
}

.card.mini {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
  pointer-events: none; /* table cards are display-only — clicks pass through to the .slot */
  z-index: 1;
  color-scheme: light;
}
.card.mini.defend-offset {
  transform: translate(calc(-50% + 1.7cqw), calc(-50% + 1.7cqw));
  z-index: 2; /* defend card always renders above the attack card it beat */
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  border: 1px solid var(--danger-bright);
  z-index: 50;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--felt-dark);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  width: min(320px, 90vw);
  max-width: 320px;
  overflow-x: hidden;
  box-sizing: border-box;
}
.modal-card h2 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin-top: 0;
}

/* Used by modals whose content can outgrow the viewport (e.g. the profile
   modal, with a variable-length game history) — caps the card to the
   visible viewport height and keeps the close button pinned at its
   bottom, always reachable, while everything else above it scrolls
   internally instead of pushing the button (or the top of the card)
   off-screen. */
.modal-card-scrollable {
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.modal-card-scrollable .modal-scroll-body {
  overflow-y: auto;
  /* min-height: 0 overrides flex items' default min-height:auto, which
     would otherwise let this grow to fit its content and defeat the
     scrolling entirely. */
  min-height: 0;
  flex: 1 1 auto;
  /* Breathing room between the themed scrollbar track (see the global
     ::-webkit-scrollbar rules near the top of this file) and any
     right-aligned content, e.g. the <strong> stat values in
     .profile-stat-row, so the bar never visually overlaps the text. */
  padding-right: 8px;
}
.modal-card-scrollable > .btn {
  flex-shrink: 0;
  margin-top: 16px;
}

/* ---------- Registration / "who's playing" ---------- */

.playing-as {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 20px;
}
.playing-as strong { color: var(--gold-bright); }
.playing-as a {
  color: var(--gold-bright);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Share link ---------- */

.share-link-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.share-link-row input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 8px;
  color: var(--cream);
  font-size: 0.8rem;
}
.share-link-row .btn { width: auto; white-space: nowrap; padding: 8px 14px; font-size: 0.82rem; }
.muted.small { font-size: 0.72rem; margin-top: 10px; }

/* ---------- Connection banner ---------- */

.connection-banner {
  text-align: center;
  padding: 8px;
  font-size: 0.82rem;
  background: rgba(178, 58, 58, 0.25);
  border-bottom: 1px solid rgba(178, 58, 58, 0.5);
  color: #f0c9c0;
}
.connection-banner.reconnected {
  background: rgba(90, 160, 120, 0.25);
  border-bottom-color: rgba(90, 160, 120, 0.5);
  color: #c9f0d9;
}

.btn-ghost-danger {
  background: transparent;
  border: 1px solid rgba(178, 58, 58, 0.6);
  color: #e08a7a;
}
.btn-ghost-danger:hover { background: rgba(178, 58, 58, 0.15); }

/* ---------- Open rooms browser ---------- */

.open-rooms {
  margin-top: 24px;
  text-align: left;
}
.open-rooms-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}
.open-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.open-room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201, 162, 75, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
}
.open-room-item .host-name {
  font-size: 0.88rem;
  font-weight: 600;
}
.open-room-item .room-age {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 6px;
}
.open-room-item button {
  width: auto;
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* ---------- Chat ---------- */

.chat-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 280px;
  max-width: calc(100vw - 24px);
  height: 340px;
  background: rgba(10, 25, 20, 0.97);
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(201, 162, 75, 0.25);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-bright);
}
.chat-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-msg {
  font-size: 0.82rem;
  line-height: 1.35;
}
.chat-msg .who {
  font-weight: 700;
  color: var(--gold-bright);
}
.chat-msg.own .who { color: #8fbfa8; }
.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid rgba(201, 162, 75, 0.25);
}
.chat-input-row input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 8px;
  color: var(--cream);
  font-size: 0.82rem;
}
.chat-input-row .btn {
  width: auto;
  padding: 8px 14px;
  font-size: 0.82rem;
}
#chatToggleBtn { position: relative; }
.chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--danger-bright);
  color: var(--cream);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------- Custom pointer-drag ghost card ---------- */

.card.drag-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.6);
}
.card.drag-source-hidden { visibility: hidden; }

/* ---------- Clickable names / profile ---------- */

.clickable-name {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.clickable-name:hover { color: var(--gold-bright); }

.rematch-question {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 18px 0 6px;
}

.profile-stats {
  margin: 18px 0;
  text-align: left;
}
.profile-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.15);
  font-size: 0.9rem;
}
.profile-stat-row span {
  min-width: 0;
  overflow-wrap: break-word;
}
.profile-stat-row strong {
  flex-shrink: 0;
  white-space: nowrap;
}
.profile-stat-row strong { color: var(--gold-bright); }
.profile-stat-row.muted-row {
  font-size: 0.78rem;
  color: var(--muted);
}
.profile-stat-row.muted-row strong { color: var(--muted); }

.profile-history {
  margin: 18px 0;
  text-align: left;
}
.profile-elo-chart {
  margin: 18px 0;
  text-align: left;
}
.profile-elo-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
  border-top: 1px solid rgba(201, 162, 75, 0.2);
  padding-top: 10px;
}
/* Inside the header row the divider's own border/spacing would double up
   with the row's — the header itself already carries them. */
.profile-elo-chart-header .profile-elo-chart-divider {
  margin: 0;
  border-top: none;
  padding-top: 0;
}
.elo-toggle-row {
  display: flex;
  gap: 12px;
}
.elo-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.elo-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}
.elo-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 3px;
  flex-shrink: 0;
}
.elo-swatch-oneVOne { background: var(--elo-onevone); }
.elo-swatch-multi { background: var(--elo-multi); }
.profile-elo-chart-svg {
  width: 100%;
  height: 90px;
  display: block;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
.profile-elo-chart-labels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}
.profile-elo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.profile-elo-stat-label {
  overflow-wrap: break-word;
  text-align: center;
}
.profile-elo-stat-value {
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 2px;
}
.profile-elo-stat-low .profile-elo-stat-value { color: #c95c5c; }
.profile-elo-stat-high .profile-elo-stat-value { color: #4caf6d; }
.profile-elo-stat-current .profile-elo-stat-value { color: var(--gold-bright); }
.profile-elo-series-legend { margin-top: 10px; }
.profile-elo-series-legend-title {
  display: flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  margin: 0 0 3px;
}
.profile-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.profile-history-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--muted);
  font-size: 0.85rem;
  min-width: 0;
  cursor: help;
}
.profile-history-row.profile-history-won { border-left-color: #4caf6d; }
.profile-history-row.profile-history-lost { border-left-color: #c95c5c; }
.profile-history-row.profile-history-placed { border-left-color: var(--gold-bright); }
.profile-history-row.profile-history-draw { border-left-color: var(--muted); }
.profile-history-outcome {
  font-weight: 600;
  overflow-wrap: break-word;
}
.profile-history-meta {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: left;
  overflow-wrap: break-word;
}

/* ---------- Drag & drop ---------- */

.card[draggable="true"] { cursor: grab; }
.card[draggable="true"]:active { cursor: grabbing; }

.slot.drag-target {
  outline: 2px dashed var(--gold-bright);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Rematch ---------- */

.rematch-choice-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.rematch-choice-row .btn { flex: 1; }

/* ---------- vs-AI player count picker ---------- */

.vsai-count-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

/* Card deck art. Default is the higher-quality deck (cards-sprite-hq.png,
   supplied 2026-09-20) — its row order was re-arranged at import time to
   match this file's existing per-rank/per-suit background-position grid
   exactly (hearts/diamonds/clubs/spades top to bottom), so those position
   rules below work unchanged for either deck; only the image and the
   aspect-ratio (.card / .slot / .deck-trump-card above) differ per deck.
   The original deck is kept as cards-sprite-classic.png and stays
   selectable via [data-card-deck="classic"] on <html> — see
   applyCardDeckPreference() in client.js. There's no UI to switch decks
   yet (planned for a future profile setting); for now this only matters
   if that attribute gets set some other way. */
.card-face {
  background-image: url("/images/cards-sprite-hq.png");
  background-repeat: no-repeat;
  background-size: 1300% 400%;
  color-scheme: light;
  will-change: transform;
  filter: brightness(1);
  isolation: isolate;
}

.card-face-2-hearts { background-position: 0.0% 0.0%; }
.card-face-3-hearts { background-position: 8.3333% 0.0%; }
.card-face-4-hearts { background-position: 16.6667% 0.0%; }
.card-face-5-hearts { background-position: 25.0% 0.0%; }
.card-face-6-hearts { background-position: 33.3333% 0.0%; }
.card-face-7-hearts { background-position: 41.6667% 0.0%; }
.card-face-8-hearts { background-position: 50.0% 0.0%; }
.card-face-9-hearts { background-position: 58.3333% 0.0%; }
.card-face-10-hearts { background-position: 66.6667% 0.0%; }
.card-face-J-hearts { background-position: 75.0% 0.0%; }
.card-face-Q-hearts { background-position: 83.3333% 0.0%; }
.card-face-K-hearts { background-position: 91.6667% 0.0%; }
.card-face-A-hearts { background-position: 100.0% 0.0%; }
.card-face-2-diamonds { background-position: 0.0% 33.3333%; }
.card-face-3-diamonds { background-position: 8.3333% 33.3333%; }
.card-face-4-diamonds { background-position: 16.6667% 33.3333%; }
.card-face-5-diamonds { background-position: 25.0% 33.3333%; }
.card-face-6-diamonds { background-position: 33.3333% 33.3333%; }
.card-face-7-diamonds { background-position: 41.6667% 33.3333%; }
.card-face-8-diamonds { background-position: 50.0% 33.3333%; }
.card-face-9-diamonds { background-position: 58.3333% 33.3333%; }
.card-face-10-diamonds { background-position: 66.6667% 33.3333%; }
.card-face-J-diamonds { background-position: 75.0% 33.3333%; }
.card-face-Q-diamonds { background-position: 83.3333% 33.3333%; }
.card-face-K-diamonds { background-position: 91.6667% 33.3333%; }
.card-face-A-diamonds { background-position: 100.0% 33.3333%; }
.card-face-2-clubs { background-position: 0.0% 66.6667%; }
.card-face-3-clubs { background-position: 8.3333% 66.6667%; }
.card-face-4-clubs { background-position: 16.6667% 66.6667%; }
.card-face-5-clubs { background-position: 25.0% 66.6667%; }
.card-face-6-clubs { background-position: 33.3333% 66.6667%; }
.card-face-7-clubs { background-position: 41.6667% 66.6667%; }
.card-face-8-clubs { background-position: 50.0% 66.6667%; }
.card-face-9-clubs { background-position: 58.3333% 66.6667%; }
.card-face-10-clubs { background-position: 66.6667% 66.6667%; }
.card-face-J-clubs { background-position: 75.0% 66.6667%; }
.card-face-Q-clubs { background-position: 83.3333% 66.6667%; }
.card-face-K-clubs { background-position: 91.6667% 66.6667%; }
.card-face-A-clubs { background-position: 100.0% 66.6667%; }
.card-face-2-spades { background-position: 0.0% 100.0%; }
.card-face-3-spades { background-position: 8.3333% 100.0%; }
.card-face-4-spades { background-position: 16.6667% 100.0%; }
.card-face-5-spades { background-position: 25.0% 100.0%; }
.card-face-6-spades { background-position: 33.3333% 100.0%; }
.card-face-7-spades { background-position: 41.6667% 100.0%; }
.card-face-8-spades { background-position: 50.0% 100.0%; }
.card-face-9-spades { background-position: 58.3333% 100.0%; }
.card-face-10-spades { background-position: 66.6667% 100.0%; }
.card-face-J-spades { background-position: 75.0% 100.0%; }
.card-face-Q-spades { background-position: 83.3333% 100.0%; }
.card-face-K-spades { background-position: 91.6667% 100.0%; }
.card-face-A-spades { background-position: 100.0% 100.0%; }

/* Original (pre-2026-09-20) card deck, kept available for a future
   profile switcher — activated by [data-card-deck="classic"] on <html>. */
[data-card-deck="classic"] .card-face {
  background-image: url("/images/cards-sprite-classic.png");
}
[data-card-deck="classic"] .card {
  aspect-ratio: 116 / 168;
}
[data-card-deck="classic"] .slot,
[data-card-deck="classic"] .deck-trump-card {
  aspect-ratio: 84 / 122;
}