/* All Fives. Park at golden hour: deep green, weathered wood, brass, ivory bones. */

:root {
  --bg: #0f2a1e;
  --bg-2: #143826;
  --panel: rgba(16, 32, 24, 0.92);
  --panel-solid: #17331f;
  --panel-line: rgba(242, 184, 75, 0.18);
  --ink: #f6efdc;
  --ink-soft: #c9c0a8;
  --muted: #94a08f;
  --gold: #f2b84b;
  --gold-2: #ffd666;
  --gold-ink: #3a2400;
  --wood: #7a4e2a;
  --red: #d9534f;
  --green: #4cc38a;
  --us: #4fb3ff;
  --them: #ff8a5c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --display: "Alfa Slab One", Georgia, serif;
  --body: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 800px at 70% -10%, #23503a 0%, var(--bg) 55%, #0a1d14 100%) fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.gold { color: var(--gold-2); }

/* --- screens ------------------------------------------------------------------ */

.screen { position: fixed; inset: 0; display: none; }
body[data-screen="lobby"] #lobby { display: flex; }
body[data-screen="table"] #table { display: block; }

#net-banner {
  position: fixed; top: calc(8px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  background: #6b1d1d; color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 800;
  z-index: 60; display: none; box-shadow: var(--shadow);
}
body[data-net="closed"] #net-banner, body[data-net="connecting"] #net-banner { display: block; }
body.attract #net-banner { display: none !important; }

/* --- buttons -------------------------------------------------------------------- */

.btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(#2b4c38, #1d3a29);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.btn.gold { background: linear-gradient(#ffd666, #e8a531); color: var(--gold-ink); border-color: #ffe7a3; }
.btn.danger { background: linear-gradient(#e0625d, #b23a36); border-color: #f2918d; }
.btn.press { background: linear-gradient(#b14cff, #7b22c9); border-color: #d6a0ff; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { padding: 7px 12px; font-size: 14px; }
.btn.tiny { padding: 4px 9px; font-size: 12px; border-radius: 9px; }
.btn.big { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 18px; text-align: left; }
.btn.big b { font-size: 18px; }
.btn.big span { font-size: 12.5px; font-weight: 700; opacity: 0.8; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 20, 14, 0.55); font-size: 18px; font-weight: 900; position: relative;
  display: inline-grid; place-items: center; backdrop-filter: blur(6px);
}
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 14px; }

.badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center;
}
.badge.soft { background: rgba(255, 255, 255, 0.18); }
.tag {
  font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12);
}
.tag.warn { background: rgba(217, 83, 79, 0.35); }
.chip-ico {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: -1px;
  background: radial-gradient(circle, #fff 0 28%, #d33 30% 62%, #fff 64% 70%, #d33 72%);
}

/* avatars: a disc with a glyph until the portrait arrives */
.avatar {
  border-radius: 50%; display: inline-grid; place-items: center; flex: none; position: relative;
  color: rgba(255, 255, 255, 0.92); font-weight: 900; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.avatar.empty-av { background: rgba(255, 255, 255, 0.06); border: 2px dashed rgba(255, 255, 255, 0.25); box-shadow: none; color: var(--muted); }
.bot-tag {
  position: absolute; bottom: -3px; right: -6px; font-size: 9px; font-weight: 900; background: #222; color: var(--gold-2);
  border-radius: 6px; padding: 0 4px; line-height: 14px; border: 1px solid rgba(242, 184, 75, 0.5);
}

/* --- toast and modal ------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translate(-50%, 20px);
  background: #1d2a22; border: 1px solid var(--panel-line); padding: 10px 16px; border-radius: 12px;
  font-weight: 800; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 70; max-width: 90vw; text-align: center;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { border-color: rgba(217, 83, 79, 0.6); }
.toast.gold { background: linear-gradient(#ffd666, #e8a531); color: var(--gold-ink); }

#modal { position: fixed; inset: 0; display: none; z-index: 50; }
#modal.open { display: grid; place-items: center; }
.modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; background: var(--panel-solid); border: 1px solid var(--panel-line); border-radius: 18px;
  padding: 20px 22px; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: auto; box-shadow: var(--shadow);
}
.modal-card h2 { font-family: var(--display); font-weight: 400; margin: 0 0 10px; letter-spacing: 0.01em; }
.rules ul { padding-left: 18px; line-height: 1.5; }
.person-menu { text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field input, .chat-input input, .code-input {
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 10px 12px; color: var(--ink);
}
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0 14px; }
.av-pick { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; display: grid; place-items: center; }
.av-pick.on { border-color: var(--gold); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 14px; }
.stats div { background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 8px; text-align: center; }
.stats b { display: block; font-size: 18px; }
.stats span { font-size: 11px; color: var(--muted); }

/* --- the lobby ------------------------------------------------------------------- */

#lobby { flex-direction: column; padding-top: var(--safe-t); }
.lobby-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--panel-line);
  background: rgba(8, 20, 13, 0.6); backdrop-filter: blur(8px);
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-mark { font-size: 28px; color: var(--gold); line-height: 1; }
.logo-text { font-family: var(--display); font-size: 22px; color: var(--gold-2); text-shadow: 0 2px 0 #5a3a07; }
.online-pill { font-size: 12.5px; font-weight: 800; color: var(--green); background: rgba(76, 195, 138, 0.1); padding: 4px 10px; border-radius: 999px; }
.head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.profile-btn {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--panel-line); background: rgba(0, 0, 0, 0.25);
  border-radius: 999px; padding: 3px 12px 3px 3px;
}
.pb-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.pb-text b { font-size: 13.5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-chips { font-size: 12.5px; color: var(--gold-2); font-weight: 900; }

.lobby-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.lobby-main { overflow: auto; padding: 14px 18px 30px; }
.lobby-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab {
  border: 0; background: rgba(255, 255, 255, 0.06); padding: 9px 16px; border-radius: 999px; font-weight: 800; color: var(--ink-soft);
  display: flex; gap: 6px; align-items: center;
}
.tab.on { background: var(--gold); color: var(--gold-ink); }
.tab .count { background: rgba(0, 0, 0, 0.25); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.panel { display: none; max-width: 980px; }
.panel.on { display: block; }
.section-title { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--gold-2); margin: 18px 0 10px; letter-spacing: 0.02em; }

.hero {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 190px; padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow);
  background:
    linear-gradient(90deg, rgba(8, 18, 10, 0.85) 0%, rgba(8, 18, 10, 0.35) 60%, rgba(8, 18, 10, 0.1) 100%),
    url("/art/park-lobby.webp") center / cover,
    radial-gradient(500px 300px at 85% 30%, rgba(255, 214, 102, 0.35), transparent 70%),
    repeating-linear-gradient(0deg, #7f5230 0 34px, #5e3b20 34px 37px),
    #6b4426;
}
.hero.venue-club { background: linear-gradient(90deg, rgba(8, 18, 10, 0.85), rgba(8, 18, 10, 0.2)), url("/art/club-lobby.webp") center / cover, radial-gradient(circle at 70% 40%, #2f7a4c, #0e2a19); }
.hero.venue-casino { background: linear-gradient(90deg, rgba(20, 4, 8, 0.85), rgba(20, 4, 8, 0.2)), url("/art/casino-lobby.webp") center / cover, radial-gradient(circle at 70% 40%, #8e1d28, #2a070c); }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4vw, 40px); margin: 0 0 6px; line-height: 1.05; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.hero p { margin: 0; max-width: 420px; color: var(--ink-soft); font-weight: 700; }
.hero-venue { align-self: flex-start; margin-top: 16px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--panel-line); border-radius: 12px; padding: 6px 12px; display: flex; flex-direction: column; }
.hero-venue b { color: var(--gold-2); }
.hero-venue span { font-size: 12.5px; color: var(--ink-soft); }

.mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mode-card {
  text-align: left; border-radius: var(--radius); padding: 12px 14px; border: 2px solid transparent; background: var(--panel);
  display: flex; flex-direction: column; gap: 4px; min-height: 110px; position: relative; overflow: hidden;
}
.mode-card b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.mode-card span { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; line-height: 1.3; }
.mode-card em { margin-top: auto; font-style: normal; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mode-card.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.15); }
.mode-card:disabled { opacity: 0.45; }
.mode-card.mode-learner b { color: #8fe3b4; }
.mode-card.mode-classic b { color: var(--ink); }
.mode-card.mode-stakes b { color: var(--gold-2); }
.mode-card.mode-highroller b { color: #e2a6ff; }
.mode-pill { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.mode-pill.mode-learner { background: rgba(76, 195, 138, 0.25); color: #b8f5d2; }
.mode-pill.mode-stakes { background: rgba(242, 184, 75, 0.25); color: var(--gold-2); }
.mode-pill.mode-highroller { background: rgba(177, 76, 255, 0.3); color: #ecc8ff; }

.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; margin: 16px 0; }
.opt { display: flex; flex-direction: column; gap: 6px; }
.opt-label { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.3); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 7px 11px; border-radius: 9px; font-weight: 800; color: var(--ink-soft); }
.seg button.on { background: var(--ink); color: #1a2a1f; }
.seg button:disabled { opacity: 0.35; }

.play-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.create-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-soft); }
.code-input { width: 110px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 900; text-align: center; }
.refill { margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(242, 184, 75, 0.12); font-weight: 800; }

.table-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--panel-line); margin-bottom: 10px;
}
.tr-main { flex: 1; min-width: 0; }
.tr-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-weight: 800; font-size: 13px; color: var(--ink-soft); }
.tr-seats { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tr-seat { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; }
.tr-seat small { font-size: 11px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.tr-score { margin-top: 6px; display: flex; gap: 12px; font-size: 13px; }
.stake { color: var(--gold-2); }
.empty { text-align: center; padding: 30px 10px; background: var(--panel); border-radius: var(--radius); }

.leader-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.leaders { list-style: none; padding: 0; margin: 0; }
.leaders li {
  display: grid; grid-template-columns: 40px 1fr auto 60px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--panel); margin-bottom: 6px; font-weight: 800;
}
.leaders li.top-1 { background: linear-gradient(90deg, rgba(255, 214, 102, 0.28), var(--panel)); }
.leaders li.top-2 { background: linear-gradient(90deg, rgba(200, 210, 220, 0.2), var(--panel)); }
.leaders li.top-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.25), var(--panel)); }
.leaders li.me { outline: 2px solid var(--gold); }
.rank { text-align: center; font-size: 18px; }
.ld-val { color: var(--gold-2); }
.ld-sub { text-align: right; font-size: 12px; }

/* the room */
.lobby-side { border-left: 1px solid var(--panel-line); display: flex; flex-direction: column; min-height: 0; background: rgba(6, 16, 10, 0.45); }
.side-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--panel-line); }
.side-tab { flex: 1; border: 0; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 8px 4px; font-weight: 800; font-size: 13px; color: var(--ink-soft); position: relative; }
.side-tab.on { background: rgba(242, 184, 75, 0.2); color: var(--gold-2); }
.side-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-line { display: flex; gap: 8px; align-items: flex-start; }
.cl-body { min-width: 0; }
.cl-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.name-link { background: none; border: 0; padding: 0; font-weight: 900; color: var(--gold-2); }
.chat-line.mine .name-link { color: var(--us); }
.cl-text { overflow-wrap: anywhere; line-height: 1.35; }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--panel-line); }
.chat-input input { flex: 1; min-width: 0; }
.rules-line { padding: 0 12px 10px; margin: 0; }
.people, .threads { overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.person, .thread { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 0; text-align: left; position: relative; }
.thread.unread { background: rgba(242, 184, 75, 0.12); }
.pp-text, .th-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-text span, .th-text span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.thread .badge { position: static; }
.thread-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--panel-line); }
.thread-head .btn { margin-left: auto; }
.unblock-all { align-self: center; margin-top: 8px; }

