:root {
  --bg: #19172f;
  --top: #19172f; /* iOS Safari tints the status bar with it */
  --bg2: #221f3e;
  --panel: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.14);
  --text: #f6f3ff;
  --muted: #b3acd6;
  --up: #2ec4b6;
  --down: #ff6b4a;
  --accent: #ffcb47;
  --stop: #ff4d6d;
  --go: #4ade80;
  --mine: #ffb020; /* the softer pile signal: amber, between Stop's red and go-ahead green */
  --speak: #4cc9f0; /* someone talking in voice chat */
  --radius: 14px;
  --r: 8px; /* buttons, inputs, chips */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--top, var(--bg)); }
body {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
button, input { font: inherit; }

.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 12px 18px;
  border-radius: var(--r);
  cursor: pointer;
  font-weight: 600;
  transition: transform .08s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--bg); border-color: transparent; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.ghost { background: transparent; }

/* Home / lobby */
.screen { min-height: 100%; }
#home, #lobby { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px 16px; }
.home-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 22px;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-mark { width: clamp(96px, 30vw, 132px); height: auto; }
.logo { margin: 0; text-align: center; font-size: clamp(30px, 10vw, 48px); white-space: nowrap; line-height: 1; font-weight: 700; color: var(--text); }
.top-mark { width: 38px; height: auto; vertical-align: middle; margin-right: 10px; }
.room { display: flex; align-items: center; gap: 4px; }
/* The light-background version of the mark is only for Paper & Ink. */
.mark-light { display: none; }
html[data-theme="paper"] .mark-light { display: inline-block; }
html[data-theme="paper"] .mark-dark { display: none; }
.tag { text-align: center; margin: 0; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
input {
  background: rgba(0,0,0,.25); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r); padding: 12px 14px; outline: none; min-width: 0;
}
input:focus { border-color: var(--accent); }
.or { text-align: center; color: var(--muted); font-size: 13px; position: relative; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; }
#codeInput { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }
.rules { color: var(--muted); font-size: 14px; }
.rules summary { cursor: pointer; color: var(--text); }
.rules li { margin: 6px 0; }
.chip { padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #111; }
.chip.stop { background: var(--stop); }
.chip.go { background: var(--mine); }
.bigcode { font: inherit; font-size: 64px; font-weight: 700; letter-spacing: .15em; text-align: center; color: var(--accent); background: none; border: 0; padding: 0; line-height: 1.1; cursor: copy; }
.lobby-head { text-align: center; }
.lobby-head h2 { margin: 0; font-size: 26px; }
.lobby-status { margin: 6px 0 0; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--go); flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.invite-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px 16px; background: rgba(0,0,0,.15); }
.invite-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.invite-how { margin: 0; font-size: 14px; color: var(--muted); }
.invite-how b { color: var(--text); font-weight: 600; }
.seat-count { font-size: 14px; font-weight: 400; margin-left: 4px; }
.wait-host { margin: 0; text-align: center; color: var(--muted); }
.lobby-players { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-players li { background: rgba(0,0,0,.2); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; }
.lobby-players li.open-seat { background: none; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.lobby-players li.arrived { animation: arrive 1.4s ease-out; }
@keyframes arrive { from { box-shadow: 0 0 0 2px var(--go); } to { box-shadow: 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .pulse, .lobby-players li.arrived { animation: none; } }
h3 { margin: 6px 0 0; }

/* Table */
#table { display: flex; justify-content: center; height: 100dvh; }
.table-main { flex: 1; min-width: 0; max-width: 1100px; display: flex; flex-direction: column; padding: 0 12px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 8px; }
.room { color: var(--muted); }
.room b { color: var(--accent); letter-spacing: .1em; }
.deck { display: flex; align-items: center; gap: 8px; font-weight: 700; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 5px 14px 5px 10px; }
#deckCount { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.deck small { color: var(--muted); font-weight: 600; font-size: 13px; }
.deck.low { border-color: var(--stop); }
.deck.low #deckCount, .deck.low small { color: var(--stop); }
.deck.empty { opacity: .75; }
.deck-icon { width: 22px; height: 30px; border-radius: 4px; background: repeating-linear-gradient(45deg, #ff6b4a 0 4px, #ffcb47 4px 8px); box-shadow: 2px 2px 0 rgba(255,255,255,.3); }
.badge { background: var(--stop); border-radius: 999px; padding: 0 6px; font-size: 12px; margin-left: 4px; }

/* Players: avatars in turn order, five fit on a phone without scrolling. */
.players { display: grid; grid-template-columns: repeat(var(--seats, 5), minmax(0, 76px)); justify-content: center; gap: 6px; padding: 10px 0 2px; }
.seat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.seat { --av: 40px; }
.seat .avatar { position: relative; width: var(--av); height: var(--av); font-size: calc(var(--av) * .43); transition: transform .2s; }
.seat.current .avatar { transform: scale(1.18); box-shadow: 0 0 0 3px var(--bg, #14122b), 0 0 0 6px var(--accent); }
.seat.offline { opacity: .45; }
.seat .cnt { position: absolute; right: -6px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.seat .ai-dot { position: absolute; left: -6px; top: -4px; padding: 0 4px; height: 15px; border-radius: 999px; background: #6c5ce7; color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; letter-spacing: .03em; }
/* Every name sits clear of the current player's enlarged, ringed avatar (scale 1.18 plus a 6px ring), so names line up. */
.seat .pname { max-width: 100%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: calc(var(--av) * .09 + 8px); }
.seat.current .pname { color: var(--accent); font-weight: 700; }
.seat-tag { font-size: 11px; line-height: 1; min-height: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.seat-tag.now { color: var(--accent); }
.seat-tag.hold { color: var(--accent); }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #111; font-size: 13px; }

/* The rows above the piles keep fixed heights, so the cards don't jump as they change. */
.banner-row { position: relative; }
.topbar, .players, .banner-row, .turn-summary, .hand-area { flex-shrink: 0; }
.hand-actions .btn { white-space: nowrap; }
.turn-banner { text-align: center; padding: 8px 0 4px; font-size: 18px; height: 36px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn-banner b { color: var(--accent); }

.piles { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: center; padding: 6px 0; max-width: 1000px; }
.pile {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-radius: var(--radius); padding: 10px 4px; border: 2px dashed transparent;
  transition: border-color .15s, background .15s;
}
.pile .label { font-size: 13px; font-weight: 600; letter-spacing: .05em; }
.pile.up .label { color: var(--up); }
.pile.down .label { color: var(--down); }
/* Piles the picked card fits on. Drawn from the theme's text colour, so it shows on light tables too. */
.pile.legal { border-color: color-mix(in srgb, var(--text) 45%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); cursor: pointer; }
.pile.trick { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pile.legal:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }
.pile .stack { position: relative; }
.pile .count { color: var(--muted); font-size: 12px; }
/* Signal pills: one per player, stacked, each as wide as the pile's buttons. */
.signals { display: flex; flex-direction: column; gap: 3px; justify-content: flex-start; min-height: calc(var(--sig-rows, 1) * 21px - 3px); width: 100%; max-width: 104px; margin: 0 auto; box-sizing: border-box; }
.sigtag { display: block; height: 18px; line-height: 18px; text-align: center; font-size: 11px; padding: 0 6px; border-radius: 4px; color: #111; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.sigtag.stop { background: var(--stop); }
.sigtag.go { background: var(--mine); }
.sigbtns { display: flex; gap: 4px; }
.sigbtns button { white-space: nowrap; font-size: 12px; padding: 5px 10px; min-height: 28px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.sigbtns button.on.stop { background: var(--stop); color: #111; border-color: transparent; }
.sigbtns button.on.go { background: var(--mine); color: #111; border-color: transparent; }

/* Cards */
.card {
  --h: 200;
  width: 72px; height: 104px; border-radius: 9px; position: relative; flex: 0 0 auto;
  background: hsl(var(--h) 62% 50%);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  display: grid; place-items: center;
  color: #fff; font-weight: 600; --fs: 30px; font-size: calc(var(--fs) * var(--fs-scale, 1));
  user-select: none;
}
.card::before, .card::after {
  content: attr(data-n); position: absolute; font-size: 12px; text-shadow: none; opacity: .9;
}
.card::before { top: 6px; left: 8px; }
.card::after { bottom: 6px; right: 8px; transform: rotate(180deg); }
.card.start { background: var(--bg2); box-shadow: inset 0 0 0 2px var(--line); --fs: 26px; }
.pile.up .card.start { color: var(--up); }
.pile.down .card.start { color: var(--down); }
.card.flash { animation: flash .5s ease-out; }
@keyframes flash { from { transform: scale(1.25) rotate(-6deg); } to { transform: none; } }

.hand-area {
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.hand-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.turn-info { color: var(--muted); font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hold-btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#endTurnBtn { margin-left: auto; }
.hold-btn.on { background: var(--accent); color: var(--bg); border-color: transparent; }
.think-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 14px; border-radius: var(--r); font-size: 14px; font-weight: 600; background: var(--accent); color: var(--bg); }
.hand { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 104px; }
.hand .card { cursor: pointer; transition: transform .12s; }
.hand .card:hover { transform: translateY(-4px); }
.hand .card.sel { transform: translateY(-14px); box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 4px var(--accent); }
.hand .card.dead { filter: saturate(.3) brightness(.7); }
.hand.waiting .card { cursor: default; }

/* Chat */
.chat {
  position: fixed; right: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); height: min(460px, 70dvh);
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; z-index: 20;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-head small { color: var(--muted); flex: 1; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 15px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.chat-log .sys { color: var(--muted); font-style: italic; font-size: 13px; text-align: center; }
.msg { max-width: 85%; align-self: flex-start; background: rgba(255,255,255,.09); padding: 6px 10px; border-radius: 14px 14px 14px 4px; word-wrap: break-word; }
.msg .who { display: block; font-size: 12px; font-weight: 600; color: var(--accent); }
.msg.mine { align-self: flex-end; background: #4b4192; border-radius: 14px 14px 4px 14px; }
.quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 0; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick button {
  flex: 0 0 auto; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text);
  border-radius: var(--r); padding: 6px 12px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.quick button:active { background: rgba(255,255,255,.18); }
.chat-form { display: flex; gap: 6px; padding: 10px; }
/* 16px keeps iOS from zooming the page when the input is focused. */
.chat-form input { flex: 1; padding: 10px 14px; font-size: 16px; }
.chat-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(10,8,25,.35); }
.chat-peek {
  position: fixed; left: 50%; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 0px)); transition: transform .2s ease-out, opacity .2s; touch-action: none; top: calc(56px + env(safe-area-inset-top)); z-index: 18;
  max-width: min(420px, calc(100vw - 32px)); background: #2b2752; color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 14px; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); line-height: 1.35; width: max-content;
  animation: peek .25s ease-out;
}
.chat-peek b { color: var(--accent); }
/* The whole message, up to six lines (chat messages max out around there); tap to read in chat. */
.peek-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; overflow-wrap: anywhere; }
@keyframes peek { from { opacity: 0; transform: translate(-50%, -10px); } }

/* Modal + toast */
.modal { position: fixed; inset: 0; background: rgba(10,8,25,.7); display: grid; place-items: center; z-index: 30; padding: 16px; }
.modal-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 28px 22px; max-width: 380px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.modal-card h2 { margin: 0; font-size: 32px; }
.toast {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 40;
  background: #fff; color: #111; padding: 10px 16px; border-radius: var(--r); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  max-width: calc(100vw - 32px); text-align: center;
}

@media (max-width: 560px) {
  .deck { padding: 4px 10px 4px 8px; gap: 6px; }
  #deckCount { font-size: 22px; }
  .deck small { display: none; }
  .deck.empty small { display: inline; }
  .topbar .btn { white-space: nowrap; }
  .deck-icon { width: 16px; height: 22px; }
  .card { width: min(54px, calc((100vw - 60px) / 8)); height: auto; aspect-ratio: 54 / 80; --fs: 20px; border-radius: 7px; }
  .pile .card { width: 54px; --fs: 22px; }
  .card.start { --fs: 20px; }
  .card::before, .card::after { font-size: 10px; }
  .hand { gap: 4px; min-height: 80px; flex-wrap: nowrap; }
  .piles { gap: 4px; }
  .pile { padding: 8px 2px; }
  .sigbtns { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; padding: 0 2px; box-sizing: border-box; }
  .signals { max-width: none; padding: 0 2px; }
  .sigbtns button { font-size: 13px; font-weight: 600; min-height: 36px; padding: 6px 2px; }
  .seg button { padding: 6px 9px; }
  /* Chat becomes a full-width sheet sized to the visible viewport, so the
     input stays above the on-screen keyboard (vars set from visualViewport). */
  .chat {
    left: 0; right: 0; bottom: auto; width: auto;
    top: calc(var(--vv-top, 0px) + 12vh); height: calc(var(--vv-h, 100dvh) - 12vh);
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .chat.typing { top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); border-radius: 0; padding-bottom: 0; }
  .chat-head { padding: 12px 14px; }
}
body.chat-open { overflow: hidden; }

/* AI players */
.bot-setup { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text);
  border-radius: var(--r); padding: 7px 12px; font-size: 14px; cursor: pointer;
}
.chips button:disabled { opacity: .35; cursor: default; }
.saved-box { display: flex; flex-direction: column; gap: 6px; }
.saved-head { margin: 0; font-size: 14px; }
.saved-head .muted { font-size: 13px; margin-left: 4px; }
.saved-chip { display: inline-flex; }
.chips .saved-chip button { border-color: var(--accent); }
.chips .saved-chip button:first-child { border-radius: var(--r) 0 0 var(--r); border-right-width: 0; }
.chips .saved-chip .del { border-radius: 0 var(--r) var(--r) 0; padding-left: 8px; padding-right: 10px; color: var(--muted); }
.save-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.save-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.chips button:not(:disabled):active { background: rgba(255,255,255,.18); }
.custom-form { display: flex; flex-direction: column; gap: 8px; }
.custom-form textarea {
  background: rgba(0,0,0,.25); border: 1px solid var(--line); color: var(--text); border-radius: var(--r);
  padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; outline: none;
}
.custom-form textarea:focus { border-color: var(--accent); }
.small-note { font-size: 13px; margin: 0; }
.lobby-players .ai-tag { font-size: 11px; background: #6c5ce7; color: #fff; border-radius: 4px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.lobby-players .pdesc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lobby-players .rm { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.speed-row > span { white-space: nowrap; }
.speed-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; color: var(--muted); }
/* Label sits above a full-width picker so wide fonts (LCD's Silkscreen)
   can't push "Quick" off the edge on phones. */
.speed-row .seg { display: flex; }
.speed-row .seg button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.seg { display: inline-flex; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { white-space: nowrap; border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 7px; font: inherit; font-size: 14px; cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--bg); font-weight: 600; }
.seg button:disabled { cursor: default; }
/* Paused: the bar says so and the pauser's tag reads "paused", all still. */
/* A bot taking its turn: its ring breathes and the banner's dots bounce, unless the table is paused. */
.seat.current.ai .avatar { animation: ring-breathe 1.6s ease-in-out infinite; }
.players.paused .seat.current.ai .avatar { animation: none; }
@keyframes ring-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--bg, #14122b), 0 0 0 6px var(--accent); }
  50% { box-shadow: 0 0 0 3px var(--bg, #14122b), 0 0 0 6px var(--accent), 0 0 18px 8px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.turn-banner .dots i { font-style: normal; display: inline-block; animation: dot-bounce 1.2s ease-in-out infinite; }
.turn-banner .dots i:nth-child(2) { animation-delay: .15s; }
.turn-banner .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes soft-fade { 50% { opacity: .55; } }
/* Reduced motion: no movement or growing glows, just a gentle fade. */
@media (prefers-reduced-motion: reduce) {
  .turn-banner .dots i { animation: none; }
  .seat.current.ai .avatar { animation: soft-fade 1.6s ease-in-out infinite; }
}
.seat .typing-dots::after { content: '…'; color: var(--accent); font-weight: 700; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.typing-line { min-height: 0; padding: 0 14px; font-size: 13px; color: var(--muted); font-style: italic; }
.typing-line:not(:empty) { padding-bottom: 4px; }
.msg.botmsg .who::after { content: ' · bot'; color: var(--muted); font-weight: 400; }
.standin-bar {
  margin-top: 8px; background: rgba(255,203,71,.12); border: 1px solid rgba(255,203,71,.4);
  border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px;
}
.standin-bar .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.standin-bar .row div { display: flex; gap: 6px; }

/* Accounts */
.account-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 14px; margin: -8px -4px 0; }
.auth-card { text-align: left; position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; }
.auth-card h2 { font-size: 26px; text-align: center; }
.close-x { position: absolute; top: 12px; right: 12px; }
.oauth { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border-color: transparent; }
.oauth .oauth-ico { font-weight: 700; width: 18px; text-align: center; }
#appleBtn { background: #000; color: #fff; border-color: #333; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input { font-size: 16px; }
.auth-actions { display: flex; gap: 8px; }
.auth-actions .btn { flex: 1; }
.link-btn { background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; padding: 2px; text-align: center; }
.auth-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.35); font-size: 14px; }
.auth-msg.err { background: rgba(255,77,109,.12); border-color: rgba(255,77,109,.4); }
.plan-box { display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,.2); border-radius: 12px; padding: 14px; }
.plan-box h3 { margin: 0; }
.plan-box ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.plan-box .price-row { display: flex; gap: 8px; }
.plan-box .price-row .btn { flex: 1; padding: 10px 8px; }
.pro-lock { font-size: 11px; font-weight: 700; background: var(--accent); color: var(--bg); border-radius: 4px; padding: 1px 7px; margin-left: 6px; }

/* Desktop: chat pinned open as a sidebar beside the table. */
.pin-btn { display: none; }
@media (min-width: 900px) {
  .pin-btn { display: inline-block; }
  body.chat-pinned .chat {
    position: sticky; top: 0; right: auto; bottom: auto; flex: 0 0 340px; width: 340px; height: 100dvh;
    border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; z-index: 1;
  }
  body.chat-pinned .chat-backdrop, body.chat-pinned .chat-peek { display: none !important; }
  body.chat-pinned .pin-btn { background: var(--accent); color: var(--bg); border-color: transparent; }
}

/* Short phones: tighter piles so the hand stays on screen. */
@media (max-width: 560px) and (max-height: 720px) {
  .players { padding-top: 4px; }
  .pile { padding: 4px 2px; gap: 4px; }
  .sigbtns { gap: 4px; }
  .sigbtns button { min-height: 32px; padding: 4px 2px; }
  .hand-actions { margin-bottom: 6px; }
}

/* Summary of the last completed turn */
.turn-summary { display: flex; justify-content: center; align-items: center; height: 34px; }
.turn-summary .ts {
  display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; justify-content: center; gap: 6px 8px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 4px 4px;
  font-size: 14px; color: var(--muted); max-width: 100%;
}
.turn-summary .ts.fresh { animation: tsIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes tsIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.turn-summary .ts .avatar { width: 24px; height: 24px; font-size: 12px; flex: none; position: relative; overflow: hidden; } /* never squeezed by a long turn */
.turn-summary .ts b { color: var(--text); font-weight: 600; }
.turn-summary .ts > span:not(.avatar):not(.mini) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.turn-summary .ts .mini { flex: 0 0 auto; }
.mini {
  --h: 200; display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 7px; border-radius: 7px;
  background: hsl(var(--h) 62% 50%);
  color: #fff; font-weight: 700; font-size: 13px;
}
.mini small { font-size: 10px; font-weight: 600; opacity: .9; }
.mini.trick { box-shadow: 0 0 0 2px var(--accent); }

.bot-upsell { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: rgba(255,203,71,.08); border: 1px solid rgba(255,203,71,.35); border-radius: 14px; padding: 12px 14px; }
.bot-upsell p { margin: 0; font-size: 14px; color: var(--muted); }
.bot-upsell b { color: var(--text); }

/* Chat / History tabs */
.tabs { display: inline-flex; background: rgba(0,0,0,.25); border-radius: 10px; padding: 3px; }
.tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 7px; cursor: pointer; }
.tabs button.on { background: rgba(255,255,255,.14); color: var(--text); }
.history-log { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.history-log .empty { color: var(--muted); font-size: 14px; text-align: center; margin-top: 20px; }
.hrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; }
.hrow.live { box-shadow: inset 0 0 0 1px rgba(255,203,71,.45); }
.hrow .avatar { width: 26px; height: 26px; font-size: 12px; flex: 0 0 auto; }
.hrow .hmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hrow .hmeta { color: var(--muted); }
.hrow .hmeta b { color: var(--text); font-weight: 600; }
.hrow .hnum { margin-left: auto; color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.hcards { display: flex; flex-wrap: wrap; gap: 5px; }
.lobby-top { display: flex; justify-content: flex-end; gap: 6px; margin: -12px -8px -8px 0; }
@media (min-width: 900px) {
  /* Pinned chat sits flush right; the table centres itself in the space that's left. */
  /* Pinned chat sits flush right; the table uses all the space beside it. */
  body.chat-pinned .table-main { max-width: none; padding: 0 24px; }
}

.top-actions { display: flex; gap: 8px; align-items: center; }
/* Big screens: larger piles and hand so the table fills the space. */
/* Desktop: cards grow with the window (width and height both count), and the
   piles stay grouped around them instead of spreading across the screen. */
@media (min-width: 900px) {
  /* Fits the window: the rest of the table needs about 500px of height, and cards appear twice (piles and hand). */
  .table-main { --cw: clamp(64px, min(7.5vw, (100vh - 500px) / 2.9), 150px); }
  .card { width: var(--cw); height: auto; aspect-ratio: 72 / 104; --fs: calc(var(--cw) * .42); border-radius: calc(var(--cw) * .12); }
  .card.start { --fs: calc(var(--cw) * .36); }
  .card::before, .card::after { font-size: clamp(12px, calc(var(--cw) * .15), 17px); }
  .card::before { top: 7%; left: 10%; }
  .card::after { bottom: 7%; right: 10%; }
  .hand { min-height: calc(var(--cw) * 1.45); gap: calc(var(--cw) * .12); }
  .piles { max-width: min(1000px, calc(var(--cw) * 6.6)); gap: calc(var(--cw) * .2); }
}
@media (min-width: 1200px) and (min-height: 760px) {
  .pile .label { font-size: 15px; }
  .sigtag { font-size: 12px; }
  .sigbtns button { font-size: 13px; padding: 6px 12px; min-height: 32px; }
  .turn-banner { font-size: 20px; }
}
.piles { width: 100%; margin: 0 auto; }
.chat-head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.plan-box p { margin: 0; }
.plan-box .plan-price { font-size: 18px; font-weight: 600; color: var(--text); }
.plan-box .plan-warn { font-size: 14px; color: var(--stop); }
.plan-box > .btn { align-self: flex-start; }

/* ---------- Pro themes (html[data-theme]) ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.theme-opt { display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding: 6px; border-radius: 12px; border: 2px solid transparent; background: rgba(0,0,0,.15); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: center; }
.theme-opt.on { border-color: var(--accent); }
.theme-opt:disabled { cursor: default; opacity: .75; }
.theme-opt .sw { height: 46px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.theme-opt .sw.midnight { background: #19172f; color: #ffcb47; border: 1px solid rgba(255,255,255,.14); }
.theme-opt .sw.felt { background: radial-gradient(circle at 40% 40%, #1f6b47, #0d3121); color: #e8c872; font-family: 'Playfair Display', serif; }
.theme-opt .sw.paper { background: #f4efe4; color: #1f1d1a; border: 2px solid #1f1d1a; font-family: Fraunces, serif; }

/* Felt Card Room: green baize, cream cards, brass. */
html[data-theme="felt"] {
  --top: #144931;
  --bg: #0d3121; --bg2: #154d33; --panel: rgba(0, 0, 0, .22); --line: rgba(232, 200, 114, .3);
  --text: #f3ead2; --muted: #c9c2a6; --accent: #e8c872; --up: #a7e3c1; --down: #f2a7a0; --mine: #f0b33d;
}
html[data-theme="felt"] body { background: radial-gradient(ellipse at 45% 40%, #1f6b47 0%, #154d33 55%, #0d3121 100%) fixed; }
html[data-theme="felt"] .turn-banner b, html[data-theme="felt"] .bigcode { font-family: 'Playfair Display', serif; }
html[data-theme="felt"] .logo { color: #f3ead2; }
html[data-theme="felt"] .btn.primary, html[data-theme="felt"] .msg.mine { background: #e8c872; color: #10291c; }
html[data-theme="felt"] .chat, html[data-theme="felt"] .chat-peek { background: #0f2a1c; }
html[data-theme="felt"] .card {
  background: #f7f0dc; color: #1d1d1d; text-shadow: none; font-family: 'Playfair Display', serif;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4), inset 0 0 0 5px #f7f0dc, inset 0 0 0 6px rgba(0, 0, 0, .18);
}
html[data-theme="felt"] .pile.up .card { color: #2d6a4f; }
html[data-theme="felt"] .pile.down .card { color: #9b2226; }
html[data-theme="felt"] .card.start { background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(232, 200, 114, .45); }
html[data-theme="felt"] .pile.up .card.start { color: #a7e3c1; }
html[data-theme="felt"] .pile.down .card.start { color: #f2a7a0; }
html[data-theme="felt"] .hand .card.sel { box-shadow: 0 10px 20px rgba(0, 0, 0, .45), inset 0 0 0 4px #e8c872; }
html[data-theme="felt"] .mini { background: #f7f0dc; color: #1d1d1d; }

/* Paper & Ink: light paper, black outlines, blue/red ink. */
html[data-theme="paper"] {
  --speak: #0b8fb3;
  --top: #f4efe4;
  --bg: #f4efe4; --bg2: #ebe4d5; --panel: rgba(31, 29, 26, .05); --line: rgba(31, 29, 26, .28);
  --text: #1f1d1a; --muted: #5a554c; --accent: #1d4e89; --up: #1d4e89; --down: #b5432b; --stop: #b5432b; --go: #2d7a46; --mine: #b8740a;
}
html[data-theme="paper"] body { background: #f4efe4; }
html[data-theme="paper"] .bigcode { font-family: Fraunces, serif; }
html[data-theme="paper"] .logo { color: #1f1d1a; }
html[data-theme="paper"] .btn.primary, html[data-theme="paper"] .msg.mine { background: #1f1d1a; color: #f4efe4; }
html[data-theme="paper"] .btn { border-color: rgba(31, 29, 26, .45); }
html[data-theme="paper"] input, html[data-theme="paper"] .custom-form textarea { background: #fffdf7; border-color: rgba(31, 29, 26, .35); }
html[data-theme="paper"] .chat, html[data-theme="paper"] .chat-peek { background: #ebe4d5; box-shadow: 0 20px 50px rgba(31, 29, 26, .2); }
html[data-theme="paper"] .home-card, html[data-theme="paper"] .modal-card { background: #fffdf7; backdrop-filter: none; }
html[data-theme="paper"] .modal { background: rgba(31, 29, 26, .45); }
html[data-theme="paper"] .card {
  background: #fffdf7; color: #1f1d1a; text-shadow: none; font-family: Fraunces, serif;
  box-shadow: none; border: 2px solid #1f1d1a;
}
html[data-theme="paper"] .pile.up .card { box-shadow: 4px 4px 0 #1d4e89; }
html[data-theme="paper"] .pile.down .card { box-shadow: 4px 4px 0 #b5432b; }
html[data-theme="paper"] .card.start { background: transparent; border-style: dashed; box-shadow: none; }
html[data-theme="paper"] .hand .card.sel { box-shadow: 5px 5px 0 #1f1d1a; }
html[data-theme="paper"] .hand .card.dead { filter: none; opacity: .45; }
html[data-theme="paper"] .mini { background: #fffdf7; color: #1f1d1a; border: 1.5px solid #1f1d1a; }
html[data-theme="paper"] .sigtag { color: #fffdf7; }
html[data-theme="paper"] .chip { color: #fffdf7; }
html[data-theme="paper"] .tabs button.on { background: #1f1d1a; color: #f4efe4; }
html[data-theme="paper"] .seg button.on { color: #fffdf7; }
html[data-theme="paper"] .toast { background: #1f1d1a; color: #f4efe4; }
html[data-theme="paper"] .seat .cnt { background: #1f1d1a; color: #fffdf7; }
html[data-theme="paper"] .deck-icon { box-shadow: 2px 2px 0 #1f1d1a; }
html[data-theme="paper"] .chat-backdrop { background: rgba(31, 29, 26, .12); }

.icon-btn { font-size: 16px; line-height: 1; padding: 6px 10px; display: inline-grid; place-items: center; }
.gear-ico { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Home top right: settings and account, the same height and shape. */
.account-bar .btn { height: 36px; padding-top: 0; padding-bottom: 0; }
.account-bar .icon-btn { width: 36px; padding: 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; cursor: pointer; }
.toggle-row input { width: 22px; height: 22px; accent-color: var(--accent); flex: 0 0 auto; }
html[data-theme="paper"] .plan-box, html[data-theme="paper"] .theme-opt { background: rgba(31, 29, 26, .05); }
html[data-theme="paper"] .lobby-players li { background: rgba(31, 29, 26, .06); }
html[data-theme="paper"] .lobby-players li.open-seat, html[data-theme="felt"] .lobby-players li.open-seat { background: none; }
html[data-theme="paper"] .invite-card { background: rgba(31, 29, 26, .04); }

.toggle-row > span { display: flex; flex-direction: column; gap: 2px; }
.toggle-sub { font-size: 13px; }
.plan-box .toggle-row + .toggle-row { padding-top: 10px; border-top: 1px solid var(--line); }
.game-menu { display: flex; flex-direction: column; gap: 8px; }
.game-menu h3 { margin: 0; }
.game-menu .small-note { margin: 0; }
.game-menu > .btn { align-self: stretch; }
.game-menu > #quitBtn { margin-top: 4px; }
.btn.danger { border-color: var(--stop); color: var(--stop); background: transparent; }
.invite-home { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.invite-home .bigcode { cursor: default; font-size: 52px; }
.normal-home { display: flex; flex-direction: column; gap: 14px; }
#ownRoomBtn { align-self: center; }

/* Voice chat */
.voice-btn svg, .voice-row svg, .vc-dot svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-btn svg { width: 18px; height: 18px; display: block; }
.voice-btn.live { color: var(--go); border-color: var(--go); }
.voice-btn.muted { color: var(--stop); border-color: var(--stop); }
.voice-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.voice-row .btn { display: inline-flex; align-items: center; gap: 6px; }
.voice-row svg { width: 16px; height: 16px; }
.vc-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--go); color: #14122b; vertical-align: middle; margin-left: 6px; }
.vc-dot svg { width: 11px; height: 11px; }
.vc-dot.muted { background: var(--stop); color: #fff; }
.seat .vc-dot { position: absolute; right: -6px; top: -4px; margin: 0; }
/* Talking: a soft cyan glow, so it can't be mistaken for the solid turn ring. */
.seat.speaking .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--speak), 0 0 14px 5px color-mix(in srgb, var(--speak) 55%, transparent); }
.seat.current.speaking .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 0 0 8px var(--speak), 0 0 18px 7px color-mix(in srgb, var(--speak) 55%, transparent); }
.lobby-players li.speaking { box-shadow: inset 4px 0 0 var(--speak); }
@media (max-width: 420px) { .room .room-word { display: none; } }

/* Open games on the home page */
.open-games { display: flex; flex-direction: column; gap: 8px; }
.open-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.open-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0,0,0,.2); border-radius: 12px; padding: 10px 12px; }
.og-info { display: flex; flex-direction: column; min-width: 0; }
.og-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-info .muted { font-size: 13px; }
.public-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid transparent; }
.public-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.public-row small { font-size: 13px; }
.public-row .btn { flex: 0 0 auto; }
.public-row.is-public { border-color: var(--go); }
.public-row.is-public b { color: var(--go); }
html[data-theme="paper"] .public-row { background: rgba(31, 29, 26, .06); }
html[data-theme="paper"] .open-list li { background: rgba(31, 29, 26, .06); }
.home-notice { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--stop); background: color-mix(in srgb, var(--stop) 12%, transparent); font-size: 14px; }
.vu { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.vu i { width: 3px; border-radius: 2px; background: currentColor; opacity: .25; transition: opacity .08s; }
.vu i:nth-child(1) { height: 4px; } .vu i:nth-child(2) { height: 7px; } .vu i:nth-child(3) { height: 10px; } .vu i:nth-child(4) { height: 14px; }
.vu i.on { opacity: 1; background: var(--go); }
.voice-btn { display: inline-flex; align-items: center; gap: 4px; }
.og-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.og-bar .seg button { padding: 5px 10px; font-size: 13px; }

/* Top bar on narrow phones: everything fits on one line. */
.top-actions { flex: 0 0 auto; }
.topbar .room { min-width: 0; overflow: hidden; white-space: nowrap; }
.chat-toggle { display: inline-flex; align-items: center; gap: 4px; }
.chat-ico { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 600px) {
  #topAccount { display: none !important; }
}
.settings-account { align-self: center; }
@media (max-width: 480px) {
  .topbar { gap: 6px; }
  .top-actions { gap: 5px; }
  .topbar .btn.small { padding: 6px 9px; }
  .chat-word { display: none; }
  .chat-ico { display: block; }
  .chat-toggle .badge { margin-left: 0; }
  .top-mark { width: 30px; margin-right: 6px; }
  .voice-btn .vu { display: none; }
  .voice-btn.live { box-shadow: 0 0 0 calc(var(--lvl, 0) * 4px) color-mix(in srgb, var(--go) 45%, transparent); }
}
.volume-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.volume-row > span { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; max-width: 55%; }
.plan-box .volume-row, .plan-box .toggle-row + .volume-row { padding-top: 10px; border-top: 1px solid var(--line); }
.volume-row input { flex: 1; accent-color: var(--accent); }
.busy-box p { margin: 0 0 10px; }
.busy-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Privacy policy and Terms pages */
.legal-body { height: auto; min-height: 100%; }
.legal-page { max-width: 720px; margin: 0 auto; padding: 28px 18px 60px; line-height: 1.6; }
.legal-home { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; }
.legal-home img { width: 36px; height: auto; }
.legal-page h1 { font-size: 30px; margin: 18px 0 2px; }
.legal-page h2 { font-size: 20px; margin: 28px 0 6px; }
.legal-page h3 { font-size: 16px; margin: 16px 0 4px; color: var(--muted); }
.legal-page p, .legal-page li { color: var(--text); opacity: .92; }
.legal-page li { margin: 4px 0; }
.legal-page a { color: var(--accent); }
.legal-updated { color: var(--muted); margin: 0 0 16px; }
.legal-links { margin-top: 36px; color: var(--muted); }

/* Terms agreement and fine print */
.fine-print { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.fine-print a, .agree a { color: var(--accent); }
.fine-print.center { text-align: center; }
.agree { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.agree input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }

/* Reporting chat messages */
.msg { position: relative; }
.msg.flash { animation: msg-flash 1.6s ease-out; }
@keyframes msg-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.report-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px 0 8px; opacity: .35; vertical-align: middle; }
.report-btn:hover, .report-btn:focus-visible { opacity: 1; color: var(--stop); }
.report-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--stop); background: rgba(0,0,0,.2); border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
.report-reasons { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.report-reasons label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.report-reasons input { accent-color: var(--stop); width: 18px; height: 18px; }
#reportNote { background: rgba(0,0,0,.25); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit; resize: vertical; }

/* Pro panel */
.pro-card { max-width: 440px; }
.pro-kicker { margin: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pro-card h2 { margin: 2px 0 0; text-align: center; }
.pro-lead { margin: 0; text-align: center; font-size: 14px; }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 6px; }
.compare td { padding: 6px; border-top: 1px solid var(--line); }
.compare .c { text-align: center; width: 52px; }
.compare .pro-col { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare tr.hl td { font-weight: 700; }
.compare tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.compare .yes { color: var(--go); font-weight: 700; }
.compare .pro-col .yes { color: var(--accent); }
.compare .no { color: var(--muted); }
.pro-interval { align-self: center; }
.pro-interval small { font-size: 11px; opacity: .85; }
.pro-price { margin: 0; text-align: center; font-weight: 700; font-size: 18px; }
#proLater { align-self: center; color: var(--muted); }
.theme-opt.locked { opacity: .75; }

/* Pro features shown, locked, on free tables */
.chips.locked button, .locked-btn { opacity: .6; }
.chips.locked button::after, .locked-btn::after { content: ' 🔒'; font-size: 11px; }
.end-pro { margin: 4px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
#homeProLink { align-self: center; font-size: 13px; }

/* Sign-in dialog: link by default, password on request */
.auth-mode { display: flex; flex-direction: column; gap: 8px; }
.auth-mode.hidden { display: none; }
.auth-mode > input, .auth-mode > .btn { width: 100%; box-sizing: border-box; }
#forgotBtn, #modeToggle { align-self: center; }

/* Pro host badges */
.pro-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; background: var(--accent); color: var(--bg); vertical-align: middle; }
.seat .pro-dot { position: absolute; left: -6px; bottom: -4px; padding: 0 4px; height: 14px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 8px; font-weight: 800; display: grid; place-items: center; letter-spacing: .03em; }

/* Muting */
.muted-tag { margin-left: 6px; font-size: 11px; color: var(--muted); font-style: italic; }
.muted-bar .link-btn { font-size: inherit; padding: 0; }
.report-h { margin: 6px 0 0; font-size: 16px; }

/* Confirm dialog */
.confirm-modal .modal-card { max-width: 360px; text-align: center; }
.confirm-modal h2 { margin: 0; }
.confirm-modal p { margin: 0; }
.confirm-actions { display: flex; gap: 8px; justify-content: center; }
.confirm-actions .btn { flex: 1; }
.btn.danger-fill { background: var(--stop); border-color: transparent; color: #fff; }

/* Profile pictures */
.avatar { position: relative; overflow: visible; }
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.mini { display: inline-grid; width: 22px; height: 22px; font-size: 11px; margin-right: 8px; vertical-align: middle; border-radius: 50%; }
.avatar.big { display: grid; flex: 0 0 auto; width: 64px; height: 64px; font-size: 28px; background: var(--line); color: var(--text); }
.avatar-pick { display: flex; align-items: center; gap: 14px; }
.avatar-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avatar-label { margin: 0; font-size: 14px; color: var(--muted); }
.avatar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.avatar-opt { padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; aspect-ratio: 1; }
.avatar-opt img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.avatar-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 420px) { .avatar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; padding-left: 5px; padding-right: 10px; max-width: 220px; }
.acct-btn .acct-pic { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--bg); font-size: 13px; font-weight: 700; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct-pro { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 5px; border-radius: 4px; background: var(--accent); color: var(--bg); flex: none; }
.hold-row { cursor: default; flex-wrap: wrap; }
.hold-row .seg button { padding: 5px 10px; font-size: 13px; }

/* ---------- More Pro themes ---------- */
/* Light tables share a few fixes: the light logo, white inputs, and darker overlays. */
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .mark-light { display: inline-block; }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .mark-dark { display: none; }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .modal { background: rgba(20, 24, 30, .45); }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .chat-backdrop { background: rgba(20, 24, 30, .12); }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .toast { background: var(--text); color: var(--bg2); }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) :is(.plan-box, .theme-opt, .lobby-players li, .invite-card, .seg, .tabs) { background: rgba(0, 0, 0, .05); }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .lobby-players li.open-seat { background: none; }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) :is(.quick button, .chips button) { background: rgba(0, 0, 0, .04); }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"]) :is(input, .custom-form textarea) { background: #fff; }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .msg { background: rgba(0, 0, 0, .06); }
html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lift"], [data-theme="lcd"]) .sigtag, html:is([data-theme="hundred"], [data-theme="riso"], [data-theme="lcd"]) .chip { color: #fff; }

/* Hundred Chart: graph paper, index cards in marker, blue and red pen, a highlighter. */
html[data-theme="hundred"] {
  --speak: #0b8fb3;
  --top: #f9fbfd;
  --bg: #f9fbfd; --bg2: #ffffff; --panel: rgba(43, 47, 58, .04); --line: rgba(43, 47, 58, .2);
  --text: #2b2f3a; --muted: #5b6070; --accent: #1f5fbf; --up: #1f5fbf; --down: #c8213a; --stop: #c8213a; --go: #1d7a4a; --mine: #b8740a;
}
html[data-theme="hundred"] body {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  background-color: #f9fbfd;
  background-image: linear-gradient(#e3ebf5 1px, transparent 1px), linear-gradient(90deg, #e3ebf5 1px, transparent 1px);
  background-size: 20px 20px;
}
html[data-theme="hundred"] :is(.logo, .bigcode, .turn-banner, .modal-card h2, .pile .label, #deckCount) { font-family: 'Caveat', cursive; }
html[data-theme="hundred"] .turn-banner { font-size: 24px; padding-top: 4px; }
html[data-theme="hundred"] .pile .label { font-size: 19px; white-space: nowrap; }
@media (max-width: 560px) { html[data-theme="hundred"] .pile .label { font-size: 16px; } }
html[data-theme="hundred"] .chat-peek { background: #fff; color: var(--text); }
html[data-theme="hundred"] .btn.primary { background: #ffe45c; color: #23262e; box-shadow: 2px 2px 0 rgba(30, 40, 60, .15); }
html[data-theme="hundred"] .msg.mine { background: #dbe7f8; color: #23262e; }
html[data-theme="hundred"] .card {
  background: linear-gradient(hsl(var(--h) 85% 62% / .85), hsl(var(--h) 85% 62% / .85)) 5px 6px / calc(100% - 10px) 9% no-repeat, #fff;
  color: #23262e; border: 1px solid #c8d1dd; border-radius: 4px; box-shadow: 1px 2px 0 rgba(30, 40, 60, .1);
  font-family: 'Caveat', cursive; font-weight: 700; --fs-scale: 1.3;
}
html[data-theme="hundred"] .card::before, html[data-theme="hundred"] .card::after { display: none; }
html[data-theme="hundred"] .hand .card:nth-child(odd) { rotate: -1.2deg; }
html[data-theme="hundred"] .hand .card:nth-child(even) { rotate: 1deg; }
html[data-theme="hundred"] .pile .card { rotate: .6deg; }
html[data-theme="hundred"] .card.start { background: transparent; border: 2px dashed #b8c2d0; box-shadow: none; }
html[data-theme="hundred"] .hand .card.sel { box-shadow: 0 0 0 3px #1f5fbf, 2px 6px 0 rgba(30, 40, 60, .12); }
html[data-theme="hundred"] .hand .card.dead { filter: none; opacity: .45; }
html[data-theme="hundred"] .mini { background: hsl(var(--h) 85% 62% / .85); color: #23262e; }
html[data-theme="hundred"] .sigbtns button.on.stop, html[data-theme="hundred"] .sigbtns button.on.go { background: transparent; border: 2px solid currentColor; }
html[data-theme="hundred"] .sigbtns button.on.stop { color: var(--stop); }
html[data-theme="hundred"] .sigbtns button.on.go { color: var(--mine); }
html[data-theme="hundred"] .deck-icon { box-shadow: 2px 2px 0 #c8d1dd; }

/* Riso Print: two inks (blue and fluorescent pink) on grey paper, with halftone dots. */
html[data-theme="riso"] {
  --speak: #7a3fd0;
  --top: #e7e9e4; --r: 0px;
  --bg: #e7e9e4; --bg2: #f1f2ee; --panel: rgba(11, 79, 138, .05); --line: rgba(11, 79, 138, .32);
  --text: #0b3f70; --muted: #4d6b88; --accent: #e0218a; --up: #0a6fc2; --down: #e0218a; --stop: #e0218a; --go: #0a6fc2; --mine: #0a6fc2;
}
html[data-theme="riso"] body {
  font-family: 'Work Sans', system-ui, sans-serif;
  background-color: #e7e9e4; background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.2px); background-size: 4px 4px;
}
html[data-theme="riso"] :is(.logo, .bigcode, .turn-banner b, .modal-card h2, #deckCount, .btn.primary) { font-family: 'Dela Gothic One', sans-serif; font-weight: 400; }
html[data-theme="riso"] :is(.home-card, .modal-card, .chat, .chat-peek) { border: 2px solid #0b3f70; border-radius: 0; }
html[data-theme="riso"] .chat-peek { background: #f1f2ee; color: var(--text); }
html[data-theme="riso"] .btn { border-width: 2px; border-color: #0b3f70; }
html[data-theme="riso"] .btn.primary { background: #ff3fa8; color: #f1f2ee; border-color: transparent; box-shadow: 3px 3px 0 #0a6fc2; }
html[data-theme="riso"] .msg.mine { background: #0a6fc2; color: #f1f2ee; }
html[data-theme="riso"] .card {
  background-color: color-mix(in srgb, #0a6fc2 calc((1 - var(--t, .5)) * 100%), #ff3fa8);
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.6px); background-size: 5px 5px;
  color: #f1f2ee; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; border-radius: 4px;
  box-shadow: 3px 2px 0 color-mix(in srgb, #ff3fa8 calc(var(--t, .5) * 30% + 25%), transparent);
}
html[data-theme="riso"] .card.start { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
html[data-theme="riso"] .hand .card.sel { box-shadow: 3px 2px 0 rgba(255, 63, 168, .4); outline: 3px solid #0b3f70; outline-offset: 2px; }
html[data-theme="riso"] .hand .card.dead { filter: grayscale(.8); opacity: .55; }
html[data-theme="riso"] .mini { background: color-mix(in srgb, #0a6fc2 calc((1 - var(--t, .5)) * 100%), #ff3fa8); }
html[data-theme="riso"] .sigbtns button { border: 2px solid #0b3f70; color: #0b3f70; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
html[data-theme="riso"] .sigbtns button.on.stop, html[data-theme="riso"] .sigbtns button.on.go { color: #f1f2ee; border-color: transparent; }
html[data-theme="riso"] .deck-icon { background: repeating-linear-gradient(45deg, #ff3fa8 0 4px, #0a6fc2 4px 8px); box-shadow: 2px 2px 0 #0b3f70; }

/* Lift: brushed steel, floor displays for piles, round lit buttons for your hand. */
html[data-theme="lift"] {
  --speak: #0a9fc9;
  --top: #b9bec4;
  --bg: #c4c9ce; --bg2: #dadde1; --panel: rgba(0, 0, 0, .06); --line: rgba(42, 46, 51, .3);
  --text: #22262b; --muted: #4b5159; --accent: #c4700f; --up: #1f6f5c; --down: #b4462b; --stop: #d9443a; --go: #2e9e5b; --mine: #d98a12;
}
html[data-theme="lift"] body {
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 500; font-size: 17px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, #b4b9bf, #d8dce0 22%, #aeb3b9 46%, #cfd3d7 70%, #b3b8be) fixed;
}
html[data-theme="lift"] :is(.logo, .turn-banner, .pile .label, .btn, .sigbtns button) { text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="lift"] .chat-peek { background: #dadde1; color: var(--text); }
html[data-theme="lift"] .btn { background: linear-gradient(180deg, #eef0f2, #c3c8ce); border-color: #8d939a; font-weight: 600; }
html[data-theme="lift"] .btn.primary { background: linear-gradient(180deg, #2a2e33, #15181b); color: #ffb347; text-shadow: 0 0 6px rgba(255, 179, 71, .6); border-color: transparent; }
html[data-theme="lift"] .msg.mine { background: #2a2e33; color: #ffb347; }
html[data-theme="lift"] .deck { background: #0e1013; border-color: #0e1013; color: #ffb347; }
html[data-theme="lift"] .deck small { color: #c98a3a; }
html[data-theme="lift"] #deckCount, html[data-theme="lift"] .bigcode { font-family: 'DotGothic16', monospace; font-weight: 400; }
html[data-theme="lift"] .pile .card {
  background: linear-gradient(180deg, #16191d, #0b0d10); border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .6);
  font-family: 'DotGothic16', monospace; font-weight: 400; color: hsl(var(--h) 95% 66%); text-shadow: 0 0 8px hsl(var(--h) 95% 60% / .8);
}
html[data-theme="lift"] .pile .card.start { color: #ffb347; text-shadow: 0 0 8px rgba(255, 179, 71, .7); }
html[data-theme="lift"] .card::before, html[data-theme="lift"] .card::after { display: none; }
html[data-theme="lift"] .hand .card {
  height: auto; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #eef0f2, #a7acb2 75%);
  box-shadow: 0 0 0 3px hsl(var(--h) 75% 55%), 0 2px 3px rgba(0, 0, 0, .35);
  color: #22262b; font-weight: 700; --fs-scale: .8;
}
html[data-theme="lift"] .hand { align-items: center; }
html[data-theme="lift"] .hand .card.sel { box-shadow: 0 0 0 3px hsl(var(--h) 90% 60%), 0 0 16px 4px hsl(var(--h) 90% 60% / .75); }
html[data-theme="lift"] .mini { background: #0e1013; color: hsl(var(--h) 95% 66%); font-family: 'DotGothic16', monospace; font-weight: 400; }
html[data-theme="lift"] .sigbtns button { background: linear-gradient(180deg, #e3e6e9, #b9bec4); border: 1px solid #8d939a; border-radius: 999px; color: #22262b; font-weight: 700; }
html[data-theme="lift"] .sigbtns button.on.stop { background: linear-gradient(180deg, #e3e6e9, #b9bec4); color: #22262b; box-shadow: 0 0 0 2px #ff5b4d, 0 0 10px rgba(255, 91, 77, .7); }
html[data-theme="lift"] .sigbtns button.on.go { background: linear-gradient(180deg, #e3e6e9, #b9bec4); color: #22262b; box-shadow: 0 0 0 2px #ffb020, 0 0 10px rgba(255, 176, 32, .7); }

/* Pocket LCD: a 1980s handheld. Grey-green screen, unlit 88s, a bar showing where each card sits. */
html[data-theme="lcd"] {
  --speak: #2a6f8a;
  --top: #8a2434;
  --bg: #b0be9b; --bg2: #bccaa8; --panel: rgba(30, 37, 27, .06); --line: rgba(30, 37, 27, .35);
  --text: #1e251b; --muted: #47533f; --accent: #1e251b; --up: #1e251b; --down: #1e251b; --stop: #8a2434; --go: #2f5a2a; --mine: #8a5a10;
}
html[data-theme="lcd"] body {
  font-family: 'Courier Prime', ui-monospace, monospace;
  background: linear-gradient(160deg, #b9c6a6, #a3b28f) fixed;
  box-shadow: inset 0 0 0 10px #8a2434, inset 0 0 0 14px #2b2b2b;
}
html[data-theme="lcd"] :is(.logo, .turn-banner, .pile .label, .btn, .sigbtns button, .seat-tag, .tabs button, .seg button) { font-family: 'Silkscreen', monospace; font-weight: 400; }
html[data-theme="lcd"] .turn-banner { font-size: 15px; }
html[data-theme="lcd"] .pile .label { font-size: 12px; }
html[data-theme="lcd"] :is(#deckCount, .bigcode) { font-family: 'VT323', monospace; font-weight: 400; }
html[data-theme="lcd"] .chat-peek { background: #bccaa8; color: var(--text); }
html[data-theme="lcd"] .btn { background: transparent; border: 2px solid #1e251b; font-size: .85em; }
html[data-theme="lcd"] .btn.primary { background: #e0632e; color: #2a0f0a; border-color: transparent; border-radius: 999px; box-shadow: 0 3px 0 #8e3315; }
html[data-theme="lcd"] .msg.mine { background: #1e251b; color: #bccaa8; }
html[data-theme="lcd"] input, html[data-theme="lcd"] .custom-form textarea { background: rgba(255, 255, 255, .25); }
html[data-theme="lcd"] .card {
  background: transparent; color: #1e251b; border: 2px solid #1e251b; border-radius: 3px;
  box-shadow: inset 0 6px 0 hsl(var(--h) 55% 50% / .5);
  font-family: 'VT323', monospace; font-weight: 400; --fs-scale: 1.4;
}
html[data-theme="lcd"] .card::before { content: attr(data-ghost); inset: 0; top: 0; left: 0; display: grid; place-items: center; font-size: inherit; opacity: 1; color: rgba(30, 37, 27, .08); transform: none; }
html[data-theme="lcd"] .card::after { content: ''; left: 5px; right: 5px; bottom: 5px; top: auto; height: 4px; transform: none; opacity: 1; background: linear-gradient(90deg, #1e251b calc(var(--t, 0) * 100%), rgba(30, 37, 27, .14) 0); }
html[data-theme="lcd"] .card.start { box-shadow: none; border-style: dashed; }
html[data-theme="lcd"] .card.start::after { display: none; }
html[data-theme="lcd"] .hand .card.sel { background: #1e251b; color: #b0be9b; box-shadow: none; }
html[data-theme="lcd"] .hand .card.sel::before { color: transparent; }
html[data-theme="lcd"] .hand .card.sel::after { background: linear-gradient(90deg, #b0be9b calc(var(--t, 0) * 100%), rgba(176, 190, 155, .25) 0); }
html[data-theme="lcd"] .hand .card.dead { filter: none; opacity: .4; }
html[data-theme="lcd"] .mini { background: transparent; color: #1e251b; border: 1.5px solid #1e251b; font-family: 'VT323', monospace; font-weight: 400; font-size: 16px; }
html[data-theme="lcd"] .sigbtns button { border: 2px solid #1e251b; color: #1e251b; font-size: 10px; }
html[data-theme="lcd"] .sigbtns button.on.stop, html[data-theme="lcd"] .sigbtns button.on.go { color: #bccaa8; border-color: transparent; }
html[data-theme="lcd"] .deck-icon { background: repeating-linear-gradient(45deg, #1e251b 0 3px, transparent 3px 6px); box-shadow: none; border: 2px solid #1e251b; }

/* Raffle Tickets: numbered tickets on a speckled linoleum table. */
html[data-theme="tickets"] {
  --top: #173c3e;
  --bg: #173c3e; --bg2: #1d4a4c; --panel: rgba(0, 0, 0, .18); --line: rgba(239, 234, 224, .22);
  --text: #efeae0; --muted: #b9c9c4; --accent: #f6d35b; --up: #9ed9b8; --down: #f7a1b5; --stop: #ff7b6b; --go: #8fe3a8; --mine: #f6c35b;
}
html[data-theme="tickets"] body {
  font-family: 'Libre Franklin', system-ui, sans-serif;
  background-color: #173c3e;
  background-image: radial-gradient(#22524f 1px, transparent 1.6px), radial-gradient(#0f2e30 1.2px, transparent 1.8px);
  background-size: 11px 13px, 7px 9px; background-position: 0 0, 3px 4px;
}
html[data-theme="tickets"] :is(.logo, .bigcode, .turn-banner b, .modal-card h2, #deckCount) { font-family: 'Alfa Slab One', serif; font-weight: 400; }
html[data-theme="tickets"] :is(.pile .label, .sigbtns button, .seat-tag) { font-family: 'Courier Prime', ui-monospace, monospace; font-weight: 700; }
html[data-theme="tickets"] .chat-peek { background: #1d4a4c; }
html[data-theme="tickets"] .btn.primary { background: #d94a38; color: #fff3e6; box-shadow: 0 3px 0 #8e2a1d; }
html[data-theme="tickets"] .msg.mine { background: #f6d35b; color: #2b211b; }
html[data-theme="tickets"] .card {
  background: hsl(var(--h) 72% 78%); color: #2b211b; border-radius: 2px; box-shadow: none;
  font-family: 'Alfa Slab One', serif; font-weight: 400;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 6px, #000 6.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 6px, #000 6.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 6px, #000 6.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 6px, #000 6.5px) right / 51% 100% no-repeat;
}
html[data-theme="tickets"] .card::before, html[data-theme="tickets"] .card::after { font-family: 'Courier Prime', ui-monospace, monospace; font-weight: 700; }
html[data-theme="tickets"] .card.start { background: rgba(0, 0, 0, .2); }
html[data-theme="tickets"] .hand .card.sel { background: hsl(var(--h) 85% 70%); transform: translateY(-14px) rotate(-3deg); box-shadow: none; }
html[data-theme="tickets"] .mini { background: hsl(var(--h) 72% 78%); color: #2b211b; border-radius: 2px; }
html[data-theme="tickets"] .sigbtns button { border: 2px solid rgba(239, 234, 224, .45); color: var(--text); text-transform: uppercase; border-radius: 3px; }
html[data-theme="tickets"] .sigbtns button.on { background: transparent; rotate: -4deg; }
html[data-theme="tickets"] .sigbtns button.on.stop { border-color: var(--stop); color: var(--stop); }
html[data-theme="tickets"] .sigbtns button.on.go { border-color: var(--mine); color: var(--mine); }
html[data-theme="tickets"] .deck-icon { background: repeating-linear-gradient(0deg, #f6d35b 0 6px, #f7a1b5 6px 12px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { html[data-theme="tickets"] .sigbtns button.on { rotate: none; } }

/* Picker swatches for the new themes */
.theme-opt .sw.hundred { background-color: #f9fbfd; background-image: linear-gradient(#dfe8f3 1px, transparent 1px), linear-gradient(90deg, #dfe8f3 1px, transparent 1px); background-size: 8px 8px; color: #1f5fbf; font-family: 'Caveat', cursive; font-size: 24px; }
.theme-opt .sw.riso { background: #e7e9e4; color: #ff3fa8; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; text-shadow: 2px 1px 0 #0a6fc2; }
.theme-opt .sw.lift { background: linear-gradient(100deg, #b4b9bf, #d8dce0 40%, #aeb3b9); color: #ffb347; font-family: 'DotGothic16', monospace; font-weight: 400; }
.theme-opt .sw.lift span { background: #0e1013; padding: 0 6px; border-radius: 3px; text-shadow: 0 0 6px rgba(255, 179, 71, .7); }
.theme-opt .sw.lcd { background: #b0be9b; color: #1e251b; font-family: 'VT323', monospace; font-weight: 400; font-size: 26px; box-shadow: inset 0 0 0 4px #8a2434; }
.theme-opt .sw.tickets { background: #173c3e; color: #2b211b; font-family: 'Alfa Slab One', serif; font-weight: 400; }
.theme-opt .sw.tickets span { background: #f7a1b5; padding: 0 8px; border-radius: 2px; }

/* Add a bot: an open seat button and a sheet listing the bots */
.lobby-players li.open-seat { align-items: center; }
.open-seat .add-bot { padding: 5px 12px; font-size: 13px; color: var(--text); white-space: nowrap; }
.bot-card { gap: 10px; }
.bot-list { display: flex; flex-direction: column; gap: 6px; }
.bot-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bot-row:hover:not(:disabled) { border-color: var(--accent); }
.bot-row:disabled { cursor: default; opacity: .55; }
.bot-row .avatar { width: 38px; height: 38px; font-size: 16px; position: relative; overflow: hidden; }
.bot-text { display: flex; flex-direction: column; min-width: 0; }
.bot-text b { font-weight: 600; }
.bot-text small { color: var(--muted); font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bot-act { font-size: 13px; font-weight: 600; color: var(--accent); }
.bot-row:disabled .bot-act { color: var(--muted); }
.saved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.saved-row .del { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 10px; padding: 0 12px; cursor: pointer; font: inherit; }
.bot-card #customToggle { align-self: center; }
.bot-card #botSeats { text-align: center; margin-top: -6px; }

/* Player card (tap someone at the table) */
.seat { cursor: pointer; border-radius: 10px; }
.seat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcard { text-align: left; gap: 14px; }
.pc-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.pc-head .avatar { position: relative; width: 56px; height: 56px; font-size: 24px; flex: none; overflow: hidden; }
.pc-head h2 { font-size: 24px; text-align: left; margin: 0; overflow-wrap: anywhere; }
.pc-head p { margin: 2px 0 0; font-size: 14px; }
.pc-body { display: flex; flex-direction: column; gap: 8px; }
.pc-body h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.pc-blurb { margin: 0; font-weight: 600; }
.pc-personality { margin: 0; font-size: 14px; }
.pc-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.pc-facts dt { color: var(--muted); }
.pc-facts dd { margin: 0; text-align: right; }
.pc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .player-modal { align-items: end; padding: 0; }
  .player-modal .modal-card { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Pocket LCD: keep everything inside the bezel. */
html[data-theme="lcd"] #table { padding: 18px 18px 22px; }
html[data-theme="lcd"] :is(#home, #lobby) { padding: 30px 26px; }

/* Phones: your hand sits right under the piles, with End turn and Pause in a bar at the very bottom. */
@media (max-width: 560px) {
  .hand-area { display: flex; flex-direction: column; padding-top: 16px; }
  .hand-area .hand { order: -1; }
  .hand-area .hand-actions { margin: 12px 0 0; }
}

.bot-row.here { border-color: var(--accent); }
.bot-row.here .bot-act { color: var(--muted); font-weight: 500; }
.bot-row.here:hover .bot-act { color: var(--stop); }

/* Desktop: pile labels and Stop / Mine grow a little with the cards. */
@media (min-width: 900px) {
  .pile .label { font-size: clamp(13px, calc(var(--cw) * .13), 18px); }
  .sigtag { font-size: clamp(11px, calc(var(--cw) * .1), 14px); height: 1.7em; line-height: 1.7em; }
  .signals { max-width: calc(var(--cw) * 1.5); gap: 4px; }
  .sigbtns button { font-size: clamp(12px, calc(var(--cw) * .11), 15px); padding: .4em .9em; min-height: 0; }
}

/* The ? at the table: end of the bottom bar on phones, bottom right of the table on bigger screens. */
.help-btn { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.help-btn:hover { color: var(--text); border-color: var(--text); }
@media (min-width: 561px) {
  .table-main { position: relative; }
  .help-btn { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.help-card { text-align: left; gap: 10px; max-width: 520px; }
.help-card h2 { text-align: left; padding-right: 40px; }
.help-card h3 { margin: 8px 0 0; font-size: 17px; }
.help-card p, .help-card ul { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.help-card ul { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.help-card b { color: var(--text); }
.help-paused { color: var(--accent) !important; font-weight: 600; }
.help-card #helpDone { margin-top: 8px; }

/* Desktop: the players, banner, last turn and piles sit together as one block in the
   middle of the table (top bar above, your hand below), scaled with the cards. */
@media (min-width: 900px) {
  .table-main .players { margin-top: auto; grid-template-columns: repeat(var(--seats, 5), minmax(0, clamp(76px, calc(var(--cw) * .85), 120px))); gap: 10px; }
  .table-main .piles { flex: 0 0 auto; margin-bottom: auto; padding-top: calc(var(--cw) * .12); }
  .seat { --av: clamp(40px, calc(var(--cw) * .42), 62px); }
  .seat .pname { font-size: clamp(13px, calc(var(--cw) * .11), 16px); }
  .seat-tag { font-size: clamp(11px, calc(var(--cw) * .085), 13px); }
  .turn-banner { font-size: clamp(18px, calc(var(--cw) * .17), 24px); height: clamp(36px, calc(var(--cw) * .33), 46px); padding-top: 10px; }
  .turn-summary { height: clamp(34px, calc(var(--cw) * .3), 44px); }
  .turn-summary .ts { font-size: clamp(14px, calc(var(--cw) * .115), 16px); padding: 5px 14px 5px 5px; }
  .turn-summary .ts .avatar { width: clamp(24px, calc(var(--cw) * .22), 30px); height: clamp(24px, calc(var(--cw) * .22), 30px); }
  .mini { font-size: clamp(13px, calc(var(--cw) * .1), 15px); }
}

/* The draw pile beside the four piles. Desktop only; phones show the count in the top bar. */
.drawpile { display: none; }
@media (min-width: 900px) {
  .topbar .deck { visibility: hidden; }
  .table-main .piles { grid-template-columns: auto repeat(4, minmax(0, 1fr)); max-width: min(1200px, calc(var(--cw) * 8.2)); }
  .drawpile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px calc(var(--cw) * .2) 10px 4px; margin-right: calc(var(--cw) * .15); border-right: 1px dashed var(--line); }
  .drawpile .label { font-size: clamp(13px, calc(var(--cw) * .13), 18px); font-weight: 600; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }
  .draw-stack { width: var(--cw); aspect-ratio: 72 / 104; border-radius: calc(var(--cw) * .12); position: relative;
    /* Thicker stack for a fuller deck: up to four offset cards behind the top one. */
    box-shadow:
      calc(min(var(--layers), 1) * 3px) calc(min(var(--layers), 1) * 3px) 0 -1px var(--bg2), calc(min(var(--layers), 1) * 3px) calc(min(var(--layers), 1) * 3px) 0 0 var(--line),
      calc(max(min(var(--layers) - 1, 1), 0) * 6px) calc(max(min(var(--layers) - 1, 1), 0) * 6px) 0 -1px var(--bg2), calc(max(min(var(--layers) - 1, 1), 0) * 6px) calc(max(min(var(--layers) - 1, 1), 0) * 6px) 0 0 var(--line),
      calc(max(min(var(--layers) - 2, 1), 0) * 9px) calc(max(min(var(--layers) - 2, 1), 0) * 9px) 0 -1px var(--bg2), calc(max(min(var(--layers) - 2, 1), 0) * 9px) calc(max(min(var(--layers) - 2, 1), 0) * 9px) 0 0 var(--line),
      0 4px 10px rgba(0, 0, 0, .25); }
  .draw-stack .deck-icon { position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--cw) * .05) rgba(255, 255, 255, .85); }
  /* Clear of the stacked cards drawn behind the top one (3px per layer). */
  .drawpile .count { color: var(--muted); font-size: 12px; white-space: nowrap; margin-top: calc(min(var(--layers), 3) * 3px + 4px); }
  .drawpile.low .count { color: var(--stop); font-weight: 600; }
  .drawpile.low .draw-stack { outline: 2px solid var(--stop); outline-offset: 3px; }
  .drawpile.empty .draw-stack { box-shadow: none; border: 2px dashed var(--line); }
  .drawpile.empty .deck-icon { display: none; }
}

/* The card back: the theme's stripes with our logo on a panel in the middle, like a real deck. */
@media (min-width: 900px) {
  .draw-stack .deck-icon { display: grid; place-items: center; }
  .back-logo { width: 74%; padding: 9% 7%; border-radius: calc(var(--cw) * .1); background: var(--bg2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); display: grid; place-items: center; }
  .back-logo img { width: 100%; height: auto; }
}

/* Desktop: the floating chat preview is big enough to read from across the table. */
@media (min-width: 900px) {
  .chat-peek { font-size: clamp(18px, 1.35vw, 24px); max-width: min(680px, calc(100vw - 64px)); padding: 12px 20px; border-radius: 16px; line-height: 1.35; }
}

/* Keyboard: Shift shows a label beside everything with a shortcut. */
.key-hints { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.key-hint { position: absolute; min-width: 18px; padding: 1px 5px; border-radius: 5px; background: var(--text); color: var(--bg); font: 700 11px/16px system-ui, sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); white-space: nowrap; }
/* A pile chosen with its number, waiting for S (Stop) or M (Mine). */
.pile.armed .sigbtns button { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.pile.armed .label { text-decoration: underline; text-underline-offset: 4px; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 600 .85em/1.5 system-ui, sans-serif; text-align: center; color: var(--text); background: var(--panel); }

/* How to play tabs; the Keyboard tab is for computers only. */
.help-tabs { align-self: flex-start; flex-wrap: wrap; }
.help-pane { display: flex; flex-direction: column; gap: 10px; }
@media (pointer: coarse) { .help-tabs .keys-tab { display: none; } }

/* Chat preview being swiped: follows the finger, then fades as it leaves. */
.chat-peek.dragging { transition: none; }
.chat-peek.gone { opacity: 0; }

/* Voice: an invitation when others are talking, and a word on the voice button. */
.voice-invite { position: fixed; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); z-index: 17; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; background: var(--bg2); color: var(--text); border: 1px solid var(--speak); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 14px; }
.voice-invite svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--speak); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-invite span { min-width: 0; }
.voice-invite .btn { white-space: nowrap; flex: none; }
.voice-btn .voice-word { margin-left: 6px; font-size: 14px; }
.voice-btn { display: inline-flex; align-items: center; }
@media (max-width: 560px) {
  .voice-btn .voice-word { display: none; }
  .voice-invite { width: calc(100vw - 24px); flex-wrap: wrap; justify-content: flex-end; padding: 10px 10px 10px 14px; }
  .voice-invite span { flex: 1 1 calc(100% - 40px); font-size: 15px; }
}
.voice-note { flex-basis: 100%; text-align: center; }

/* New game: "Ready to play?" over the piles, leaving your hand in view. */
.ready-panel { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 16; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px 20px; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 50px rgba(0, 0, 0, .45); }
.ready-panel h2 { margin: 0; font-size: 26px; }
.ready-panel p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ready-panel .btn { min-width: 160px; }
/* Your turn: a big, brief label in the middle of the table. Taps go straight through it. */
.turn-pop { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 30px; border-radius: 16px; background: var(--accent); color: var(--bg); box-shadow: 0 16px 50px rgba(0, 0, 0, .4); pointer-events: none; animation: turn-pop .25s ease-out; }
.turn-pop b { font-size: 30px; line-height: 1.1; }
.turn-pop span:empty { display: none; }
.turn-pop span { font-size: 15px; font-weight: 600; white-space: nowrap; }
@keyframes turn-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .turn-pop { animation: none; } }

/* Helper numbers: the backwards-ten card on each pile, and a 1x4 grid of moves over each hand card. */
.card .back-ten { position: absolute; top: 4px; right: 4px; min-width: 1.9em; padding: 1px 3px; border-radius: 4px; background: var(--bg); color: var(--text); border: 1px solid var(--accent); font: 700 10px/1.3 system-ui, sans-serif; text-align: center; text-shadow: none; transform: none; opacity: 1; }
.hand-slot { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 0 0 auto; }
.jump-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-radius: 4px; overflow: hidden; font: 700 10px/16px system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: center; }
.jump-grid span { background: var(--panel); color: var(--text); min-width: 0; }
.jump-grid span.up { box-shadow: inset 0 2px 0 var(--up); }
.jump-grid span.down { box-shadow: inset 0 2px 0 var(--down); }
.jump-grid span.no { color: var(--muted); opacity: .6; }
.jump-grid span.best { background: var(--accent); color: var(--bg); }
@media (min-width: 900px) { .jump-grid { font-size: clamp(10px, calc(var(--cw) * .1), 14px); line-height: 1.6; } .card .back-ten { font-size: clamp(10px, calc(var(--cw) * .1), 14px); } }
/* Phones: cards are too narrow for four numbers across, so the grid folds to two by two
   (up piles on top, down piles below). */
@media (max-width: 560px) {
  .jump-grid { grid-template-columns: repeat(2, 1fr); font-size: 10px; line-height: 14px; }
}
/* Riso Print: the grey paper swallows a faint outline, so legal piles get the blue ink. */
html[data-theme="riso"] .pile.legal { border-color: #0a6fc2; background: rgba(10, 111, 194, .1); }
html[data-theme="riso"] .pile.trick { border-color: #e0218a; background: rgba(224, 33, 138, .1); }
/* Silkscreen runs wide; give the speed picker a little room on tiny phones. */
@media (max-width: 360px) {
  html[data-theme="lcd"] .speed-row .seg button { font-size: 12px; }
}
/* Send feedback */
.feedback-card { text-align: left; }
.feedback-card h2 { text-align: center; }
.feedback-form .fb-kind { display: flex; }
.feedback-form .fb-kind button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.feedback-form textarea {
  background: rgba(0,0,0,.25); border: 1px solid var(--line); color: var(--text); border-radius: var(--r);
  padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; outline: none; min-height: 110px;
}
.feedback-form textarea:focus { border-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-done { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.fb-done p { margin: 0; }
.fb-thanks { font-size: 20px; font-weight: 600; }
.help-feedback { text-align: center; }
.help-feedback .link-btn, .fine-print .link-btn.inline { font-size: inherit; padding: 0; }
#endModal .feedbackBtn { align-self: center; }