/* 110. A pub table at night: deep felt, cream cards, brass accents.
   Layout: one-screen app. Seats across the top, the trick in the middle, your hand pinned to the bottom. */
:root {
  --felt: #0b3d2e;
  --felt-2: #0f5540;
  --felt-edge: #06261c;
  --ink: #f4efe3;
  --ink-dim: rgba(244, 239, 227, 0.62);
  --brass: #f6c453;
  --brass-deep: #d99a1e;
  --card: #fbf7ec;
  --card-ink: #1b1a17;
  --red: #c8352b;
  --good: #4ad17c;
  --bad: #ff6b5a;
  --panel: rgba(6, 38, 28, 0.86);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: radial-gradient(120% 90% at 50% 20%, var(--felt-2), var(--felt) 60%, var(--felt-edge));
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }

/* ---------- Buttons & fields ---------- */
.btn {
  border: 0; border-radius: 14px; padding: 12px 18px;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .01em;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, var(--brass), var(--brass-deep)); color: #2a1d05; box-shadow: 0 6px 0 #8a5f0d, 0 10px 20px rgba(0,0,0,.3); }
.btn-primary:active { box-shadow: 0 3px 0 #8a5f0d; transform: translateY(3px); }
.btn-primary:disabled { filter: grayscale(.6) brightness(.7); box-shadow: none; transform: none; cursor: default; }
.btn-ghost { background: rgba(255,255,255,.1); color: var(--ink); border: 1.5px solid rgba(255,255,255,.22); }
.btn-big { padding: 16px 22px; font-size: 20px; width: 100%; }
.btn-small { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1);
  display: grid; place-items: center; font-size: 18px; position: relative;
}
.icon-btn.on { background: var(--brass); color: #2a1d05; }
.link { background: none; border: 0; color: var(--brass); text-decoration: underline; font-weight: 700; padding: 8px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); font-weight: 800; }
input {
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); border-radius: 12px;
  padding: 12px 14px; width: 100%; min-width: 0;
}
input::placeholder { color: rgba(244,239,227,.4); }
.stack { display: grid; gap: 14px; }
.badge { position: absolute; top: -4px; right: -4px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; }

/* ---------- Home ---------- */
#home { justify-content: center; align-items: center; padding-left: var(--gutter-l); padding-right: var(--gutter-r); overflow-y: auto; }
.home-inner { width: min(100%, 380px); display: grid; gap: 22px; padding-block: 24px; text-align: center; }
.logo { display: grid; justify-items: center; gap: 2px; }
.logo-num {
  font-family: var(--display); font-weight: 700; font-size: clamp(88px, 28vw, 128px); line-height: .9;
  color: var(--brass); text-shadow: 0 6px 0 #8a5f0d, 0 14px 30px rgba(0,0,0,.4);
  letter-spacing: -.03em;
}
.logo-sub { font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink-dim); letter-spacing: .04em; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-dim); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.code-input { text-transform: uppercase; font-family: var(--display); font-size: 24px; letter-spacing: .3em; text-align: center; padding: 8px 12px; }
.fine { color: var(--ink-dim); font-size: 13px; margin: 0; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--gutter-r) 8px var(--gutter-l);
  flex: 0 0 auto;
}
.topbar-title { flex: 1; font-family: var(--display); font-weight: 600; font-size: 18px; }
.topbar-actions { display: flex; gap: 6px; }
.status-pills { flex: 1; display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.pill { border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 13px; background: rgba(255,255,255,.1); white-space: nowrap; }
.code-pill { font-family: var(--display); letter-spacing: .15em; }
.trump-pill { background: var(--card); color: var(--card-ink); }
.trump-pill.red { color: var(--red); }
.bid-pill { background: var(--brass); color: #2a1d05; }

/* ---------- Lobby ---------- */
.lobby-inner { flex: 1; overflow-y: auto; padding: 8px var(--gutter-r) 24px var(--gutter-l); display: grid; gap: 18px; align-content: start; max-width: 480px; width: 100%; margin: 0 auto; }
.code-card { background: var(--panel); border-radius: 20px; padding: 18px; text-align: center; display: grid; gap: 8px; justify-items: center; border: 1px solid rgba(255,255,255,.08); }
.code-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); font-weight: 800; }
.code-big { font-family: var(--display); font-weight: 700; font-size: 56px; letter-spacing: .22em; color: var(--brass); line-height: 1; padding-left: .22em; }
.player-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.player-list li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px 12px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 16px; color: #2a1d05; flex: 0 0 auto;
}
.player-list .name { flex: 1; font-weight: 800; }
.tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.12); }
.tag.host { background: var(--brass); color: #2a1d05; }
.tag.off { background: rgba(255,107,90,.25); color: var(--bad); }
.lobby-settings { display: grid; gap: 8px; }
.toggle { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--brass); padding: 0; }
.lobby-foot { display: grid; gap: 10px; }
.hint-text { color: var(--ink-dim); margin: 0; text-align: center; }

/* ---------- Game ---------- */
#game { overflow: hidden; }
.game-top { padding-bottom: 4px; }
.seats {
  display: flex; gap: 6px; padding: 4px var(--gutter-r) 6px var(--gutter-l);
  overflow-x: auto; scrollbar-width: none; flex: 0 0 auto;
}
.seats::-webkit-scrollbar { display: none; }
.seat {
  flex: 1 0 auto; min-width: 72px; max-width: 120px;
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 6px 8px;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center;
  border: 2px solid transparent; transition: border-color .2s, background .2s;
  position: relative;
}
.seat .avatar { width: 30px; height: 30px; font-size: 13px; grid-row: span 2; }
.seat .sname { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .sinfo { font-size: 12px; color: var(--ink-dim); display: flex; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seat .sinfo b { color: var(--ink); }
.seat.turn { border-color: var(--brass); background: rgba(246,196,83,.16); animation: pulse 1.4s ease-in-out infinite; }
.seat.me { background: rgba(255,255,255,.14); }
.seat.me .sname { color: var(--brass); }
.seat .cc { display: inline-flex; align-items: center; gap: 2px; }
.seat .cc i { display: inline-block; width: 7px; height: 10px; border: 1.5px solid var(--ink-dim); border-radius: 2px; }
.seat .hp { color: var(--good); font-weight: 800; }
.seat.off { opacity: .5; }
.seat .chip {
  position: absolute; top: -7px; right: -4px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 999px; background: var(--card); color: var(--card-ink);
}
.seat .chip.bidder { background: var(--brass); }
.seat .chip.pass { background: rgba(0,0,0,.45); color: var(--ink-dim); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246,196,83,.35); } 50% { box-shadow: 0 0 0 6px rgba(246,196,83,0); } }

.table { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0 var(--gutter-r) 0 var(--gutter-l); }
.felt-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; }
.ticker { flex: 0 0 auto; font-size: 13px; color: var(--ink-dim); text-align: center; padding: 4px 0 6px; min-height: 24px; }
.ticker b { color: var(--ink); }

.trick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.trick .played { display: grid; justify-items: center; gap: 4px; }
.trick .who { font-size: 11px; font-weight: 800; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trick .played.leading .card { box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(0,0,0,.4); }
.trick .played.leading .who { color: var(--brass); }
.empty-trick { color: var(--ink-dim); font-family: var(--display); font-size: 18px; text-align: center; }
.last-trick { display: grid; gap: 4px; justify-items: center; }
.last-trick .mini { display: flex; gap: 4px; }
.last-trick .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); font-weight: 800; }

/* Center panels (bidding, trumps, results) */
.panel {
  background: var(--panel); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 16px; width: min(100%, 420px); display: grid; gap: 12px; text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.panel h2 { font-size: 22px; }
.panel p { margin: 0; color: var(--ink-dim); }
.bid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bid-grid .btn { padding: 14px 4px; font-size: 20px; }
.pass-btn { width: 100%; }
.suit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.suit-btn { background: var(--card); color: var(--card-ink); border: 0; border-radius: 14px; padding: 12px 4px; display: grid; gap: 2px; justify-items: center; font-weight: 800; font-size: 12px; }
.suit-btn .sym { font-size: 32px; line-height: 1; }
.suit-btn.red { color: var(--red); }
.suit-btn.suggest { box-shadow: 0 0 0 3px var(--brass); }
.waiting { display: grid; gap: 6px; justify-items: center; }
.dots span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); margin: 0 3px; animation: bounce 1s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

/* ---------- Cards ---------- */
.card {
  width: 56px; height: 80px; border-radius: 8px; background: var(--card); color: var(--card-ink);
  position: relative; box-shadow: 0 4px 10px rgba(0,0,0,.35); border: 0; padding: 0;
  font-family: var(--display); font-weight: 700; display: grid; place-items: center;
  user-select: none; -webkit-user-select: none; flex: 0 0 auto;
}
.card.red { color: var(--red); }
.card .corner { position: absolute; top: 4px; left: 5px; font-size: 13px; line-height: 1.05; text-align: center; }
.card .corner small { display: block; font-size: 12px; }
.card .big { font-size: 30px; line-height: 1; }
.card.joker .big { font-size: 24px; }
.card.joker .corner { font-size: 10px; letter-spacing: .02em; }
.card.trump::after { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 2.5px solid var(--brass); pointer-events: none; }
.card.trump::before { content: "TRUMP"; position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: .12em; color: var(--brass-deep); font-weight: 700; }
.card.sm.trump::before { display: none; }
.card.sm { width: 36px; height: 52px; }
.card.sm .big { font-size: 18px; } .card.sm .corner { font-size: 9px; } .card.sm .corner small { font-size: 8px; }
.card.lg { width: 64px; height: 92px; }
.card.lg .big { font-size: 34px; }

/* ---------- Hand ---------- */
.hand-area {
  flex: 0 0 auto; padding: 6px var(--gutter-r) max(10px, env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  background: linear-gradient(180deg, rgba(6,38,28,0) 0%, rgba(6,38,28,.9) 30%);
  display: grid; gap: 8px;
}
.action-bar { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 44px; flex-wrap: wrap; }
.action-bar .note { color: var(--ink-dim); font-size: 14px; }
.hand { display: flex; gap: 6px; justify-content: center; overflow-x: auto; padding: 14px 4px 4px; scrollbar-width: none; min-height: 110px; }
.hand::-webkit-scrollbar { display: none; }
.hand .card { transition: transform .15s ease, opacity .15s, box-shadow .15s; }
.hand .card.legal { cursor: pointer; }
.hand .card.legal:active { transform: translateY(-4px); }
.hand .card.dim { opacity: .35; }
.hand .card.selected { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--bad), 0 8px 18px rgba(0,0,0,.4); }
.hand .card.suggest { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.5); transform: translateY(-6px); }
.hand.crowded .card { margin-left: -14px; }
.hand.crowded .card:first-child { margin-left: 0; }

