:root {
  --bg: #11151a;
  --panel: #1b2229;
  --felt: #123f42;
  --felt-2: #0d3133;
  --text: #f2eee5;
  --muted: #aeb9bd;
  --accent: #d2ad63;
  --card: #f7f1e5;
  --ink: #111;
  --red: #b72e35;
  --border: #34424a;
  --offer: #3aa663;
  --offer-soft: rgba(58,166,99,.18);
  --request: #c86b46;
  --request-soft: rgba(200,107,70,.18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(circle at top, #202a31, var(--bg) 55%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.overlay-open { overflow: hidden; }

button {
  border: 1px solid #856d40;
  background: var(--accent);
  color: #14110c;
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 42px;
}
button.secondary { background: transparent; color: var(--text); border-color: var(--border); }
button:disabled { opacity: .45; cursor: not-allowed; }

.app {
  width: min(100%, 540px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 8px 8px 18px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.topbar h1 {
  margin: 0;
  letter-spacing: .16em;
  font-family: Georgia, serif;
  color: var(--accent);
  font-size: clamp(26px, 8vw, 40px);
}
.topbar p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.top-actions { display:flex; gap:8px; align-items:center; }
.top-actions .secondary { color: var(--text); border-color: var(--border); background: transparent; }

.statusbar {
  margin: 8px 0 6px;
  padding: 6px 8px;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11px;
  line-height: 13px;
  overflow: hidden;
}
.statusbar > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusbar strong {
  display: block;
  height: 11px;
  line-height: 11px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.controls, .panel { width: 100%; margin: 6px auto; }
.controls { display: flex; justify-content: center; gap: 8px; }
.controls button { min-width: 104px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.panel h2 { margin: 0 0 6px; font-size: 15px; }
.panel p { margin: 5px 0 8px; font-size: 12px; color: var(--muted); }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.row button { flex: 1; }
.row.triple button { min-width: 0; }
.hidden { display: none !important; }

.table {
  position: relative;
  width: calc(100% + 6px);
  aspect-ratio: 0.83 / 1;
  margin: 6px -3px 8px;
  border-radius: 44% / 34%;
  border: 8px solid #654c2a;
  box-shadow: inset 0 0 0 3px #ab8547, 0 18px 45px rgba(0,0,0,.35);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.04), transparent 50%),
    radial-gradient(circle at center, var(--felt), var(--felt-2));
  overflow: hidden;
}

.center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: 1;
}
.draw, .bank {
  border-radius: 6px;
  border: 2px solid var(--back-border, #c29c5b);
  background: var(--back-bg, #17212b);
  color: var(--back-fg, var(--accent));
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-weight: 700;
}
.bank {
  width: 50px;
  height: 70px;
  position: relative;
  flex: 0 0 auto;
}
.draw {
  width: 60px;
  height: 84px;
  font-size: 27px;
}
.bank::after {
  content: attr(data-count);
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  background: #111;
  border: 1px solid var(--accent);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 11px;
}

.seat {
  position: absolute;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.seat.top { top: 2%; left: 14%; right: 14%; flex-direction: column; }
.seat.bottom { bottom: 2%; left: 10%; right: 10%; flex-direction: column; }
.seat.left { top: 25%; bottom: 25%; left: 1.5%; width: 22%; flex-direction: row; }
.seat.right { top: 25%; bottom: 25%; right: 1.5%; width: 22%; flex-direction: row-reverse; }
.name { font-weight: 800; font-size: 12px; color: var(--accent); text-shadow: 0 1px 2px #000; }

.floor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  overflow: visible;
  isolation: isolate;
}
.seat.top .floor, .seat.bottom .floor {
  width: 220px;
  min-height: 64px;
  flex-direction: row;
}
.seat.left .floor, .seat.right .floor {
  width: 40px;
  min-height: 228px;
  flex-direction: column;
}

.card {
  width: 36px;
  height: 52px;
  border-radius: 5px;
  border: 1px solid #cfc6b6;
  background: var(--card);
  color: var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:4px;
  font-family:Georgia,serif;
  font-weight:700;
  font-size:11px;
  user-select:none;
  box-shadow:0 3px 7px rgba(0,0,0,.25);
  transition: transform .14s ease, outline-color .14s ease, filter .14s ease, opacity .14s ease, box-shadow .14s ease;
}
.card.red { color:var(--red); }
.card .pip { align-self:center; font-size:18px; line-height:1; }
.card.selectable { cursor:pointer; }
.seat.top .floor .card, .seat.bottom .floor .card { margin-left: -12px; }
.seat.top .floor .card:first-child, .seat.bottom .floor .card:first-child { margin-left: 0; }
.seat.left .floor .card, .seat.right .floor .card { margin-top: -36px; }
.seat.left .floor .card:first-child, .seat.right .floor .card:first-child { margin-top: 0; }
.card:hover { filter: brightness(1.03); }
.card.selected {
  outline: 3px solid var(--accent);
}
/* 3.0.1: keep selected trade cards inside their normal stacking footprint so
   compact touch layouts retain reliable tap targets on neighboring cards. */
.seat.top .floor .card.selected, .seat.bottom .floor .card.selected { transform: translateY(-6px); }
.seat.left .floor .card.selected { transform: translateX(6px); }
.seat.right .floor .card.selected { transform: translateX(-6px); }
.card.trade-offer-card {
  outline: 2px solid var(--offer);
  box-shadow: 0 0 0 2px rgba(58,166,99,.15), 0 0 18px rgba(58,166,99,.30), 0 3px 7px rgba(0,0,0,.25);
  z-index: 500 !important;
}
.card.trade-request-card {
  outline: 2px solid var(--request);
  box-shadow: 0 0 0 2px rgba(200,107,70,.14), 0 0 18px rgba(200,107,70,.28), 0 3px 7px rgba(0,0,0,.25);
  z-index: 500 !important;
}
.card.trade-dim {
  opacity: .38;
  filter: saturate(.72) brightness(.95);
}
.card.mini-card {
  width: 32px;
  height: 46px;
  padding: 3px;
  font-size: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.card.mini-card .pip { font-size: 14px; }

#pendingCard { display:flex; justify-content:center; margin:6px 0 10px; }
#pendingCard .card { width:54px; height:78px; font-size:14px; }
#pendingCard .pip { font-size:24px; }
.trade-meta {
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 12px;
}
.trade-meta strong { color: var(--text); }
.trade-visual-grid {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}
.trade-bucket {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,.025);
}
.trade-bucket.trade-bucket-in {
  background: linear-gradient(180deg, rgba(58,166,99,.08), rgba(58,166,99,.03));
  border-color: rgba(58,166,99,.22);
}
.trade-bucket.trade-bucket-out {
  background: linear-gradient(180deg, rgba(200,107,70,.08), rgba(200,107,70,.03));
  border-color: rgba(200,107,70,.22);
}
.trade-bucket-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 800;
}
.card-strip {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.card-strip-empty {
  color: #7f8b91;
  font-size: 11px;
}

.results-table { width:100%; border-collapse:collapse; font-size:11px; }
.results-table th,.results-table td { padding:5px; border-bottom:1px solid var(--border); text-align:left; }
.winner { color:var(--accent); font-weight:800; }

.active-turn .bank, .active-turn .name {
  filter: drop-shadow(0 0 10px rgba(210,173,99,.35));
}
.active-turn .bank {
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.deal-ghost {
  position: fixed;
  width: 36px;
  height: 52px;
  border-radius: 5px;
  border: 2px solid #c29c5b;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent), #17212b;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  z-index: 50;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
}

.trade-toast {
  position: fixed;
  left: var(--toast-mid-x, 50vw);
  top: var(--toast-mid-y, 50vh);
  transform: translate(-50%, -50%);
  z-index: 90;
  min-width: 150px;
  max-width: 76vw;
  padding: 12px 18px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(20, 24, 28, .92);
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .04em;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  --toast-start-x: 0px;
  --toast-start-y: 0px;
  --toast-end-x: 0px;
  --toast-end-y: 0px;
}
.trade-toast.show {
  animation: tradeToastTravel 1.25s ease-in-out forwards;
}
.trade-toast.countered.show {
  animation-name: tradeToastStill;
}
.trade-toast.accepted {
  color: #d8ffe3;
  border-color: rgba(62, 176, 90, .8);
  background: rgba(24, 64, 33, .95);
}
.trade-toast.countered {
  color: #fff1c8;
  border-color: rgba(214, 176, 61, .82);
  background: rgba(78, 62, 18, .95);
}
.trade-toast.rejected {
  color: #ffd7d7;
  border-color: rgba(194, 63, 63, .82);
  background: rgba(77, 24, 24, .95);
}
@keyframes tradeToastTravel {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(var(--toast-start-x), var(--toast-start-y)) scale(.94); }
  12%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--toast-start-x), var(--toast-start-y)) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--toast-end-x), var(--toast-end-y)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--toast-end-x), calc(var(--toast-end-y) - 5px)) scale(.98); }
}
@keyframes tradeToastStill {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(.98); }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.72);
  display: grid;
  place-items: center;
  padding: 18px;
}
.overlay-card {
  width: min(92vw, 420px);
  max-height: 78vh;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
.overlay-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 12px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.overlay-head h2 { margin:0; font-size:16px; }
#log {
  max-height: calc(78vh - 58px);
  overflow:auto;
  padding: 8px 12px 12px;
  font-size:12px;
  color:var(--muted);
}
.log-entry { padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05); }

@media (max-width: 420px) {
  .controls { gap: 6px; }
  .controls button { min-width: 96px; }
  .panel { padding: 9px; }
  .trade-toast {
    font-size: 21px;
    min-width: 136px;
    padding: 10px 16px;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .app { width: min(100%, 460px); padding-top: 4px; padding-bottom: 12px; }
  .topbar h1 { font-size: 28px; }
  .topbar p { display:none; }
  .statusbar { margin:6px 0; padding:6px 8px; height:42px; }
  .table { width: min(100%, 56vh); margin-top: 4px; }
}

@media (max-width: 370px) {
  .app { padding-left:8px; padding-right:8px; }
  .card { width:34px; height:49px; font-size:10px; }
  .bank { width:46px; height:64px; }
  .draw { width:56px; height:78px; }
  .seat.top .floor, .seat.bottom .floor { width: 200px; }
  .seat.left .floor, .seat.right .floor { min-height: 210px; }
}


/* Keep incoming-trade decisions visible before the offer details. */
.incoming-trade-panel .incoming-trade-actions {
  margin: 4px 0 10px;
}
.incoming-trade-panel .incoming-trade-actions button {
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}
.incoming-trade-panel .trade-meta {
  margin-top: 2px;
}


/* Keep the outgoing trade commit button visible above the card details. */
.trade-primary-action {
  width: 100%;
  margin: 2px 0 8px;
}


/* Left/Right bank labels under banks */
.bank-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
}
.seat.left, .seat.right {
  align-items: center;
}
.seat.left .name, .seat.right .name {
  width: auto;
  text-align: center;
  max-width: 60px;
}


/* === Player-count setup + trade layout pass === */
.compact-trade-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch;
}
.compact-trade-grid .trade-bucket { min-width: 0; }
.compact-trade-grid .card-strip {
  align-content: flex-start;
  min-width: 0;
}
.trade-response-row { margin-bottom: 9px; }

.setup-overlay { z-index: 130; }
.setup-card {
  width: min(88vw, 350px);
  padding: 18px;
  gap: 14px;
}
.setup-copy { text-align: center; }
.setup-copy h2 { margin: 0 0 4px; font-size: 22px; color: var(--accent); }
.setup-copy p { margin: 0; color: var(--muted); }
.player-count-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.player-count-btn { font-size: 20px; min-height: 52px; }
.player-count-btn.selected-count {
  background: var(--accent);
  color: #14110c;
  border-color: #856d40;
}

.seat.inactive-seat { display: none !important; }
.seat.trade-blocked {
  opacity: .32;
  filter: grayscale(.35);
}
.seat.trade-blocked .card { pointer-events: none !important; }
.seat.trade-blocked .name::after {
  content: ' · passed';
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
}

/* Keep side labels safely centered under their banks. */
.bank-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
}
.seat.left .name, .seat.right .name {
  width: 58px;
  max-width: 58px;
  text-align: center;
  white-space: nowrap;
}

/* Two-player table can open up a little because side seats are gone. */
.table.players-2 .seat.top { top: 4%; }
.table.players-2 .seat.bottom { bottom: 4%; }
.table.players-3 .seat.top { top: 3%; }

@media (max-width: 370px) {
  .compact-trade-grid { gap: 6px; }
  .compact-trade-grid .trade-bucket { padding: 6px; }
}