.bottom-nav { display: none; }

@media (max-width: 899px) {
  .lobby-body { grid-template-columns: 1fr; }
  .lobby-side { display: none; border: 0; }
  #lobby.chat-tab .lobby-side { display: flex; }
  #lobby.chat-tab .lobby-main { display: none; }
  .lobby-tabs { display: none; }
  .lobby-main { padding: 12px 12px 20px; }
  .online-pill { display: none; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .play-actions { grid-template-columns: 1fr; }
  .hero { min-height: 150px; padding: 16px; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--panel-line);
    background: rgba(8, 20, 13, 0.92); padding-bottom: var(--safe-b);
  }
  .bn { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; position: relative; color: var(--muted); }
  .bn.on { color: var(--gold-2); }
  .bn-icon { font-size: 19px; line-height: 1; }
  .bn-label { font-size: 11px; font-weight: 900; }
  .bn .badge { top: 3px; right: calc(50% - 22px); }
  .bn .badge.soft { right: auto; left: calc(50% + 6px); }
  .lobby-head { padding: 8px 10px; }
  .logo-text { font-size: 19px; }
  .pb-text b { max-width: 90px; }
}

/* --- the table ------------------------------------------------------------------- */

#table { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #2b1a0d; }
.felt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hud-top {
  position: absolute; left: 0; right: 0; top: 0; height: 54px; padding: calc(6px + var(--safe-t)) 10px 6px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(rgba(5, 10, 6, 0.75), rgba(5, 10, 6, 0)); z-index: 5;
}
.hud-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hud-sub { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.hud-scores { display: flex; gap: 10px; margin-left: auto; }
.hud-right { display: flex; gap: 6px; }
.score-bar { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.45); padding: 4px 9px; border-radius: 999px; }
.sb-label { font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--ink-soft); }
.sb-track { width: 60px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.sb-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(.2, .9, .3, 1); }
.score-bar.us .sb-fill { background: var(--us); }
.score-bar.them .sb-fill { background: var(--them); }
.sb-num { font-size: 15px; min-width: 26px; text-align: right; }
.pot { display: flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, 0.45); padding: 5px 10px; border-radius: 999px; font-weight: 900; color: var(--gold-2); }
.pot-chip { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #d33 27% 60%, #fff 62% 70%, #d33 72%); box-shadow: 0 1px 2px #000; }
.press-mult { background: #7b22c9; color: #fff; border-radius: 6px; padding: 0 5px; }
.watchers { align-self: center; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, 0.4); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

.seat-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.seat-badge {
  position: absolute; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
  background: rgba(8, 14, 10, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; backdrop-filter: blur(6px);
  transition: box-shadow 0.25s, border-color 0.25s; max-width: 46vw;
}
.seat-badge.me { transform: none; }
.seat-badge.left { transform: translate(-30%, 0); flex-direction: column; border-radius: 16px; padding: 8px; text-align: center; }
.seat-badge.right { transform: translate(-70%, 0); flex-direction: column; border-radius: 16px; padding: 8px; text-align: center; }
.seat-badge.row { padding: 4px 9px 4px 4px; gap: 6px; }
.seat-badge.turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 184, 75, 0.35), 0 0 22px rgba(242, 184, 75, 0.45); }
.seat-badge.away { opacity: 0.6; }
.seat-badge.team-0 { border-left: 3px solid var(--us); }
.seat-badge.team-1 { border-left: 3px solid var(--them); }
.seat-badge.scored { animation: scored 0.9s ease-out; }
@keyframes scored { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 102, 0.9); } 100% { box-shadow: 0 0 0 18px rgba(255, 214, 102, 0); } }
.seat-av { position: relative; width: 40px; height: 40px; flex: none; }
.ring { position: absolute; inset: -4px; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 3.5; }
.ring-back { stroke: transparent; }
.ring-front { stroke: var(--gold-2); stroke-dasharray: 138.2; stroke-dashoffset: 138.2; stroke-linecap: round; }
.ring-front.urgent { stroke: var(--red); }
.seat-info { min-width: 0; }
.seat-name { font-weight: 900; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.seat-badge.row .seat-name { max-width: 100%; font-size: 12.5px; }
.seat-badge.row .seat-info { min-width: 0; overflow: hidden; }
.seat-badge.row .tag:not(.warn) { display: none; }
.seat-badge.row .seat-av { width: 34px; height: 34px; }
.seat-badge.row .seat-av .avatar { width: 34px !important; height: 34px !important; }
.seat-badge.row .ring { inset: -4px; width: 42px; height: 42px; }
.seat-meta { display: flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 800; color: var(--ink-soft); flex-wrap: wrap; justify-content: inherit; }
.tiles-left { background: #f6efdc; color: #222; border-radius: 4px; padding: 0 5px; font-weight: 900; }
.tiles-left::after { content: " ▮"; font-size: 9px; }
.seat-score { color: var(--gold-2); font-weight: 900; }
.seat-chips { color: var(--gold-2); }
.bubble {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translate(-50%, -6px) scale(0.9); background: #fffaf0; color: #1d1d1d;
  font-weight: 900; font-size: 13px; padding: 6px 10px; border-radius: 12px; white-space: nowrap; opacity: 0; transition: 0.2s;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); z-index: 6;
}
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.seat-badge.me .bubble { left: 0; transform: translate(0, -6px); top: auto; bottom: calc(100% + 6px); }
.seat-badge.me .bubble.show { transform: none; }

.count-chip {
  position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; z-index: 3;
  background: rgba(0, 0, 0, 0.5); padding: 4px 12px; border-radius: 999px; font-weight: 900; pointer-events: none; backdrop-filter: blur(4px);
}
.count-chip.fives { background: rgba(242, 184, 75, 0.85); color: var(--gold-ink); }
.count-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.count-chip b { font-size: 18px; }
.count-sum { font-size: 12px; opacity: 0.85; }
.boneyard { font-size: 12px; opacity: 0.85; }

.action-bar {
  position: absolute; left: 0; right: 0; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 5;
  padding: 0 10px 0 170px; pointer-events: none;
}
.action-bar > * { pointer-events: auto; }
.status { font-weight: 900; background: rgba(0, 0, 0, 0.55); padding: 7px 14px; border-radius: 999px; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.status.you { background: rgba(242, 184, 75, 0.9); color: var(--gold-ink); }
.dots { width: 22px; height: 8px; background: radial-gradient(circle, var(--ink) 40%, transparent 42%) 0 0 / 8px 8px repeat-x; animation: dots 1s steps(3) infinite; }
@keyframes dots { from { width: 6px; } to { width: 26px; } }
#table.compact .action-bar { padding-left: 10px; justify-content: flex-end; }
#table.compact .status { font-size: 12.5px; }
#table.compact .action-bar { padding-left: 64px; }
#table.compact .seat-badge.me.mine { padding: 3px; }
#table.compact .seat-badge.me.mine .seat-info { display: none; }

.panel-layer { position: absolute; inset: 0; display: none; place-items: center; z-index: 8; background: rgba(0, 0, 0, 0.35); padding: 16px; }
.panel-layer.open { display: grid; }
.panel-card {
  background: var(--panel-solid); border: 1px solid var(--panel-line); border-radius: 20px; padding: 20px; width: min(480px, 100%);
  max-height: calc(100% - 20px); overflow: auto; text-align: center; box-shadow: var(--shadow); position: relative; animation: pop 0.25s ease-out;
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } }
.panel-card h2 { font-family: var(--display); font-weight: 400; margin: 4px 0 8px; font-size: 26px; color: var(--gold-2); }
.big-line { font-size: 18px; font-weight: 800; }
.big-line b { font-size: 24px; }
.invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.invite .label { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 900; text-align: left; }
.code { font-size: 24px; letter-spacing: 0.2em; color: var(--gold-2); }
.wait-seats { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.wait-seat { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); padding: 8px 10px; border-radius: 12px; flex-wrap: wrap; }
.ws-name { flex: 1; font-weight: 800; }
.bot-adds { display: flex; gap: 4px; }
.team-dot { width: 10px; height: 10px; border-radius: 50%; }
.team-dot.team-0 { background: var(--us); }
.team-dot.team-1 { background: var(--them); }
.reveal { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; text-align: left; }
.reveal-row { display: grid; grid-template-columns: 90px 1fr 34px; gap: 8px; align-items: center; }
.rv-name { font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tiles { display: flex; gap: 3px; flex-wrap: wrap; }
.rv-pips { text-align: right; }
.press-card .press-big { font-family: var(--display); font-size: 64px; color: #e2a6ff; text-shadow: 0 4px 0 #3c0f66; line-height: 1; }
.finals { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.final-row { display: flex; justify-content: space-between; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; font-weight: 800; }
.final-row.win { background: rgba(242, 184, 75, 0.2); color: var(--gold-2); }
.chip-delta { font-size: 22px; font-weight: 900; }
.chip-delta.up { color: var(--green); }
.chip-delta.down { color: var(--red); }
.panel-card.won { border-color: var(--gold); }
.confetti {
  position: absolute; inset: 0; pointer-events: none; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(circle, #ffd666 2px, transparent 3px) 0 0 / 37px 41px,
    radial-gradient(circle, #4fb3ff 2px, transparent 3px) 11px 7px / 43px 37px,
    radial-gradient(circle, #ff8a5c 2px, transparent 3px) 23px 19px / 41px 47px;
  animation: confetti 3s linear infinite; opacity: 0.6;
}
@keyframes confetti { to { background-position: 0 200px, 11px 260px, 23px 230px; } }

.chat-drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 100%); background: var(--panel-solid); border-left: 1px solid var(--panel-line);
  transform: translateX(105%); transition: transform 0.25s; z-index: 9; display: flex; flex-direction: column; padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}
.chat-drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--panel-line); }
.phrases { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--panel-line); }
.phrase { border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: 12.5px; }
.chat-drawer .chat-line { align-items: center; font-size: 13.5px; gap: 6px; }
.chat-drawer .chat-line b { color: var(--gold-2); white-space: nowrap; }

/* the attract demo: a card on furysting.com, so nothing a finger could want */
#table.demo .action-bar, #table.demo .panel-layer, #table.demo .chat-drawer, #table.demo .count-chip { display: none !important; }
#table.demo .hud-top { background: none; justify-content: center; top: auto; bottom: 4px; height: auto; padding: 0; }
.demo-scores { display: flex; gap: 16px; align-items: center; font-family: var(--display); font-size: 22px; color: var(--gold-2); text-shadow: 0 2px 0 #000; }
.demo-scores em { font-style: normal; font-size: 14px; color: var(--ink); letter-spacing: 0.1em; }

@media (max-width: 520px) {
  .hud-title { display: none; }
  .hud-right .icon-btn[title="How to play"] { display: none; }
  .hud-sub { display: none; }
  .sb-track { width: 34px; }
  .hud-top { gap: 6px; }
  .watchers { display: none; }
  .hud-top { padding-left: 6px; padding-right: 6px; }
  .hud-scores { gap: 4px; }
  .score-bar { padding: 3px 7px; gap: 4px; }
  .sb-label { font-size: 10px; }
  .pot-chip { width: 13px; height: 13px; }
  .icon-btn { width: 36px; height: 36px; }
  .pot { padding: 4px 8px; font-size: 13px; }
}

@media (max-width: 430px) {
  .sb-track { display: none; }
  .hud-right .icon-btn:not(.chat-btn) { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}