/* ---------- Hint bubble ---------- */
.hint-bubble {
  justify-self: center; background: var(--brass); color: #2a1d05; border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: 13px;
  max-width: min(92vw, 360px); text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.3); pointer-events: none;
}

/* ---------- Sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet-panel {
  position: relative; width: min(100%, 560px); max-height: 88%; background: #0d2e24; color: var(--ink);
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column; animation: up .22s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid rgba(255,255,255,.12);
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter-r) 10px var(--gutter-l); }
.sheet-head h2 { font-size: 22px; }
.sheet-body { overflow-y: auto; padding: 0 var(--gutter-r) 20px var(--gutter-l); line-height: 1.5; }
.sheet-foot { padding: 10px var(--gutter-r) 14px var(--gutter-l); display: grid; gap: 8px; }
.rules h3 { font-size: 16px; margin-top: 16px; color: var(--brass); }
.score-cheat { background: rgba(246,196,83,.12); border: 1px solid rgba(246,196,83,.35); border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px; margin-bottom: 12px; }
.sc-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--brass); }
.sc-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; }
.sc-big { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--brass); text-align: center; font-variant-numeric: tabular-nums; }
.sc-note { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.4; }
.power { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.power li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; font-size: 14px; line-height: 1.3; }
.pc { width: 36px; height: 48px; border-radius: 6px; background: var(--card); color: var(--card-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 18px; box-shadow: 0 0 0 2px var(--brass); }
.pc.red { color: var(--red); }
.rules p { margin: 6px 0; }
.ranking { background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; }
.ranking .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); font-weight: 800; }
.ranking .row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ranking .row .card.sm { width: 38px; height: 54px; }
.ranking .row .card.sm .big { font-size: 16px; margin-top: 10px; }
.ranking .row .card.sm .corner { display: block; font-size: 11px; top: 3px; left: 4px; }
.ranking .row .card.sm .corner small { display: none; }
.ranking .row .card.sm.joker .corner { font-size: 7px; }

/* Chat */
.chat-panel { height: 70%; }
.chat-log { flex: 1; overflow-y: auto; padding: 0 var(--gutter-r) 8px var(--gutter-l); display: grid; gap: 6px; align-content: end; }
.msg { background: rgba(255,255,255,.08); border-radius: 12px; padding: 7px 10px; max-width: 85%; justify-self: start; overflow-wrap: anywhere; }
.msg.mine { background: rgba(246,196,83,.22); justify-self: end; }
.msg.sys { background: none; color: var(--ink-dim); font-size: 13px; justify-self: center; text-align: center; max-width: 100%; }
.msg .from { font-size: 11px; font-weight: 800; color: var(--brass); display: block; }
.emoji-row { display: flex; gap: 6px; padding: 6px var(--gutter-r) 6px var(--gutter-l); overflow-x: auto; }
.emoji-row button { border: 0; background: rgba(255,255,255,.1); border-radius: 10px; font-size: 22px; padding: 6px 10px; flex: 0 0 auto; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px var(--gutter-r) 10px var(--gutter-l); }