/* === Persistent stats === */
.top-actions { flex-wrap: nowrap; }
.top-actions button { padding-left: 10px; padding-right: 10px; }
.stats-overlay-card { width: min(94vw, 460px); max-height: 86vh; }
.stats-content { overflow-y: auto; padding: 10px 12px 18px; }
.stats-hero { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.stats-hero > div { background:rgba(210,173,99,.08); border:1px solid rgba(210,173,99,.22); border-radius:11px; padding:9px 6px; text-align:center; }
.stats-hero strong { display:block; color:var(--accent); font-size:22px; line-height:1.1; }
.stats-kicker { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.stats-section { padding:11px 0; border-top:1px solid rgba(255,255,255,.07); }
.stats-section:first-of-type { border-top:0; padding-top:2px; }
.stats-section h3 { margin:0 0 8px; color:var(--accent); font-size:14px; }
.stats-section h4 { margin:11px 0 7px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.stats-grid { display:grid; gap:6px; }
.stats-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stats-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat-row, .stat-card { border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); border-radius:9px; padding:7px 8px; }
.stat-row { display:flex; flex-direction:column; gap:2px; }
.stat-row span, .stat-card span { color:var(--muted); font-size:10px; }
.stat-row b { font-size:13px; }
.stat-row small { color:var(--muted); font-weight:500; }
.stat-card { text-align:center; }
.stat-card b { display:block; font-size:17px; color:var(--text); }
.stat-card small { color:var(--muted); font-size:10px; }
.best-game { margin-top:7px; border:1px solid rgba(210,173,99,.18); background:rgba(210,173,99,.05); border-radius:9px; padding:8px; }
.best-game span { display:block; color:var(--muted); font-size:10px; margin-bottom:3px; }
.best-game b { font-size:12px; line-height:1.35; }
.stats-table-wrap { overflow-x:auto; }
.stats-table { width:100%; border-collapse:collapse; font-size:11px; }
.stats-table th,.stats-table td { padding:6px 5px; border-bottom:1px solid rgba(255,255,255,.06); text-align:right; white-space:nowrap; }
.stats-table th:first-child,.stats-table td:first-child { text-align:left; }
.stats-table th { color:var(--muted); font-size:9px; text-transform:uppercase; }
.stat-line { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 1px; border-bottom:1px solid rgba(255,255,255,.05); font-size:12px; }
.stat-line span { color:var(--muted); }
.stat-tag { color:var(--accent); font-weight:700; font-size:.92em; }
.trade-records { margin-top:9px; display:grid; gap:6px; }
.trade-records > div { display:flex; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.05); padding-top:7px; font-size:11px; }
.trade-records span { color:var(--muted); }
.trade-records b { text-align:right; }
@media (max-width:380px) {
  .top-actions { gap:5px; }
  .top-actions button { padding-left:8px; padding-right:8px; font-size:12px; }
  .stats-grid.two { grid-template-columns:1fr 1fr; }
}

/* === Difficulty setup === */
.difficulty-copy { margin-top: 4px; }
.difficulty-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.difficulty-btn { min-height: 46px; font-size: 14px; }
.difficulty-btn.selected-count {
  background: var(--accent);
  color: #14110c;
  border-color: #d9bd84;
  box-shadow: 0 0 0 2px rgba(210,173,99,.16);
}
.difficulty-note {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}


/* Setup selectors behave like radio buttons: only .selected-count is gold. */
.player-count-btn:not(.selected-count),
.difficulty-btn:not(.selected-count) {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.player-count-btn.selected-count,
.difficulty-btn.selected-count {
  background: var(--accent) !important;
  color: #14110c !important;
  border-color: #856d40 !important;
}

/* Pregame table: keep the deck, but hide all player seats until Start Game. */
.table.pregame-empty .seat {
  visibility: hidden;
  pointer-events: none;
}

/* === Opening Ace deal + endgame reveal === */

.ace-deal-card {
  position: fixed;
  width: 50px;
  height: 70px;
  z-index: 180;
  perspective: 700px;
  opacity: 0;
  pointer-events: none;
  transition: transform .48s cubic-bezier(.22,.78,.3,1), opacity .22s ease;
}
.ace-deal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .42s ease;
}
.ace-deal-card.revealed .ace-deal-inner { transform: rotateY(180deg); }
.ace-deal-card.settle-away { opacity: 0; transform: scale(.98); }
.ace-deal-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 7px;
  border: 2px solid #c29c5b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 9px 22px rgba(0,0,0,.38);
  font-family: Georgia, serif;
  font-weight: 800;
}
.ace-deal-back {
  background: linear-gradient(135deg,rgba(255,255,255,.08),transparent),#17212b;
  color: var(--accent);
  font-size: 24px;
}
.ace-deal-front {
  transform: rotateY(180deg);
  background: var(--card);
  color: var(--ink);
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.ace-deal-front.red { color: var(--red); }
.ace-deal-front strong { font-size: 28px; line-height: 1; }

.end-reveal-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: inherit;
  background: rgba(5,17,18,.76);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.end-reveal-layer.show { opacity: 1; }
.end-reveal-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 31;
}
.end-reveal-name {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px #000;
}
.end-reveal-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.end-top { top: 3%; left: 18%; right: 18%; }
.end-bottom { bottom: 3%; left: 15%; right: 15%; flex-direction: column-reverse; }
.end-left { left: 2%; top: 25%; bottom: 25%; }
.end-right { right: 2%; top: 25%; bottom: 25%; }
.end-left .end-reveal-cards,
.end-right .end-reveal-cards {
  flex-direction: column;
}
.end-card {
  width: 40px;
  height: 58px;
  min-width: 40px;
  opacity: 0;
  transform: translateY(5px) scale(.96);
  animation: endCardAppear .28s ease forwards;
  box-shadow: 0 3px 8px rgba(0,0,0,.32);
}
.end-card .pip { font-size: 18px; }
.end-top .end-card + .end-card,
.end-bottom .end-card + .end-card { margin-left: -20px; }
.end-left .end-card + .end-card,
.end-right .end-card + .end-card { margin-top: -38px; }
.end-ace {
  outline: 2px solid var(--accent);
  z-index: 1;
  animation-name: endAceFlip;
  animation-duration: .48s;
  transform-origin: center;
}
@keyframes endAceFlip {
  0% { opacity: 0; transform: rotateY(90deg) scale(.95); }
  60% { opacity: 1; transform: rotateY(-8deg) scale(1.04); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}
@keyframes endCardAppear {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.table.players-2 .end-top { top: 9%; }
.table.players-2 .end-bottom { bottom: 9%; }
.table.players-3 .end-top { top: 4%; }
.table.players-3 .end-right { right: 3%; }

@media (max-width: 370px) {
  .end-card { width: 36px; height: 52px; min-width: 36px; font-size: 10px; }
  .end-top .end-card + .end-card,
  .end-bottom .end-card + .end-card { margin-left: -18px; }
  .end-left .end-card + .end-card,
  .end-right .end-card + .end-card { margin-top: -34px; }
}


.results-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.results-head-row h2 { margin: 0; }
.reveal-sort-toggle {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.reveal-sort-btn {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 10px;
}
.reveal-sort-btn.selected-count {
  background: var(--accent);
  color: #14110c;
  border-color: #856d40;
}
.reveal-sort-btn.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.end-reveal-cards.reorder .end-card {
  animation: none !important;
  opacity: 1;
  transform: none;
  transition: margin .18s ease, transform .18s ease;
}
@media (max-width: 370px) {
  .results-head-row { align-items: flex-start; }
  .reveal-sort-btn { padding: 5px 7px; font-size: 9px; }
}


/* Endgame reveal owns the table visually; hide the live board underneath. */
.table.end-reveal-active > .seat,
.table.end-reveal-active > .center {
  opacity: 0;
  pointer-events: none;
}
.table.end-reveal-active .end-reveal-layer {
  background: rgba(5,17,18,.88);
}

/* Reveal fans only need one readable corner; removing the mirrored corner/pip
   prevents tight overlap from looking like duplicated ranks and suits. */
.end-reveal-cards .end-card > .pip,
.end-reveal-cards .end-card > div:last-child {
  visibility: hidden;
}
.end-reveal-cards .end-card > div:first-child {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}


/* Final reveal layout pass: let cards float above/outside the table rim and
   reserve non-overlapping lanes for each player. */
.table.end-reveal-active {
  overflow: visible;
  z-index: 5;
}
.table.end-reveal-active .end-reveal-layer {
  overflow: visible;
}
.end-reveal-zone {
  overflow: visible;
}
.end-top {
  top: 1.5%;
  left: 12%;
  right: 12%;
}
.end-bottom {
  bottom: 1.5%;
  left: 12%;
  right: 12%;
}
.end-left {
  left: -3%;
  top: 28%;
  bottom: 28%;
}
.end-right {
  right: -3%;
  top: 28%;
  bottom: 28%;
}
.end-top .end-reveal-cards,
.end-bottom .end-reveal-cards {
  width: 100%;
  max-width: 100%;
}
.end-left .end-reveal-cards,
.end-right .end-reveal-cards {
  height: 100%;
  max-height: 100%;
}
/* JS supplies per-fan spacing so large hands stay inside their own lane. */
.end-top .end-card + .end-card,
.end-bottom .end-card + .end-card {
  margin-left: var(--reveal-overlap-x, -20px);
}
.end-left .end-card + .end-card,
.end-right .end-card + .end-card {
  margin-top: var(--reveal-overlap-y, -38px);
}
/* Keep the Ace as the back/base card while later cards fan over it. */
.end-ace { z-index: 1 !important; }
/* Endgame cards retain the large center suit pip, while the mirrored bottom
   corner stays hidden to keep tight fans readable. */
.end-reveal-cards .end-card > .pip {
  visibility: visible !important;
  align-self: center;
  font-size: 19px;
  line-height: 1;
  margin: auto 0;
}
.end-reveal-cards .end-card > div:last-child {
  visibility: hidden;
}
.end-reveal-cards .end-card > div:first-child {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
@media (max-width: 370px) {
  .end-top, .end-bottom { left: 12%; right: 12%; }
  .end-left { left: -1%; }
  .end-right { right: -1%; }
}


/* === Custom Quarta card backs === */
.q-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  font-family: Georgia, serif;
  font-weight: 900;
  line-height: 1;
  font-size: 1em;
  color: currentColor;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.q-mark .q-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.q-mark .q-base { transform: rotate(0deg); }
.q-mark .q-flip { transform: rotate(180deg); }
.bank .q-mark { font-size: 31px; }
.draw .q-mark { font-size: 29px; }

.cardback-default,
.draw,
.bank {
  --back-bg: linear-gradient(90deg,rgba(194,156,91,.055) 0 3%,transparent 3% 97%,rgba(194,156,91,.055) 97%),
             linear-gradient(0deg,rgba(194,156,91,.045) 0 3%,transparent 3% 97%,rgba(194,156,91,.045) 97%),
             linear-gradient(135deg, rgba(255,255,255,.035) 0 6%, rgba(0,0,0,0) 6% 100%),
             repeating-linear-gradient(45deg, rgba(210,173,99,.085) 0 2px, transparent 2px 8px),
             #17212b;
  --back-fg: var(--accent);
  --back-border: #c29c5b;
}
.cardback-silver { --back-bg: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, rgba(0,0,0,.02) 4px 8px), linear-gradient(135deg,#f1f2ef,#a7adb0 58%,#e5e7e5); --back-fg:#4e5559; --back-border:#d6d8d6; }
.cardback-gold { --back-bg: radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 24%), repeating-linear-gradient(45deg, rgba(255,243,186,.12) 0 3px, transparent 3px 9px), radial-gradient(circle at 35% 25%,#fff2a8,#c89527 46%,#6b4612); --back-fg:#fff3ba; --back-border:#f3cf68; }
.cardback-inferno,
.cardback-velvet { --back-bg: radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 22%), repeating-linear-gradient(135deg, rgba(239,52,52,.08) 0 6px, rgba(0,0,0,0) 6px 12px), radial-gradient(circle at 30% 20%,#411010,#090909 58%,#1a0505); --back-fg:#ef3434; --back-border:#9f2020; }
.cardback-spectrum,
.cardback-rainbow { --back-bg: radial-gradient(circle at center, rgba(255,255,255,.14), transparent 44%), conic-gradient(from 45deg,#d63b36,#e8cb3d,#3fa85a,#3c71c9,#d63b36); --back-fg:#fff; --back-border:#e7e7e7; }
.cardback-bronze { --back-bg: radial-gradient(circle at 20% 25%, rgba(255,255,255,.12), transparent 18%), repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 5px, transparent 5px 11px), linear-gradient(135deg,#7e5b35,#4a3019 58%,#8e6940); --back-fg:#efd4ae; --back-border:#a57845; }
.cardback-cardboard { --back-bg: repeating-linear-gradient(0deg, rgba(90,63,35,.08) 0 3px, rgba(255,255,255,.06) 3px 7px), linear-gradient(135deg,#cab08a,#9b7a4d 58%,#d3bc98); --back-fg:#5a3f23; --back-border:#8a6840; }
.cardback-amethyst { --back-bg: radial-gradient(circle at 25% 25%, rgba(255,255,255,.2), transparent 18%), linear-gradient(135deg,#ff87d4,#b86cff 58%,#7d4dff); --back-fg:#fff0ff; --back-border:#ffd2f3; }
.cardback-jade { --back-bg: radial-gradient(circle at 70% 22%, rgba(255,255,255,.18), transparent 20%), repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, transparent 6px 13px), linear-gradient(135deg,#9de8f6,#71d6b6 55%,#3ca98f); --back-fg:#eefcff; --back-border:#d1fff1; }
.cardback-darkmatter { --back-bg: radial-gradient(circle at 70% 28%, rgba(45,82,156,.16), transparent 20%), repeating-linear-gradient(45deg, rgba(45,82,156,.08) 0 2px, transparent 2px 7px), #e8ded4; --back-fg:#2d529c; --back-border:#3d63a4; }
.cardback-crystal { --back-bg: linear-gradient(125deg,rgba(255,255,255,.85) 0 12%,transparent 12% 28%,rgba(151,220,255,.30) 28% 42%,transparent 42% 63%,rgba(255,255,255,.55) 63% 72%,transparent 72%), linear-gradient(35deg,#eefcff,#bcecff 48%,#f9ffff 70%,#9fdcff); --back-fg:#4388ad; --back-border:#d9f6ff; }
.cardback-obsidian { --back-bg: radial-gradient(ellipse at 68% 20%,rgba(55,91,168,.34),transparent 26%), linear-gradient(115deg,rgba(75,43,132,.16),transparent 38%), repeating-linear-gradient(135deg,rgba(42,71,125,.08) 0 2px,transparent 2px 10px), #070910; --back-fg:#586da7; --back-border:#202d54; }
.cardback-frostbite { --back-bg: radial-gradient(circle at 24% 20%, rgba(255,255,255,.95), transparent 18%), radial-gradient(circle at 74% 28%, rgba(255,255,255,.55), transparent 16%), linear-gradient(135deg, rgba(255,255,255,.42) 0 12%, rgba(255,255,255,0) 12% 32%, rgba(196,235,255,.48) 32% 52%, rgba(255,255,255,0) 52% 72%, rgba(255,255,255,.28) 72% 100%), repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, rgba(255,255,255,0) 2px 9px), linear-gradient(140deg,#ebfbff 0%,#cfefff 42%,#9dd7fb 70%,#e9fbff 100%); --back-fg:#ffffff; --back-border:#ffffff; }
.cardback-ivory { --back-bg: radial-gradient(circle at 28% 20%,rgba(255,255,255,.42),transparent 22%), repeating-linear-gradient(25deg,rgba(126,101,55,.035) 0 2px,transparent 2px 11px), linear-gradient(135deg,#fff9df,#e9d9aa 56%,#f8efcf); --back-fg:#8b7240; --back-border:#d2b978; }
.cardback-felt { --back-bg: radial-gradient(circle at center,rgba(255,255,255,.05),transparent 46%), repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 7px), #145f3c; --back-fg:#f3f1e8; --back-border:#181b18; }
.cardback-felt .q-mark { text-shadow:2px 0 #b32931,-2px 0 #111,0 1px 2px rgba(0,0,0,.55); }
.cardback-platinum { --back-bg: radial-gradient(circle at 25% 20%,rgba(255,255,255,.70),transparent 18%), linear-gradient(115deg,rgba(255,115,160,.24),rgba(255,235,120,.20) 25%,rgba(110,235,210,.24) 50%,rgba(120,160,255,.24) 75%,rgba(220,125,255,.22)), linear-gradient(135deg,#f4f6f7,#aeb8c0 52%,#eef2f3); --back-fg:#ffffff; --back-border:#e9f3f6; }
.cardback-leather { --back-bg: radial-gradient(circle at 25% 24%,rgba(255,210,101,.30),transparent 22%), radial-gradient(circle at 75% 72%,rgba(116,42,18,.24),transparent 24%), repeating-linear-gradient(135deg,rgba(104,52,15,.08) 0 4px,transparent 4px 12px), linear-gradient(135deg,#d97822,#9b3f16 56%,#e4a33c); --back-fg:#ffe1a0; --back-border:#713115; }

/* Every face-down table back uses the same card-back system.
   Bots and the draw pile use textured Classic; the human Bank may override it. */
.draw,
.bank,
.cardback-default {
  background: var(--back-bg, #17212b);
  color: var(--back-fg, var(--accent));
  border-color: var(--back-border, #c29c5b);
}
.bank.cardback-silver,.bank.cardback-gold,.bank.cardback-inferno,.bank.cardback-spectrum,.bank.cardback-crystal,.bank.cardback-velvet,.bank.cardback-rainbow,.bank.cardback-bronze,.bank.cardback-cardboard,.bank.cardback-amethyst,.bank.cardback-jade,.bank.cardback-obsidian,.bank.cardback-frostbite,.bank.cardback-ivory,.bank.cardback-felt,.bank.cardback-platinum,.bank.cardback-leather,.bank.cardback-darkmatter,.bank.cardback-abundance {
  background: var(--back-bg) !important;
  color: var(--back-fg) !important;
  border-color: var(--back-border) !important;
}

.ace-deal-card .ace-deal-back,
.draw-deal-card .draw-deal-back {
  background: var(--back-bg, #17212b);
  color: var(--back-fg, var(--accent));
  border-color: var(--back-border, #c29c5b);
}
.ace-deal-back .q-mark { font-size: 31px; }

/* More substantial normal draw animation. */
.draw-deal-card {
  position: fixed;
  width: 44px;
  height: 62px;
  z-index: 175;
  opacity: 0;
  pointer-events: none;
  perspective: 700px;
  transition: transform .62s cubic-bezier(.18,.82,.28,1), opacity .22s ease;
}
.draw-deal-inner,.draw-deal-back { width:100%;height:100%; }
.draw-deal-back {
  border: 2px solid var(--back-border, #c29c5b);
  border-radius: 6px;
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.38);
}
.draw-deal-back .q-mark { font-size: 26px; }
.draw-deal-card.deal-arrived { filter: brightness(1.12); }
.draw-deal-card.settle-away { opacity:0; }

/* Final-score tiebreaker callout. */
.result-decider {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.results-table .deciding-column {
  background: rgba(210,173,99,.16);
  color: #f7d78f;
  font-weight: 900;
}

/* Player card-back unlock selector. */
.stats-note { margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.cardback-grid {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:8px;
}
.cardback-choice {
  min-height: 124px;
  padding:8px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  border:1px solid var(--border);
  display:grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows:auto auto;
  gap:2px 8px;
  align-items:center;
  text-align:left;
}
.cardback-choice.selected-cardback { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.cardback-choice.locked { opacity:.48; }
.cardback-choice b { align-self:end; font-size:11px; }
.cardback-choice small { align-self:start; color:var(--muted); font-size:9px; line-height:1.25; }
.cardback-choice .cardback-preview{cursor:zoom-in;}
.cardback-preview {
  grid-row:1 / span 2;
  width:42px;height:60px;border-radius:5px;
  display:grid;place-items:center;
  background:var(--back-bg,#17212b);
  color:var(--back-fg,var(--accent));
  border:2px solid var(--back-border,#c29c5b);
  box-shadow:0 3px 8px rgba(0,0,0,.28);
}
.cardback-preview .q-mark { font-size:24px; }
.cardback-preview.cardback-default { --back-bg:linear-gradient(90deg,rgba(194,156,91,.055) 0 3%,transparent 3% 97%,rgba(194,156,91,.055) 97%),linear-gradient(0deg,rgba(194,156,91,.045) 0 3%,transparent 3% 97%,rgba(194,156,91,.045) 97%),linear-gradient(135deg,rgba(255,255,255,.035) 0 6%,rgba(0,0,0,0) 6% 100%),repeating-linear-gradient(45deg,rgba(210,173,99,.085) 0 2px,transparent 2px 8px),#17212b;--back-fg:var(--accent);--back-border:#c29c5b; }
.cardback-preview.cardback-silver { --back-bg:repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, rgba(0,0,0,.02) 4px 8px), linear-gradient(135deg,#f1f2ef,#a7adb0 58%,#e5e7e5);--back-fg:#4e5559;--back-border:#d6d8d6; }
.cardback-preview.cardback-gold { --back-bg:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 24%), repeating-linear-gradient(45deg, rgba(255,243,186,.12) 0 3px, transparent 3px 9px), radial-gradient(circle at 35% 25%,#fff2a8,#c89527 46%,#6b4612);--back-fg:#fff3ba;--back-border:#f3cf68; }
.cardback-preview.cardback-inferno,
.cardback-preview.cardback-velvet { --back-bg:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 22%), repeating-linear-gradient(135deg, rgba(239,52,52,.08) 0 6px, rgba(0,0,0,0) 6px 12px), radial-gradient(circle at 30% 20%,#411010,#090909 58%,#1a0505);--back-fg:#ef3434;--back-border:#9f2020; }
.cardback-preview.cardback-spectrum,
.cardback-preview.cardback-rainbow { --back-bg:radial-gradient(circle at center, rgba(255,255,255,.14), transparent 44%), conic-gradient(from 45deg,#d63b36,#e8cb3d,#3fa85a,#3c71c9,#d63b36);--back-fg:#fff;--back-border:#e7e7e7; }
.cardback-preview.cardback-bronze { --back-bg:radial-gradient(circle at 20% 25%, rgba(255,255,255,.12), transparent 18%), repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 5px, transparent 5px 11px), linear-gradient(135deg,#7e5b35,#4a3019 58%,#8e6940);--back-fg:#efd4ae;--back-border:#a57845; }
.cardback-preview.cardback-cardboard { --back-bg:repeating-linear-gradient(0deg, rgba(90,63,35,.08) 0 3px, rgba(255,255,255,.06) 3px 7px), linear-gradient(135deg,#cab08a,#9b7a4d 58%,#d3bc98);--back-fg:#5a3f23;--back-border:#8a6840; }
.cardback-preview.cardback-amethyst { --back-bg:radial-gradient(circle at 25% 25%, rgba(255,255,255,.2), transparent 18%), linear-gradient(135deg,#ff87d4,#b86cff 58%,#7d4dff);--back-fg:#fff0ff;--back-border:#ffd2f3; }
.cardback-preview.cardback-jade { --back-bg:radial-gradient(circle at 70% 22%, rgba(255,255,255,.18), transparent 20%), repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, transparent 6px 13px), linear-gradient(135deg,#9de8f6,#71d6b6 55%,#3ca98f);--back-fg:#eefcff;--back-border:#d1fff1; }
.cardback-preview.cardback-darkmatter { --back-bg:radial-gradient(circle at 70% 28%, rgba(45,82,156,.16), transparent 20%), repeating-linear-gradient(45deg, rgba(45,82,156,.08) 0 2px, transparent 2px 7px), #e8ded4;--back-fg:#2d529c;--back-border:#3d63a4; }
.cardback-preview.cardback-crystal { --back-bg:linear-gradient(125deg,rgba(255,255,255,.85) 0 12%,transparent 12% 28%,rgba(151,220,255,.30) 28% 42%,transparent 42% 63%,rgba(255,255,255,.55) 63% 72%,transparent 72%),linear-gradient(35deg,#eefcff,#bcecff 48%,#f9ffff 70%,#9fdcff);--back-fg:#4388ad;--back-border:#d9f6ff; }
.cardback-preview.cardback-obsidian { --back-bg:radial-gradient(ellipse at 68% 20%,rgba(55,91,168,.34),transparent 26%),linear-gradient(115deg,rgba(75,43,132,.16),transparent 38%),#070910;--back-fg:#586da7;--back-border:#202d54; }
.cardback-preview.cardback-frostbite { --back-bg:radial-gradient(circle at 24% 20%,rgba(255,255,255,.95),transparent 18%),radial-gradient(circle at 74% 28%,rgba(255,255,255,.55),transparent 16%),linear-gradient(135deg,rgba(255,255,255,.42) 0 12%,rgba(255,255,255,0) 12% 32%,rgba(196,235,255,.48) 32% 52%,rgba(255,255,255,0) 52% 72%,rgba(255,255,255,.28) 72% 100%),repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 2px,rgba(255,255,255,0) 2px 9px),linear-gradient(140deg,#ebfbff 0%,#cfefff 42%,#9dd7fb 70%,#e9fbff 100%);--back-fg:#fff;--back-border:#fff; }
.cardback-preview.cardback-ivory { --back-bg:radial-gradient(circle at 28% 20%,rgba(255,255,255,.42),transparent 22%),linear-gradient(135deg,#fff9df,#e9d9aa 56%,#f8efcf);--back-fg:#8b7240;--back-border:#d2b978; }
.cardback-preview.cardback-felt { --back-bg:repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 7px),#145f3c;--back-fg:#f3f1e8;--back-border:#181b18; }
.cardback-preview.cardback-platinum { --back-bg:linear-gradient(115deg,rgba(255,115,160,.24),rgba(255,235,120,.20) 25%,rgba(110,235,210,.24) 50%,rgba(120,160,255,.24) 75%,rgba(220,125,255,.22)),linear-gradient(135deg,#f4f6f7,#aeb8c0 52%,#eef2f3);--back-fg:#fff;--back-border:#e9f3f6; }
.cardback-preview.cardback-leather { --back-bg:radial-gradient(circle at 25% 24%,rgba(255,210,101,.30),transparent 22%),radial-gradient(circle at 75% 72%,rgba(116,42,18,.24),transparent 24%),linear-gradient(135deg,#d97822,#9b3f16 56%,#e4a33c);--back-fg:#ffe1a0;--back-border:#713115; }


.rules-card { width:min(92vw, 540px); max-height:82vh; overflow:auto; }
.overlay-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.small { padding:8px 10px; font-size:11px; }
.rules-tabs { margin-bottom:12px; }
.rules-page h3 { margin: 0 0 6px; color: var(--accent); }
.rules-page p, .rules-page li { color: var(--text); font-size: 12px; line-height: 1.4; }
.rules-page ul, .rules-page ol { padding-left: 18px; margin: 8px 0 14px; }
.personality-list { display:grid; gap:8px; }
.personality-list div { display:grid; gap:2px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.03); }
.personality-list span { color: var(--muted); font-size:11px; line-height:1.35; }
.unlock-card { width:min(86vw, 280px); text-align:center; display:grid; gap:10px; justify-items:center; }
.unlock-preview {
  width:96px; height:136px; border-radius:12px; border:3px solid var(--back-border,#c29c5b);
  background:var(--back-bg,#17212b); color:var(--back-fg,var(--accent));
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.38);
}
.unlock-preview .q-mark { font-size:56px; }
.unlock-name { font-size:18px; font-weight:900; color:var(--accent); }
.unlock-text { font-size:12px; color:var(--muted); line-height:1.35; }
.unlock-equip-note { font-size:11px; font-weight:800; color:var(--text); opacity:.9; }
.unlock-card h2 { margin:0; }

/* Seamless opening handoff: real Banks occupy the final position from frame one.
   They are hidden only while the matching Ace card is physically covering them. */
.bank.intro-bank-pending {
  opacity: 0;
}
.bank.intro-bank-ready {
  opacity: 1;
}

/* Opening layout invariant: intro state may change card visibility only, never table geometry. */
.table,
.table.intro-active {
  transform: none;
  top: auto;
}
.table.intro-active .center,
.table.intro-active .seat {
  transform-origin: center;
}

/* Opening Ace backs and landed Banks use identical Q metrics. */
.bank .q-mark,
.ace-deal-back .q-mark {
  font-size: 31px;
  line-height: 1;
  width: 1em;
  height: 1em;
}

/* === Online shell + online card backs === */
.game-mode-picker {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.game-mode-btn { min-height:48px; font-size:15px; }
.game-mode-btn.selected-count,
.online-player-count-btn.selected-count {
  background:var(--accent);
  color:#14110c;
  border-color:#856d40;
}
.setup-mode-panel { display:grid; gap:14px; }
.online-setup-panel { gap:12px; }
.online-shell-block {
  display:grid;
  gap:8px;
  padding:11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.online-shell-block h3 { margin:0; color:var(--accent); font-size:14px; }
.online-shell-block p { margin:0; color:var(--muted); font-size:10px; line-height:1.35; }
.online-player-count-picker {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.online-player-count-btn { min-height:42px; font-size:16px; }
.online-shell-divider {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.online-shell-divider::before,.online-shell-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.08); }
.room-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.room-code-row input {
  min-width:0;
  min-height:42px;
  padding:9px 10px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#11171c;
  color:var(--text);
  font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  outline:none;
}
.room-code-row input:focus { border-color:var(--accent); box-shadow:0 0 0 1px rgba(210,173,99,.28); }
.online-shell-note {
  margin:0;
  padding:8px 9px;
  border-radius:9px;
  background:rgba(210,173,99,.07);
  border:1px solid rgba(210,173,99,.16);
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
  text-align:center;
}
.online-cardbacks-section { margin-top:2px; }
.online-cardback-choice.locked { opacity:.62; }

/* Pearl: glossy nacre with a very light pink/blue/teal shift. */
.cardback-pearl {
  --back-bg:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.92),transparent 22%),
    radial-gradient(circle at 72% 72%,rgba(183,255,244,.30),transparent 34%),
    linear-gradient(120deg,rgba(255,190,220,.34),rgba(202,236,255,.40) 45%,rgba(197,255,239,.34) 76%,rgba(255,247,250,.62)),
    linear-gradient(135deg,#fffdf9,#e9eef0 58%,#fff9fb);
  --back-fg:#80959a;
  --back-border:#f7ffff;
}
/* Ruby: bright translucent red gemstone, deliberately no black like Velvet. */
.cardback-ruby {
  --back-bg:
    linear-gradient(135deg,rgba(255,255,255,.48) 0 8%,transparent 8% 36%,rgba(255,185,195,.25) 36% 48%,transparent 48% 70%,rgba(255,255,255,.28) 70% 76%,transparent 76%),
    radial-gradient(circle at 30% 22%,#ff8594,#df2541 44%,#8d1029 100%);
  --back-fg:#fff0f2;
  --back-border:#ff9eaa;
}
/* Sapphire: saturated, luminous blue jewel. */
.cardback-sapphire {
  --back-bg:
    linear-gradient(145deg,rgba(255,255,255,.38) 0 9%,transparent 9% 34%,rgba(102,189,255,.24) 34% 48%,transparent 48% 69%,rgba(255,255,255,.20) 69% 76%,transparent 76%),
    radial-gradient(circle at 32% 22%,#67b9ff,#1760bd 46%,#082d6c 100%);
  --back-fg:#eaf7ff;
  --back-border:#79c8ff;
}
/* Bismuth: rainbow metallic stepped-square crystal pattern. */
.cardback-bismuth {
  --back-bg:
    repeating-linear-gradient(0deg,transparent 0 8px,rgba(15,20,30,.18) 8px 10px),
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(15,20,30,.16) 8px 10px),
    conic-gradient(from 35deg at 50% 50%,#ef7f8f,#f0bd51,#76d6a4,#55c9d8,#7a86e9,#c26bd6,#ef7f8f);
  --back-fg:#fff7db;
  --back-border:#ead39e;
}
.cardback-bismuth .q-mark { text-shadow:0 1px 1px rgba(0,0,0,.65), 1px 0 rgba(40,20,60,.5); }

.cardback-preview.cardback-pearl,
.cardback-preview.cardback-ruby,
.cardback-preview.cardback-sapphire,
.cardback-preview.cardback-bismuth {
  background:var(--back-bg);
  color:var(--back-fg);
  border-color:var(--back-border);
}

@media (max-width:380px) {
  .setup-card { width:min(92vw,350px); padding:15px; }
  .room-code-row { grid-template-columns:1fr; }
}

/* Offline / Online stats tabs */
.stats-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  position:sticky;
  top:0;
  z-index:8;
  padding:2px 0 9px;
  background:linear-gradient(to bottom, var(--panel) 76%, rgba(0,0,0,0));
}
.stats-tab {
  appearance:none;
  border:1px solid rgba(210,173,99,.28);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:9px 10px;
  cursor:pointer;
}
.stats-tab.active {
  color:var(--accent);
  border-color:rgba(210,173,99,.72);
  background:rgba(210,173,99,.12);
  box-shadow:inset 0 0 0 1px rgba(210,173,99,.08);
}
.stats-mode-note {
  margin:0 0 10px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  color:var(--muted);
  background:rgba(255,255,255,.025);
  font-size:10px;
  line-height:1.4;
}

/* Firebase online room milestone */
.online-entry-panel{display:flex;flex-direction:column;gap:12px}
.online-name-row{display:flex;flex-direction:column;gap:6px;text-align:left}
.online-name-row label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.online-name-row input,.room-code-row input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.13);color:var(--text);border-radius:8px;padding:11px 12px;font:inherit;outline:none}
.online-name-row input:focus,.room-code-row input:focus{border-color:var(--accent)}
.online-lobby-panel{display:flex;flex-direction:column;gap:10px}
.online-lobby-head{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:10px 12px}
.online-lobby-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.online-lobby-kicker{font-size:8px;color:var(--muted);font-weight:900;letter-spacing:.15em}
.online-lobby-code{font-size:24px;letter-spacing:.14em;color:var(--accent)}
.online-lobby-meta{font-size:10px;color:var(--muted);text-align:left}
.online-lobby-players{display:flex;flex-direction:column;gap:7px}
.online-lobby-seat{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(0,0,0,.16)}
.online-lobby-seat span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.online-lobby-seat strong{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-lobby-seat.empty{opacity:.5}

/* Online lobby wait / countdown */
.wait-for-more-row{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(0,0,0,.14);cursor:pointer}
.wait-for-more-row input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
.wait-for-more-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wait-for-more-row strong{font-size:11px;color:var(--text)}
.wait-for-more-row small{font-size:9px;line-height:1.25;color:var(--muted)}
.online-countdown{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:9px 12px;border:1px solid rgba(210,173,99,.28);border-radius:9px;background:rgba(210,173,99,.08);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.online-countdown strong{color:var(--accent);font-size:25px;line-height:1;letter-spacing:0}
.online-lobby-seat.bot{border-style:dashed;opacity:.78}
.online-lobby-seat.bot strong{color:var(--accent)}


/* === Desktop viewport clipping pass ===
   itch.io embeds the game in a fixed-height desktop iframe. Keep the app itself
   as the vertical scroll container so lower action/results panels can never be
   clipped by the iframe, while leaving the phone layout unchanged. */
@media (min-width: 700px) {
  html, body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  .app {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding-bottom: 32px;
  }
  #pendingPanel,
  #tradePanel,
  #incomingTradePanel,
  #resultsPanel {
    scroll-margin-top: 12px;
    scroll-margin-bottom: 24px;
  }
  .overlay {
    max-height: 100dvh;
    overflow: hidden;
  }
  .overlay-card,
  .stats-overlay-card,
  .rules-card {
    max-height: 88dvh;
  }
}


/* === v2.8.3 desktop transient-panel anchoring ===
   Placement / trade / incoming-trade / results panels must not become extra
   document height on desktop. They float over the quiet center of the table,
   so opening one cannot shove the board down or create a new scroll range.
   Trade selection remains usable because there is deliberately no backdrop. */
@media (min-width: 700px) {
  #pendingPanel,
  #tradePanel,
  #incomingTradePanel,
  #resultsPanel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 105;
    width: min(360px, calc(100vw - 32px));
    max-height: min(72dvh, 540px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 55px rgba(0,0,0,.52);
  }

  #pendingPanel {
    width: min(220px, calc(100vw - 32px));
    top: calc(50% - 48px);
  }
  #pendingPanel .row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #pendingPanel .row button {
    width: 100%;
  }

  /* Keep trade UI narrow enough that the table and opponents' Trading Floors
     remain readable behind it. Stack both the response controls and the two
     trade buckets vertically instead of spreading them side-by-side. */
  #incomingTradePanel .trade-response-row,
  #tradePanel .trade-build-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #incomingTradePanel .trade-response-row button,
  #tradePanel .trade-build-actions button {
    width: 100%;
  }
  #incomingTradePanel .compact-trade-grid,
  #tradePanel .compact-trade-grid {
    grid-template-columns: 1fr;
  }
  #incomingTradePanel,
  #tradePanel {
    width: min(260px, calc(100vw - 32px));
  }

  #resultsPanel {
    width: min(520px, calc(100vw - 32px));
    max-height: min(82dvh, 680px);
  }

  /* The old desktop clipping pass kept spare bottom padding for panels that
     lived below the table. They no longer do, so do not manufacture scroll. */
  .app { padding-bottom: 18px; }
}


/* === Offline stats reset === */
.clear-stats-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 3px;border-top:1px solid rgba(255,255,255,.07)}
.clear-stats-wrap small{font-size:9px;color:var(--muted);text-align:center}
.clear-stats-btn{border-color:rgba(214,92,92,.5);color:#e5a0a0}
.clear-stats-btn:hover{border-color:rgba(214,92,92,.8)}
.confirm-overlay{z-index:220;background:rgba(4,7,11,.76)}
.confirm-card{width:min(88vw,360px);padding:18px;text-align:center}
.confirm-card h2{margin:0 0 8px}
.confirm-card p{margin:0 0 16px;color:var(--muted);font-size:11px;line-height:1.45}
.confirm-actions{gap:8px}
.danger-btn{background:#7f2929;border-color:#ad4949;color:#fff}
.danger-btn:hover{background:#913131}

/* Keep the desktop clipping protection without showing a permanent scrollbar. */
@media (min-width:700px){
  .app{scrollbar-width:none;-ms-overflow-style:none}
  .app::-webkit-scrollbar{display:none;width:0;height:0}
}

/* Online turn timer */
.turn-timer-wrap{min-width:64px}
.turn-timer-wrap.warning #turnTimer{font-weight:900}
.turn-timer-wrap.danger #turnTimer{text-decoration:underline}
.result-archetype{font-size:.72em;color:var(--muted);font-weight:700;white-space:nowrap}


/* Online preset comms */
.comms-card { width:min(620px,94vw); max-height:min(82vh,720px); overflow:auto; }
.comms-card .overlay-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.comms-content { display:grid; gap:14px; }
.comms-group { display:grid; gap:7px; }
.comms-group h3 { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.comms-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.comm-option { min-height:38px; white-space:normal; line-height:1.2; padding:7px 9px; }
.comm-bubble {
  position:absolute; z-index:48; max-width:190px; padding:7px 10px;
  border:1px solid rgba(210,178,94,.82); border-radius:10px;
  background:rgba(15,24,29,.96); color:var(--text); font-size:12px; font-weight:700;
  line-height:1.2; text-align:center; box-shadow:0 5px 18px rgba(0,0,0,.35);
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .16s ease, transform .16s ease;
}
.comm-bubble.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.comm-bubble.comm-top { left:50%; top:19%; }
.comm-bubble.comm-bottom { left:50%; top:81%; }
.comm-bubble.comm-left { left:24%; top:50%; }
.comm-bubble.comm-right { left:76%; top:50%; }
@media (max-width:560px){
  .comms-grid { grid-template-columns:1fr; }
  .comms-card { max-height:86vh; }
  .comm-bubble { max-width:145px; font-size:11px; padding:6px 8px; }
  .comm-bubble.comm-top { top:18%; }
  .comm-bubble.comm-bottom { top:82%; }
  .comm-bubble.comm-left { left:25%; }
  .comm-bubble.comm-right { left:75%; }
}


/* Timer layout: when the clock is visible, reserve a real fourth column instead
   of forcing it into the three-column status bar. */
.statusbar.timer-active{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:520px){
  .statusbar.timer-active{font-size:10px;gap:3px;padding-left:5px;padding-right:5px;}
  .statusbar.timer-active strong{font-size:8px;letter-spacing:.02em;}
}


/* Google cloud save */
.cloud-save-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;margin:0 0 12px;border:1px solid rgba(212,174,91,.25);border-radius:10px;background:rgba(8,18,22,.46)}
.cloud-save-panel>div{display:grid;gap:2px;min-width:0}
.cloud-save-panel b{font-size:12px;color:var(--gold)}
.cloud-save-panel span{font-size:10px;color:#d8e0df}
.cloud-save-panel small{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.cloud-save-panel button{flex:0 0 auto;font-size:10px;padding:8px 10px}
@media(max-width:430px){.cloud-save-panel{align-items:flex-start}.cloud-save-panel small{max-width:180px}}

/* v1.0 leaderboard */
.stats-tabs{grid-template-columns:repeat(3,1fr)}
.leaderboard-section{display:grid;gap:10px}
.leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.leaderboard-head h3{margin-bottom:4px}
.leaderboard-head .stats-note{margin:0;max-width:330px}
.leaderboard-sort-label{display:grid;gap:4px;min-width:110px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.leaderboard-sort-label select{appearance:auto;width:100%;border:1px solid rgba(210,173,99,.28);border-radius:8px;background:#111c21;color:#e7eceb;font:inherit;font-size:10px;padding:7px 8px}
.leaderboard-status{font-size:10px;color:var(--muted);min-height:14px}
.leaderboard-table th:first-child,.leaderboard-table td:first-child{text-align:center;width:28px}
.leaderboard-table th:nth-child(2),.leaderboard-table td:nth-child(2){text-align:left;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.leaderboard-table tbody tr.leaderboard-me{background:rgba(210,173,99,.10)}
.leaderboard-you{display:inline-block;margin-left:4px;border:1px solid rgba(210,173,99,.5);border-radius:4px;color:var(--accent);font-size:7px;line-height:1;padding:2px 3px;vertical-align:middle}
@media(max-width:430px){
  .stats-tab{font-size:10px;padding:8px 5px}
  .leaderboard-head{display:grid}
  .leaderboard-sort-label{min-width:0;width:140px}
}


/* === 1.1 accessibility/settings pass === */
.icon-btn{
  min-width:42px!important;
  width:42px;
  padding:8px!important;
  font-size:18px!important;
  line-height:1;
}
.status-suit-icon{font-family:Georgia,serif;font-weight:900;font-size:1.22em;vertical-align:-.03em}
.status-suit-icon.red{color:#e25050}
.status-suit-icon.black{color:#080a0c;text-shadow:0 0 1px rgba(255,255,255,.45)}
.settings-card{width:min(520px,94vw)}
.settings-list{display:grid;gap:10px;margin-top:10px}
.setting-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
.setting-row>div:first-child{display:grid;gap:3px;text-align:left}
.setting-row strong{font-size:13px;color:var(--text)}
.setting-row small{font-size:10px;color:var(--muted);line-height:1.35}
.setting-toggle{display:flex;gap:6px}
.setting-toggle button{min-height:36px;padding:7px 10px;font-size:11px}
.stats-online-name{grid-column:1/-1;display:grid;gap:5px;padding-top:10px;margin-top:2px;border-top:1px solid rgba(255,255,255,.08);text-align:left}
.stats-online-name label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.stats-online-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.stats-online-name input{width:100%;min-width:0;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.13);color:var(--text);border-radius:8px;padding:9px 10px;font:inherit;outline:none}
.stats-online-name input:focus{border-color:var(--accent)}
.stats-online-name small{color:var(--muted);font-size:9px}

/* Large Text is intentionally opt-in and aggressive (~50%) for accessibility. */
body.text-large .topbar p{font-size:18px}
body.text-large .top-actions button{font-size:18px}
body.text-large .statusbar{font-size:16.5px;line-height:19px;height:58px}
body.text-large .statusbar strong{font-size:13.5px;height:16px;line-height:16px}
body.text-large .name{font-size:18px}
/* Large side-seat names get extra room without moving the banks or trading floors. */
body.text-large .seat.left .name,body.text-large .seat.right .name{width:110px;max-width:110px}
body.text-large .seat.left .name{transform:translateX(24px)}
body.text-large .seat.right .name{transform:translateX(-24px)}
body.text-large .controls button{font-size:18px}
body.text-large .panel h2{font-size:22.5px}
body.text-large .panel p,body.text-large .trade-meta{font-size:18px}
body.text-large .overlay-card{font-size:1.5em}
body.text-large .overlay-head h2{font-size:24px}
body.text-large .rules-page p,body.text-large .rules-page li{font-size:1.5em;line-height:1.45}
body.text-large .personality-list span{font-size:1.35em}
body.text-large .stat-row span,body.text-large .stat-card span,body.text-large .stats-note,body.text-large .stats-mode-note{font-size:15px}
body.text-large .stat-row b{font-size:19.5px}
body.text-large .stats-table{font-size:16.5px}
body.text-large .stats-table th{font-size:13.5px}
body.text-large .setting-row strong{font-size:19.5px}
body.text-large .setting-row small,body.text-large .stats-online-name label,body.text-large .stats-online-name small{font-size:15px}

/* Large Cards increases table/trade cards by ~50%. */
body.cards-large .card{width:54px;height:78px;padding:6px;font-size:16.5px;border-radius:7px}
body.cards-large .card .pip{font-size:27px}
body.cards-large .card.mini-card{width:48px;height:69px;padding:5px;font-size:15px}
body.cards-large .card.mini-card .pip{font-size:21px}
body.cards-large .seat.top .floor .card,body.cards-large .seat.bottom .floor .card{margin-left:-18px}
body.cards-large .seat.top .floor .card:first-child,body.cards-large .seat.bottom .floor .card:first-child{margin-left:0}
body.cards-large .seat.left .floor .card,body.cards-large .seat.right .floor .card{margin-top:-54px}
body.cards-large .seat.left .floor .card:first-child,body.cards-large .seat.right .floor .card:first-child{margin-top:0}
body.cards-large #pendingCard .card{width:81px;height:117px;font-size:21px}
body.cards-large #pendingCard .pip{font-size:36px}

@media (max-width:420px){
  .top-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}
  .top-actions button{padding-left:7px;padding-right:7px;font-size:11px}
  .icon-btn{min-width:38px!important;width:38px}
  .setting-row{grid-template-columns:1fr}
  .setting-toggle{justify-content:flex-start}
}

/* === 1.1 top action row ===
   Keep the title/subtitle in place, with every top action on one line below it. */
.topbar{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:5px;
}
.top-actions{
  width:100%;
  flex-wrap:nowrap!important;
  justify-content:flex-start;
  gap:5px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.top-actions::-webkit-scrollbar{display:none}
.top-actions button{
  flex:1 1 0;
  min-width:0;
  padding-left:7px;
  padding-right:7px;
  white-space:nowrap;
}
.top-actions .icon-btn{
  flex:0 0 38px;
  min-width:38px!important;
  width:38px;
}
#newGameBtn{flex:1.2 1 0}

@media(max-width:420px){
  .top-actions{flex-wrap:nowrap!important;justify-content:flex-start}
  .top-actions button{font-size:11px;padding-left:5px;padding-right:5px}
}


/* === 1.1 top action alignment setting === */
.top-actions{
  justify-content:flex-end!important;
}
.top-actions button,
#newGameBtn{
  flex:0 0 auto!important;
  min-width:max-content;
}
.top-actions .icon-btn{
  flex:0 0 38px!important;
  min-width:38px!important;
}
body.actions-left .top-actions{
  justify-content:flex-start!important;
}
@media(max-width:420px){
  .top-actions{justify-content:flex-end!important;}
  body.actions-left .top-actions{justify-content:flex-start!important;}
}


/* === 1.1 iPhone / short mobile viewport hardening ===
   Keep QUARTA usable when Safari or an in-app browser reserves large browser
   chrome. The app owns vertical scrolling, action buttons stay reachable, and
   bottom safe-area space is respected. */
@media (max-width: 699px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .app::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* The three play controls are the one thing a short browser viewport must
     never strand below browser chrome. */
  .controls {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    padding: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: rgba(17, 21, 26, .88);
    border: 1px solid rgba(52, 66, 74, .78);
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .controls button {
    min-width: 0;
    flex: 1 1 0;
    touch-action: manipulation;
  }

  #pendingPanel,
  #tradePanel,
  #incomingTradePanel,
  #resultsPanel {
    scroll-margin-top: 12px;
    scroll-margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* Temporary interaction panels take priority over the normal action row.
     This prevents Draw / Trade / Comms from covering placement, trade,
     incoming-trade, or result controls in short Safari/Instagram viewports. */
  body.priority-panel-active .controls {
    display: none !important;
  }
  body.priority-panel-active .app {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .overlay {
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .overlay-card,
  .stats-overlay-card,
  .rules-card,
  .comms-card {
    max-height: calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Very short phone/browser windows (Instagram browser, landscape-ish Safari,
   accessibility chrome): shrink only the table footprint, never the controls. */
@media (max-width: 699px) and (max-height: 650px) {
  .table {
    width: min(calc(100% + 6px), 430px);
    margin-left: auto;
    margin-right: auto;
  }
  .app { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  body.priority-panel-active .app { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}


/* === 1.1 guided first-run tutorial === */
body.tutorial-mode .top-actions{opacity:.42;pointer-events:none}
body.tutorial-mode #statusBar{border-color:rgba(212,174,91,.45);box-shadow:0 0 0 1px rgba(212,174,91,.10) inset}
body.tutorial-mode #turnLabel{color:var(--gold);font-weight:900;letter-spacing:.08em}
.tutorial-callout{
  position:fixed;z-index:430;left:50%;top:13%;transform:translateX(-50%);
  width:min(410px,calc(100vw - 28px));padding:14px 15px 13px;border-radius:14px;
  border:1px solid rgba(212,174,91,.68);background:rgba(10,17,21,.97);color:var(--text);
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 0 3px rgba(212,174,91,.08);
  text-align:left;
}
.tutorial-callout h2{display:none;margin:0}
.tutorial-callout p{font-size:14px;line-height:1.45;margin:5px 0 12px;color:#eef2f1}
.tutorial-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--gold)}
.tutorial-callout button{width:100%;min-height:42px}
.tutorial-callout button:disabled{opacity:.42}
.tutorial-callout.tutorial-action{pointer-events:none}
.tutorial-pointer{position:fixed;z-index:425;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(212,174,91,.9),rgba(212,174,91,.35));pointer-events:none}
.tutorial-pointer::after{content:'';position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(212,174,91,.7)}
.tutorial-focus{position:relative!important;z-index:420!important;box-shadow:0 0 0 3px rgba(212,174,91,.72),0 0 22px rgba(212,174,91,.65)!important;animation:tutorialPulse 1s ease-in-out infinite alternate}
@keyframes tutorialPulse{from{filter:brightness(1)}to{filter:brightness(1.32)}}
.tutorial-ace-card{position:absolute!important;inset:-2px!important;width:50px!important;height:70px!important;z-index:30!important;background:#f7f4ec!important;color:#d94343!important;border-color:#d9d3c7!important;pointer-events:none}
.tutorial-ace-card .pip{font-size:24px!important}
body.tutorial-mode #cancelTradeBtn{display:none!important}
body.tutorial-mode #drawBtn:disabled{white-space:normal;line-height:1.05}
@media(max-width:699px){
  .tutorial-callout{top:max(9%,calc(env(safe-area-inset-top,0px) + 10px));width:min(390px,calc(100vw - 22px));padding:12px 13px}
  .tutorial-callout p{font-size:13px}
  body.tutorial-mode .app{scroll-padding-top:110px}
}

/* === 1.1 profile/history + dual leaderboard polish === */
.leaderboard-mode-toggle{display:flex;gap:6px;margin:8px 0 7px}
.leaderboard-mode-toggle button{min-height:30px;padding:5px 12px;font-size:10px}
.leaderboard-table-wrap{overflow-x:visible}
.leaderboard-table{width:100%;table-layout:auto}
@media (max-width:560px){
  .leaderboard-table th,.leaderboard-table td{padding-left:5px;padding-right:5px;font-size:9px}
  .leaderboard-table th:nth-child(2),.leaderboard-table td:nth-child(2){max-width:112px}
}


/* === 1.1 leaderboard equipped card-back badge === */
.leaderboard-player{display:flex;align-items:center;gap:6px;min-width:0}
.leaderboard-player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaderboard-cardback{
  flex:0 0 auto;
  width:16px;
  height:23px;
  border-radius:3px;
  overflow:hidden;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.leaderboard-cardback-art{
  position:absolute;
  left:50%;
  top:50%;
  flex:none;
  grid-row:auto;
  transform:translate(-50%,-50%) scale(.365);
  transform-origin:center;
  pointer-events:none;
  box-shadow:none;
}

/* Small polish: authenticated status stays reassuring without exposing the account email. */
.cloud-save-panel small.logged-in-status{color:#79d98b;font-weight:800;overflow:visible;text-overflow:clip;white-space:nowrap}
.trade-build-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.trade-build-actions #cancelTradeBtn{min-width:92px}


/* === 1.1 compact branding ===
   The masthead text was removed to reclaim vertical space. Branding now lives
   on the felt as subtle mirrored arched wordmarks behind the game pieces. */
.topbar{
  gap:0;
}
.top-actions{
  margin-top:0;
}
.table-wordmark{
  position:absolute;
  left:50%;
  width:84%;
  height:auto;
  z-index:0;
  pointer-events:none;
  overflow:visible;
  opacity:.17;
}
.table-wordmark-top{
  top:14.5%;
  transform:translateX(-50%);
}
.table-wordmark-bottom{
  bottom:12%;
  transform:translateX(-50%) rotate(180deg);
}
.table-wordmark text{
  fill:var(--accent);
  font-family:Georgia, "Times New Roman", serif;
  font-size:54px;
  font-weight:800;
  letter-spacing:.26em;
}
/* Keep seats/cards visually above the decorative felt mark. */
.table > .seat,
.table > .center,
.table > .end-reveal-layer{
  z-index:2;
}

/* === 1.1 advanced rules glossary === */
.glossary-list{display:grid;gap:8px;margin-top:10px}
.glossary-list>div{display:grid;grid-template-columns:minmax(105px,.42fr) minmax(0,1fr);gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.10)}
.glossary-list b{color:var(--accent)}
.glossary-list span{font-size:12px;line-height:1.4;color:var(--text)}
body.text-large .glossary-list span{font-size:1.5em;line-height:1.45}
@media(max-width:520px){
  .rules-tabs{gap:5px}
  .rules-tabs button{padding-left:7px;padding-right:7px;font-size:11px}
  .glossary-list>div{grid-template-columns:1fr;gap:3px}
}

/* Online connection state: the authoritative human seat stays in the match,
   but its table label makes a Firebase presence drop impossible to miss. */
.seat.online-disconnected .name{
  opacity:.72;
  font-style:italic;
  text-decoration:underline dotted;
  text-underline-offset:3px;
}

/* === Trials challenge ladder === */
.trials-section{margin-top:14px;border-top:1px solid rgba(210,173,99,.22);padding-top:12px}
.trials-heading{margin-bottom:8px}
.trials-list{display:grid;gap:7px}
.trial-btn{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:9px 11px}
.trial-btn b{font-size:13px}
.trial-btn small{font-size:10px;line-height:1.25;color:var(--muted);font-weight:600}
.trial-btn.selected-count small{color:rgba(255,255,255,.78)}
.trial-btn:disabled{opacity:.42;cursor:not-allowed}
.trial-btn.trial-complete b::after{content:'  ✓';color:var(--accent)}
.cardback-trials{--back-bg:repeating-linear-gradient(0deg,#c92f38 0 9px,#f5f0df 9px 18px);--back-fg:#173f7a;--back-border:#173f7a}
.cardback-preview.cardback-trials{--back-bg:repeating-linear-gradient(0deg,#c92f38 0 9px,#f5f0df 9px 18px);--back-fg:#173f7a;--back-border:#173f7a}
.bank.cardback-trials{background:var(--back-bg)!important;color:var(--back-fg)!important;border-color:var(--back-border)!important}

/* === Daily Challenges === */
.daily-challenges-section{margin-top:14px;border-top:1px solid rgba(210,173,99,.16);padding-top:12px}
.daily-challenges-head{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:8px}
.daily-challenges-head>small{font-size:16px;color:var(--muted);font-weight:400;text-align:left;line-height:1.25}
.daily-challenges-list{display:grid;gap:6px}
.daily-challenge-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(210,173,99,.18);border-radius:8px;background:rgba(255,255,255,.025)}
.daily-challenge-row span{font-size:11px;font-weight:700;line-height:1.25}
.daily-challenge-row small{font-size:10px;color:var(--muted);font-weight:800;white-space:nowrap}
.daily-challenge-row.complete{opacity:.68}
.daily-challenge-row.complete span{text-decoration:line-through}
.cardback-daily{--back-bg:radial-gradient(ellipse at center,rgba(210,236,255,.72) 0 17%,transparent 18% 31%,rgba(210,236,255,.62) 32% 46%,transparent 47%),linear-gradient(135deg,#8a642f,#d6b46b 48%,#7b5728);--back-fg:#d9f2ff;--back-border:#a67a39}
.cardback-preview.cardback-daily{--back-bg:radial-gradient(ellipse at center,rgba(210,236,255,.72) 0 17%,transparent 18% 31%,rgba(210,236,255,.62) 32% 46%,transparent 47%),linear-gradient(135deg,#8a642f,#d6b46b 48%,#7b5728);--back-fg:#d9f2ff;--back-border:#a67a39}
.bank.cardback-daily{background:var(--back-bg)!important;color:var(--back-fg)!important;border-color:var(--back-border)!important}


/* === 2.2 Challenges navigation + compact Trials setup === */
#challengesBtn{margin-right:auto;margin-left:0}
#newGameBtn{margin-left:0;margin-right:0}
body.actions-left #challengesBtn{margin-right:0;margin-left:auto}
body.actions-left #newGameBtn{margin-left:0;margin-right:0}
.challenges-card{width:min(92vw,430px)}
.challenges-card .daily-challenges-section{margin-top:0;border-top:0;padding-top:0}

/* New Game must remain usable on short desktop/mobile viewports even as Trials grow. */
.setup-card{max-height:min(90vh,760px);overflow-y:auto;overscroll-behavior:contain}
.trials-section{margin-top:10px;padding-top:9px}
.trials-heading{margin-bottom:6px}
.trials-list{gap:5px}
.trial-btn{padding:7px 9px;gap:1px}
.trial-btn b{font-size:12px}
.trial-btn small{font-size:9px;line-height:1.2}
#startGameBtn{position:sticky;bottom:0;z-index:3;margin-top:4px;box-shadow:0 -8px 18px rgba(15,12,8,.35)}
@media(max-height:720px){
  .setup-card{padding:13px;gap:9px;max-height:94vh}
  .player-count-btn{min-height:42px;font-size:17px}
  .trial-btn{padding:6px 8px}
}


/* === v2.4 Advanced Tips card diagrams ===
   These reuse Quarta's existing face-card and card-back visual language; no new image assets. */
.advanced-tip-visual{
  grid-column:1/-1;
  justify-self:center;
  margin:8px auto 2px;
}
.advanced-tip-visual .card,
.tip-card-back{
  width:36px;
  height:52px;
  box-sizing:border-box;
  border-radius:5px;
}
.advanced-tip-visual .card{
  padding:4px;
  font-size:11px;
}
.advanced-tip-visual .card .pip{font-size:18px}
.tip-card-back{
  border:1px solid var(--back-border,#c29c5b);
  background:var(--back-bg,#17212b);
  color:var(--back-fg,var(--accent));
  display:grid;
  place-items:center;
  box-shadow:0 3px 7px rgba(0,0,0,.25);
}
.tip-card-back .q-mark{font-size:25px}
.secret-suit-example{
  position:relative;
  width:128px;
  height:132px;
}
.secret-suit-example .tip-card-top{position:absolute;left:46px;top:0}
.secret-suit-example .tip-card-left{position:absolute;left:0;top:40px}
.secret-suit-example .tip-card-right{position:absolute;right:0;top:40px}
.secret-suit-example .tip-card-bottom{position:absolute;left:46px;bottom:0}
.sister-suit-example{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.tip-suit-pair{display:flex;gap:6px;align-items:center;justify-content:center}
@media(max-width:390px){
  .sister-suit-example{gap:12px}
}

/* === v2.8.6 Advanced Tips examples === */
.tip-status{
  min-width:118px;
  padding:8px 14px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.18);
  text-align:center;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.tip-status.countered{color:#fff1c8;border-color:rgba(214,176,61,.82);background:rgba(78,62,18,.95)}
.tip-status.accepted{color:#d8ffe3;border-color:rgba(62,176,90,.8);background:rgba(24,64,33,.95)}
.trash-fodder-example{display:flex;align-items:center;justify-content:center;gap:12px;min-height:82px}
.tip-arrow{font-size:27px;color:var(--accent);font-weight:900}
.tip-loose-pile{position:relative;width:86px;height:70px}
.tip-loose-card{position:absolute;left:24px;top:8px;box-shadow:0 4px 8px rgba(0,0,0,.28)}
.tip-loose-one{transform:rotate(-13deg);left:5px;top:10px}
.tip-loose-two{transform:rotate(6deg);left:26px;top:5px}
.tip-loose-three{transform:rotate(15deg);left:46px;top:12px}
.tip-trade-bottom{display:flex;align-items:center;justify-content:center;gap:7px;width:min(100%,300px)}
.tip-trade-box{flex:1;min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:8px 9px;text-align:center}
.tip-trade-box.trade-bucket-out{background:linear-gradient(180deg,rgba(200,107,70,.14),rgba(200,107,70,.05));border-color:rgba(200,107,70,.32)}
.tip-trade-box.trade-bucket-in{background:linear-gradient(180deg,rgba(58,166,99,.14),rgba(58,166,99,.05));border-color:rgba(58,166,99,.32)}
.tip-trade-box small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.tip-trade-box strong{font-size:13px}
.tip-trade-box.trade-bucket-out strong{color:#ffd7d0}.tip-trade-box.trade-bucket-in strong{color:#d8ffe3}
.tip-trade-card{margin:4px auto 0;width:42px!important;height:60px!important;padding:4px!important;font-size:12px!important}
.tip-trade-card .pip{font-size:20px!important}
.tip-trade-for{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}
.tip-action-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tip-fake-button{display:inline-grid;place-items:center;min-width:104px;min-height:34px;padding:0 12px;border-radius:8px;border:1px solid rgba(210,173,99,.55);background:linear-gradient(180deg,rgba(210,173,99,.2),rgba(210,173,99,.08));color:var(--text);font-weight:800;font-size:12px}
.tiebreak-example{display:grid;gap:9px;width:min(100%,330px)}
.tip-hand{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:10px 8px 7px;background:rgba(255,255,255,.025)}
.tip-hand-winner{border-color:rgba(210,173,99,.72);box-shadow:0 0 0 2px rgba(210,173,99,.13)}
.tip-winner-label{position:absolute;right:6px;top:-8px;padding:2px 6px;border-radius:5px;background:var(--accent);color:#16120b;font-size:8px;letter-spacing:.08em;font-weight:1000}
.tip-hand-cards{display:flex;justify-content:center;gap:4px}
.tip-tiebreak-card{width:38px!important;height:55px!important;padding:3px!important;font-size:9px!important;flex:0 0 auto}
.tip-tiebreak-card .pip{font-size:15px!important}
.tip-mini-card{display:grid;place-items:center;width:37px;height:49px;border-radius:5px;border:1px solid #c9c9c9;background:#f7f5ed;color:#111;font-size:11px;font-weight:900;box-shadow:0 2px 5px rgba(0,0,0,.22)}
.tip-mini-card.red{color:#b5262e}
.setting-toggle-triple{display:grid;grid-template-columns:repeat(3,auto);gap:5px}
@media(max-width:430px){
  .tip-mini-card{width:32px;height:45px;font-size:10px}
  .tip-tiebreak-card{width:34px!important;height:50px!important;font-size:8px!important}
  .tip-tiebreak-card .pip{font-size:13px!important}
  .setting-toggle-triple{grid-template-columns:1fr;min-width:76px}
}


/* === v2.5 Collapsible Trials picker === */
.trials-toggle-btn{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
  padding:8px 11px;
  text-align:left;
}
.trials-toggle-icon{font-size:14px;line-height:1;transition:transform .16s ease}
.trials-toggle-btn.trials-open .trials-toggle-icon{transform:rotate(180deg)}
.trials-section{border-top:0;padding-top:0;margin-top:6px}

/* === v2.7 Your Suit alignment polish === */
.statusbar > span:last-child{
  justify-self:end;
  width:max-content;
  max-width:100%;
  margin-left:auto;
  padding:4px 9px;
  border:1px solid rgba(210,173,99,.62);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(37,92,67,.96),rgba(24,67,50,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}
.statusbar > span:last-child strong{color:#e0c783}
.statusbar:not(.timer-active) > span:last-child{grid-column:3}
.statusbar.timer-active > span:last-child{grid-column:4}
.statusbar > span:last-child .status-suit-icon{font-size:1.55em}


/* === v2.7.3 Card-back beautification pass ===
   Code-only material polish: no image/SVG assets. Existing unlock logic and IDs are unchanged. */
.cardback-bronze,.cardback-preview.cardback-bronze{
  --back-bg:radial-gradient(circle at 20% 22%,rgba(255,241,214,.18),transparent 18%),linear-gradient(155deg,transparent 0 42%,rgba(255,196,125,.12) 47%,transparent 53%),repeating-linear-gradient(45deg,rgba(43,22,8,.10) 0 3px,transparent 3px 9px),repeating-linear-gradient(135deg,rgba(255,226,186,.035) 0 2px,transparent 2px 10px),linear-gradient(135deg,#956b3c,#513319 48%,#34200f 68%,#93673b);
  --back-fg:#f1d5ad;--back-border:#ad7d49;
}
.cardback-silver,.cardback-preview.cardback-silver{
  --back-bg:linear-gradient(120deg,transparent 0 30%,rgba(255,255,255,.38) 42%,rgba(255,255,255,.08) 51%,transparent 64%),repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1px,rgba(70,79,84,.035) 1px 3px),linear-gradient(135deg,#f5f6f4,#a6adb1 56%,#e8eae8);
  --back-fg:#4d555a;--back-border:#dde0de;
}
.cardback-gold,.cardback-preview.cardback-gold{
  --back-bg:linear-gradient(90deg,rgba(255,232,153,.14) 0 4%,transparent 4% 96%,rgba(84,48,7,.20) 96%),linear-gradient(0deg,rgba(255,238,174,.10) 0 4%,transparent 4% 96%,rgba(75,42,5,.18) 96%),radial-gradient(circle at 32% 22%,rgba(255,255,255,.38),transparent 19%),repeating-linear-gradient(45deg,rgba(255,243,186,.10) 0 2px,transparent 2px 8px),radial-gradient(circle at 36% 26%,#fff1a0,#d09a26 45%,#6a430d 100%);
  --back-fg:#fff3b5;--back-border:#f3cf68;
}
.cardback-crystal,.cardback-preview.cardback-crystal{
  --back-bg:linear-gradient(73deg,transparent 0 34%,rgba(91,181,224,.22) 34.5% 35.5%,transparent 36% 100%),linear-gradient(152deg,transparent 0 52%,rgba(255,255,255,.58) 52.5% 53.5%,transparent 54% 100%),linear-gradient(125deg,rgba(255,255,255,.88) 0 11%,transparent 11% 28%,rgba(151,220,255,.34) 28% 42%,transparent 42% 62%,rgba(255,255,255,.60) 62% 72%,transparent 72%),radial-gradient(circle at 77% 18%,rgba(255,255,255,.92) 0 3%,transparent 6%),linear-gradient(35deg,#eefcff,#bcecff 47%,#fbffff 70%,#9fdcff);
  --back-fg:#3f82a7;--back-border:#dff8ff;
}
.cardback-ivory,.cardback-preview.cardback-ivory{
  --back-bg:radial-gradient(ellipse at 20% 75%,rgba(153,123,71,.055),transparent 30%),radial-gradient(ellipse at 76% 28%,rgba(255,255,255,.38),transparent 28%),repeating-linear-gradient(23deg,rgba(126,101,55,.035) 0 1px,transparent 1px 9px),repeating-radial-gradient(ellipse at 50% 40%,rgba(128,105,64,.026) 0 1px,transparent 2px 13px),linear-gradient(135deg,#fffbe7,#eadbae 56%,#f8efd0);
  --back-fg:#806737;--back-border:#d2b978;
}
.cardback-cardboard,.cardback-preview.cardback-cardboard{
  --back-bg:radial-gradient(ellipse at 76% 24%,rgba(97,61,25,.10),transparent 24%),linear-gradient(90deg,rgba(81,54,27,.13) 0 3%,transparent 3% 97%,rgba(81,54,27,.10) 97%),repeating-linear-gradient(0deg,rgba(90,63,35,.10) 0 2px,rgba(255,255,255,.05) 2px 6px),repeating-linear-gradient(90deg,rgba(73,49,27,.032) 0 1px,transparent 1px 8px),linear-gradient(135deg,#ccb08a,#9a784c 58%,#d4bd98);
  --back-fg:#594023;--back-border:#87643c;
}
.cardback-spectrum,.cardback-rainbow,.cardback-preview.cardback-spectrum,.cardback-preview.cardback-rainbow{
  --back-bg:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(45deg,rgba(20,20,35,.055) 0 1px,transparent 1px 9px),radial-gradient(circle at 35% 28%,rgba(255,255,255,.25),transparent 35%),conic-gradient(from 45deg,#d63b36,#e8cb3d,#3fa85a,#3c71c9,#8c55c7,#d63b36);
  --back-fg:#fff;--back-border:#eeeeee;
}
.cardback-inferno,.cardback-velvet,.cardback-preview.cardback-inferno,.cardback-preview.cardback-velvet{
  --back-bg:linear-gradient(118deg,transparent 0 27%,rgba(184,39,48,.11) 37%,transparent 50%),repeating-linear-gradient(18deg,rgba(255,101,105,.028) 0 1px,transparent 1px 4px),repeating-linear-gradient(162deg,rgba(0,0,0,.16) 0 1px,transparent 1px 5px),radial-gradient(ellipse at 30% 20%,#54171a,#180708 54%,#090505 100%);
  --back-fg:#ef4650;--back-border:#a6262d;
}
.cardback-felt,.cardback-preview.cardback-felt{
  --back-bg:radial-gradient(circle at center,rgba(255,255,255,.055),transparent 48%),repeating-linear-gradient(45deg,rgba(0,0,0,.075) 0 1px,transparent 1px 4px),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),#145f3c;
  --back-fg:#f3f1e8;--back-border:#181b18;
}
.cardback-jade,.cardback-preview.cardback-jade{
  --back-bg:radial-gradient(ellipse at 25% 26%,rgba(235,255,241,.24),transparent 28%),radial-gradient(ellipse at 72% 66%,rgba(18,96,68,.19),transparent 30%),radial-gradient(ellipse at 70% 18%,rgba(255,255,255,.17),transparent 20%),linear-gradient(145deg,rgba(210,255,228,.10),transparent 35%,rgba(15,97,71,.10) 62%,transparent 78%),linear-gradient(135deg,#66bf91,#3b9c73 54%,#17684f);
  --back-fg:#eafff1;--back-border:#b6e8c8;
}
.cardback-amethyst,.cardback-preview.cardback-amethyst{
  --back-bg:linear-gradient(67deg,transparent 0 36%,rgba(96,39,176,.22) 36.5% 38%,transparent 38.5%),linear-gradient(145deg,rgba(255,255,255,.48) 0 9%,transparent 9% 38%,rgba(255,179,245,.22) 38% 49%,transparent 49% 72%,rgba(255,255,255,.25) 72% 77%,transparent 77%),radial-gradient(circle at 27% 22%,rgba(255,255,255,.36),transparent 16%),linear-gradient(135deg,#ef78d1,#a94fe3 56%,#6330bb);
  --back-fg:#fff0ff;--back-border:#f4b8ed;
}
.cardback-leather,.cardback-preview.cardback-leather{
  --back-bg:linear-gradient(90deg,rgba(80,31,10,.16) 0 4%,transparent 4% 96%,rgba(70,27,9,.20) 96%),linear-gradient(0deg,rgba(255,206,118,.08) 0 4%,transparent 4% 96%,rgba(76,28,8,.18) 96%),radial-gradient(circle at 25% 24%,rgba(255,210,101,.28),transparent 22%),radial-gradient(circle at 75% 72%,rgba(116,42,18,.24),transparent 24%),repeating-linear-gradient(35deg,rgba(75,31,10,.07) 0 1px,transparent 1px 5px),repeating-linear-gradient(145deg,rgba(255,199,107,.025) 0 1px,transparent 1px 6px),linear-gradient(135deg,#d97822,#963b15 56%,#df9636);
  --back-fg:#ffe0a0;--back-border:#713115;
}
.cardback-platinum,.cardback-preview.cardback-platinum{
  --back-bg:linear-gradient(118deg,transparent 0 22%,rgba(255,134,175,.23) 34%,rgba(255,232,129,.18) 43%,rgba(112,235,214,.20) 52%,rgba(118,159,255,.22) 62%,rgba(221,135,255,.18) 70%,transparent 82%),linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.08) 54%,transparent 65%),repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 1px,rgba(69,79,88,.025) 1px 3px),linear-gradient(135deg,#f6f8f8,#aeb8c0 52%,#eef2f3);
  --back-fg:#ffffff;--back-border:#eef8fa;
}
.cardback-trials,.cardback-preview.cardback-trials{
  --back-bg:repeating-linear-gradient(90deg,rgba(20,35,54,.035) 0 1px,transparent 1px 6px),linear-gradient(0deg,rgba(0,0,0,.055),transparent 14%,transparent 86%,rgba(0,0,0,.055)),repeating-linear-gradient(0deg,#c92f38 0 9px,#f5f0df 9px 18px);
  --back-fg:#173f7a;--back-border:#173f7a;
}
.cardback-daily,.cardback-preview.cardback-daily{
  --back-bg:radial-gradient(ellipse at center,rgba(222,244,255,.82) 0 13%,rgba(210,236,255,.68) 14% 20%,transparent 21% 30%,rgba(213,239,255,.65) 31% 43%,transparent 44%),radial-gradient(ellipse at center,rgba(255,215,124,.16) 0 46%,transparent 60%),repeating-linear-gradient(27deg,rgba(87,58,25,.045) 0 1px,transparent 1px 5px),radial-gradient(ellipse at 50% 50%,#d9ba72 0 24%,#b18443 51%,#6c4821 100%);
  --back-fg:#e4f6ff;--back-border:#aa7d3b;
}
.cardback-obsidian,.cardback-preview.cardback-obsidian{
  --back-bg:linear-gradient(62deg,transparent 0 43%,rgba(75,105,168,.18) 43.5% 44.5%,rgba(5,7,11,.62) 45% 46%,transparent 46.5%),linear-gradient(137deg,transparent 0 61%,rgba(90,58,146,.17) 61.5% 62.5%,transparent 63%),radial-gradient(ellipse at 68% 20%,rgba(55,91,168,.34),transparent 26%),linear-gradient(115deg,rgba(75,43,132,.16),transparent 38%),repeating-linear-gradient(135deg,rgba(42,71,125,.065) 0 1px,transparent 1px 9px),#070910;
  --back-fg:#6077b1;--back-border:#24325a;
}
/* Dark Matter intentionally remains the inverse of Classic. The centered blue distortion
   is restrained so the pale inverse-card identity remains obvious at a glance. */
.cardback-darkmatter,.cardback-preview.cardback-darkmatter{
  --back-bg:radial-gradient(ellipse at center,rgba(45,82,156,.28) 0 7%,rgba(45,82,156,.12) 8% 14%,transparent 15% 22%,rgba(45,82,156,.11) 23% 25%,transparent 27%),radial-gradient(ellipse at center,rgba(232,222,212,0) 0 28%,rgba(45,82,156,.055) 43%,transparent 62%),linear-gradient(90deg,rgba(45,82,156,.045) 0 3%,transparent 3% 97%,rgba(45,82,156,.045) 97%),linear-gradient(0deg,rgba(45,82,156,.035) 0 3%,transparent 3% 97%,rgba(45,82,156,.035) 97%),repeating-linear-gradient(45deg,rgba(45,82,156,.075) 0 2px,transparent 2px 8px),#e8ded4;
  --back-fg:#2d529c;--back-border:#3d63a4;
}
.cardback-frostbite,.cardback-preview.cardback-frostbite{
  --back-bg:radial-gradient(circle at 4% 7%,rgba(255,255,255,.95) 0 8%,transparent 18%),radial-gradient(circle at 96% 12%,rgba(255,255,255,.78) 0 7%,transparent 17%),radial-gradient(circle at 8% 94%,rgba(255,255,255,.72) 0 8%,transparent 18%),radial-gradient(circle at 94% 91%,rgba(255,255,255,.64) 0 6%,transparent 17%),linear-gradient(62deg,transparent 0 49%,rgba(255,255,255,.58) 49.5% 50.3%,transparent 50.8%),linear-gradient(142deg,transparent 0 67%,rgba(215,244,255,.54) 67.5% 68.2%,transparent 68.7%),radial-gradient(circle at 24% 20%,rgba(255,255,255,.90),transparent 18%),linear-gradient(135deg,rgba(255,255,255,.38) 0 12%,transparent 12% 32%,rgba(196,235,255,.45) 32% 52%,transparent 52% 72%,rgba(255,255,255,.25) 72% 100%),repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px),linear-gradient(140deg,#ebfbff 0%,#cfefff 42%,#9dd7fb 70%,#e9fbff 100%);
  --back-fg:#fff;--back-border:#fff;
}
.cardback-pearl,.cardback-preview.cardback-pearl{
  --back-bg:radial-gradient(ellipse at 38% 42%,transparent 0 28%,rgba(255,255,255,.40) 39%,rgba(187,233,239,.12) 48%,transparent 61%),radial-gradient(circle at 30% 22%,rgba(255,255,255,.92),transparent 22%),radial-gradient(circle at 72% 72%,rgba(183,255,244,.30),transparent 34%),linear-gradient(120deg,rgba(255,190,220,.34),rgba(202,236,255,.40) 45%,rgba(197,255,239,.34) 76%,rgba(255,247,250,.62)),linear-gradient(135deg,#fffdf9,#e9eef0 58%,#fff9fb);
  --back-fg:#80959a;--back-border:#f7ffff;
}
.cardback-ruby,.cardback-preview.cardback-ruby{
  --back-bg:linear-gradient(66deg,transparent 0 55%,rgba(91,4,25,.28) 55.5% 67%,transparent 67.5%),linear-gradient(135deg,rgba(255,255,255,.50) 0 8%,transparent 8% 36%,rgba(255,185,195,.26) 36% 48%,transparent 48% 70%,rgba(255,255,255,.30) 70% 76%,transparent 76%),linear-gradient(151deg,transparent 0 42%,rgba(255,214,220,.48) 42.5% 43.5%,transparent 44%),radial-gradient(circle at 30% 22%,#ff8b99,#df2541 44%,#7f0c24 100%);
  --back-fg:#fff0f2;--back-border:#ff9eaa;
}
.cardback-sapphire,.cardback-preview.cardback-sapphire{
  --back-bg:linear-gradient(68deg,transparent 0 56%,rgba(3,31,87,.32) 56.5% 68%,transparent 68.5%),linear-gradient(145deg,rgba(255,255,255,.40) 0 9%,transparent 9% 34%,rgba(102,189,255,.25) 34% 48%,transparent 48% 69%,rgba(255,255,255,.22) 69% 76%,transparent 76%),radial-gradient(circle at 76% 18%,rgba(211,244,255,.92) 0 3%,transparent 6%),radial-gradient(circle at 32% 22%,#67b9ff,#1559b2 46%,#06265e 100%);
  --back-fg:#eaf7ff;--back-border:#79c8ff;
}
.cardback-bismuth,.cardback-preview.cardback-bismuth{
  --back-bg:repeating-linear-gradient(0deg,transparent 0 8px,rgba(15,20,30,.18) 8px 10px),repeating-linear-gradient(90deg,transparent 0 8px,rgba(15,20,30,.16) 8px 10px),repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.08) 18px 20px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(55,24,75,.12) 18px 20px),conic-gradient(from 35deg at 50% 50%,#ef7f8f,#f0bd51,#76d6a4,#55c9d8,#7a86e9,#c26bd6,#ef7f8f);
  --back-fg:#fff7db;--back-border:#ead39e;
}

/* v2.8.0 credits */
.credits-card{max-width:620px}
.credits-content{display:grid;gap:18px;padding:2px 0 8px}
.credits-content section{padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035)}
.credits-content h3{margin:0 0 8px}
.credits-content section>p{margin:0;font-size:1.08em}
.credits-audio-details{padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035)}
.credits-audio-details summary{cursor:pointer;font-weight:800;font-size:1.08em;line-height:1.3;min-height:28px}
.credits-audio-details[open] summary{margin-bottom:14px}
.credits-audio-groups{display:grid;gap:16px}
.credits-audio-groups h4{margin:0 0 5px;font-size:.92em;opacity:.82;text-transform:uppercase;letter-spacing:.05em}
.credits-list{display:grid;gap:0}
.credits-list p{display:flex;justify-content:space-between;gap:20px;margin:0;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.credits-list p:last-child{border-bottom:0}
.credits-list span{text-align:right;opacity:.82}
@media(max-width:520px){.credits-list p{display:grid;gap:2px}.credits-list span{text-align:left}}


/* === v2.8.5 hold-to-peek Bank ===
   The local player's Bank can be inspected only while the Bank is actively
   pressed. The tray floats over the felt and never changes the table layout. */
#bank-Bottom {
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#bank-Bottom.bank-peek-held {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(210,173,99,.26), 0 0 20px rgba(210,173,99,.22);
}
.bank-peek-tray {
  position: absolute;
  left: 50%;
  bottom: 15.5%;
  transform: translateX(-50%);
  z-index: 96;
  width: min(82%, 390px);
  min-height: 66px;
  padding: 7px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  pointer-events: none;
  border-radius: 10px;
  border: 1px solid rgba(210,173,99,.36);
  background: rgba(12,27,29,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
}
.bank-peek-tray .card {
  flex: 0 0 auto;
  margin-left: -10px;
}
.bank-peek-tray .card:first-child { margin-left: 0; }
@media (max-width: 699px) {
  .bank-peek-tray {
    bottom: 16%;
    width: min(88%, 370px);
    padding-left: 7px;
    padding-right: 7px;
  }
  .bank-peek-tray .card { margin-left: -13px; }
}


/* === v2.8.5 desktop trade lane hotfix ===
   JS pins these panels between the visible Top and Bottom Trading Floors.
   The panel itself never extends across either player's selectable cards. */
@media (min-width: 700px) {
  #tradePanel,
  #incomingTradePanel {
    height: auto;
    min-height: 0;
    overflow-y: auto;
  }
}


/* === v2.8.5 incoming-trade no-scroll compact pass ===
   Keep the desktop incoming trade panel inside the live lane between Top's
   Trading Floor and the player's Trading Floor without needing a scrollbar. */
@media (min-width: 700px) {
  #incomingTradePanel {
    padding: 6px;
    overflow-y: hidden;
  }

  #incomingTradePanel h2 {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.1;
  }

  #incomingTradePanel .trade-response-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 4px;
  }

  #incomingTradePanel .trade-response-row button {
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
  }

  /* Override the older two-column !important rule: these were explicitly
     requested to be stacked on desktop. */
  #incomingTradePanel .compact-trade-grid {
    grid-template-columns: 1fr !important;
    gap: 4px;
    margin: 4px 0 0;
  }

  #incomingTradePanel .trade-bucket {
    padding: 4px 5px;
    border-radius: 8px;
  }

  #incomingTradePanel .trade-bucket-label {
    margin-bottom: 2px;
    font-size: 8px;
    line-height: 1.1;
  }

  #incomingTradePanel .card-strip {
    min-height: 34px;
    gap: 3px;
  }

  #incomingTradePanel .card.mini-card {
    width: 25px;
    height: 34px;
    padding: 2px;
    font-size: 8px;
    border-radius: 4px;
  }

  #incomingTradePanel .card.mini-card .pip {
    font-size: 11px;
  }

  #incomingTradePanel .card-strip-empty {
    font-size: 9px;
  }
}


/* v2.8.8.2 — in-game versioning / changelog */
.credits-content{overflow-y:auto;min-height:0;padding:2px 0 12px}
.credits-version-link{align-self:center;margin:0 auto 4px;padding:6px 12px;font-size:.86em;opacity:.86}
.credits-version-link:hover,.credits-version-link:focus-visible{opacity:1}
.version-log-card{max-width:620px}
.version-log-content{overflow-y:auto;min-height:0;padding:12px 16px 16px}
.version-log-entry{padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035)}
.version-log-entry h3{margin:0 0 8px}
.version-log-entry ul{margin:0;padding-left:20px}
.version-log-entry li+li{margin-top:6px}


/* Abundance: a deliberately overcrowded hoard of suit symbols. */
.cardback-abundance,.cardback-preview.cardback-abundance{
  --back-bg:radial-gradient(circle at 28% 18%,rgba(255,255,255,.08),transparent 20%),repeating-linear-gradient(35deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),linear-gradient(145deg,#261c2f,#17121f 55%,#0f0d14);
  --back-fg:#f3df9b;--back-border:#9f7e45;
  position:relative;overflow:hidden;
}
.cardback-abundance .q-mark,.cardback-preview.cardback-abundance .q-mark{display:none!important;}
.bank.cardback-abundance::after,.draw.cardback-abundance::after,.cardback-preview.cardback-abundance::after,.unlock-preview.cardback-abundance::after,.leaderboard-cardback.cardback-abundance::after,.cardback-abundance .draw-deal-back::after,.cardback-abundance .ace-deal-back::after{
  content:'♠ ♥ ♦ ♣  ♦ ♣ ♠ ♥  ♥ ♠ ♣ ♦  ♣ ♦ ♥ ♠  ♠ ♦ ♥ ♣';
  position:absolute;inset:-8% -6%;display:flex;align-items:center;justify-content:center;
  white-space:normal;text-align:center;line-height:.78;font-size:1.05em;font-weight:900;letter-spacing:-.08em;
  color:#f3df9b;text-shadow:9px 4px 0 #b33b42,-8px -5px 0 #466fb0,3px 10px 0 #d0aa3e,-4px 1px 5px rgba(0,0,0,.85);
  transform:rotate(-7deg) scale(1.22);opacity:.96;pointer-events:none;
}
.cardback-preview.cardback-abundance::after,.unlock-preview.cardback-abundance::after{font-size:1.55em;line-height:.72;}
.cardback-abundance .draw-deal-back,.cardback-abundance .ace-deal-back,.leaderboard-cardback.cardback-abundance{position:relative;overflow:hidden;}
/* 3.2.1: Abundance's decorative root uses position:relative, but the temporary
   deal ghosts must stay viewport-positioned for the fly-out animation. */
.draw-deal-card.cardback-abundance,.ace-deal-card.cardback-abundance{position:fixed;}

/* 2.9.3 hidden Cloud Save logout target: looks like text, not a normal button. */
.cloud-save-secret-link{appearance:none;border:0;background:none;color:inherit;font:inherit;font-weight:800;padding:0;margin:0;cursor:pointer;text-decoration:none;box-shadow:none}
.cloud-save-secret-link:hover,.cloud-save-secret-link:focus-visible{text-decoration:underline;background:none;transform:none}


/* === v2.9.4 live-game iPhone fit pass ===
   The main table should fit in the usable mobile viewport without scrolling.
   Long-form overlays (Profile, Rules, Settings, etc.) keep their own scrolling. */
@media (max-width: 699px) {
  html.ios-device body.game-active:not(.overlay-open) .app {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: 0;
  }
  html.ios-device body.game-active:not(.overlay-open) .controls {
    position: static;
    flex: 0 0 auto;
    margin: 4px auto 0;
    padding: 4px;
  }
  html.ios-device body.game-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((100svh - 166px - env(safe-area-inset-bottom, 0px)) * .83));
    max-width: calc(100% + 6px);
    margin: 4px auto 5px;
  }
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) .app {
    overflow: hidden;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((62svh - 116px - env(safe-area-inset-bottom, 0px)) * .83));
    margin-top: 3px;
    margin-bottom: 3px;
  }
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) #pendingPanel,
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) #tradePanel,
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) #incomingTradePanel,
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) #resultsPanel {
    max-height: min(38svh, 300px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 699px) and (max-height: 650px) {
  html.ios-device body.game-active:not(.overlay-open) .top-actions { gap: 5px; }
  html.ios-device body.game-active:not(.overlay-open) .top-actions button { min-height: 36px; padding: 6px 9px; }
  html.ios-device body.game-active:not(.overlay-open) .statusbar { margin: 5px 0 4px; height: 38px; padding: 4px 6px; }
  html.ios-device body.game-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((100svh - 152px - env(safe-area-inset-bottom, 0px)) * .83));
  }
  html.ios-device body.game-active:not(.overlay-open) .controls button { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
}


/* === 3.0 fresh-visit startup splash ===
   Uses the same two-overlaid-Q construction as Quarta card backs.
   It is CSS-only and runs once when this document loads; there is deliberately
   no visibilitychange/focus listener, so returning to an inactive tab does not replay it. */
.startup-splash{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.045),transparent 50%),
    radial-gradient(circle at center,#123f42,#0d3133);
  animation:startupSplashOut 3.35s ease forwards;
}
.startup-splash::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 130px rgba(0,0,0,.28);
}
.startup-splash-brand{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translateY(-1.5vh);
}
.startup-splash-hero-q{
  width:clamp(210px,39vw,350px);
  height:clamp(210px,39vw,350px);
  display:grid;
  place-items:center;
  color:#d2ad63;
  opacity:0;
  transform:scale(.92);
  animation:startupMarkIn .72s cubic-bezier(.2,.8,.2,1) .10s forwards;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.28)) drop-shadow(0 0 14px rgba(210,173,99,.10));
}
.startup-splash-hero-q .q-mark{font-size:clamp(210px,39vw,350px);text-shadow:none;}
.startup-splash-wordmark{
  display:flex;
  align-items:center;
  margin-top:5px;
  color:#f2eee5;
  font-size:clamp(24px,4.2vw,48px);
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
  text-shadow:0 2px 10px rgba(0,0,0,.34);
  animation:startupTitleIn .60s ease .60s forwards;
}
.startup-word-q{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:.84em;
  height:1em;
  margin-right:.42em;
  letter-spacing:0;
}
.startup-word-q .q-mark{font-size:1em;font-family:inherit;font-weight:inherit;text-shadow:none;}
.startup-word-rest{letter-spacing:.42em;}

/* === 3.1 desktop splash wordmark Q overlap ===
   Keep the original two complete Q glyphs. The rotated glyph sits slightly
   high in the sans-serif line box on desktop, so lower that whole Q until
   its bowl is directly over the base Q. No clipping or masking. */
@media (min-width:769px) and (hover:hover) and (pointer:fine){
  .startup-word-q .q-flip{
    transform:translateY(.125em) rotate(180deg);
  }
}
.startup-splash-line{
  margin-top:13px;
  width:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#d2ad63,transparent);
  opacity:.78;
  animation:startupLineIn .72s ease .84s forwards;
}
.startup-splash-suits{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(17px,4vw,31px);
  margin-top:14px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,3.5vw,34px);
  line-height:1;
  opacity:0;
  transform:translateY(6px);
  animation:startupSuitsIn .55s ease 1.05s forwards;
}
.startup-suit{display:inline-grid;place-items:center;width:1em;height:1em;text-shadow:0 2px 6px rgba(0,0,0,.24);}
.startup-suit-red{color:#b72e35;}
.startup-suit-black{
  color:#080a0c;
  -webkit-text-stroke:.45px rgba(210,173,99,.55);
  text-shadow:0 1px 0 rgba(210,173,99,.18),0 2px 6px rgba(0,0,0,.32);
}
@keyframes startupMarkIn{0%{opacity:0;transform:scale(.92)}70%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes startupTitleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes startupLineIn{from{width:0}to{width:min(46vw,260px)}}
@keyframes startupSuitsIn{from{opacity:0;transform:translateY(6px)}to{opacity:.92;transform:translateY(0)}}
@keyframes startupSplashOut{0%,75%{opacity:1;visibility:visible;pointer-events:auto}100%{opacity:0;visibility:hidden;pointer-events:none}}
@media(max-height:600px){
  .startup-splash-hero-q{width:min(43vh,250px);height:min(43vh,250px)}
  .startup-splash-hero-q .q-mark{font-size:min(43vh,250px)}
  .startup-splash-wordmark{font-size:min(6vh,34px)}
  .startup-splash-suits{font-size:min(4.4vh,25px);margin-top:10px}
  .startup-splash-line{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .startup-splash{animation-duration:.9s;animation-delay:0s}
  .startup-splash-hero-q,.startup-splash-wordmark,.startup-splash-line,.startup-splash-suits{animation-duration:.01ms!important;animation-delay:0ms!important;opacity:1;transform:none}
  .startup-splash-line{width:min(46vw,260px)}
}

/* === 3.0.2 unlock announcement priority === */
#unlockOverlay {
  z-index: 3000;
  cursor: pointer;
}
.unlock-card {
  position: relative;
  cursor: pointer;
}
.unlock-dismiss {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--border);
}
\n\n/* === 3.0.4 iPhone trade-selection table usability ===\n   During an outgoing/counter trade, preserve the table at full mobile width\n   instead of using the generic priority-panel shrink. The trade panel may\n   scroll below it, but the seats/floors remain spatially separated and every\n   visible card remains reachable. Non-trade gameplay keeps the 2.9.4 iPhone\n   no-scroll fit, and Android is untouched because these rules require ios-device. */\n@media (max-width: 699px) {\n  html.ios-device body.game-active.trade-selection-active:not(.overlay-open) .app {\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));\n    scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));\n  }\n  html.ios-device body.game-active.priority-panel-active.trade-selection-active:not(.overlay-open) .table {\n    width: calc(100% + 6px);\n    max-width: calc(100% + 6px);\n    margin: 4px -3px 6px;\n  }\n  html.ios-device body.game-active.priority-panel-active.trade-selection-active:not(.overlay-open) #tradePanel {\n    max-height: none;\n    overflow: visible;\n  }\n}\n
/* === 3.0.5 iPhone center-panel gameplay layout ===
   Android remains unchanged. On iPhone, Place card and Build/Counter trade use
   the desktop interaction model: temporary controls float over the quiet center
   of the table instead of living below it. The table therefore keeps exactly
   its normal iPhone dimensions, selectable Trading Floor cards do not collapse
   inward, and Safari bottom chrome cannot create a gameplay scrollbar. */
@media (max-width: 699px) {
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) .app {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: 0;
  }

  /* Override the generic priority-panel table shrink. Opening either panel must
     not alter the board geometry at all. */
  html.ios-device body.game-active.priority-panel-active.ios-center-panel-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((100svh - 166px - env(safe-area-inset-bottom, 0px)) * .83));
    max-width: calc(100% + 6px);
    margin: 4px auto 5px;
  }

  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingPanel,
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #tradePanel {
    position: fixed;
    left: 50%;
    top: 50svh;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 105;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    box-shadow: 0 18px 48px rgba(0,0,0,.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* Placement is deliberately short and wide: the card remains readable while
     Bank / Trading Floor stay one tap away without consuming vertical space. */
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingPanel {
    width: min(64vw, 250px);
    padding: 8px;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingPanel h2 {
    margin-bottom: 4px;
    font-size: 14px;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingCard {
    margin: 3px 0 7px;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingCard .card {
    width: 46px;
    height: 66px;
    font-size: 12px;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingCard .pip {
    font-size: 20px;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingPanel .row {
    gap: 6px;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) #pendingPanel .row button {
    min-width: 0;
    min-height: 36px;
    padding: 6px 7px;
    font-size: 12px;
  }

  /* Trade builder stays compact so the surrounding Trading Floors remain
     exposed and tappable. Give/Get stay side-by-side to minimize height. */
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel {
    width: min(66vw, 270px);
    max-height: none;
    padding: 7px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel h2 {
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 1.1;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel p,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .trade-meta {
    margin: 3px 0 5px;
    font-size: 10px;
    line-height: 1.2;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .trade-build-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin: 0 0 5px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .trade-build-actions button {
    min-width: 0;
    min-height: 34px;
    padding: 5px 7px;
    font-size: 11px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .trade-build-actions #cancelTradeBtn {
    min-width: 70px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .compact-trade-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px;
    margin: 4px 0 0;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .trade-bucket {
    min-width: 0;
    padding: 4px;
    border-radius: 7px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .trade-bucket-label {
    margin-bottom: 2px;
    font-size: 8px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .card-strip {
    min-height: 36px;
    gap: 2px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .card.mini-card {
    width: 25px;
    height: 36px;
    padding: 2px;
    font-size: 8px;
    border-radius: 4px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .card.mini-card .pip {
    font-size: 11px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) #tradePanel .card-strip-empty {
    font-size: 9px;
  }
}

@media (max-width: 699px) and (max-height: 650px) {
  html.ios-device body.game-active.priority-panel-active.ios-center-panel-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((100svh - 152px - env(safe-area-inset-bottom, 0px)) * .83));
  }
}


/* === 3.0.6 iPhone Safari center-panel anchoring ===
   3.0.5 proved the correct layout model but iOS Safari could offset fixed
   descendants of the app scroller. JS now portals Place Card / Build Trade to
   body. These final rules make the portal viewport-safe and keep Android and
   desktop untouched. */
@media (max-width: 699px) {
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) > #pendingPanel,
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) > #tradePanel {
    position: fixed !important;
    right: auto !important;
    margin: 0 !important;
    max-width: calc(100vw - 20px);
    z-index: 205;
  }
  html.ios-device body.game-active.ios-center-panel-active:not(.overlay-open) > #pendingPanel {
    width: min(64vw, 250px);
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel {
    width: min(66vw, 270px);
  }
}

/* === 3.0.7 menu/overlay layering regression restore ===
   Keep all top-nav menus above gameplay cards, action panels, banker/trading-floor
   controls, tutorial focus effects, and the iPhone portaled center panels.
   This restores the earlier menu-layering patch without changing gameplay layout. */
#challengesOverlay,
#rulesOverlay,
#statsOverlay,
#settingsOverlay,
#logOverlay,
#setupOverlay,
#creditsOverlay,
#versionLogOverlay {
  z-index: 2600 !important;
}


/* === 3.0.8 iPhone trade-panel card-access fix ===
   Keep the full-size iPhone board and the 3.0.6 Safari portal, but make the
   Build/Counter Trade HUD smaller and less obstructive. JS now dynamically
   parks it in the least-crowded pocket of the table so exposed Trading Floor
   cards remain visible and tappable. Android and desktop are unchanged. */
@media (max-width: 699px) {
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel {
    width: min(58vw, 236px);
    padding: 6px;
    pointer-events: none;
    background: rgba(25, 34, 42, .92);
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel h2,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel p,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel .trade-meta,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel .trade-build-actions,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel .compact-trade-grid,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel button,
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel .trade-bucket {
    pointer-events: auto;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel p {
    white-space: normal;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel .card-strip {
    min-height: 31px;
  }
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel .card.mini-card {
    width: 22px;
    height: 31px;
    font-size: 7px;
  }
}


/* === 3.0.9 iPhone stable-table + bottom trade HUD ===
   The iPhone board now keeps one stable gameplay size regardless of temporary
   priority panels. Build/Counter Trade is a fixed, wide bottom HUD above the
   safe area, out of document flow, so it cannot resize the table or create a
   page scrollbar. Android and desktop remain untouched. */
@media (max-width: 699px) {
  /* Supersede the old priority-panel shrink for every iPhone gameplay panel. */
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((100svh - 166px - env(safe-area-inset-bottom, 0px)) * .83)) !important;
    max-width: calc(100% + 6px) !important;
    margin: 4px auto 5px !important;
  }

  /* Trade controls live at the bottom without taking any layout space.
     The wider shape also reduces height, leaving more of the board exposed. */
  html.ios-device body.game-active.trade-selection-active.ios-center-panel-active:not(.overlay-open) > #tradePanel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 20px), 380px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 205;
  }
}

@media (max-width: 699px) and (max-height: 650px) {
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) .table {
    width: min(calc(100% + 6px), calc((100svh - 152px - env(safe-area-inset-bottom, 0px)) * .83)) !important;
  }
}

/* 3.2: Full Chat lives inside Comms, but opt-in stays buried in Settings. */
.full-chat-composer{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.full-chat-composer.hidden{display:none}
.full-chat-composer input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.2);color:inherit;font:inherit}
.full-chat-composer button{flex:0 0 auto}


/* v3.3 — private opponent suit notes. */
.suspected-suit-popover{
  position:fixed;z-index:260;min-width:190px;padding:10px 11px;
  border:1px solid rgba(210,173,99,.55);border-radius:12px;
  background:rgba(20,28,35,.98);box-shadow:0 10px 30px rgba(0,0,0,.45);
  color:var(--text);text-align:left;
}
.suspected-suit-popover strong{display:block;margin-bottom:8px;color:var(--accent);font-size:.88rem}
.suspected-suit-options{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.suspect-suit-btn{min-width:34px;padding:6px 8px;font-size:18px;line-height:1}
.suspect-suit-btn.red{color:#e45a61}
.suspect-clear-btn{padding:6px 9px;font-size:.78rem}
.suspected-suit-tag{display:inline-block;margin-right:4px;font-weight:900;font-size:.9em;line-height:1}
.suspected-suit-tag.red{color:#e45a61}
.bank.suit-note-target{cursor:pointer}

/* v3.3 — New Game can be dismissed without changing the current match. */
.setup-card{position:relative}
.setup-close-btn{
  position:absolute;right:12px;top:12px;z-index:4;width:34px;height:34px;
  min-width:34px;padding:0;border-radius:10px;font-size:24px;line-height:1;
  display:grid;place-items:center;
}
.setup-card>.setup-copy:first-of-type{padding-inline:38px}

/* Comedian — bright yellow smiley. The Q markup becomes the face so Bank counters remain untouched. */
.cardback-comedian,.cardback-preview.cardback-comedian{
  --back-bg:linear-gradient(135deg,#ffe22a,#ffd313 58%,#ffc90d);
  --back-fg:#080808;--back-border:#f4e6b6;
}
.cardback-comedian .q-layer{display:none!important}
.cardback-comedian .q-mark{
  position:relative;display:block!important;width:78%;height:76%;font-size:0!important;text-shadow:none!important;
}
.cardback-comedian .q-mark::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 31% 31%,#080808 0 9%,transparent 10%),radial-gradient(ellipse at 69% 31%,#080808 0 9%,transparent 10%);
}
.cardback-comedian .q-mark::after{
  content:'';position:absolute;left:50%;top:42%;width:66%;height:34%;transform:translateX(-50%);
  border-bottom:max(3px,.13em) solid #080808;border-radius:0 0 999px 999px;
}

/* Sum — black/green Q-matrix pattern. */
.cardback-sum,.cardback-preview.cardback-sum{
  --back-bg:radial-gradient(circle at center,rgba(32,255,102,.08),transparent 52%),#020503;
  --back-fg:#25ff69;--back-border:#e9e1c9;
}
.cardback-sum .q-layer{display:none!important}
.cardback-sum .q-mark{
  position:relative;display:block!important;width:100%;height:100%;overflow:hidden;font-size:0!important;text-shadow:none!important;
}
.cardback-sum .q-mark::before{
  content:'Q7q14Q1q22Q9q35Q3q48Q5q03Q2q96Q8q51Q4q77Q0q62Q6q19Q2q84Q8q40Q4q73Q1q28Q7q65Q3q90Q9q11Q5q57Q0q32Q6q88Q2q46Q8q04Q4q79Q1q26Q7q61Q3q95Q9q13Q5q54Q0q39Q6q82Q2q47Q8q06Q4q71Q1q29Q7q63Q3q98Q9q16Q5q50Q0q34Q6q87Q2q42Q8q09Q4q75Q1q23Q7q68Q3q91Q9q18Q5q56Q0q30Q6q85Q2q49Q8q02Q4q74Q1q27Q7q60Q3q99Q9q12Q5q53Q0q38Q6q81Q2q45Q8q07Q4q72Q1q24Q7q66Q3q93Q9q17Q5q58Q0q31Q6q89Q2q43Q8q05Q4q76Q1q25Q7q64Q3q97';
  position:absolute;inset:-10%;font-family:'Courier New',ui-monospace,monospace;font-weight:800;
  font-size:clamp(5px,.22em,11px);line-height:1.02;letter-spacing:-.05em;word-break:break-all;overflow:hidden;
  color:#25ff69;text-shadow:0 0 4px rgba(37,255,105,.6);opacity:.74;transform:rotate(-3deg) scale(1.12);
}
.cardback-sum .q-mark::after{
  content:'Q';position:absolute;inset:0;display:grid;place-items:center;font-family:Georgia,'Times New Roman',serif;
  font-size:.78em;font-weight:900;color:rgba(102,255,143,.13);text-shadow:0 0 8px rgba(37,255,105,.16);
}
.bank.cardback-comedian,.bank.cardback-sum{
  background:var(--back-bg)!important;color:var(--back-fg)!important;border-color:var(--back-border)!important;
}


/* === 3.4 desktop docked information panels ===
   This is a conservative enhancement tier only for genuinely roomy,
   mouse/trackpad-style layouts. The existing mobile/tablet/modal behavior is
   untouched. Panels use the empty landscape gutters and never resize the
   proven 540px game column. */
@media (min-width: 1200px) and (min-height: 700px) and (pointer: fine) and (hover: hover) {
  #challengesOverlay,
  #rulesOverlay,
  #statsOverlay,
  #settingsOverlay,
  #logOverlay {
    inset: 0;
    display: block;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }

  #challengesOverlay > .overlay-card,
  #rulesOverlay > .overlay-card,
  #statsOverlay > .overlay-card,
  #settingsOverlay > .overlay-card,
  #logOverlay > .overlay-card {
    position: fixed;
    top: 16px;
    width: min(360px, calc((100vw - 540px) / 2 - 24px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow: auto;
    pointer-events: auto;
    box-shadow: 0 16px 42px rgba(0,0,0,.42);
  }

  /* One shared left dock for passive/reference panels. */
  #challengesOverlay > .overlay-card,
  #rulesOverlay > .overlay-card,
  #statsOverlay > .overlay-card,
  #settingsOverlay > .overlay-card {
    right: calc(50% + 286px);
    left: auto;
  }

  /* History owns the right dock and may remain open with a left panel. */
  #logOverlay > .overlay-card {
    left: calc(50% + 286px);
    right: auto;
  }

  #logOverlay #log {
    max-height: none;
    min-height: 0;
    overflow: auto;
  }
}


/* === 3.4.4 Profile card-back detail preview === */
.cardback-detail-card{max-width:330px;text-align:center}
.cardback-zoom-stage{min-height:228px;display:grid;place-items:center;overflow:hidden;padding:14px 0 18px}
.cardback-zoom-art{grid-row:auto;transform:scale(3.35);transform-origin:center;box-shadow:0 3px 9px rgba(0,0,0,.42)}
@media (max-height:560px){.cardback-zoom-stage{min-height:190px}.cardback-zoom-art{transform:scale(2.75)}}
#cardbackPreviewOverlay{z-index:2700}

/* === 3.5.0 content + online room polish === */
/* Host card-back themes only recolor the established table structure. Solo
   resets these variables to the original palette in UI code. */
.table{
  border-color:var(--table-rail-outer,#654c2a);
  box-shadow:inset 0 0 0 3px var(--table-rail-inner,#ab8547),0 18px 45px rgba(0,0,0,.35);
  background:
    radial-gradient(circle at center,rgba(255,255,255,.04),transparent 50%),
    radial-gradient(circle at center,var(--table-felt,var(--felt)),var(--table-felt-dark,var(--felt-2)));
}
.table-wordmark text{fill:var(--table-wordmark,var(--accent))}

/* Clubs and Spades are intentionally black in the Suspected Suit UI only. */
.suspect-suit-btn.black{color:#050505;background:#ece8df;border-color:#a8a196}
.suspected-suit-tag.black{color:#050505;text-shadow:0 0 1px rgba(255,255,255,.95),0 1px 1px rgba(255,255,255,.55)}

.create-wait-row{margin:10px 0}

/* New 3.5 card backs. Every design still uses the existing overlaid two-Q
   logo markup; these layers supply the earned theme behind it. */
.cardback-static,.cardback-preview.cardback-static{
  --back-bg:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px),var(--static-noise-image),repeating-linear-gradient(90deg,#050505 0 3px,#f4f4f1 3px 5px,#777 5px 7px,#111 7px 10px);
  --back-fg:#f7f7f4;--back-border:#ecece7;
}
.cardback-static{image-rendering:pixelated}
.cardback-static .q-mark{text-shadow:2px 2px 0 #050505,-2px -2px 0 #050505,0 0 7px #000}

.cardback-laluna,.cardback-preview.cardback-laluna{
  --back-bg:
    radial-gradient(circle at 67% 31%,#0b0612 0 12%,transparent 12.7%),
    radial-gradient(circle at 60% 28%,#d9c6ff 0 17%,#9b75d3 17.5% 19%,transparent 19.7%),
    radial-gradient(ellipse at 50% 50%,transparent 0 31%,rgba(215,194,255,.34) 31.5% 32.8%,transparent 33.3% 44%,rgba(129,91,188,.24) 44.5% 45.5%,transparent 46%),
    radial-gradient(circle at 22% 76%,rgba(224,207,255,.7) 0 1.4%,transparent 2.1%),
    radial-gradient(circle at 78% 70%,rgba(224,207,255,.55) 0 1.2%,transparent 1.9%),
    radial-gradient(circle at 28% 18%,rgba(224,207,255,.45) 0 1%,transparent 1.7%),
    linear-gradient(145deg,#09040f,#24113f 48%,#10071d 100%);
  --back-fg:#eadfff;--back-border:#9b75d3;
}
.cardback-laluna .q-mark{text-shadow:0 0 9px rgba(215,194,255,.45),0 2px 2px #08030d}

.cardback-salute,.cardback-preview.cardback-salute{
  --back-bg:
    radial-gradient(circle at center,#fffdf0 0 10%,#ffe66d 10.5% 18%,transparent 18.7%),
    repeating-conic-gradient(from 0deg at 50% 50%,#fff4ad 0 5deg,#f6a623 5deg 12deg,#d95e0d 12deg 18deg,#fff2a2 18deg 23deg),
    radial-gradient(circle at center,#ffbf28 0 48%,#b9430c 75%,#732005 100%);
  --back-fg:#fffdf1;--back-border:#fff0a0;
}
.cardback-salute .q-mark{text-shadow:0 2px 2px #8b2f08,0 0 8px rgba(255,245,180,.65)}

.cardback-gladiator,.cardback-preview.cardback-gladiator{
  --back-bg:
    radial-gradient(ellipse at 22% 24%,#790d0d 0 4%,transparent 4.8%),
    radial-gradient(ellipse at 30% 19%,#790d0d 0 2%,transparent 2.8%),
    radial-gradient(ellipse at 78% 73%,#8b1010 0 4.5%,transparent 5.2%),
    radial-gradient(ellipse at 70% 79%,#8b1010 0 2%,transparent 2.8%),
    radial-gradient(ellipse at center,#d8bf82 0 31%,#8e612c 31.8% 35%,#f0e3bb 35.7% 38%,#9f7435 38.7% 49%,#553017 49.7% 57%,#b8873c 58% 100%);
  --back-fg:#fff3d3;--back-border:#d6ae54;
}
.cardback-gladiator .q-mark{text-shadow:2px 2px 0 #5d3214,0 0 7px #260e05}

.cardback-brain,.cardback-preview.cardback-brain{
  --back-bg:
    repeating-radial-gradient(ellipse at 22% 18%,transparent 0 8px,rgba(101,25,62,.42) 9px 11px,rgba(244,166,196,.35) 12px 14px,transparent 15px 22px),
    repeating-radial-gradient(ellipse at 75% 73%,transparent 0 10px,rgba(255,207,224,.38) 11px 13px,rgba(103,25,61,.35) 14px 16px,transparent 17px 25px),
    radial-gradient(ellipse at 50% 48%,rgba(255,214,229,.22),transparent 52%),
    linear-gradient(145deg,#f0a0bf,#ca638e 52%,#8b335b);
  --back-fg:#ffe0eb;--back-border:#f5b1c9;
}
.cardback-brain .q-mark{text-shadow:2px 2px 0 #752047,0 0 8px #4b1535}

.bank.cardback-static,.bank.cardback-laluna,.bank.cardback-salute,.bank.cardback-gladiator,.bank.cardback-brain{
  background:var(--back-bg)!important;color:var(--back-fg)!important;border-color:var(--back-border)!important;
}

/* The extra Place column should stay readable on narrow phones instead of
   forcing cells into multi-line fragments. */
#results{overflow-x:auto}
.results-table th,.results-table td{white-space:nowrap}
@media(max-width:390px){.results-table{font-size:10px}.results-table th,.results-table td{padding:4px}}


/* === 3.5.1 iPhone endgame-results hotfix ===
   Results are revealed after the final gameplay render, so Safari could retain
   the normal no-scroll layout and clip the entire panel below the viewport.
   On iPhone only, Results is portaled to <body> and anchored above the safe
   area. The table keeps the stable 3.0.9 geometry; the panel itself scrolls. */
@media (max-width: 699px) {
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) > #resultsPanel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(44svh, 360px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 210;
    box-shadow: 0 14px 38px rgba(0,0,0,.58);
  }
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) > #resultsPanel #results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* === 3.6.0 secret Card Backs === */
.cardback-world,.cardback-preview.cardback-world{
  --back-bg:radial-gradient(circle at 23% 19%,rgba(167,224,255,.55) 0 1.2px,transparent 1.8px),radial-gradient(circle at 78% 25%,rgba(167,224,255,.38) 0 1px,transparent 1.7px),radial-gradient(circle at 31% 76%,rgba(167,224,255,.42) 0 1.1px,transparent 1.7px),radial-gradient(circle at 72% 81%,rgba(167,224,255,.38) 0 1px,transparent 1.7px),#030507;
  --back-fg:#1baf61;--back-border:#77c9ee;
}
.cardback-world .q-mark{width:1.35em;height:1.35em;border-radius:50%;background:#8fdcff;box-shadow:0 0 0 .06em rgba(143,220,255,.10),0 0 .28em rgba(104,205,255,.20);color:#1baf61;text-shadow:0 .03em 0 rgba(0,0,0,.20)}
.cardback-world .q-mark::after{content:'';position:absolute;inset:.10em;border-radius:50%;border:.025em solid rgba(0,0,0,.14)}
.cardback-world .q-layer{font-size:.78em}

.cardback-hiya,.cardback-preview.cardback-hiya{
  --back-bg:radial-gradient(circle at 22% 18%,rgba(255,255,255,.15),transparent 16%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 5px,transparent 5px 12px),linear-gradient(145deg,#176e78,#134c66 54%,#142d4c);
  --back-fg:#f5d77d;--back-border:#f5d77d;
}
.cardback-hiya .q-mark{width:1.27em;height:1.38em;background:radial-gradient(circle at 41% 86%,#173d50 0 .045em,transparent .055em),radial-gradient(circle at 50% 86%,#173d50 0 .045em,transparent .055em),radial-gradient(circle at 59% 86%,#173d50 0 .045em,transparent .055em),#fff1d2;border:.055em solid #173d50;border-radius:48% 48% 44% 46%;box-shadow:.07em .08em 0 rgba(5,28,39,.5);color:#f5d77d;text-shadow:none}
.cardback-hiya .q-mark::before{content:'';position:absolute;left:.11em;bottom:-.20em;width:.31em;height:.34em;background:#fff1d2;clip-path:polygon(0 0,100% 0,0 100%);filter:drop-shadow(-.035em .045em 0 #173d50);z-index:1}
.cardback-hiya .q-mark::after{content:'';position:absolute;left:23%;top:12%;width:59%;height:70%;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20112%22%3E%3Cpath%20fill%3D%22%23efbc7e%22%20stroke%3D%22%23173d50%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%20d%3D%22M24%20104%20C18%2097%2015%2089%2016%2079%20L18%2064%20L8%2055%20C3%2050%203%2044%207%2040%20C11%2036%2017%2037%2021%2041%20L28%2048%20L25%2021%20C24%2015%2028%2010%2033%2010%20C39%2010%2042%2014%2042%2020%20L44%2045%20L46%2013%20C46%207%2050%203%2055%203%20C61%203%2064%207%2064%2013%20L62%2044%20L68%2019%20C69%2013%2073%209%2078%2010%20C83%2011%2085%2016%2084%2022%20L78%2049%20L84%2033%20C86%2027%2091%2024%2095%2026%20C99%2028%20100%2033%2098%2039%20L90%2065%20C87%2077%2083%2089%2076%2098%20C69%20107%2060%20110%2047%20110%20C37%20110%2029%20109%2024%20104%20Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23173d50%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%20d%3D%22M30%2068%20C39%2063%2050%2062%2060%2066%20M29%2082%20C37%2079%2045%2079%2052%2082%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transform:rotate(-8deg);filter:drop-shadow(.035em .045em 0 rgba(20,51,62,.22));z-index:2}
.cardback-hiya .q-layer{font-size:.33em;left:108%;top:115%;width:1em;height:1em;color:#f5d77d;opacity:.9;z-index:3;text-shadow:none}
.cardback-hiya .q-base{transform:rotate(0deg)}
.cardback-hiya .q-flip{transform:rotate(180deg)}

.cardback-onea,.cardback-preview.cardback-onea{
  --back-bg:radial-gradient(circle,rgba(0,0,0,.34) 0 1.2px,transparent 1.5px) 0 0/7px 7px,repeating-conic-gradient(from 4deg at 50% 50%,rgba(255,226,74,.82) 0 5deg,transparent 5deg 12deg),linear-gradient(138deg,#ea3f35 0 48%,#d7292c 48% 100%);
  --back-fg:#fff4d5;--back-border:#ffe26a;
}
.cardback-onea .q-mark{width:1.38em;height:1.04em;background:#fffdf5;border:.055em solid #080808;border-radius:52% 45% 50% 43%;box-shadow:.07em .085em 0 rgba(0,0,0,.74);transform:rotate(-3deg);color:#fffdf5;text-shadow:none}
.cardback-onea .q-mark::before{content:'@#$%!';position:absolute;inset:0;display:grid;place-items:center;color:#080808;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:.31em;font-weight:900;letter-spacing:-.035em;white-space:nowrap;transform:rotate(2deg)}
.cardback-onea .q-mark::after{content:'1A';position:absolute;right:-.23em;bottom:-.72em;width:.48em;height:.48em;border-radius:50%;display:grid;place-items:center;background:#080808;color:#ffe26a;border:.025em solid #fffdf5;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:.52em;letter-spacing:.02em;box-shadow:.03em .04em 0 rgba(0,0,0,.48);z-index:5}
.cardback-onea .q-layer{font-size:.39em;left:-.25em;top:2.52em;width:1em;height:1em;color:#fffdf5;text-shadow:.06em .06em 0 #080808;z-index:4}
.cardback-onea .q-base{transform:rotate(0deg)}
.cardback-onea .q-flip{transform:rotate(180deg)}

.bank.cardback-world,.bank.cardback-hiya,.bank.cardback-onea{background:var(--back-bg)!important;color:var(--back-fg)!important;border-color:var(--back-border)!important}

.rating-help-inline{display:inline-flex;align-items:center;white-space:nowrap}
.rating-help-btn{appearance:none;display:inline;padding:0;margin:0 0 0 3px;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1;vertical-align:-1px;cursor:pointer;opacity:.82}
.rating-help-btn:hover,.rating-help-btn:focus-visible{opacity:1;outline:none;text-decoration:none}
.credits-special-thanks{margin:4px 0 0;padding-left:20px;color:var(--text)}
.credits-special-thanks li{margin:3px 0}


/* === 3.6.2 iPhone Safari incoming-trade viewport anchoring ===
   Incoming Trade is portaled to <body> on iPhone and pinned to the live visual
   viewport so Safari's moving bottom toolbar cannot cover the offer details.
   The table keeps its existing 3.0.9 sizing; Android and desktop are untouched. */
@media (max-width: 699px) {
  html.ios-device body.game-active.priority-panel-active:not(.overlay-open) > #incomingTradePanel {
    position: fixed !important;
    width: min(calc(100vw - 20px), 430px);
    margin: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 205;
    box-shadow: 0 16px 42px rgba(0,0,0,.48);
  }
}