/* Score sheet */
.score-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); padding: 6px 4px; }
.score-table td { padding: 8px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.score-table td.num { text-align: right; font-weight: 800; }
.score-table .up { color: var(--good); } .score-table .down { color: var(--bad); }
.score-table .note { font-size: 12px; color: var(--ink-dim); display: block; }
.score-table tr.bidder td:first-child::before { content: "★ "; color: var(--brass); }
.result-head { text-align: center; font-family: var(--display); font-size: 20px; margin-bottom: 10px; }
.result-head.made { color: var(--good); } .result-head.missed { color: var(--bad); }
.winner-banner { text-align: center; font-family: var(--display); font-size: 36px; color: var(--brass); padding: 10px 0; text-shadow: 0 4px 0 #8a5f0d; }

/* Reactions floating over the table */
.reactions { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float { position: absolute; bottom: 160px; font-size: 40px; animation: floatUp 2.2s ease-out forwards; display: grid; justify-items: center; }
.float small { font-size: 11px; font-weight: 800; color: var(--ink); background: rgba(0,0,0,.4); border-radius: 8px; padding: 2px 6px; }
@keyframes floatUp { from { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: 1; transform: scale(1.1); } to { transform: translateY(-260px) scale(1); opacity: 0; } }

/* Toast */
.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); z-index: 30; background: var(--ink); color: #1b1a17; padding: 10px 16px; border-radius: 12px; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.35); max-width: 92vw; text-align: center; }
.toast.error { background: var(--bad); color: #fff; }

@media (min-width: 700px) {
  .card { width: 68px; height: 98px; } .card .big { font-size: 36px; } .card .corner { font-size: 15px; }
  .seat { max-width: 160px; }
  .hand { min-height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Game picker ---------- */
.game-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-opt { background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); border-radius: 14px; padding: 10px 12px; text-align: left; display: grid; gap: 2px; color: var(--ink); }
.game-opt b { font-family: var(--display); font-size: 20px; }
.game-opt small { color: var(--ink-dim); font-size: 12px; line-height: 1.3; }
.game-opt.on { border-color: var(--brass); background: rgba(246,196,83,.16); }
.game-pick.small .game-opt b { font-size: 16px; }
.game-pick.locked .game-opt { pointer-events: none; opacity: .75; }

/* ---------- Deeds ---------- */
.deeds-main { flex: 1; min-height: 0; overflow-y: auto; padding: 4px var(--gutter-r) 8px var(--gutter-l); display: grid; gap: 10px; align-content: start; }
.opponents { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.opp { background: rgba(255,255,255,.07); border-radius: 14px; padding: 8px 10px; display: grid; gap: 6px; border: 2px solid transparent; }
.opp.turn { border-color: var(--brass); background: rgba(246,196,83,.14); }
.opp.off { opacity: .5; }
.opp-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.opp-head .avatar { width: 30px; height: 30px; font-size: 13px; grid-row: span 2; }
.opp-name { font-weight: 800; font-size: 14px; }
.opp-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.opp-stats span { white-space: nowrap; }
.opp-groups, .my-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.pgroup { background: rgba(0,0,0,.25); border-radius: 10px; padding: 6px 8px; display: grid; gap: 4px; min-width: 0; border: 1.5px solid transparent; }
.pgroup.complete { border-color: var(--good); }
.pg-head { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.pg-count { color: var(--ink-dim); }
.pgroup.complete .pg-count { color: var(--good); font-weight: 800; }
.pg-rent { margin-left: auto; color: var(--brass); font-weight: 800; }
.pg-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.prop-chip { font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; cursor: pointer; }
.build { font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--card); color: var(--card-ink); }
.my-table { background: var(--panel); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 10px 12px; display: grid; gap: 8px; }
.my-head { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--ink-dim); }
.my-head b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.bank-row { display: flex; flex-wrap: wrap; gap: 4px; }
.money-chip { background: #2f8f5b; color: #fff; font-weight: 800; font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.note { color: var(--ink-dim); font-size: 13px; }

/* Deeds cards in hand */
.deeds-hand { min-height: 120px; }
.dcard { width: 74px; height: 104px; border-radius: 9px; background: var(--card); color: var(--card-ink); border: 0; padding: 0; position: relative; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.35); font-family: var(--body); text-align: left; flex: 0 0 auto; transition: transform .15s, box-shadow .15s; }
.dcard.legal { cursor: pointer; }
.dcard.selected { transform: translateY(-12px); box-shadow: 0 0 0 3px var(--bad), 0 8px 18px rgba(0,0,0,.4); }
.dcard .band { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; background: var(--sc, #ddd); color: var(--st, #111); }
.dcard .action-band { background: #2a1d05; color: var(--brass); }
.dcard.rent .band, .dcard.wild .band { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dcard .dn { font-weight: 800; font-size: 11px; line-height: 1.15; padding: 5px 6px; align-self: start; }
.dcard .dv { font-family: var(--display); font-weight: 700; font-size: 13px; padding: 0 6px 5px; color: #2f8f5b; }
.dcard.money { place-items: center; grid-template-rows: 1fr auto; background: linear-gradient(180deg, #e9f6ee, #cfeedd); }
.dcard.money .dv { font-size: 28px; padding: 0; color: #1f6f44; }
.dcard.money .dk { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #1f6f44; padding-bottom: 8px; }
.dcard.big { width: 110px; height: 156px; }
.dcard.big .dn { font-size: 14px; } .dcard.big .band { font-size: 11px; } .dcard.big .dv { font-size: 18px; } .dcard.big.money .dv { font-size: 40px; }
.hand.crowded .dcard { margin-left: -22px; }
.hand.crowded .dcard:first-child { margin-left: 0; }

.plays { display: inline-flex; gap: 4px; }
.plays i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.15); }
.plays i.on { background: var(--brass); }

.card-detail { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cd-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--brass); font-weight: 800; }
.card-detail p { margin: 6px 0; line-height: 1.4; }
.quip { color: var(--ink-dim); font-style: italic; }
.set-btn { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; }
.set-btn b { margin-left: auto; color: var(--brass); }
.sheet-foot .btn { width: 100%; }
.pbtn { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; margin-bottom: 8px; }
.pbtn small { display: block; color: var(--ink-dim); font-size: 12px; font-weight: 600; }
.toggle.inline { display: inline-flex; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.pay-item { background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.15); border-radius: 10px; padding: 8px; color: var(--ink); text-align: left; display: grid; gap: 2px; }
.pay-item b { color: var(--brass); font-family: var(--display); font-size: 16px; }
.pay-item span { font-size: 12px; } .pay-item i { color: var(--ink-dim); }
.pay-item.on { border-color: var(--bad); background: rgba(255,107,90,.18); }
#deedsSheetBody .pgroup { cursor: pointer; }
#deedsSheetBody .pgroup:active { background: rgba(246,196,83,.2); }
.sets-table { display: grid; gap: 6px; margin-top: 10px; }
.set-line { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; font-size: 13px; }
.set-line .note, .set-line em { grid-column: 2; }
.set-line em { color: var(--ink-dim); font-size: 12px; }

/* ---------- Deeds look: bright, white, colourful ---------- */
#deeds, #deedsSheet .sheet-panel, #menuSheet.deeds-mode .sheet-panel {
  --ink: #1d1a14; --ink-dim: #6b6456; --panel: #ffffff; --card: #ffffff; --card-ink: #1d1a14;
  --brass: #ffb703; --brass-deep: #f08c00; --good: #2a9d5c; --bad: #e63946;
  color: var(--ink);
}
#deeds { background: #f6f3ec; }
#deeds::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #d7263d, #f28c28, #f2c531, #2e9e5b, #7ec8e3, #1f4e9c, #d94c8a); z-index: 3; }
#deeds .topbar { background: #fff; border-bottom: 1px solid #e6e1d6; margin-top: 6px; }
#deeds .icon-btn, #deeds .pill, #deeds .opp, #deeds .pay-item { background: #efeae0; }
#deeds .icon-btn.on { background: var(--brass); }
#deeds .bid-pill { background: var(--brass); color: #2a1d05; }
#deeds .badge { background: var(--bad); }
#deeds .opp { background: #fff; box-shadow: 0 2px 8px rgba(40,30,10,.08); border-color: #e6e1d6; }
#deeds .opp.turn { border-color: var(--brass); background: #fff8e1; }
#deeds .pgroup { background: #f6f3ec; border: 1.5px solid #e6e1d6; border-left: 6px solid var(--gc, #ccc); }
#deeds .pgroup.complete { border-color: var(--good); border-left-color: var(--gc, #ccc); background: #ecf8f0; }
#deeds .my-table { background: #fff; border: 1px solid #e6e1d6; box-shadow: 0 4px 14px rgba(40,30,10,.08); }
#deeds .my-head b { color: var(--ink); }
#deeds .ticker { color: var(--ink-dim); }
#deeds .ticker b { color: var(--ink); }
#deeds .hand-area { background: linear-gradient(180deg, rgba(246,243,236,0) 0%, #efeae0 30%); }
#deeds .btn-ghost { background: #fff; color: var(--ink); border-color: #d9d3c6; }
#deeds .plays i { background: #ddd6c8; }
#deeds .plays i.on { background: var(--brass); }
#deeds .dcard { box-shadow: 0 2px 6px rgba(40,30,10,.18); border: 1px solid #e6e1d6; }
#deeds .build { background: #2a1d05; color: var(--brass); }
#deeds .reactions .float small { background: rgba(0,0,0,.6); color: #fff; }
#deedsSheet .sheet-panel { background: #fff; border-top: 1px solid #e6e1d6; }
#deedsSheet .btn-ghost { background: #f6f3ec; color: var(--ink); border-color: #d9d3c6; }
#deedsSheet .pay-item { background: #f6f3ec; border-color: #e6e1d6; }
#deedsSheet .pay-item.on { border-color: var(--bad); background: #fde8ea; }
#deedsSheet .pgroup { background: #f6f3ec; border: 1.5px solid #e6e1d6; border-left: 6px solid var(--gc, #ccc); }
#deedsSheet .pgroup.complete { background: #ecf8f0; border-color: var(--good); border-left-color: var(--gc, #ccc); }
#deedsSheet .cd-kind { color: var(--brass-deep); }
#deedsSheet .quip { color: #8a6d1d; }
#deedsSheet .dcard.big { box-shadow: 0 6px 16px rgba(40,30,10,.2); }
#deedsSheet .icon-btn { background: #efeae0; }
#deedsSheet .toggle input { accent-color: var(--brass-deep); }
#deeds .money-chip, #deedsSheet .money-chip { background: #2a9d5c; }

/* Deeds: full-width stacked player tables */
.opponents { grid-template-columns: 1fr; }
#deeds .opp-groups, #deeds .my-groups { display: grid; grid-template-columns: 1fr; gap: 6px; }
#deeds .pgroup { width: 100%; }
#deeds .pg-cards .prop-chip { font-size: 12px; padding: 5px 9px; }
#deeds .prop-chip.picked { outline: 3px solid var(--bad); outline-offset: 1px; }
/* Pay with real cards */
.pay-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; justify-content: center; }
.pay-card { display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.pay-card .dcard { transition: transform .12s, box-shadow .12s; }
.pay-card.on .dcard { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--bad), 0 8px 18px rgba(0,0,0,.25); }
.pay-from { font-size: 11px; color: var(--ink-dim); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
/* Brutal cards */
.dcard.brutal .action-band { background: #b3001b; color: #fff; }
.dcard.brutal { box-shadow: 0 0 0 2px #b3001b, 0 2px 6px rgba(40,30,10,.18); }
/* Event pop-ups */
.event-pop { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); transform: translateX(-50%); z-index: 15; width: min(92vw, 420px); background: #1d1a14; color: #fff; border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.35); animation: popIn .25s ease-out; font-size: 14px; line-height: 1.3; }
.event-pop.big { background: linear-gradient(135deg, #b3001b, #f08c00); font-size: 15px; font-weight: 700; }
.event-pop.out { animation: popOut .3s ease-in forwards; }
.event-pop .avatar { width: 36px; height: 36px; font-size: 14px; }
.ev-icon { font-size: 24px; }
.ev-card { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.2); border-radius: 6px; padding: 2px 7px; margin-bottom: 4px; }
@keyframes popIn { from { transform: translate(-50%, -20px) scale(.9); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes popOut { to { transform: translate(-50%, -16px); opacity: 0; } }
/* Chat toast */
.toast.chat { background: #1d1a14; color: #fff; text-align: left; max-width: min(92vw, 420px); }
/* Winner overlay */
.win-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(8, 20, 14, .92); display: grid; place-items: center; }
.win-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.win-card { position: relative; text-align: center; display: grid; gap: 8px; justify-items: center; padding: 24px; animation: winIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.win-trophy { font-size: 96px; line-height: 1; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); animation: bob 1.6s ease-in-out infinite; }
.win-label { font-size: 14px; text-transform: uppercase; letter-spacing: .3em; color: #f6c453; font-weight: 800; }
.win-name { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 14vw, 84px); color: #fff; line-height: 1; text-shadow: 0 6px 0 #8a5f0d, 0 16px 40px rgba(0,0,0,.5); text-wrap: balance; }
.win-sub { color: rgba(255,255,255,.8); font-size: 18px; margin-bottom: 12px; }
.win-card .btn-big { width: auto; padding-inline: 40px; }
@keyframes winIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

.ev-why { margin-top: 5px; font-size: 12px; font-weight: 600; opacity: .9; line-height: 1.35; border-top: 1px solid rgba(255,255,255,.25); padding-top: 5px; }

/* Settings selects, tally, tabs, taunts, timer, win stats, watching */
.sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.sel select { background: rgba(255,255,255,.1); color: var(--ink); border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px; padding: 8px 10px; font: inherit; }
.tally { background: rgba(246,196,83,.14); border: 1px solid rgba(246,196,83,.35); border-radius: 12px; padding: 8px 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.tally > b { color: var(--brass); }
.tabs { display: flex; gap: 4px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 3px; }
.tab { border: 0; background: none; color: var(--ink-dim); font-weight: 800; padding: 7px 12px; border-radius: 10px; font-size: 14px; }
.tab.on { background: var(--brass); color: #2a1d05; }
.chat-log.history { align-content: start; }
.msg.hist { text-align: left; justify-self: stretch; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.emoji-row .taunt { font-size: 13px; font-weight: 800; padding: 8px 10px; }
.float.text span { font-size: 18px; font-weight: 800; background: var(--brass); color: #2a1d05; border-radius: 12px; padding: 6px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.3); white-space: nowrap; }
.timer-pill { background: rgba(255,255,255,.14); font-variant-numeric: tabular-nums; }
.timer-pill.mine { background: var(--brass); color: #2a1d05; }
.timer-pill.urgent { background: var(--bad); color: #fff; animation: pulse 1s infinite; }
#deeds .timer-pill { background: #efeae0; }
#deeds .timer-pill.mine { background: var(--brass); }
#deeds .timer-pill.urgent { background: var(--bad); color: #fff; }
.win-stats { display: grid; gap: 4px; width: min(92vw, 420px); margin: 4px 0 12px; }
.ws-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border-radius: 10px; padding: 6px 10px; }
.ws-row b { color: #fff; text-align: right; }
.win-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.watching-bar { background: var(--brass); color: #2a1d05; font-weight: 800; font-size: 13px; text-align: center; padding: 6px var(--gutter-r) 6px var(--gutter-l); }
.insured { font-size: 11px; font-weight: 800; color: #1f6f44; background: #d8f3e3; border-radius: 6px; padding: 1px 6px; }

/* Directed taunts */
.taunt.bird { font-size: 22px; padding: 4px 12px; }
.taunt.who { background: var(--brass); color: #2a1d05; }
.taunt-to { align-self: center; font-weight: 800; font-size: 13px; color: var(--brass); white-space: nowrap; }
.taunt-blast { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; text-align: center; background: rgba(179, 0, 27, .94); color: #fff; animation: blastIn .35s cubic-bezier(.2, 1.4, .4, 1); padding: 24px; }
.taunt-blast.out { animation: blastOut .4s ease-in forwards; }
.tb-from { font-size: 16px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; opacity: .85; }
.tb-text { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 9vw, 64px); line-height: 1.1; margin: 10px 0; text-shadow: 0 6px 0 rgba(0,0,0,.3); text-wrap: balance; }
.tb-text.bird { font-size: 160px; animation: wag .5s ease-in-out infinite alternate; }
.tb-to { font-size: 18px; font-weight: 800; }
@keyframes blastIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blastOut { to { transform: scale(1.1); opacity: 0; } }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* Showdown */
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.lines.small .line { font-size: 13px; padding: 8px 6px; }
.line { font-size: 14px; padding: 10px 8px; text-align: center; }
.line.picked { outline: 3px solid var(--bad); }
#dLineInput, #dComeback { margin-top: 6px; }
.sd-quote { background: #fde8ea; color: #7a0012; border-radius: 10px; padding: 8px 10px; font-weight: 800; margin-bottom: 8px; }
.showdown { position: fixed; inset: 0; z-index: 46; display: grid; place-content: center; text-align: center; padding: 24px; color: #fff; background: radial-gradient(120% 100% at 50% 0%, #b3001b, #3a0008 70%); animation: blastIn .35s cubic-bezier(.2, 1.4, .4, 1); gap: 10px; }
.showdown.comeback { background: radial-gradient(120% 100% at 50% 0%, #1f4e9c, #061a33 70%); }
.showdown.out { animation: blastOut .4s ease-in forwards; }
.sd-label { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 800; opacity: .8; }
.sd-who { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 800; }
.sd-who .avatar { width: 34px; height: 34px; font-size: 13px; }
.sd-arrow { font-size: 24px; opacity: .7; margin: 0 4px; }
.sd-line { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 8vw, 54px); line-height: 1.1; text-shadow: 0 6px 0 rgba(0,0,0,.35); text-wrap: balance; max-width: 92vw; }
.sd-card { display: inline-block; justify-self: center; background: #fff; color: #b3001b; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; border-radius: 8px; padding: 4px 10px; }
.sd-text { font-size: 16px; font-weight: 700; max-width: 92vw; }
.sd-why { font-size: 13px; opacity: .85; max-width: 92vw; line-height: 1.35; }
.burn { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; background: radial-gradient(100% 60% at 50% 100%, rgba(255,90,0,.55), rgba(0,0,0,0) 70%); animation: burnFade 2.6s ease-out forwards; }
.burn span { position: absolute; bottom: -40px; animation: rise 1.8s ease-out forwards; }
.burn-text { position: absolute; left: 0; right: 0; bottom: 38%; text-align: center; font-family: var(--display); font-weight: 700; font-size: 36px; color: #fff; text-shadow: 0 4px 0 #b3001b, 0 10px 30px rgba(0,0,0,.6); }
@keyframes rise { to { transform: translateY(-90vh) scale(1.6); opacity: 0; } }
@keyframes burnFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.exposed { background: #fff3cd; border: 1.5px dashed #e0a800; border-radius: 10px; padding: 6px 8px; display: grid; gap: 6px; }
.exposed.mine { background: #fde8ea; border-color: var(--bad); font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.ex-head { font-size: 12px; font-weight: 800; color: #7a5a00; }
.ex-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-cards .dcard { width: 54px; height: 76px; }
.ex-cards .dcard .dn { font-size: 9px; } .ex-cards .dcard .band { font-size: 7px; padding: 3px 4px; } .ex-cards .dcard .dv { font-size: 10px; } .ex-cards .dcard.money .dv { font-size: 18px; }
.jailed { background: #1d1a14; color: #ffb703; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 5px 8px; }
.ev-dice { font-size: 40px; line-height: 1; letter-spacing: 2px; }
.rubin { margin-top: 12px; display: grid; gap: 6px; }
.rub-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rub-row .taunt { background: rgba(255,255,255,.1); border: 0; border-radius: 10px; color: var(--ink); font-weight: 800; padding: 8px 10px; font-size: 13px; }
.rub-row .taunt:disabled { opacity: .4; }

/* Home: name row, avatar picker */
.name-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.avatar-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.avatar-pick button { font-size: 24px; width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); }
.avatar-pick button.on { border-color: var(--brass); background: rgba(246,196,83,.2); transform: scale(1.1); }
.avatar.emoji { font-size: 22px; background: rgba(255,255,255,.12) !important; }
.seat .avatar.emoji, .opp .avatar.emoji { font-size: 18px; }
/* Lobby fun */
.lobby-fun { display: grid; gap: 8px; }
.player-list li.ready { border: 2px solid var(--good); }
.player-list li.ready .avatar { animation: wiggle .6s ease-in-out 2; }
.player-list .forfeit-tag { font-size: 12px; color: var(--ink-dim); width: 100%; }
.forfeits { display: grid; gap: 4px; font-size: 13px; color: var(--ink-dim); }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.15); } 75% { transform: rotate(14deg) scale(1.15); } }
/* Spinner */
.spin-overlay { position: fixed; inset: 0; z-index: 42; background: rgba(8,20,14,.92); display: grid; place-items: center; }
.spin-card { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 20px; }
.wheel { width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; position: relative; border: 8px solid #f6c453; box-shadow: 0 0 0 6px #8a5f0d, 0 20px 50px rgba(0,0,0,.6); transition: transform 4s cubic-bezier(.12, .8, .1, 1); overflow: hidden; }
.wheel .seg { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; width: 50%; height: 50%; }
.wheel .lbl { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; font-family: var(--display); font-weight: 700; font-size: 15px; color: #1d1a14; white-space: nowrap; }
.spin-card::before { content: "▼"; color: #fff; font-size: 34px; position: relative; top: 16px; z-index: 2; text-shadow: 0 4px 10px rgba(0,0,0,.6); }
.spin-result { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--brass); min-height: 40px; text-shadow: 0 4px 0 #8a5f0d; }
/* Pile-on bar */
.pileon-bar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); z-index: 47; background: #1d1a14; color: #fff; border-radius: 16px; padding: 10px 12px; display: grid; gap: 6px; justify-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: popIn .25s ease-out; }
.pileon-btns { display: flex; gap: 6px; }
.pileon-btns button { border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; font-weight: 800; border-radius: 12px; padding: 8px 12px; }
.pileon-tally { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 47; font-family: var(--display); font-weight: 700; font-size: 28px; color: #fff; background: rgba(0,0,0,.7); border-radius: 16px; padding: 10px 18px; animation: popIn .3s ease-out; pointer-events: none; }
/* Voice */
.chat-tools { display: flex; gap: 6px; padding: 0 var(--gutter-r) 6px var(--gutter-l); }
#voiceBtn.rec { background: var(--bad); color: #fff; animation: pulse 1s infinite; }
.voice-bar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); transform: translateX(-50%); z-index: 47; }
/* Flying things */
.fly { position: fixed; z-index: 48; pointer-events: none; transition: transform .9s cubic-bezier(.3, 1.2, .4, 1), opacity .9s; will-change: transform; }
.fly.chip { background: #2a9d5c; color: #fff; font-weight: 800; padding: 6px 10px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.fly.deed { font-weight: 800; padding: 6px 10px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.shake { animation: shake .5s ease-in-out 1; }
.shake-hard { animation: shake .7s ease-in-out 2; }
@keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-8px, 2px) rotate(-1deg); } 40% { transform: translate(8px, -2px) rotate(1deg); } 60% { transform: translate(-6px, 1px); } 80% { transform: translate(6px, -1px); } }
.crack { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; pointer-events: none; animation: popIn .3s ease-out; }
.collapse { animation: collapse .9s ease-in forwards; }
@keyframes collapse { 0% { transform: none; opacity: 1; } 30% { transform: rotate(-3deg); } 100% { transform: translateY(60vh) rotate(12deg); opacity: 0; } }
.hits { position: absolute; top: -6px; left: -6px; font-size: 14px; }
/* Dice */
.dice-overlay { position: fixed; inset: 0; z-index: 46; display: grid; place-content: center; text-align: center; background: rgba(8,20,14,.9); color: #fff; gap: 12px; animation: blastIn .3s ease-out; }
.dice-overlay.out { animation: blastOut .35s ease-in forwards; }
.dice { display: flex; gap: 16px; justify-content: center; }
.die { width: 84px; height: 84px; border-radius: 16px; background: #fff; color: #1d1a14; display: grid; place-items: center; font-size: 64px; line-height: 1; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tumble .9s ease-out; }
@keyframes tumble { 0% { transform: translateY(-120px) rotate(-200deg) scale(.6); } 60% { transform: translateY(10px) rotate(20deg); } 80% { transform: translateY(-8px) rotate(-6deg); } 100% { transform: none; } }
.dice-verdict { font-family: var(--display); font-weight: 700; font-size: 44px; color: var(--brass); text-shadow: 0 5px 0 #8a5f0d; animation: popIn .3s ease-out .9s both; }
.dice-verdict.nope { color: #ff6b5a; text-shadow: 0 5px 0 #7a0012; }
/* Showdown slap, denied */
.sd-who .avatar.slapped { animation: slap .6s ease-out both; }
@keyframes slap { 0% { transform: none; } 30% { transform: translateX(26px) rotate(18deg); } 60% { transform: translateX(-6px) rotate(-6deg); } 100% { transform: none; } }
.smack { position: absolute; font-family: var(--display); font-weight: 700; font-size: 64px; color: #ffb703; text-shadow: 0 4px 0 #7a0012; transform: rotate(-12deg); animation: popIn .3s ease-out; left: 50%; top: 18%; margin-left: -70px; }
.denied { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-16deg); border: 6px solid #ff6b5a; color: #ff6b5a; font-family: var(--display); font-weight: 700; font-size: 56px; padding: 6px 18px; border-radius: 12px; letter-spacing: .1em; animation: stamp .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-16deg) scale(3); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-16deg) scale(1); opacity: 1; } }
/* 110: walk of shame + jink */
.walk { position: fixed; left: -220px; bottom: calc(env(safe-area-inset-bottom, 0px) + 140px); z-index: 47; display: grid; justify-items: center; gap: 2px; animation: walkAcross 6s linear forwards; pointer-events: none; }
.walk .avatar { width: 56px; height: 56px; font-size: 22px; animation: waddle .5s ease-in-out infinite alternate; }
.walk .board { background: #fbf7ec; color: #1b1a17; font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.4); border: 2px solid #8a5f0d; white-space: nowrap; }
@keyframes walkAcross { to { left: 110vw; } }
@keyframes waddle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.jink { position: fixed; inset: 0; z-index: 47; display: grid; place-content: center; pointer-events: none; }
.jink span { font-family: var(--display); font-weight: 700; font-size: 110px; color: var(--brass); text-shadow: 0 10px 0 #8a5f0d, 0 20px 60px rgba(0,0,0,.6); animation: spinIn 1.2s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes spinIn { from { transform: rotate(-720deg) scale(0); } to { transform: none; } }
.nick { font-size: 11px; color: var(--brass); font-weight: 800; font-style: italic; }

.emoji-row .taunt:disabled { opacity: .35; }
#tauntRow[data-cool]:not([data-cool=""])::before { content: "⏱ " attr(data-cool); align-self: center; font-size: 12px; font-weight: 800; color: var(--brass); white-space: nowrap; }

/* ---------- The Back Room (home) ---------- */
#home.shop { background: #f3ead7; color: #1d1a14; --ink: #1d1a14; --ink-dim: #6b6456; --brass: #ffb703; --brass-deep: #f08c00; justify-content: flex-start; padding: 0; color-scheme: light; }
#home.shop .home-inner { width: min(100%, 440px); padding: 10px var(--gutter-r) 28px var(--gutter-l); gap: 18px; text-align: left; margin: 0 auto; }
.awning { height: 22px; width: 100%; background: repeating-linear-gradient(90deg, #d7263d 0 28px, #fbf7ec 28px 56px); border-bottom: 4px solid #1d1a14; box-shadow: 0 6px 0 rgba(0,0,0,.08); flex: 0 0 auto; }
.shop-sign { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 0 2px; position: relative; }
.shop-name { font-family: 'Lilita One', var(--display); font-size: clamp(46px, 13vw, 64px); line-height: .95; letter-spacing: .01em; color: #1d1a14; text-shadow: 4px 4px 0 #ffb703; text-wrap: balance; }
.shop-tag { margin: 4px 0 0; font-weight: 700; color: #6b6456; font-size: 15px; }
.open-sign { font-family: 'Lilita One', var(--display); font-size: 14px; letter-spacing: .3em; color: #ff2d55; border: 3px solid #ff2d55; border-radius: 10px; padding: 3px 10px 2px; text-shadow: 0 0 8px rgba(255,45,85,.9); box-shadow: 0 0 14px rgba(255,45,85,.5), inset 0 0 8px rgba(255,45,85,.3); animation: neon 3.2s infinite; transform: rotate(-6deg); margin-bottom: 4px; }
@keyframes neon { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .35; } 96% { opacity: 1; } 98% { opacity: .5; } }
.shelf-label, .counter-label { font-size: 12px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; color: #6b6456; }
.shelf { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 10px solid #8b5a2b; box-shadow: 0 12px 0 -4px #5b3a18; margin-bottom: 6px; }
.box { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: stretch; background: #fff; border: 3px solid #1d1a14; border-radius: 14px; padding: 10px; text-align: left; color: #1d1a14; box-shadow: 6px 6px 0 #1d1a14; transition: transform .12s, box-shadow .12s; }
.box.on { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #ffb703, 8px 8px 0 2px #1d1a14; }
.box:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #1d1a14; }
.box-art { display: grid; place-items: center; border-radius: 8px; font-family: 'Lilita One', var(--display); font-size: 26px; color: #fff; min-height: 92px; border: 2px solid #1d1a14; text-shadow: 2px 2px 0 rgba(0,0,0,.35); transform: rotate(-3deg); }
.box-art.felt { background: radial-gradient(circle at 30% 30%, #1a7a52, #0b3d2e); color: #f6c453; }
.box-art.deeds { background: linear-gradient(135deg, #d7263d, #f28c28 40%, #2e9e5b 70%, #1f4e9c); font-size: 22px; }
.box-art.soon-art { background: repeating-linear-gradient(45deg, #e6e1d6 0 8px, #d9d3c6 8px 16px); color: #6b6456; text-shadow: none; }
.box-info { display: grid; gap: 4px; align-content: center; min-width: 0; }
.box-info b { font-family: 'Lilita One', var(--display); font-size: 22px; letter-spacing: .01em; }
.box-info small { font-size: 13px; line-height: 1.35; color: #3f3a31; }
.box-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; font-weight: 800; color: #6b6456; margin-top: 2px; }
.spice { letter-spacing: -2px; }
.box.soon { opacity: .75; box-shadow: 4px 4px 0 #bbb; border-style: dashed; cursor: default; }
.tag-soon { background: #1d1a14; color: #ffb703; border-radius: 6px; padding: 2px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.counter { display: grid; gap: 14px; background: #fff; border: 3px solid #1d1a14; border-radius: 16px; padding: 14px; box-shadow: 6px 6px 0 #1d1a14; }
#home.shop input { background: #f3ead7; border: 2px solid #1d1a14; color: #1d1a14; }
#home.shop input::placeholder { color: #9a9287; }
#home.shop .field span { color: #6b6456; }
#home.shop .btn-ghost { background: #fff; color: #1d1a14; border: 2px solid #1d1a14; box-shadow: 3px 3px 0 #1d1a14; }
#home.shop .btn-primary { box-shadow: 0 5px 0 #8a5f0d, 3px 8px 0 #1d1a14; }
#home.shop .or { color: #6b6456; } #home.shop .or::before, #home.shop .or::after { background: #d9d3c6; }
#home.shop .avatar-pick button { background: #f3ead7; border: 2px solid #d9d3c6; }
#home.shop .avatar-pick button.on { border-color: #1d1a14; background: #ffb703; }
#home.shop .link { color: #1d1a14; }
#home.shop .fine { color: #6b6456; }

/* ---------- Shop extras ---------- */

#gamePage.shop { background: #f3ead7; color: #1d1a14; --ink: #1d1a14; --ink-dim: #6b6456; --brass: #ffb703; --brass-deep: #f08c00; justify-content: flex-start; padding: 0; color-scheme: light; overflow-y: auto; }
#gamePage.shop .home-inner { width: min(100%, 440px); padding: 6px var(--gutter-r) 28px var(--gutter-l); gap: 16px; text-align: left; margin: 0 auto; }
.shop input { background: #f3ead7; border: 2px solid #1d1a14; color: #1d1a14; }
.shop input::placeholder { color: #9a9287; }
.shop .field span { color: #6b6456; }
.shop .btn-ghost { background: #fff; color: #1d1a14; border: 2px solid #1d1a14; box-shadow: 3px 3px 0 #1d1a14; }
.shop .btn-primary { box-shadow: 0 5px 0 #8a5f0d, 3px 8px 0 #1d1a14; }
.shop .avatar-pick button { background: #f3ead7; border: 2px solid #d9d3c6; }
.shop .avatar-pick button.on { border-color: #1d1a14; background: #ffb703; }
.shop .link { color: #1d1a14; }
.shop .fine { color: #6b6456; }
.shop .icon-btn { background: #fff; border: 2px solid #1d1a14; color: #1d1a14; box-shadow: 3px 3px 0 #1d1a14; }
.shop-top { background: none; border: 0; padding-inline: 0; }
.shop-top .topbar-title { color: #6b6456; font-size: 13px; text-transform: uppercase; letter-spacing: .15em; }
.floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.floaters span { position: absolute; bottom: -60px; font-size: 34px; opacity: .14; animation: floatUp linear infinite; color: #1d1a14; }
.floaters span:nth-child(1) { left: 6%; animation-duration: 19s; } .floaters span:nth-child(2) { left: 18%; animation-duration: 23s; animation-delay: 4s; color: #d7263d; }
.floaters span:nth-child(3) { left: 33%; animation-duration: 17s; animation-delay: 9s; color: #d7263d; } .floaters span:nth-child(4) { left: 48%; animation-duration: 26s; animation-delay: 2s; }
.floaters span:nth-child(5) { left: 62%; animation-duration: 21s; animation-delay: 7s; font-size: 40px; } .floaters span:nth-child(6) { left: 75%; animation-duration: 18s; animation-delay: 12s; }
.floaters span:nth-child(7) { left: 86%; animation-duration: 24s; animation-delay: 1s; color: #d7263d; } .floaters span:nth-child(8) { left: 93%; animation-duration: 28s; animation-delay: 15s; }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-120vh) rotate(380deg); } }
#home.shop .home-inner { position: relative; z-index: 1; }
.keeper { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.bell { width: 56px; height: 56px; border-radius: 50%; background: #ffb703; border: 3px solid #1d1a14; box-shadow: 4px 4px 0 #1d1a14; font-size: 26px; display: grid; place-items: center; transition: transform .1s; }
.bell:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1d1a14; }
.bell.ring { animation: ring .5s ease-in-out; }
@keyframes ring { 0% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
.kp-bubble { background: #fff; border: 3px solid #1d1a14; border-radius: 16px; padding: 10px 14px; font-weight: 700; font-size: 14px; line-height: 1.3; position: relative; box-shadow: 4px 4px 0 #1d1a14; }
.kp-bubble::before { content: ""; position: absolute; left: -12px; top: 18px; border: 8px solid transparent; border-right-color: #1d1a14; border-left: 0; }
.kp-bubble::after { content: ""; position: absolute; left: -7px; top: 20px; border: 6px solid transparent; border-right-color: #fff; border-left: 0; }
.kp-bubble.pop { animation: kpPop .25s ease-out; }
@keyframes kpPop { from { transform: translateY(-8px) scale(.95); opacity: 0; } }
.knock { background: #1d1a14; color: #f3ead7; border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: 6px 6px 0 #ffb703; border: 3px solid #1d1a14; }
.knock-label { font-size: 12px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; color: #ffb703; }
.knock-row { display: grid; grid-template-columns: 1fr 96px auto; gap: 8px; }
.knock input { background: #2a261e; border-color: #4a4538; color: #fff; }
.knock input::placeholder { color: #8d8676; }
.knock .code-input { text-align: center; text-transform: uppercase; font-family: var(--display); font-weight: 800; letter-spacing: .08em; padding-inline: 4px; font-size: 16px; }
.shelf-note { font-weight: 700; text-transform: none; letter-spacing: 0; color: #9a9287; margin-left: 6px; font-size: 12px; }
.box { position: relative; }
.box.game-opt { cursor: pointer; }
.sticker { position: absolute; top: -12px; right: 10px; font-family: 'Lilita One', var(--display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 2px solid #1d1a14; transform: rotate(4deg); box-shadow: 2px 2px 0 #1d1a14; z-index: 1; }
.sticker.pick { background: #ff2d55; color: #fff; }
.sticker.new { background: #ffb703; color: #1d1a14; }
.sticker.old { background: #2e9e5b; color: #fff; }
.box-art.wt { background: linear-gradient(160deg, #ffb703, #ff7a00); color: #1d1a14; font-size: 22px; line-height: .95; text-align: center; text-shadow: 2px 2px 0 rgba(255,255,255,.5); }
.box-art.ca { background: linear-gradient(160deg, #7a1b2a, #2a0612); color: #f3ead7; font-size: 20px; line-height: .95; text-align: center; }
.box-art.cheat { background: linear-gradient(160deg, #d7263d, #6b0f1a); color: #fff; font-size: 24px; }
.box-art.spoons { background: linear-gradient(160deg, #cfd8dc, #78909c); font-size: 44px; text-shadow: none; }
.box-art.grasser { background: linear-gradient(160deg, #2e9e5b, #0b3d2e); color: #f6c453; font-size: 20px; }
.box-art.eights { background: linear-gradient(160deg, #1f4e9c, #0b1f4a); color: #fff; font-size: 44px; }
.box-art.skint { background: radial-gradient(circle at 30% 30%, #2a6f4a, #0b2e1e); color: #f6c453; font-size: 24px; }
.box-art.quiz { background: linear-gradient(160deg, #d94c8a, #6b0f3a); color: #fff; font-size: 38px; }
.box-art.porkies { background: linear-gradient(160deg, #ff8fab, #d7263d); color: #fff; font-size: 22px; }
.box-art.liar { background: linear-gradient(160deg, #111, #4a1030); color: #ffb703; font-size: 20px; line-height: .95; text-align: center; }
.box-art.ian { background: repeating-linear-gradient(45deg, #ffb703 0 10px, #1d1a14 10px 20px); color: #fff; font-size: 18px; line-height: .95; text-align: center; -webkit-text-stroke: 1px #1d1a14; text-shadow: 2px 2px 0 #1d1a14; }
.box-art.sh { background: linear-gradient(160deg, #6b4a2b, #3b2a18); color: #f3ead7; font-size: 22px; line-height: .95; text-align: center; }
.reviews { display: grid; gap: 10px; }
.review-strip { display: flex; gap: 12px; overflow-x: auto; padding: 14px 4px 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.review-strip::-webkit-scrollbar { display: none; }
.review { flex: 0 0 220px; scroll-snap-align: start; background: #fffdf5; border: 2px solid #1d1a14; border-radius: 6px; padding: 12px; transform: rotate(var(--r)); box-shadow: 3px 3px 0 #1d1a14; display: grid; gap: 6px; align-content: start; }
.review .stars { color: #f08c00; letter-spacing: .1em; font-size: 14px; }
.review p { margin: 0; font-size: 13px; line-height: 1.35; }
.review b { font-size: 12px; color: #6b6456; }
.gp-hero { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; }
.gp-hero .box-art { min-height: 120px; font-size: 32px; transform: rotate(-4deg); box-shadow: 5px 5px 0 #1d1a14; }
.gp-head h2 { font-family: 'Lilita One', var(--display); font-size: 40px; line-height: .95; margin: 0; text-shadow: 3px 3px 0 #ffb703; }
.gp-head p { margin: 4px 0 8px; color: #6b6456; font-weight: 700; }
.gp-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gp-points li { background: #fff; border: 2px solid #1d1a14; border-radius: 10px; padding: 9px 12px 9px 38px; font-size: 14px; font-weight: 600; position: relative; box-shadow: 3px 3px 0 #1d1a14; }
.gp-points li::before { content: "♠"; position: absolute; left: 12px; top: 8px; color: #d7263d; font-size: 16px; }
.gp-points li:nth-child(2n)::before { content: "♥"; } .gp-points li:nth-child(3n)::before { content: "♦"; }
.gp-blurb { font-size: 15px; line-height: 1.45; color: #3f3a31; font-style: italic; border-left: 4px solid #ffb703; padding-left: 12px; }

/* ---------- Shithead ---------- */
#shithead { background: radial-gradient(circle at 50% 20%, #3b2a18, #1d140a 70%); }
.sh-opps { display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--gutter-r) 4px var(--gutter-l); scrollbar-width: none; flex: 0 0 auto; }
.sh-opps::-webkit-scrollbar { display: none; }
.sh-opp { flex: 0 0 auto; min-width: 150px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); border-radius: 12px; padding: 6px 8px; display: grid; gap: 6px; transition: box-shadow .2s, border-color .2s; }
.sh-opp.turn { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(255,183,3,.35), 0 0 18px rgba(255,183,3,.35); }
.sh-opp.off { opacity: .45; }
.sh-opp-head { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.sh-opp-head .avatar { width: 24px; height: 24px; font-size: 11px; }
.sh-count { margin-left: auto; font-weight: 800; color: var(--ink-dim); font-size: 12px; }
.sh-opp-cards { display: flex; gap: 4px; }
.sh-opp-cards .card.sm { width: 30px; height: 44px; } .sh-opp-cards .card.tiny .big { font-size: 13px; line-height: 1; text-align: center; } .sh-opp-cards .card.tiny .big small { display: block; font-size: 12px; }
.sh-main { flex: 1 1 auto; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 6px var(--gutter-r) 6px var(--gutter-l); min-height: 0; }
.sh-pile { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; width: 100%; max-width: 420px; }
.deck-stack { display: grid; justify-items: center; gap: 6px; }
.deck-n { font-size: 11px; font-weight: 800; color: var(--ink-dim); white-space: nowrap; }
.pile-stack { position: relative; height: 100px; width: 120px; justify-self: center; }
.pile-card { position: absolute; left: calc(50% - 32px); top: 0; transform: rotate(calc((var(--i) - 1.5) * 7deg)) translateX(calc((var(--i) - 1.5) * 6px)); }
.pile-card:last-child { animation: landIn .25s ease-out; }
@keyframes landIn { from { transform: translateY(-40px) scale(1.15) rotate(10deg); opacity: 0; } }
.pile-meta { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--ink-dim); font-weight: 700; }
.pile-meta b { color: var(--brass); }
.card.back { background: repeating-linear-gradient(45deg, #7a1b2a 0 6px, #5a1220 6px 12px); border: 3px solid #f3ead7; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.card.back.legal { cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.5); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.card .magic { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-deep); font-weight: 800; }
.card.sm .magic { display: none; }
.sh-foot { background: linear-gradient(180deg, rgba(29,20,10,0) 0%, rgba(29,20,10,.95) 30%); }
.sh-table { display: grid; gap: 4px; justify-items: center; }
.sh-mine-label { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; font-weight: 800; color: var(--ink-dim); }
.sh-mine-cards { display: flex; gap: 5px; }
.sh-mine-cards .card { width: 48px; height: 70px; } .sh-mine-cards .card .big { font-size: 24px; } .sh-mine-cards .card .corner { font-size: 11px; } .sh-mine-cards .card .magic { font-size: 7px; }
.sh-mine-cards .card { transition: transform .15s, box-shadow .15s; }
.sh-mine-cards .card.legal { cursor: pointer; }
.sh-mine-cards .card.dim { opacity: .35; }
.sh-mine-cards .card.selected { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--bad), 0 8px 18px rgba(0,0,0,.4); }
.sh-mine-cards .card.swap { box-shadow: 0 0 0 2px rgba(255,183,3,.6); }
#shHand { min-height: 96px; justify-content: flex-start; }
#shHand > :first-child { margin-left: auto; } #shHand > :last-child { margin-right: auto; }
#shHand.crowded .card { margin-left: -14px; } #shHand.crowded > :first-child { margin-left: auto; }

/* ---------- Who's That ---------- */
#whosthat { background: #f3ead7; color: #1d1a14; --ink: #1d1a14; --ink-dim: #6b6456; --brass: #d7263d; --brass-deep: #a81b2d; color-scheme: light; }
#whosthat .topbar { background: #fff; border-bottom: 3px solid #1d1a14; }
#whosthat .pill { background: #f3ead7; color: #1d1a14; border: 2px solid #1d1a14; }
#whosthat .pill.bid-pill { background: #ffb703; }
#whosthat .icon-btn { background: #fff; border: 2px solid #1d1a14; color: #1d1a14; }
#whosthat .note { color: #6b6456; }
.wt-top { flex: 0 0 auto; padding: 8px var(--gutter-r) 4px var(--gutter-l); display: grid; gap: 8px; }
.wt-scores { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.wt-scores::-webkit-scrollbar { display: none; }
.wt-score { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 2px solid #1d1a14; border-radius: 999px; padding: 2px 8px 2px 2px; font-size: 13px; flex: 0 0 auto; }
.wt-score .avatar { width: 24px; height: 24px; font-size: 11px; }
.wt-score.it { background: #ffb703; } .wt-score.out { opacity: .45; } .wt-score.turn { box-shadow: 0 0 0 3px rgba(215,38,61,.5); }
.wt-score small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6b6456; }
.wt-round { margin-left: auto; font-size: 11px; font-weight: 800; color: #6b6456; white-space: nowrap; }
.wt-guest { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; background: #ffb703; border: 3px solid #1d1a14; border-radius: 14px; padding: 8px; box-shadow: 4px 4px 0 #1d1a14; }
.wt-guest .wt-face { width: 84px; height: 92px; }
.wt-guest div { display: grid; gap: 2px; } .wt-guest b { font-family: var(--display); font-size: 17px; } .wt-guest small { font-size: 12px; line-height: 1.3; }
.wt-asked { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.wt-q { font-size: 11px; font-weight: 700; background: #fff; border: 1.5px solid #1d1a14; border-radius: 999px; padding: 2px 8px; }
.wt-q.yes b { color: #2e9e5b; } .wt-q.no b { color: #d7263d; }
.wt-main { flex: 1 1 auto; overflow-y: auto; padding: 4px var(--gutter-r) 8px var(--gutter-l); }
.wt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wt-card { background: #fff; border: 2.5px solid #1d1a14; border-radius: 12px; padding: 4px 4px 6px; display: grid; gap: 2px; justify-items: center; box-shadow: 3px 3px 0 #1d1a14; transition: transform .15s, opacity .2s; color: #1d1a14; }
.wt-card b { font-size: 10px; line-height: 1.1; text-align: center; font-family: var(--display); }
.wt-art { width: 100%; aspect-ratio: 100 / 110; }
.wt-face { width: 100%; height: 100%; display: block; }
.wt-card.down { opacity: .22; transform: scale(.92); filter: grayscale(1); box-shadow: none; }
.wt-card.wrong { border-color: #d7263d; box-shadow: 3px 3px 0 #d7263d; }
.wt-card.wrong::after { content: "✗"; position: absolute; }
.wt-card.reveal { background: #ffb703; animation: pulse 1s infinite; opacity: 1; filter: none; transform: none; }
.wt-grid.guessing .wt-card:not(.down) { box-shadow: 0 0 0 3px #ffb703, 3px 3px 0 #1d1a14; }
.wt-foot { flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 8px var(--gutter-r) max(10px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: #fff; border-top: 3px solid #1d1a14; min-height: 56px; font-size: 14px; }
.wt-foot .btn-ghost { background: #fff; color: #1d1a14; border: 2px solid #1d1a14; box-shadow: 3px 3px 0 #1d1a14; }
.wt-qlist { display: grid; gap: 8px; }
.wt-qbtn { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; text-align: left; background: #fff; border: 2px solid #1d1a14; border-radius: 12px; padding: 10px 12px; font-weight: 700; color: #1d1a14; box-shadow: 3px 3px 0 #1d1a14; }
.wt-qbtn small { color: #6b6456; font-weight: 700; white-space: nowrap; }
.wt-qbtn em { font-style: normal; background: #2e9e5b; color: #fff; font-size: 10px; border-radius: 6px; padding: 2px 6px; text-transform: uppercase; letter-spacing: .08em; }
.wt-qbtn:disabled { opacity: .35; box-shadow: none; }
.wt-confirm { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.wt-confirm .wt-face { width: 110px; height: 121px; }
.wt-confirm b { font-family: var(--display); font-size: 20px; display: block; } .wt-confirm small { display: block; color: #6b6456; margin: 4px 0; } .wt-confirm p { margin: 6px 0 0; font-weight: 700; color: #d7263d; }
.wt-blast { background: rgba(255,183,3,.96); color: #1d1a14; }
.wt-blast .tb-text { color: #1d1a14; }
.wt-blast-face .wt-face { width: 160px; height: 176px; margin: 0 auto; }
#whosthat .event-pop { top: calc(env(safe-area-inset-top, 0px) + 60px); }

/* ---------- Chase the Ace ---------- */
#chase { background: radial-gradient(circle at 50% 30%, #4a1030, #1a0612 70%); }
.ca-main { flex: 1 1 auto; display: grid; grid-template-rows: 1fr auto; padding: 8px var(--gutter-r) 6px var(--gutter-l); min-height: 0; overflow-y: auto; }
.ca-ring { display: grid; gap: 8px; align-content: start; }
.ca-deck { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 12px; font-weight: 800; justify-content: center; margin-bottom: 4px; }
.ca-seat { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); border-radius: 12px; padding: 6px 10px; transition: box-shadow .2s, border-color .2s; }
.ca-seat.turn { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(255,183,3,.35), 0 0 18px rgba(255,183,3,.35); }
.ca-seat.out { opacity: .4; } .ca-seat.off { opacity: .45; } .ca-seat.me { background: rgba(255,183,3,.12); }
.ca-seat-card { display: grid; place-items: center; }
.ca-seat-card .card.sm { width: 38px; height: 54px; }
.ca-seat-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ca-seat-info .avatar { width: 26px; height: 26px; font-size: 11px; }
.ca-lives { font-size: 12px; letter-spacing: -1px; margin-left: auto; }
.ca-dead { font-size: 26px; }
.card.king { box-shadow: 0 0 0 3px var(--brass), 0 0 18px rgba(255,183,3,.6); }
.card.ace { box-shadow: 0 0 0 3px var(--bad), 0 0 18px rgba(215,38,61,.6); }
.card.loser { box-shadow: 0 0 0 3px var(--bad); }
.game-root { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ca-foot { background: linear-gradient(180deg, rgba(26,6,18,0) 0%, rgba(26,6,18,.95) 30%); }
.ca-me { display: grid; justify-items: center; }
.ca-mycard { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; max-width: 360px; }
.ca-mycard .card.lg { width: 76px; height: 108px; } .ca-mycard .card.lg .big { font-size: 40px; }
.ca-mynote { font-size: 14px; color: var(--ink-dim); line-height: 1.35; }
.ca-mynote.big { font-size: 16px; padding: 14px; text-align: center; }
.ca-king { background: rgba(255,183,3,.96); color: #1d1a14; } .ca-king .tb-text { color: #1d1a14; font-size: 56px; }
.ca-show { background: rgba(46,158,91,.95); } .ca-show.dead { background: rgba(20,20,20,.96); }

/* ---------- TV mode (virtual 1920x1080, scaled to the screen) ---------- */
body.tv { background: #0a0a0f; overflow: hidden; }
#tvFrame { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: top left; background: #0f1117; color: #f3ead7; display: grid; grid-template-rows: 100px 1fr 120px; overflow: hidden; font-size: 24px; }
body:not(.tv) #tvFrame { display: none; }
body:not(.tv) #stage { display: contents; }
body:not(.tv) #stage .screen { position: fixed; }
#stageHolder { position: relative; overflow: hidden; }
body.tv #stage { position: absolute; inset: 0; width: 1920px; height: 860px; overflow: hidden; }
body.tv #stage .screen { position: absolute; inset: 0; padding: 0; }
body.tv .watching-bar, body.tv .topbar-actions, body.tv .reactions, body.tv .game-top .code-pill { display: none !important; }
#tvTop { display: grid; grid-template-columns: 420px 1fr 520px; align-items: center; gap: 24px; padding: 0 36px; background: linear-gradient(180deg, #171a24, #0f1117); border-bottom: 3px solid #272b38; }
.tvt-brand { display: flex; align-items: center; gap: 14px; } .tvt-brand b { font-family: 'Lilita One', var(--display); font-size: 34px; color: #ffb703; }
.tvt-brand .open-sign { font-size: 11px; padding: 2px 8px; transform: rotate(-6deg); }
.tvt-game { font-size: 20px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8d93a8; margin-top: 2px; }
.tvt-players { display: flex; gap: 14px; justify-content: center; align-items: center; min-width: 0; }
.tvp { display: flex; align-items: center; gap: 10px; background: #1b1f2b; border: 3px solid #272b38; border-radius: 999px; padding: 6px 18px 6px 6px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tvp .avatar { width: 48px; height: 48px; font-size: 20px; }
.tvp-txt { display: grid; line-height: 1.05; } .tvp-txt b { font-size: 22px; } .tvp-txt small { font-size: 16px; color: #8d93a8; font-weight: 700; }
.tvp.turn { border-color: #ffb703; box-shadow: 0 0 0 4px rgba(255,183,3,.25), 0 0 30px rgba(255,183,3,.45); transform: scale(1.06); background: #2a2410; }
.tvp.turn .tvp-txt small { color: #ffb703; } .tvp.off { opacity: .4; } .tvp.bot .tvp-txt b::after { content: " 🤖"; font-size: 16px; }
.tvt-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.tvt-join { display: grid; justify-items: end; line-height: 1; }
.tvt-code { font-family: 'Lilita One', var(--display); font-size: 54px; letter-spacing: .16em; color: #fff; }
.tvt-url { font-size: 16px; font-weight: 800; color: #8d93a8; letter-spacing: .06em; }
.tvt-qr img { display: block; width: 84px; height: 84px; border-radius: 10px; background: #fbf7ec; padding: 4px; }
.tv-sound { font-size: 18px; padding: 10px 16px; }
#tvBottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; padding: 0 36px; background: linear-gradient(0deg, #171a24, #0f1117); border-top: 3px solid #272b38; }
.tvb-now { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.15; color: #fff; text-wrap: balance; }
.tvb-feed { display: grid; gap: 4px; align-content: center; }
.tv-line { font-size: 18px; color: #8d93a8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-line.chat { color: #7ec8e3; }
.tv-line.chat::before { content: "💬 "; }
/* ---------- Controller mode (phone while a telly shows the table) ---------- */
body.controller #seats, body.controller #table, body.controller #deedsOpponents, body.controller .sh-opps, body.controller .ca-ring, body.controller .ch-seats, body.controller .sp-strip { display: none !important; }
body.controller .felt-center, body.controller .deeds-main, body.controller .sh-main, body.controller .ca-main { flex: 0 0 auto; min-height: 80px; }
body.controller .hand-area { flex: 1 1 auto; justify-content: flex-end; align-content: end; }
body.controller #game .card, body.controller #shithead #shHand .card, body.controller #chase .ca-mycard .card.lg { width: 72px; height: 104px; } body.controller #game .card .big, body.controller #shithead #shHand .card .big { font-size: 40px; }
body.controller .screen::before { content: "📺 Table is on the telly"; display: block; text-align: center; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 800; color: var(--ink-dim); padding: 4px 0 0; }
body.controller #home::before, body.controller #gamePage::before, body.controller #lobby::before { display: none; }
.tv-sound { font-size: 16px; }
body.tv #stage .game-root { font-size: 16px; }

/* ---------- Box covers ---------- */
.shelf.covers { grid-template-columns: 1fr; gap: 30px; padding: 16px 2px 18px; align-items: start; }
.shelf.covers .span2 { grid-column: 1 / -1; margin-top: 6px; }
.box.cover { display: block; width: 100%; padding: 0; background: none; border: 0; box-shadow: none; -webkit-tap-highlight-color: transparent; text-align: left; }
.cv-wrap { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; perspective: 900px; border-radius: 18px; background: #fff; border: 3px solid #1d1a14; box-shadow: 7px 8px 0 #1d1a14, 0 18px 30px rgba(0,0,0,.16); overflow: visible; }
.box.cover:active { transform: none; box-shadow: none; }
.box.cover .sticker { top: -12px; right: 6px; z-index: 3; font-size: 14px; padding: 6px 14px; }
.box.cover .sticker.tv { background: #1d1a14; color: #ffb703; }
.cv { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 5; min-height: 300px; border-radius: 15px 15px 0 0; border: 0; border-bottom: 3px solid #1d1a14; overflow: hidden; box-shadow: none; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, box-shadow .18s; transform-style: preserve-3d; display: grid; place-items: center; isolation: isolate; animation: cvFloat 5s ease-in-out infinite; font-family: 'Lilita One', var(--display); }
.box.cover:nth-child(odd) .cv { animation-delay: -1.3s; } .box.cover:nth-child(3n) .cv { animation-delay: -2.6s; }
.box.cover:active .cv-wrap { transform: translate(3px, 3px); box-shadow: 3px 4px 0 #1d1a14; }
@keyframes cvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.cv-shine { position: absolute; inset: 0; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255,255,255,.45), rgba(255,255,255,0) 45%); pointer-events: none; z-index: 2; mix-blend-mode: soft-light; }
.cv-title { position: absolute; left: 8px; right: 8px; bottom: 16px; text-align: center; color: #fff; font-size: clamp(40px, 13vw, 62px); line-height: .95; letter-spacing: .01em; text-shadow: 3px 3px 0 #1d1a14, 0 0 18px rgba(0,0,0,.5); z-index: 2; }
.cv-title-sm { font-size: clamp(32px, 10vw, 48px); }
.cv-info { display: grid; gap: 8px; padding: 12px 14px 14px; background: #fff; border-radius: 0 0 15px 15px; background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(29,26,20,.05) 22px 23px); }
.cv-info-head { display: grid; gap: 1px; }
.cv-info-head em { font-style: normal; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #d7263d; }
.cv-info-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 2px dashed #e6e1d6; padding-top: 10px; margin-top: 2px; }
.cv-info b { font-family: 'Lilita One', var(--display); font-size: 28px; line-height: 1; letter-spacing: .01em; color: #1d1a14; }
.cv-info small { font-size: 14px; line-height: 1.45; color: #3f3a31; }
.cv-cta { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #1d1a14; background: #ffb703; border: 2px solid #1d1a14; border-radius: 999px; padding: 6px 12px; box-shadow: 2px 2px 0 #1d1a14; }
.cv-info .box-meta { font-size: 12px; gap: 4px 10px; }
.box.cover.soon { opacity: .7; }
.cv.soon-art { background: repeating-linear-gradient(45deg, #e6e1d6 0 8px, #d9d3c6 8px 16px); animation: none; }
.box.cover.soon .cv-wrap { border-style: dashed; box-shadow: 4px 4px 0 #bbb; }
.cv.soon-art .cv-title { color: #6b6456; text-shadow: none; font-size: 60px; }
.cv .card { width: 86px; height: 122px; box-shadow: 0 6px 16px rgba(0,0,0,.4); border-radius: 10px; }
.cv .card .big { font-size: 46px; } .cv .card .corner { font-size: 16px; }

/* ---------- Telly banner on the shelf ---------- */
.tv-banner { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: #1d1a14; color: #f3ead7; border-radius: 18px; padding: 16px 14px; margin-top: 10px; box-shadow: 6px 6px 0 #ffb703; border: 3px solid #1d1a14; position: relative; overflow: hidden; }
.tv-banner::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px); pointer-events: none; }
.tv-banner-set { display: grid; justify-items: center; }
.tv-banner-screen { width: 92px; height: 66px; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #2e9e5b, #0b3d2e); border: 4px solid #3f3a31; box-shadow: 0 0 0 3px #1d1a14, 0 0 24px rgba(46,158,91,.6); display: grid; place-items: center; font-size: 34px; animation: tvGlow 2.4s ease-in-out infinite; }
.tv-banner-stand { width: 40px; height: 8px; background: #3f3a31; border-radius: 0 0 6px 6px; margin-top: 2px; }
@keyframes tvGlow { 0%, 100% { box-shadow: 0 0 0 3px #1d1a14, 0 0 16px rgba(46,158,91,.4); } 50% { box-shadow: 0 0 0 3px #1d1a14, 0 0 34px rgba(255,183,3,.7); } }
.tv-banner-text { display: grid; gap: 6px; position: relative; }
.tv-banner-text b { font-family: 'Lilita One', var(--display); font-size: 28px; color: #ffb703; letter-spacing: .02em; }
.tv-banner-text small { font-size: 13px; line-height: 1.35; color: #d9d3c6; }
.tv-banner .btn-small { justify-self: start; margin-top: 4px; }
.how-list { padding-left: 20px; display: grid; gap: 10px; line-height: 1.4; }
body.controller #deedsMyTable { display: none !important; }
body.controller #deeds .hand-area { flex: 1 1 auto; }

.btn-tiny { width: 28px; height: 28px; font-size: 12px; margin-left: auto; }

/* ---------- Themed lobbies ---------- */
#lobby { background: var(--lb-bg, radial-gradient(120% 90% at 50% 20%, var(--felt-2), var(--felt) 60%, var(--felt-edge))); color: var(--lb-ink, var(--ink)); --ink: var(--lb-ink, #f4efe3); --ink-dim: var(--lb-dim, rgba(244,239,227,.62)); --panel: var(--lb-panel, rgba(0,0,0,.28)); --brass: var(--lb-accent, #f6c453); }
#lobby .topbar { background: var(--lb-top, transparent); }
#lobby .code-card { background: var(--lb-panel, rgba(0,0,0,.28)); border: var(--lb-border, 0); }
#lobby .code-big { color: var(--lb-accent, #f6c453); }
#lobby .player-list li, #lobby .tally, #lobby .sel select, #lobby input, #lobby .game-pick .game-opt { background: var(--lb-row, rgba(255,255,255,.07)); border-color: var(--lb-rowline, transparent); color: var(--lb-ink, var(--ink)); }
#lobby .game-pick .game-opt.on { background: var(--lb-accent, #f6c453); color: var(--lb-oninv, #1d1a14); }
#lobby .game-pick .game-opt.on small { color: inherit; opacity: .8; }
#lobby .btn-ghost { background: var(--lb-row, rgba(255,255,255,.1)); color: var(--lb-ink, var(--ink)); border: var(--lb-border, 0); }
#lobby .btn-primary { background: var(--lb-accent, #f6c453); color: var(--lb-oninv, #1d1a14); box-shadow: 0 5px 0 var(--lb-accent-deep, #8a5f0d); }
#lobby .icon-btn { color: var(--lb-ink, var(--ink)); border: var(--lb-border, 0); background: var(--lb-row, rgba(255,255,255,.1)); }
.lobby-hero { position: relative; height: 190px; border-radius: 18px; overflow: hidden; border: 3px solid #1d1a14; box-shadow: 5px 6px 0 #1d1a14; margin-top: 2px; }
.lobby-hero .cv { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; border: 0; border-radius: 0; animation: none; transform: none; }
.lobby-hero .cv-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.lobby-hero .cv-chrome { display: none; }
.lobby-tag { font-weight: 700; font-size: 14px; line-height: 1.35; text-align: center; color: var(--lb-ink, var(--ink)); opacity: .92; padding: 0 6px; }
#lobby[data-game="deeds"] { --lb-bg: linear-gradient(180deg, #ffd166 0%, #ff8c42 40%, #f3ead7 40.5%); --lb-ink: #1d1a14; --lb-dim: #6b6456; --lb-panel: #fff; --lb-row: #fff; --lb-border: 2px solid #1d1a14; --lb-accent: #ffb703; --lb-accent-deep: #8a5f0d; --lb-oninv: #1d1a14; --lb-top: transparent; }
#lobby[data-game="deeds"] .code-card { box-shadow: 5px 5px 0 #1d1a14; }
#lobby[data-game="shithead"] { --lb-bg: radial-gradient(circle at 50% 10%, #6b4a2b, #2a1a0c 70%); --lb-accent: #ffb703; --lb-accent-deep: #8a5f0d; --lb-row: rgba(255,255,255,.08); }
#lobby[data-game="whosthat"] { --lb-bg: linear-gradient(160deg, #ffb703, #ff7a00); --lb-ink: #1d1a14; --lb-dim: #5a3a1e; --lb-panel: #fff; --lb-row: rgba(255,255,255,.75); --lb-border: 2px solid #1d1a14; --lb-accent: #1d1a14; --lb-accent-deep: #000; --lb-oninv: #ffb703; }
#lobby[data-game="whosthat"] .code-big { color: #d7263d; }
#lobby[data-game="chase"] { --lb-bg: radial-gradient(circle at 50% 10%, #7a1b2a, #2a0612 70%); --lb-accent: #ffb703; --lb-accent-deep: #8a5f0d; }
#lobby[data-game="cheat"] { --lb-bg: radial-gradient(circle at 50% 0%, #a81b2d, #4a0a12 70%); --lb-accent: #ffe14d; --lb-accent-deep: #8a7a0d; }
#lobby[data-game="spoons"] { --lb-bg: repeating-linear-gradient(135deg, #cfeee0 0 14px, #b9e3d1 14px 28px); --lb-ink: #1d1a14; --lb-dim: #3f5a4e; --lb-panel: #fff; --lb-row: rgba(255,255,255,.85); --lb-border: 2px solid #1d1a14; --lb-accent: #d7263d; --lb-accent-deep: #7a1020; --lb-oninv: #fff; }
#lobby[data-game="grasser"] { --lb-bg: radial-gradient(circle at 50% 10%, #2e9e5b, #0b3d2e 70%); --lb-accent: #f6c453; }
#lobby[data-game="eights"] { --lb-bg: radial-gradient(circle at 50% 0%, #2a66c4, #0b1f4a 70%); --lb-accent: #ffe14d; --lb-accent-deep: #8a7a0d; }
#lobby[data-game="skint"] { --lb-bg: radial-gradient(circle at 50% 20%, #1f6b45, #072a1b 75%); --lb-accent: #f6c453; }
#lobby[data-game="quiz"] { --lb-bg: linear-gradient(160deg, #d94c8a, #6b0f3a); --lb-accent: #ffe14d; --lb-accent-deep: #8a7a0d; }
#lobby[data-game="porkies"] { --lb-bg: repeating-linear-gradient(45deg, #ff8fab 0 16px, #ff7a9c 16px 32px); --lb-ink: #1d1a14; --lb-dim: #6b1a35; --lb-panel: #fff; --lb-row: rgba(255,255,255,.85); --lb-border: 2px solid #1d1a14; --lb-accent: #1d1a14; --lb-accent-deep: #000; --lb-oninv: #fff; }
#lobby[data-game="porkies"] .code-big { color: #d7263d; }
#lobby[data-game="liar"] { --lb-bg: radial-gradient(ellipse at 50% 0%, #4a1030, #0a0608 65%); --lb-accent: #ffb703; --lb-accent-deep: #8a5f0d; }
#lobby[data-game="ian"] { --lb-bg: linear-gradient(180deg, #dfe7ef 0 150px, #f3ead7 150px); --lb-ink: #1d1a14; --lb-dim: #5a6470; --lb-panel: #1d1a14; --lb-row: #fff; --lb-border: 2px solid #1d1a14; --lb-accent: #ffb703; --lb-accent-deep: #8a5f0d; --lb-oninv: #1d1a14; }
#lobby[data-game="ian"] .code-card { color: #f3ead7; border: 3px solid #ffb703; box-shadow: 5px 5px 0 #1d1a14; } #lobby[data-game="ian"] .code-card .code-label { color: #ffb703; }
#lobby[data-game="110"] { --lb-accent: #f6c453; }
#lobby .tag.host { background: var(--lb-accent, #f6c453); color: var(--lb-oninv, #1d1a14); }

/* ---------- Telly waiting for a code ---------- */
.tv-wait { display: none; }
body.tv-waiting .tv-wait { display: grid; place-items: center; position: fixed; inset: 0; z-index: 60; background: #f3ead7; color: #1d1a14; }
body.tv-waiting #tvFrame { display: none !important; }
.tv-wait .tv-shop { font-family: 'Lilita One', var(--display); font-size: 40px; text-shadow: 3px 3px 0 #ffb703; }
.tv-wait-inner { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 40px; max-width: 900px; }
.tv-wait-code { font-family: 'Lilita One', var(--display); font-size: clamp(90px, 18vw, 220px); letter-spacing: .18em; line-height: 1; background: #fff; border: 5px solid #1d1a14; border-radius: 28px; padding: 10px 30px 10px 50px; box-shadow: 12px 12px 0 #1d1a14; }
.tv-wait-how { font-size: clamp(18px, 2.4vw, 30px); font-weight: 700; max-width: 760px; line-height: 1.4; }
.tv-wait-small { margin-top: 18px; font-size: 16px; color: #6b6456; display: flex; gap: 8px; align-items: center; }
.tv-wait-small input { width: 110px; text-align: center; text-transform: uppercase; background: #fff; border: 2px solid #1d1a14; color: #1d1a14; font-weight: 800; letter-spacing: .2em; }
.tv-wait-small input::placeholder { color: #9a9287; }
.tv-wait-small .btn-ghost { background: #fff; color: #1d1a14; border: 2px solid #1d1a14; }