:root {
  color-scheme: dark;
  --ink: #fff7e8;
  --muted: #cbb8d6;
  --plum: #1c0b26;
  --plum-deep: #10051a;
  --gold: #ffcc4d;
  --gold-deep: #c98a16;
  --gold-dark: #8a5a08;
  --red: #ec3a55;
  --red-deep: #a51c33;
  --green: #22c07a;
  --green-deep: #13804f;
  --blue: #3b8cff;
  --felt: #12894f;
  --felt-deep: #08532f;
  --leather: #3d1d10;
  --leather-deep: #1f0c05;
  --card-ink: #1f1b2b;
  --card-red: #d92b3a;
  --line: rgba(255, 247, 232, 0.14);
  --panel: rgba(28, 11, 38, 0.82);
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cw: 4.3rem;
  --chip-size: 1.35rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Everything is sized in rem, so the root size scales the whole interface. It
   grows with the window, filling it the way an 84rem by 48rem window is
   filled (a full-screen 1680×1050 laptop gets about 125%). Never below the
   browser's default size, at most 1.5×. */
html {
  font-size: clamp(100%, min(1.19vw, 2.1vh), 150%);
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  background: var(--plum-deep);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255, 92, 160, 0.22), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(59, 140, 255, 0.14), transparent 60%),
    radial-gradient(circle at 25% 25%, rgba(255, 204, 77, 0.07) 0 6%, transparent 7%) 0 0 / 56px 56px,
    radial-gradient(circle at 75% 75%, rgba(236, 58, 85, 0.08) 0 6%, transparent 7%) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--plum), var(--plum-deep));
}

button,
input {
  font: inherit;
}

[hidden] {
  display: none !important;
}

/* ---------- Floating suits ---------- */

.floaters {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.floaters span {
  position: absolute;
  bottom: -4rem;
  font-size: 2.6rem;
  color: rgba(255, 247, 232, 0.05);
  animation: float-up 26s linear infinite;
}

.floaters span:nth-child(1) { left: 6%; animation-delay: 0s; }
.floaters span:nth-child(2) { left: 18%; animation-delay: -6s; font-size: 1.8rem; color: rgba(236, 58, 85, 0.08); }
.floaters span:nth-child(3) { left: 31%; animation-delay: -14s; font-size: 3.4rem; }
.floaters span:nth-child(4) { left: 46%; animation-delay: -3s; color: rgba(236, 58, 85, 0.07); }
.floaters span:nth-child(5) { left: 60%; animation-delay: -19s; font-size: 2rem; }
.floaters span:nth-child(6) { left: 72%; animation-delay: -9s; font-size: 3rem; color: rgba(236, 58, 85, 0.08); }
.floaters span:nth-child(7) { left: 84%; animation-delay: -22s; }
.floaters span:nth-child(8) { left: 94%; animation-delay: -12s; font-size: 1.7rem; color: rgba(236, 58, 85, 0.07); }

@keyframes float-up {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-120vh) rotate(360deg); }
}

/* ---------- Buttons ---------- */

.btn,
.actions button,
.table-card button,
#leave {
  --face: #4b2a63;
  --side: #2a1338;
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.3rem;
  background: var(--face);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--side), 0 10px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

.btn:hover:not(:disabled),
.actions button:hover:not(:disabled),
.table-card button:hover:not(:disabled),
#leave:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn:active:not(:disabled),
.actions button:active:not(:disabled),
.table-card button:active:not(:disabled),
#leave:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--side), 0 4px 8px rgba(0, 0, 0, 0.3);
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.75);
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.btn-gold,
.actions .act-raise,
.table-card button {
  --face: linear-gradient(180deg, #ffe07a, var(--gold) 55%, #f0b429);
  --side: var(--gold-dark);
  color: #3d2300;
}

.btn-big {
  padding: 1rem 1.8rem;
  font-size: 1.3rem;
}

/* ---------- Top bar ---------- */

.topbar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: fit-content(22rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem 1rem;
  width: min(84rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 10rem;
}

.brand > div {
  min-width: 0;
}

.brand-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  color: var(--card-ink);
  font-size: 1.3rem;
  background:
    radial-gradient(circle, #fffdf7 0 46%, var(--red) 47% 52%, #fffdf7 53% 60%, transparent 61%),
    repeating-conic-gradient(#fffdf7 0 15deg, var(--red) 15deg 45deg);
  box-shadow: 0 4px 0 var(--red-deep), 0 8px 14px rgba(0, 0, 0, 0.4);
  animation: chip-spin 9s ease-in-out infinite;
}

@keyframes chip-spin {
  0%, 80% { transform: rotate(0deg); }
  90% { transform: rotate(200deg) scale(1.08); }
  100% { transform: rotate(360deg); }
}

.brand-name {
  margin: 0;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-name em {
  font-style: normal;
  color: var(--gold);
}

h1 {
  margin: 0;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The status gets a row of its own under the title, so the header buttons can
   never squeeze it. */
#status {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding-left: 3.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

#status:empty {
  display: none;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.75rem;
}

#leave {
  --face: linear-gradient(180deg, #ff6a7f, var(--red));
  --side: var(--red-deep);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

body:not([data-screen="table"]) .room,
/* The lobby's still copy floating away on the walk to a table (startWalkIn)
   stays, though the screen underneath is the table's already. */
body:not([data-screen="lobby"]) .lobby:not(.saloon-entry .lobby),
body:not([data-screen="auth"]) .auth,
body:not([data-screen="connecting"]) .connecting {
  display: none;
}

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

/* The lobby scrolls as a page when its columns run past the window. */
.lobby {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: min(80rem, calc(100% - 2rem));
  min-height: 0;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
  /* Only up and down: everything fits across. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* No box in the lobby scrolls but the leaderboard, so the wheel always moves
   the page: the open tables show the cards that fit, found with the search
   above them, and the boxes and the scheduled tournaments grow to fit. */
.lobby-body > .new-table {
  max-height: none;
  overflow: visible;
}

.lobby-tables .table-list {
  overflow: hidden;
}

/* Lists that don't scroll pass the wheel on to the page. */
.lobby-tables .table-list,
.lobby-scheduled .table-list {
  overscroll-behavior: auto;
}

.tables-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.tables-head h3 {
  margin: 0;
  white-space: nowrap;
}

#table-search,
#scheduled-search {
  flex: 1;
  min-width: 0;
  max-width: 16rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}

.tables-more {
  flex: none;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.lobby-scheduled .table-list {
  overflow: visible;
}

.schedule-when {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0.5rem;
}

.marquee {
  position: relative;
  flex: none;
  overflow: hidden;
  margin: 0.5rem 0 2rem;
  padding: 2.6rem 1.5rem 2.4rem;
  border-radius: 2rem;
  text-align: center;
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(255, 204, 77, 0.25), transparent 70%),
    linear-gradient(180deg, #7a1430, #4a0b2a 60%, #2b0820);
  box-shadow: inset 0 0 0 4px var(--gold-deep), inset 0 0 0 8px #3d0718, 0 24px 60px rgba(0, 0, 0, 0.5);
}

.marquee-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.2rem, 11vw, 7rem);
  font-weight: 400;
  line-height: 0.95;
  color: #fff3c4;
  text-shadow:
    0 0 12px rgba(255, 204, 77, 0.9),
    0 0 36px rgba(255, 140, 60, 0.6),
    0 6px 0 var(--red-deep);
}

.marquee-title span {
  display: inline-block;
  animation: wobble 3.2s ease-in-out infinite;
}

.marquee-title span:last-child {
  color: var(--gold);
  animation-delay: -1.6s;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-4px); }
}

.marquee-sub {
  margin: 1rem auto 0;
  max-width: 42rem;
  color: #f7d9e4;
  font-size: 1.1rem;
}

.marquee > * {
  position: relative;
  z-index: 1;
}

.marquee .marquee-cards {
  position: absolute;
  top: 50%;
  right: 6%;
  display: flex;
  translate: 0 -50%;
}

.marquee .marquee-cards-left {
  right: auto;
  left: 6%;
}

.marquee-cards .card {
  --cw: 4.2rem;
  animation: card-bob 4s ease-in-out infinite;
}

.marquee-cards .card:first-child {
  transform: rotate(-14deg);
  margin-right: -2.1rem;
}

.marquee-cards .card:last-child {
  transform: rotate(10deg);
  animation-delay: -2s;
}

/* The 7-2 mirrors the aces, bobbing out of step with them. */
.marquee-cards-left .card:first-child {
  transform: rotate(-10deg);
  animation-delay: -1s;
}

.marquee-cards-left .card:last-child {
  transform: rotate(14deg);
  animation-delay: -3s;
}

@keyframes card-bob {
  50% { translate: 0 -8px; }
}

.lobby-tabs {
  display: none;
}

/* Opening a table, with scheduling a tournament right under it; the open
   tables beside it, scrolling within its height so the two boxes stay
   together, and the scheduled tournaments under them; the leaderboard down
   the whole side. */
.lobby-body {
  display: grid;
  flex: none;
  /* Room inside the lobby for the lists' hover lift and focus rings, which
     reach a little past their columns, so nothing pokes out at the sides. */
  padding-inline: 0.4rem;
  grid-template-areas:
    "open tables leaders"
    "sched scheduled leaders";
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr) minmax(14rem, 19rem);
  grid-template-rows: auto auto;
  gap: 1rem 1.5rem;
  min-height: 0;
}

.lobby-body > .new-table:not(.schedule-form) { grid-area: open; }
.lobby-body > .schedule-form { grid-area: sched; }
.lobby-body > .lobby-tables { grid-area: tables; }
.lobby-body > .lobby-scheduled { grid-area: scheduled; }
.lobby-body > .leaders { grid-area: leaders; }

/* Fill their place without making it any taller. */
.lobby-body > .lobby-tables,
.lobby-body > .leaders {
  height: 0;
  min-height: 100%;
}

.lobby-panel {
  min-height: 0;
}

.lobby-tables,
.leaders {
  display: flex;
  flex-direction: column;
}

.lobby-tables h3,
.leaders h3 {
  flex: none;
}

.table-list,
.leaders-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  margin: -0.4rem;
  padding: 0.4rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.lobby h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
}

.new-table {
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.12), transparent 50%),
    linear-gradient(160deg, var(--felt), var(--felt-deep));
  box-shadow: inset 0 0 0 3px rgba(255, 204, 77, 0.5), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.new-table > p {
  margin: 0 0 1rem;
  color: #cdeedb;
  font-size: 0.95rem;
}

.new-table input {
  width: 100%;
  margin-bottom: 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-weight: 800;
}

.new-table input::placeholder {
  color: rgba(255, 247, 232, 0.5);
}

.new-table .btn {
  width: 100%;
}

.house-rules {
  display: grid;
  gap: 0.5rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  color: #cdeedb;
  font-size: 0.9rem;
}

.house-rules li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pip {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.85rem;
}

.table-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.table-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 1.4rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--line), 0 14px 30px rgba(0, 0, 0, 0.35);
}

.mini-table {
  position: relative;
  height: 6rem;
  margin: 0.4rem 0.8rem;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 40%, var(--felt), var(--felt-deep));
  box-shadow: 0 0 0 6px var(--leather), 0 0 0 8px var(--gold-deep), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.mini-table .mini-name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 2.2rem;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--display);
  font-size: 1.15rem;
  text-align: center;
}

.mini-seat {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  translate: -50% -50%;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #3d2300;
  font-size: 0.75rem;
  font-weight: 900;
}

.mini-seat.taken {
  border: 0;
  background: var(--gold);
  box-shadow: 0 2px 0 var(--gold-dark);
}

.mini-seat:nth-child(2) { left: 50%; top: 100%; }
.mini-seat:nth-child(3) { left: 8%; top: 78%; }
.mini-seat:nth-child(4) { left: 8%; top: 22%; }
.mini-seat:nth-child(5) { left: 50%; top: 0%; }
.mini-seat:nth-child(6) { left: 92%; top: 22%; }
.mini-seat:nth-child(7) { left: 92%; top: 78%; }

.table-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.badge {
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge.open { background: rgba(34, 192, 122, 0.2); color: #6ff0b2; }
.badge.live { background: rgba(236, 58, 85, 0.2); color: #ff8fa0; }
.badge.live::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  50% { opacity: 0.2; }
}

.table-names {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.table-buttons {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
}

.table-buttons > :first-child {
  flex: 1;
}

.table-card button {
  padding: 0.65rem 1rem;
}

.table-card .watch-table {
  --face: #4b2a63;
  --side: #2a1338;
  color: var(--ink);
}

/* No open tables: just a line under the "Join Table" heading. */
.lobby-empty {
  margin: 0;
  color: var(--muted);
}

/* ---------- Room layout ---------- */

/* At the table the page is locked to the viewport: the table scales to fit the
   space the header and action dock leave, so nothing ever needs scrolling. */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.topbar {
  flex: none;
}

body[data-screen="table"] .topbar {
  width: min(92rem, calc(100% - 2rem));
}

.room {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: 1.25rem;
  width: min(92rem, calc(100% - 2rem));
  min-height: 0;
  margin: 0 auto;
  padding: 0.25rem 0 1rem;
}

.room-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.table-fit {
  position: relative;
  flex: 1;
  min-height: 0;
}

.dock {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* ---------- Table ---------- */

.rail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62rem;
  padding: 1.2rem;
  translate: -50% -50%;
  scale: var(--table-scale, 1);
  border-radius: 14rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(180deg, var(--leather), var(--leather-deep));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 0 3px #12050a;
}

.felt {
  position: relative;
  height: var(--felt-height, auto);
  aspect-ratio: 16 / 9;
  border-radius: 13rem;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.14), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.03) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 50%, var(--felt), var(--felt-deep) 85%);
  box-shadow: inset 0 0 0 4px var(--gold-deep), inset 0 0 0 7px rgba(0, 0, 0, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.55);
}

.felt::before {
  content: "";
  position: absolute;
  inset: 13% 9%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 10rem;
  pointer-events: none;
}

.center {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  translate: -50% -50%;
}

.board {
  display: flex;
  gap: 0.4rem;
}

.card-slot {
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--cw) * 0.12);
}

.pot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.6rem;
}

.pot-text {
  display: grid;
  justify-items: start;
}

.pot-amount {
  margin: 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 204, 77, 0.35);
}

.pot-amount:empty {
  display: none;
}

.pot-amount::before {
  content: "POT ";
  color: rgba(255, 247, 232, 0.65);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  vertical-align: middle;
}

.pot-amount.bump {
  animation: bump 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes bump {
  50% { transform: scale(1.18); }
}

.pot-label {
  margin: 0.15rem 0 0;
  color: #cdeedb;
  font-size: 0.75rem;
}

.pot-label:empty {
  display: none;
}

#begin {
  margin-top: 0.4rem;
  white-space: nowrap;
  animation: begin-pulse 1.6s ease-in-out infinite;
}

@keyframes begin-pulse {
  50% { box-shadow: 0 5px 0 var(--gold-dark), 0 0 0 10px rgba(255, 204, 77, 0.15), 0 10px 24px rgba(0, 0, 0, 0.4); }
}

/* ---------- Chips ---------- */

.chip {
  --c: var(--red);
  --edge: #fff7e8;
  display: block;
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--c) 0 36%, var(--edge) 37% 41%, var(--c) 42% 58%, transparent 59%),
    repeating-conic-gradient(var(--edge) 0 14deg, var(--c) 14deg 45deg);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(0, 0, 0, 0.45);
}

.chip.white { --c: #f4efe6; --edge: #3b8cff; }
.chip.red { --c: #e3324b; }
.chip.green { --c: #18a464; }
.chip.black { --c: #24212c; --edge: #ffcc4d; }
.chip.purple { --c: #7b3fd1; }
.chip.gold { --c: #f2b31c; --edge: #7a1430; }

.chip-stacks {
  display: flex;
  align-items: flex-end;
  gap: 0.12rem;
}

.chip-col {
  display: flex;
  flex-direction: column-reverse;
}

.chip-col .chip + .chip {
  margin-bottom: calc(var(--chip-size) * -0.8);
}

.chip-stacks.pop .chip {
  animation: chip-land 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

@keyframes chip-land {
  from { opacity: 0; transform: translateY(-14px) scale(1.15); }
}

.pot-chips {
  --chip-size: 1.5rem;
  min-width: 1px;
}

.pot-chips.drop .chip-stacks {
  animation: pot-drop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.pot-chips.hit .chip-stacks {
  animation: bump 0.3s ease;
}

.pot-chips.awarding .chip-stacks {
  animation: pot-away 0.42s ease forwards;
}

@keyframes pot-drop {
  from { opacity: 0; transform: translateY(-18px) scale(0.6); }
}

@keyframes pot-away {
  to { opacity: 0; transform: scale(0.4); }
}

.chip-flight {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.flying-chip {
  position: absolute;
  --chip-size: 1.4rem;
}

/* ---------- Seats ---------- */

.seat {
  --bx: 0rem;
  --by: -6rem;
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10.5rem;
  translate: -50% -50%;
}

.seat[data-slot="0"] { left: 50%; top: 93%; --bx: 5.3rem; --by: -4.4rem; }
.seat[data-slot="1"] { left: 7%; top: 72%; --bx: 7.2rem; --by: -2.6rem; }
.seat[data-slot="2"] { left: 9%; top: 22%; --bx: 7rem; --by: 3rem; }
.seat[data-slot="3"] { left: 50%; top: 6%; --bx: 0rem; --by: 6.3rem; }
.seat[data-slot="4"] { left: 91%; top: 22%; --bx: -7rem; --by: 3rem; }
.seat[data-slot="5"] { left: 93%; top: 72%; --bx: -7.2rem; --by: -2.6rem; }

.seat-cards {
  display: flex;
  justify-content: center;
  height: calc(var(--cw) * 0.95);
  margin-bottom: -0.9rem;
}

.seat-cards .card {
  --cw: 3rem;
}

.seat-cards .card:first-child {
  rotate: -8deg;
  margin-right: -0.9rem;
}

.seat-cards .card:last-child {
  rotate: 8deg;
}

.seat.you .seat-cards {
  height: 4.9rem;
  margin-bottom: -0.6rem;
}

.seat.you .seat-cards .card {
  --cw: 4.8rem;
  translate: 0 -2rem;
}

.seat.you .seat-cards .card:first-child {
  margin-right: -0.7rem;
}

.seat-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  /* Grows past the seat for long names so they show in full. */
  width: max-content;
  min-width: 100%;
  max-width: 15rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c1638, #160a1f);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 8px 18px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s ease, opacity 0.3s ease, filter 0.3s ease;
}

.seat.you .seat-body {
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.75), 0 8px 18px rgba(0, 0, 0, 0.5);
}

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b2f7a, #2a1338);
  font-size: 2rem;
  box-shadow: 0 0 0 3px #160a1f, 0 0 0 5px rgba(255, 255, 255, 0.18);
}

/* Illustrated characters fill their round frame edge to edge; emoji keep their
   own size. Containers set the character size with font-size, as the art is 1em. */
.is-character > .avatar-art {
  border-radius: 50%;
  overflow: hidden;
}

.avatar.is-character {
  font-size: 3.4rem;
}

.leader-avatar.is-character {
  font-size: 2.1rem;
}

.seat-info {
  display: grid;
  min-width: 0;
  margin-left: 0.6rem;
}

/* The plate widens to fit the name; long names also step down a size so all
   16 characters fit on one line. */
.who {
  overflow: hidden;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.who.long {
  font-size: 0.92rem;
}

.who-you {
  color: var(--gold);
  font-size: 0.75em;
}

.stack {
  margin: 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.1;
}

.stack.all-in {
  color: #ff8fa0;
}

.stack.tick-up {
  animation: stack-up 0.7s ease;
}

.stack.tick-down {
  animation: stack-down 0.5s ease;
}

@keyframes stack-up {
  30% { transform: scale(1.25); color: #6ff0b2; }
}

@keyframes stack-down {
  30% { transform: translateX(-2px); color: #ff8fa0; }
  60% { transform: translateX(2px); }
}

.dealer {
  position: absolute;
  right: -0.45rem;
  bottom: -0.3rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e9e2d4);
  color: var(--card-ink);
  font-family: var(--display);
  font-size: 0.7rem;
  box-shadow: 0 2px 0 #9c907c, 0 3px 6px rgba(0, 0, 0, 0.4);
  animation: pop-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.made {
  margin: 0.35rem 0 0;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background: var(--gold);
  color: #3d2300;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--gold-dark);
  animation: pop-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

/* Whose turn: a soft glow on the plate and a thin light that sweeps round the
   portrait's own rim, with a fading tail so it reads as one smooth ring. */
.seat.turn .seat-body {
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.7), 0 0 16px rgba(255, 204, 77, 0.28);
  animation: turn-glow 2.6s ease-in-out infinite;
}

.seat.turn .avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(rgba(255, 204, 77, 0) 0deg, rgba(255, 204, 77, 0.2) 140deg, var(--gold) 340deg, rgba(255, 204, 77, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1.5px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1.5px));
  animation: spin 2.4s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes turn-glow {
  50% { box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.85), 0 0 22px rgba(255, 204, 77, 0.4); }
}

.seat.folded .seat-body,
.seat.folded .seat-cards {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.seat.folding .seat-cards .card {
  animation: fold-away 0.55s ease-in forwards;
}

@keyframes fold-away {
  to { opacity: 0; transform: translate(0, 1.5rem) rotate(40deg) scale(0.6); }
}

.seat.raising .seat-body {
  animation: raise-shake 0.5s ease;
}

@keyframes raise-shake {
  20% { transform: scale(1.08) rotate(-2deg); }
  40% { transform: scale(1.08) rotate(2deg); }
  60% { transform: scale(1.04) rotate(-1deg); }
}

.seat.out .seat-body {
  opacity: 0.6;
}

.seat.out .stack {
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 900;
}

.seat.winner .seat-body {
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 40px rgba(255, 204, 77, 0.85);
  animation: winner 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 3;
}

.seat.winner .avatar::before {
  content: "👑";
  position: absolute;
  top: -1.1rem;
  left: 50%;
  translate: -50% 0;
  font-size: 1.2rem;
  animation: pop-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes winner {
  50% { transform: scale(1.08); }
}

.empty-seat {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 1.4rem;
  border: 2px dashed rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bet {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  translate: calc(-50% + var(--bx)) calc(-50% + var(--by));
  --chip-size: 1.15rem;
}

/* Your seat: the bet starts just right of your cards and grows away from
   them as the chips stack up. */
.seat[data-slot="0"] .bet {
  translate: var(--bx) calc(-50% + var(--by));
}

.bet-amount {
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.bubble,
.whisper {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.3rem);
  z-index: 6;
  max-width: 12rem;
  margin: 0;
  translate: -50% 0;
  border-radius: 1rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

/* Chat bubbles: comic-sticker speech balloons in a colour per seat that
   bounce in, bob while they're up, and pop away. */
.bubble {
  --bubble-bg: #fffdf7;
  --bubble-line: #1a0d24;
  width: max-content;
  max-width: 16rem;
  padding: 0.6rem 1rem;
  border: 3px solid var(--bubble-line);
  border-radius: 1.4rem;
  background: var(--bubble-bg);
  color: var(--card-ink);
  font-size: 1.12rem;
  font-weight: 900;
  overflow-wrap: anywhere;
  rotate: var(--tilt, 0deg);
  transform-origin: 50% 130%;
  box-shadow: 3px 4px 0 var(--bubble-line), 0 10px 22px rgba(0, 0, 0, 0.35);
  animation:
    bubble-in 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both,
    bubble-bob 2.6s ease-in-out 0.6s infinite;
}

.bubble.tone-1 { --bubble-bg: #ffe27a; }
.bubble.tone-2 { --bubble-bg: #9ff0c8; }
.bubble.tone-3 { --bubble-bg: #ffb8ca; }
.bubble.tone-4 { --bubble-bg: #bcd6ff; }
.bubble.tone-5 { --bubble-bg: #dcc6ff; }

.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border: solid transparent;
}

.bubble::before {
  border-width: 13px 11px 0;
  border-top-color: var(--bubble-line);
  translate: -50% 1px;
}

.bubble::after {
  border-width: 8px 7px 0;
  border-top-color: var(--bubble-bg);
  translate: -50% -1px;
}

/* Your own hole cards are lifted above the seat, so clear them. */
.seat.you .bubble {
  bottom: calc(100% + 1.3rem);
}

.seat[data-slot="3"] .bubble {
  top: calc(100% + 0.6rem);
  bottom: auto;
  transform-origin: 50% -30%;
}

.seat[data-slot="3"] .bubble::before,
.seat[data-slot="3"] .bubble::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
}

.seat[data-slot="3"] .bubble::before {
  border-width: 0 11px 13px;
  border-bottom-color: var(--bubble-line);
  translate: -50% -1px;
}

.seat[data-slot="3"] .bubble::after {
  border-width: 0 7px 8px;
  border-bottom-color: var(--bubble-bg);
  translate: -50% 1px;
}

/* Emoji-only messages get blown up big. */
.bubble.emoji {
  padding: 0.15rem 0.6rem;
  font-size: 2.5rem;
  line-height: 1.15;
  animation:
    bubble-in-big 0.75s cubic-bezier(0.2, 1.8, 0.4, 1) both,
    bubble-bob 2.6s ease-in-out 0.75s infinite;
}

/* SHOUTING (all caps or "!!") rattles the balloon. */
.bubble.shout {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  animation:
    bubble-in 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both,
    bubble-shake 0.45s ease-in-out 0.55s 2,
    bubble-bob 2.6s ease-in-out 1.45s infinite;
}

.bubble.shown {
  animation: bubble-bob 2.6s ease-in-out infinite;
}

.bubble.leaving {
  animation: bubble-out 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes bubble-in {
  0% { opacity: 0; scale: 0.2; rotate: calc(var(--tilt, 0deg) * -5); }
  55% { opacity: 1; scale: 1.14; }
  75% { scale: 0.95; rotate: calc(var(--tilt, 0deg) * 1.6); }
  100% { scale: 1; rotate: var(--tilt, 0deg); }
}

@keyframes bubble-in-big {
  0% { opacity: 0; scale: 0.1; rotate: -40deg; }
  50% { opacity: 1; scale: 1.35; rotate: 12deg; }
  72% { scale: 0.92; rotate: -5deg; }
  100% { scale: 1; rotate: var(--tilt, 0deg); }
}

@keyframes bubble-bob {
  50% { transform: translateY(-4px); }
}

@keyframes bubble-shake {
  20% { transform: translateX(-4px) rotate(-3deg); }
  40% { transform: translateX(4px) rotate(3deg); }
  60% { transform: translateX(-3px) rotate(-2deg); }
  80% { transform: translateX(3px) rotate(2deg); }
}

@keyframes bubble-out {
  0% { scale: 1; opacity: 1; }
  30% { scale: 1.12; }
  100% { scale: 0.2; opacity: 0; transform: translateY(-14px); }
}

.whisper {
  width: max-content;
  bottom: auto;
  top: 52%;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  background: var(--gold);
  color: #3d2300;
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 0 var(--gold-dark);
  animation: whisper 2.4s ease forwards;
}

.whisper.shown {
  animation: none;
}

.whisper[data-label="Fold"] { background: #b9adc4; color: #2a1338; box-shadow: 0 3px 0 #6b5a7c; }
.whisper[data-label="Raise"] { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-deep); }
.whisper[data-label="Call"],
.whisper[data-label="Check"] { background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-deep); }

@keyframes whisper {
  0% { opacity: 0; transform: translateY(6px) scale(0.6); }
  12% { opacity: 1; transform: translateY(-14px) scale(1.12); }
  22% { transform: translateY(-12px) scale(1); }
  80% { opacity: 1; transform: translateY(-16px); }
  100% { opacity: 0; transform: translateY(-26px); }
}

.win-float {
  position: absolute;
  left: 50%;
  top: 10%;
  z-index: 7;
  margin: 0;
  translate: -50% 0;
  color: #6ff0b2;
  font-family: var(--display);
  font-size: 1.6rem;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(34, 192, 122, 0.8);
  pointer-events: none;
  animation: float-win 1.6s ease-out forwards;
}

@keyframes float-win {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  20% { opacity: 1; transform: translateY(-10px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-50px) scale(1); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.5); }
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.12);
  background: linear-gradient(160deg, #ffffff, #f3eee4);
  color: var(--card-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.card.red {
  color: var(--card-red);
}

.card .corner {
  position: absolute;
  top: 5%;
  left: 9%;
  display: grid;
  justify-items: center;
  line-height: 0.9;
}

.card .rank {
  font-family: var(--body);
  font-size: calc(var(--cw) * 0.33);
  font-weight: 900;
}

.card .mini {
  font-size: calc(var(--cw) * 0.24);
}

.card > .suit {
  margin-top: 18%;
  margin-left: 14%;
  font-size: calc(var(--cw) * 0.55);
  line-height: 1;
}

.card.big .rank {
  position: absolute;
  top: 6%;
  left: 10%;
}

.card.big > .suit {
  margin: 0;
  font-size: calc(var(--cw) * 0.7);
}

.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, #e3324b, #8f1328);
  box-shadow: inset 0 0 0 calc(var(--cw) * 0.07) #fffdf7, 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.card.deal {
  animation: card-in 0.5s cubic-bezier(0.2, 1.1, 0.35, 1) both;
  animation-delay: var(--deal-delay, 0s);
}

@keyframes card-in {
  from { opacity: 0; transform: translate(0, -5rem) rotate(-120deg) scale(0.4); }
}

.board .card.deal {
  animation-name: card-flip;
  animation-duration: 0.6s;
}

@keyframes card-flip {
  0% { opacity: 0; transform: translateY(-1.5rem) rotateY(180deg) scale(0.7); filter: brightness(0.3); }
  50% { opacity: 1; transform: translateY(-0.6rem) rotateY(90deg) scale(1.05); filter: brightness(0.3); }
  100% { transform: none; filter: none; }
}

/* ---------- Result, actions, chat ---------- */

#result {
  width: fit-content;
  max-width: 100%;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.45rem 1.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 1rem;
  text-align: center;
}

#result:empty {
  visibility: hidden;
}

#result.arrive {
  animation: result-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 50rem;
  min-height: 5.6rem;
  margin: 0;
  border-radius: 1.6rem;
}

/* The dock keeps its height between turns so the table doesn't jump in size. */
.actions:empty {
  visibility: hidden;
}

.actions.your-turn {
  padding: 0.75rem 1rem;
  border-radius: 1.6rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.45), 0 16px 40px rgba(0, 0, 0, 0.45);
  animation: slide-up 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(18px); }
}

.actions .act-fold {
  --face: linear-gradient(180deg, #ff6a7f, var(--red));
  --side: var(--red-deep);
}

.actions .act-check,
.actions .act-call {
  --face: linear-gradient(180deg, #4fe39e, var(--green));
  --side: var(--green-deep);
  color: #04301b;
}

.actions .act-allin {
  --face: linear-gradient(180deg, #a874ff, #7b3fd1);
  --side: #4a1f8a;
}

.raise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.raise-picker {
  display: grid;
  gap: 0.45rem;
  min-width: 19rem;
}

.presets {
  display: flex;
  gap: 0.35rem;
}

.actions .presets button {
  --face: rgba(255, 255, 255, 0.1);
  --side: rgba(0, 0, 0, 0.4);
  flex: 1 0 auto;
  padding: 0.3rem 0.45rem;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--side);
}

.actions .presets button.active {
  --face: rgba(255, 204, 77, 0.3);
  color: var(--gold);
}

.raise-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.raise-amount {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.1rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.45);
  color: var(--gold);
  font-family: var(--display);
  font-size: 1rem;
  cursor: text;
  transition: box-shadow 0.15s ease;
}

.raise-amount:focus-within {
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(255, 204, 77, 0.35);
}

.raise-amount:has([aria-invalid="true"]) {
  box-shadow: inset 0 0 0 2px #ff6b6b;
  color: #ff9b9b;
}

.raise-amount input {
  width: 4.5ch;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  field-sizing: content;
  min-inline-size: 3ch;
}

.raise-amount input:focus-visible {
  outline: none;
}

.raise input[type="range"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 0.6rem;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 0%), rgba(255, 255, 255, 0.15) var(--fill, 0%));
  accent-color: var(--gold);
  appearance: none;
  cursor: pointer;
}

.raise input[type="range"]::-webkit-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 0 40%, #fff 41% 46%, var(--gold) 47% 60%, transparent 61%),
    repeating-conic-gradient(#fff 0 14deg, var(--gold-deep) 14deg 45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  appearance: none;
}

.raise input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 0 40%, #fff 41% 46%, var(--gold) 47% 60%, transparent 61%),
    repeating-conic-gradient(#fff 0 14deg, var(--gold-deep) 14deg 45deg);
}

.chat {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 38rem;
  margin: 0;
}

.chat[hidden] {
  display: none;
}

/* Sit out / I'm back, beside the chat field at cash tables. */
.sit-out-btn {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 0 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-weight: 900;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
}

.sit-out-btn:hover:not(:disabled) {
  color: var(--ink);
}

.sit-out-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.sit-out-btn.active {
  background: rgba(255, 204, 77, 0.2);
  color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.55);
}

.sit-out-btn[hidden] {
  display: none;
}

.made.sit-out-tag {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  box-shadow: none;
}

/* After a hand: the one button there is, to show your cards. */
.actions .act-show {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
}

.chat input:not([type="range"]) {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-weight: 700;
}

.chat input:not([type="range"])::placeholder {
  color: rgba(255, 247, 232, 0.45);
}

/* ---------- Spectators ---------- */

/* The table area's top-left corner (outside the oval, so it never covers a
   seat): the knocked-out player's way out, then who is watching. */
.table-corner {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: 11rem;
  pointer-events: auto;
}

.out-leave {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  box-shadow: 0 3px 0 #6e1022, 0 6px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.out-leave:hover {
  filter: brightness(1.08);
}

.out-leave:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #6e1022;
}

.out-leave[hidden] {
  display: none;
}

.spectators {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: 100%;
}

.spectators[hidden] {
  display: none;
}

.spectators-label {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spectator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.15rem 0.6rem 0.15rem 0.15rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.85;
}

.spectator.you {
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.5);
}

.spectator.more {
  padding: 0.25rem 0.6rem;
  color: var(--muted);
}

.spectator-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 1rem;
}

.spectator-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Phones: avatars only, in one row; names stay in the tooltip. */
@media (max-width: 760px) {
  .table-corner {
    max-width: 45%;
  }

  .spectators {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .spectator {
    padding: 0.1rem;
  }

  .spectator-name {
    display: none;
  }

  .spectator.more {
    padding: 0.2rem 0.45rem;
  }
}

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

/* The action buttons and the recent-chat overlay share one slot above the chat
   field. Between your turns the overlay shows the latest lines on a clear
   background, fading out as they climb toward the table. */
.dock-stage {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
}

.history-list[hidden],
.chat-panel[hidden] {
  display: none;
}

.chat-name {
  margin-right: 0.45rem;
  font-weight: 900;
}

.chat-name::after {
  content: ":";
}

.chat-name.tone-0 { color: #fffdf7; }
.chat-name.tone-1 { color: #ffe27a; }
.chat-name.tone-2 { color: #9ff0c8; }
.chat-name.tone-3 { color: #ffb8ca; }
.chat-name.tone-4 { color: #bcd6ff; }
.chat-name.tone-5 { color: #dcc6ff; }

.chat-text {
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The whole chat, in the side panel's Chat tab. */
.chat-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: 0 0 1.4rem 1.4rem;
}

.chat-panel .chat-line {
  line-height: 1.35;
}

.chat-panel .chat-line.you .chat-text {
  color: var(--gold);
}

.chat-panel.flash {
  animation: panel-flash 0.9s ease-out;
}

@keyframes panel-flash {
  from { box-shadow: inset 0 0 0 2px var(--gold); }
}

/* ---------- History ---------- */

.history {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 1.4rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--line);
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.1rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.history-tabs {
  display: flex;
  gap: 1rem;
}

.history-tabs button {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  cursor: pointer;
}

.history-tabs button:hover {
  color: var(--ink);
}

.history-tabs button[aria-selected="true"] {
  color: var(--gold);
}

.history-tabs button.unread::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  right: -0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--red);
}

.history-close {
  display: none;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}

.history-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* One column held to the panel's width: otherwise a single long line (a
   nowrap summary or hint) widens every hand and pushes the odds off the right. */
.history-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem 0.85rem 1rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.history-empty {
  margin: 0.25rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.history-hand {
  padding: 0.75rem 0.8rem 0.6rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px var(--line);
}

.history-hand:first-child {
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.4);
}

.history-hand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.history-hand h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.history-blinds {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.history-summary {
  margin: 0.2rem 0 0.6rem;
  overflow: hidden;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.history-board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.75rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(34, 192, 122, 0.35), rgba(8, 83, 47, 0.55));
}

.history-label {
  min-width: 2.6rem;
  color: #bff5d8;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.history-none {
  color: #bff5d8;
  font-size: 0.85rem;
  opacity: 0.8;
}

.history-street,
.history-hole {
  display: flex;
  gap: 0.2rem;
}

/* Cards in the history: the table's cards, small. Unknown ones are dimmed. */
.history-card {
  --cw: 1.75rem;
}

.history-card.back {
  opacity: 0.55;
}

.history-players {
  display: grid;
  gap: 0.3rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.history-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 4.6rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.7rem;
  font-size: 0.95rem;
}

.history-line.you {
  background: rgba(255, 204, 77, 0.1);
  box-shadow: inset 3px 0 0 var(--gold);
}

.history-avatar {
  font-size: 1.25rem;
  line-height: 1;
}

.history-avatar.is-character {
  font-size: 1.45rem;
}

.history-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.history-you {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--gold);
  color: #3d2300;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.history-line .net {
  justify-self: end;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 400;
  white-space: nowrap;
}

.history-line.up .net { background: rgba(34, 192, 122, 0.2); color: #6ff0b2; }
.history-line.down .net { background: rgba(236, 58, 85, 0.18); color: #ff8fa0; }

.history-hand.arrive {
  animation: result-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.history-toggle {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
}

.history-toggle[aria-expanded="true"] {
  background: rgba(255, 204, 77, 0.2);
  color: var(--gold);
}

/* The hand-rankings button shows on the lobby and table screens. */
.history-toggle.guide-toggle {
  display: inline-flex;
}

body[data-screen="auth"] .guide-toggle,
body[data-screen="connecting"] .guide-toggle {
  display: none;
}

.history-toggle.unread::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--plum-deep);
}

/* ---------- Toast & celebration ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: 1rem;
  z-index: 50;
  max-width: calc(100% - 2rem);
  translate: -50% 0;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 0 var(--red-deep), 0 12px 30px rgba(0, 0, 0, 0.4);
  animation: toast 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes toast {
  from { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.confetti {
  position: absolute;
  top: -2rem;
  width: 0.6rem;
  height: 0.9rem;
  border-radius: 2px;
}

.banner {
  position: absolute;
  left: 50%;
  top: 38%;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  translate: -50% -50%;
  padding: 1.4rem 2.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, #7a1430, #3d0718);
  box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 6px #3d0718, 0 30px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
  animation: banner 3.2s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.banner .banner-emoji {
  font-size: 3rem;
  line-height: 1;
}

.banner .banner-title {
  margin: 0;
  color: #fff3c4;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 204, 77, 0.8), 0 4px 0 var(--red-deep);
}

.banner .banner-sub {
  margin: 0;
  color: var(--gold);
  font-size: 1.1rem;
}

@keyframes banner {
  0% { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  15% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  22% { transform: scale(1) rotate(0deg); }
  85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9) translateY(-20px); }
}

.banner.stay {
  animation: banner-stay 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes banner-stay {
  from { opacity: 0; transform: scale(0.3) rotate(-8deg); }
}

/* ---------- Connecting & auth ---------- */

.connecting {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  color: var(--muted);
}

.big-chip {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 2rem;
  animation: spin 1.2s linear infinite;
}

.auth {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: min(34rem, calc(100% - 2rem));
  min-height: 0;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
}

.marquee-small {
  margin: 0 0 1.25rem;
  padding: 2rem 1.25rem 1.8rem;
}

.marquee-small .marquee-title {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
}

.marquee-small .marquee-cards .card {
  --cw: 4.3rem;
}

.auth-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--line), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}

.tabs button,
.mode-toggle button,
.pills button {
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 0.8rem;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tabs button[aria-selected="true"],
.mode-toggle button[aria-checked="true"],
.pills button[aria-checked="true"] {
  background: var(--gold);
  color: #3d2300;
  box-shadow: 0 3px 0 var(--gold-dark);
}

.auth-card label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-card input,
.new-table input:not([type="range"]) {
  width: 100%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.form-error {
  margin: 0;
  color: #ff8fa0;
  font-size: 0.9rem;
}

.form-error:empty {
  display: none;
}

.form-error.shake {
  animation: raise-shake 0.4s ease;
}

.auth-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- Account bar ---------- */

.account {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wallet {
  --chip-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.4);
}

#balance {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.15rem;
}

.wallet.bump {
  animation: bump 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.user {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}

#username {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

#username:hover {
  color: var(--gold);
}

.user-links {
  display: flex;
  gap: 0.6rem;
}

#table-name.opens-profile {
  cursor: pointer;
}

#table-name.opens-profile:hover {
  color: var(--gold);
}

.link-btn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 0.75rem;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- Your avatar (lobby header) ---------- */

/* In the lobby the player's avatar sits top left, beside their name. Both open
   the player's profile, where the avatar can be changed. */
.me-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: radial-gradient(circle at 35% 30%, #5b2f7a, #2a1338);
  color: inherit;
  font-size: 1.6rem;
  box-shadow: 0 0 0 2px var(--gold), 0 4px 0 2px var(--gold-dark), 0 8px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.me-avatar:hover,
.me-avatar:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 0 2px #ffe07a, 0 6px 0 2px var(--gold-dark), 0 0 22px rgba(255, 204, 77, 0.45);
}

.me-avatar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.me-avatar-art {
  display: grid;
  place-items: center;
}

.me-avatar-art.is-character {
  font-size: 2.8rem;
}

body[data-screen="lobby"] #username,
.saloon-entry[data-from="lobby"] #username {
  display: none;
}

/* ---------- Avatar picker ---------- */

.auth-avatar {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.auth-avatar[hidden] {
  display: none;
}

.auth-avatar legend {
  float: left;
  margin-bottom: 0.35rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.avatar-picker {
  position: relative;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.avatar-section {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.avatar-section-title {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.avatar-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr));
  gap: 0.4rem;
  padding: 0.25rem;
}

.avatar-option {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font-size: 1.6rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.avatar-option.is-character {
  font-size: 2.55rem;
}

.avatar-option:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.14);
}

.avatar-option:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.avatar-option[aria-checked="true"] {
  transform: scale(1.08);
  background: rgba(255, 204, 77, 0.28);
  box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(255, 204, 77, 0.55);
}

/* At sign-up each section is one strip that scrolls sideways, so the form
   stays short enough for small phones. */
.avatar-picker.strip .avatar-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 2.7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  /* Fade the far edges so it reads as "there's more this way". */
  mask-image: linear-gradient(90deg, transparent, #000 0.35rem, #000 calc(100% - 1.6rem), transparent);
}

.avatar-picker.strip {
  gap: 0.45rem;
}

.avatar-picker.strip .avatar-section {
  gap: 0.2rem;
}

.avatar-picker.strip .avatar-option {
  font-size: 1.6rem;
}

.avatar-picker.strip .avatar-option.is-character {
  font-size: 2.4rem;
}

.avatar-picker.strip .avatar-section-title {
  padding-left: 0.6rem;
  font-size: 0.68rem;
}

/* ---------- Lobby form options ---------- */

.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}

.mode-toggle button {
  color: #cdeedb;
  font-size: 0.85rem;
}

.mode-blurb {
  min-height: 2.6em;
  margin: 0;
  color: #cdeedb;
  font-size: 0.95rem;
}

.options {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.option-label {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0 0;
  color: #cdeedb;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.option-label strong {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.option-note {
  margin: 0;
  color: #cdeedb;
  font-size: 0.82rem;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pills button {
  flex: 1;
  padding: 0.5rem 0.6rem;
  background: rgba(0, 0, 0, 0.3);
  color: #cdeedb;
  font-size: 0.85rem;
  white-space: nowrap;
}

.pills button:disabled {
  opacity: 0.45;
}

/* The track is the input itself, so no padding or border from the form's
   other inputs: the chip then runs from end to end of it, and the gold runs
   to the middle of the chip wherever it sits (--p is 0 to 1). */
.new-table input[type="range"],
.dialog input[type="range"] {
  --thumb: 1.5rem;
  width: 100%;
  height: 0.6rem;
  margin: 0.4rem 0;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0)), rgba(255, 255, 255, 0.15) 0);
  accent-color: var(--gold);
  appearance: none;
  cursor: pointer;
}

.new-table input[type="range"]::-webkit-slider-thumb,
.dialog input[type="range"]::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 0 40%, #fff 41% 46%, var(--gold) 47% 60%, transparent 61%),
    repeating-conic-gradient(#fff 0 14deg, var(--gold-deep) 14deg 45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  appearance: none;
}

.new-table input[type="range"]::-moz-range-thumb,
.dialog input[type="range"]::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: var(--gold);
}

.badge.cash { background: rgba(34, 192, 122, 0.2); color: #6ff0b2; }
.badge.tourney { background: rgba(168, 116, 255, 0.22); color: #d5bcff; }

/* ---------- Leaderboard ---------- */

.leaders ol {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leader-rank {
  flex: none;
  width: 1.4rem;
  color: var(--muted);
  font-family: var(--display);
  text-align: center;
}

.leaders li.podium-1 .leader-rank { color: #ffd34d; }
.leaders li.podium-2 .leader-rank { color: #d9dde6; }
.leaders li.podium-3 .leader-rank { color: #e0965a; }

.week-nav[hidden] {
  display: none;
}

/* Week picker: a strip of week chips with arrows on either side. */
.week-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  margin: -0.2rem 0 0.5rem;
}

.week-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.week-step:hover:not(:disabled) {
  background: rgba(255, 204, 77, 0.22);
  color: var(--gold);
}

.week-step:disabled {
  opacity: 0.3;
  cursor: default;
}

.week-strip {
  display: flex;
  flex: 1;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.week-strip::-webkit-scrollbar {
  display: none;
}

.week-chip {
  display: grid;
  flex: none;
  justify-items: center;
  min-width: 3.4rem;
  border: 0;
  border-radius: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
  cursor: pointer;
}

.week-chip:hover {
  color: var(--ink);
}

.week-chip[aria-checked="true"] {
  background: rgba(255, 204, 77, 0.18);
  color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.6);
}

.week-number {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.1;
}

.week-sub {
  font-size: 0.68rem;
  font-weight: 800;
}

.week-chip.live .week-sub {
  color: #6ff0b2;
}

.leaders-empty {
  margin: 0.5rem 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.leaders li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 999px;
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--line);
}

.leader-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b2f7a, #2a1338);
  font-size: 1.25rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}


.leaders li.me .leader-avatar {
  box-shadow: 0 0 0 2px var(--gold);
}

.leaders li.me {
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Players who haven't played that week fade back a little. */
.leaders li.unplayed {
  opacity: 0.6;
}

.leaders .leader-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.leaders .leader-chips {
  color: var(--gold);
  font-family: var(--display);
}

/* ---------- Dialog ---------- */

/* Hand rankings cheat sheet. */
.dialog.guide-dialog {
  display: none;
  flex-direction: column;
  width: min(40rem, calc(100% - 1.5rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  padding: 1.2rem 1.2rem 0.4rem;
}

.dialog.guide-dialog[open] {
  display: flex;
}

.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.guide-head h3 {
  margin: 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
}

.guide-head form {
  margin: 0;
}

.guide-close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}

.guide-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.guide-scroll {
  min-height: 0;
  margin: 0 -0.4rem;
  padding: 0 0.4rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.guide-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-hand {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  border-radius: 1.1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 2px var(--line);
}

.guide-place {
  color: var(--muted);
  font-family: var(--display);
  font-size: 1.2rem;
  text-align: center;
}

.guide-text p {
  margin: 0;
}

.guide-name {
  font-weight: 900;
  font-size: 1rem;
}

.guide-about {
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.35;
}

.guide-odds {
  margin-top: 0.15rem !important;
  color: var(--muted);
  font-size: 0.75rem;
}

.guide-cards {
  display: flex;
  gap: 0.2rem;
}

.guide-cards .card {
  --cw: 2.2rem;
}

/* Cards that don't make the hand (kickers) step back. */
.guide-cards .card.guide-spare {
  opacity: 0.4;
  filter: saturate(0.4);
}

.guide-scroll h4 {
  margin: 1.1rem 0 0.4rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
}

.guide-tips {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Phones: the example cards go under the text. */
@media (max-width: 560px) {
  .guide-hand {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    row-gap: 0.5rem;
  }

  .guide-cards {
    grid-column: 2;
  }

  .guide-cards .card {
    --cw: 2rem;
  }
}

.dialog {
  width: min(24rem, calc(100% - 2rem));
  border: 0;
  border-radius: 1.6rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, #2c1638, #160a1f);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 30px 80px rgba(0, 0, 0, 0.6);
}

.dialog[open] {
  animation: pop-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.dialog::backdrop {
  background: rgba(10, 3, 16, 0.7);
  backdrop-filter: blur(0.8px);
}

.dialog h3 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
}

.dialog .option-note {
  color: var(--muted);
}

.dialog-amount {
  margin: 1rem 0 0.2rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: 2.4rem;
  text-align: center;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* The avatar dialog is taller: the picker scrolls inside it, never the page. */
.avatar-dialog {
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.25rem;
}

.avatar-dialog form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 4.5rem);
}

.avatar-dialog-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.avatar-preview {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b2f7a, #2a1338);
  font-size: 2.1rem;
  box-shadow: 0 0 0 3px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.45);
}

.avatar-preview.is-character {
  font-size: 3.6rem;
}

.avatar-dialog .avatar-picker {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
  scrollbar-width: thin;
}

.avatar-dialog .dialog-actions {
  flex: none;
  margin-top: 1rem;
}

/* ---------- Player profile ---------- */

/* Seats and leaderboard rows open the player's profile. */
.seat[data-name],
.leaders li[role="button"] {
  cursor: pointer;
}

.leaders li[role="button"] {
  transition: background 0.15s ease;
}

.leaders li[role="button"]:hover,
.leaders li[role="button"]:focus-visible {
  outline: none;
  background: rgba(255, 204, 77, 0.12);
}

/* The poster carries the padding so a click on the dialog itself is always
   the backdrop. The whole poster scrolls on short screens; the close button
   sits outside it, in the dialog's corner, so it never scrolls away. */
.profile-dialog {
  width: min(24rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
}

.profile-close {
  position: absolute;
  z-index: 1;
  top: 0.9rem;
  right: 0.9rem;
  margin: 0;
}

.profile-card {
  max-height: calc(100dvh - 2rem);
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.8rem;
  text-align: center;
}

.profile-banner {
  margin: 0;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 7rem;
  height: 7rem;
  margin: 0.6rem 0 0.9rem;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  font-size: 6rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

/* Someone else's avatar can't be changed, but still shows at full colour. */
.profile-avatar:disabled {
  cursor: default;
  filter: none;
}

.profile-avatar:not(:disabled):hover,
.profile-avatar:focus-visible {
  outline: none;
  transform: scale(1.04);
}

.profile-avatar-art {
  display: grid;
  place-items: center;
}

/* The pencil badge only shows on your own profile. */
.profile-avatar-edit {
  position: absolute;
  right: -0.55rem;
  bottom: -0.55rem;
  display: none;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  background: var(--gold);
  color: #3d2300;
  font-size: 0.75rem;
  line-height: 1;
}

.profile-avatar:not(:disabled) .profile-avatar-edit {
  display: grid;
}

.profile-who {
  width: 100%;
  min-width: 0;
}

.dialog h3.profile-name {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-status {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}

.profile-loading {
  margin: 1rem 0;
  text-align: center;
}

.profile-reward {
  margin-bottom: 0.9rem;
  text-align: center;
}

.profile-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.profile-balance {
  display: grid;
  align-content: start;
  gap: 0.05rem;
  padding: 0.1rem 0.5rem;
}

.profile-balance-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-balance-value {
  font-variant-numeric: tabular-nums;
}

.profile-balance-note {
  font-size: 0.75rem;
}

/* The stats are the poster's small print: label, dotted leader, value. */
.profile-stats {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

.profile-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.profile-stat-label {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.85rem;
}

.profile-stat-label::after {
  content: "";
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted currentColor;
  opacity: 0.5;
}

.profile-stat dd {
  margin: 0;
}

.profile-stat-value {
  font-variant-numeric: tabular-nums;
}

.profile-stat-value.up {
  color: var(--green);
}

.profile-stat-value.down {
  color: var(--red);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .lobby-body {
    grid-template-areas:
      "open tables"
      "sched scheduled"
      "leaders leaders";
    grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .lobby-body > .leaders {
    height: auto;
    min-height: 0;
    max-height: 28rem;
  }
}

/* Short screens: squeeze the marquee so the lobby columns keep their room. */
@media (max-height: 820px) {
  .lobby .marquee {
    margin-bottom: 1rem;
    padding: 1.45rem 1.25rem 1.35rem;
  }

  .lobby .marquee-title {
    font-size: clamp(2.2rem, 7vw, 3.6rem);
  }

  .lobby .marquee-sub {
    margin-top: 0.5rem;
    font-size: 0.95rem;
  }

  .lobby .marquee-cards .card {
    --cw: 3.7rem;
  }

  .new-table {
    padding: 1.1rem 1.25rem;
  }

  .new-table > p,
  .new-table input {
    margin-bottom: 0.6rem;
  }

  .lobby h3 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
  }
}

/* Phones and very short windows: one lobby section at a time, picked by tabs. */
@media (max-width: 760px), (max-height: 560px) {
  .lobby-tabs {
    display: grid;
    flex: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 2px var(--line);
  }

  .lobby-tabs button {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 0.4rem;
    background: none;
    color: var(--muted);
    font-weight: 900;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
  }

  .lobby-tabs button[aria-selected="true"] {
    background: var(--gold);
    color: #3d2300;
    box-shadow: 0 3px 0 var(--gold-dark);
  }

  .tab-count:not(:empty) {
    display: inline-grid;
    place-items: center;
    min-width: 1.3rem;
    margin-left: 0.15rem;
    border-radius: 999px;
    padding: 0 0.3rem;
    background: var(--red);
    color: #fff;
    font-size: 0.72rem;
  }

  .lobby-body {
    display: flex;
    flex-direction: column;
  }

  .lobby-body > .lobby-panel {
    flex: 1;
  }

  .lobby-body[data-panel="tables"] > :not([data-panel="tables"]),
  .lobby-body[data-panel="create"] > :not([data-panel="create"]),
  .lobby-body[data-panel="leaders"] > :not([data-panel="leaders"]) {
    display: none;
  }

  /* The scheduled tournaments follow the open tables on the Tables tab, and
     scheduling one follows opening a table on the Open tab, the scheduled
     ones under their heading. */
  .lobby-body {
    gap: 1rem;
  }

  .lobby-body > .lobby-tables,
  .lobby-body > .leaders {
    height: auto;
    min-height: 0;
  }

  .lobby-body > .lobby-scheduled,
  .lobby-body > .schedule-form {
    flex: none !important;
  }

  /* The Tables tab names the open tables already; their search stays. The
     scheduled tournaments keep their heading. */
  .lobby-tables .tables-head h3 {
    display: none;
  }

  .lobby-tables .tables-head:has(#table-search[hidden]) {
    display: none;
  }

  #table-search,
  #scheduled-search {
    max-width: none;
  }

  .lobby-panel > h3 {
    display: none;
  }

  .new-table {
    align-self: stretch;
    flex: 0 1 auto !important;
    padding: 1rem 1.1rem;
  }

  .new-table .mode-blurb {
    min-height: 0;
    font-size: 0.85rem;
  }

  .auth {
    justify-content: flex-start;
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  body[data-screen="lobby"] #status,
  body[data-screen="lobby"] .brand-name,
  .saloon-entry[data-from="lobby"] #status,
  .saloon-entry[data-from="lobby"] .brand-name {
    display: none;
  }

  body[data-screen="lobby"] .topbar,
  .saloon-entry[data-from="lobby"] .topbar {
    padding: 0.5rem 0 0.25rem;
  }

  body[data-screen="lobby"] .brand-chip,
  .saloon-entry[data-from="lobby"] .brand-chip {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
  }

  body[data-screen="lobby"] h1,
  .saloon-entry[data-from="lobby"] h1 {
    font-size: 1.3rem;
  }

  .me-avatar {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.3rem;
  }

  .me-avatar-art.is-character {
    font-size: 2.3rem;
  }
}

@media (max-width: 760px) and (max-height: 740px) {
  .new-table .mode-blurb,
  .auth-hint {
    display: none;
  }

  .auth-card {
    gap: 0.7rem;
    padding: 1.1rem;
  }
}

/* Creating an account adds the avatar picker. On shorter screens the marquee
   drops its small print, then steps aside, so the whole form still fits. */
@media (max-height: 880px) {
  body[data-auth="register"] .auth .marquee-sub,
  body[data-auth="register"] .auth-hint {
    display: none;
  }

  body[data-auth="register"] .auth .marquee {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem 1rem;
  }
}

@media (max-height: 740px) {
  body[data-auth="register"] .auth .marquee {
    display: none;
  }
}

/* Short landscape screens: the avatar picker sits beside the sign-up fields. */
@media (max-height: 560px) and (min-width: 600px) {
  body[data-auth="register"] .auth {
    width: min(46rem, calc(100% - 2rem));
  }

  body[data-auth="register"] .auth-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem 1.25rem;
    align-content: start;
    padding: 1rem 1.1rem;
  }

  body[data-auth="register"] .auth-card > * {
    grid-column: 1;
  }

  body[data-auth="register"] .auth-card > .auth-avatar {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-content: start;
  }
}

/* Short landscape screens: lay the open-a-table form out in two columns. */
@media (max-height: 560px) and (min-width: 600px) {
  .lobby .marquee {
    display: none;
  }

  .lobby-tabs {
    width: min(30rem, 100%);
    margin-inline: auto;
  }

  .new-table:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    align-content: start;
  }

  .new-table > * {
    grid-column: 1;
  }

  .new-table > .mode-options {
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  .new-table .mode-blurb {
    display: none;
  }
}

/* Narrow or short screens: the history becomes a drawer opened from the header. */
@media (max-width: 1100px), (max-height: 560px) {
  .room {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-screen="table"] .history-toggle {
    display: inline-flex;
  }

  .history {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 20;
    width: min(24rem, calc(100% - 1.5rem));
    box-shadow: inset 0 0 0 2px var(--line), 0 20px 60px rgba(0, 0, 0, 0.7);
    background: var(--plum);
    transform: translateX(calc(100% + 1rem));
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.28s;
  }

  /* Lift the room above the header while the drawer is out. */
  .history-open .room {
    z-index: 10;
  }

  .history-open .history {
    transform: none;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  .history-close {
    display: grid;
    place-items: center;
  }
}

/* Short, wide screens (phones on their side, small laptop windows): put the
   controls beside the table instead of under it. */
@media (max-height: 560px) and (min-width: 600px) {
  body[data-screen="table"] .topbar {
    padding: 0.4rem 0 0.2rem;
  }

  body[data-screen="table"] .brand-name,
  body[data-screen="table"] #username {
    display: none;
  }

  body[data-screen="table"] .brand-chip {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
  }

  body[data-screen="table"] h1 {
    font-size: 1.2rem;
  }

  body[data-screen="table"] #status {
    overflow: hidden;
    padding-left: 2.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .room {
    padding-bottom: 0.5rem;
  }

  .room-main {
    flex-direction: row;
    gap: 0.75rem;
  }

  .dock {
    align-content: center;
    width: 17rem;
    padding: 0;
  }

  .actions,
  .actions.your-turn {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.6rem;
  }

  .actions {
    min-height: 0;
  }

  .actions button {
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
  }

  .raise {
    flex-direction: column;
    align-items: stretch;
  }

  .raise-picker {
    min-width: 0;
  }

  #result {
    max-width: 100%;
    padding: 0.35rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.85rem;
  }

  .chat input:not([type="range"]) {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 760px) {
  :root {
    --cw: 2.75rem;
    --chip-size: 1.1rem;
  }

  .topbar {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 2rem);
  }

  .brand {
    min-width: 0;
  }

  #status {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
  }

  .header-actions {
    margin-left: auto;
  }

  #username {
    display: none;
  }

  .lobby,
  .room {
    width: calc(100% - 2rem);
  }

  .lobby-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .marquee {
    padding: 1.4rem 1rem;
  }

  .lobby .marquee {
    padding: 1.45rem 4.4rem;
  }

  .lobby .marquee {
    margin-bottom: 0.75rem;
  }

  .lobby .marquee-title {
    font-size: 2.2rem;
  }

  .lobby .marquee-sub {
    display: none;
  }

  .marquee .marquee-cards {
    right: 0.9rem;
  }

  .marquee .marquee-cards-left {
    left: 0.9rem;
  }

  .marquee-cards .card,
  .lobby .marquee-cards .card {
    --cw: 1.8rem;
  }

  .marquee-cards .card:first-child {
    margin-right: -0.8rem;
  }

  .rail {
    width: 22rem;
    padding: 0.6rem;
    border-radius: 9rem;
  }

  /* fitTable() sets the felt height to suit the screen, so drop the fixed ratio. */
  .felt {
    height: var(--felt-height, 29rem);
    aspect-ratio: auto;
    border-radius: 8.5rem;
  }

  .felt::before {
    inset: 9% 12%;
    border-radius: 7rem;
  }

  .seat {
    width: 6.4rem;
  }

  .seat[data-slot="0"] { left: 50%; top: 92%; --bx: 4.4rem; --by: -1.2rem; }

  .seat[data-slot="0"] .bet {
    translate: calc(-50% + var(--bx)) calc(-50% + var(--by));
  }
  .seat[data-slot="1"] { left: 14%; top: 64%; --bx: 0.6rem; --by: 3.6rem; }
  .seat[data-slot="2"] { left: 14%; top: 24%; --bx: 0.6rem; --by: 3.6rem; }
  .seat[data-slot="3"] { left: 50%; top: 8%; --bx: 4.4rem; --by: 0.6rem; }
  .seat[data-slot="4"] { left: 86%; top: 24%; --bx: -0.6rem; --by: 3.6rem; }
  .seat[data-slot="5"] { left: 86%; top: 64%; --bx: -0.6rem; --by: 3.6rem; }

  .bet {
    flex-direction: column;
    gap: 0.1rem;
  }

  .seat-body {
    flex-direction: column;
    max-width: 8rem;
    padding: 0.25rem 0.3rem 0.35rem;
    border-radius: 1.1rem;
  }

  .avatar {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.55rem;
  }

  .avatar.is-character {
    font-size: 2.7rem;
  }

  .seat-info {
    justify-items: center;
    width: 100%;
    margin: 0.2rem 0 0;
    text-align: center;
  }

  .who {
    max-width: 100%;
    font-size: 0.85rem;
  }

  .who.long {
    font-size: 0.7rem;
  }

  /* Your plate's gold outline already says it's you; keep the room for the name. */
  .who-you {
    display: none;
  }

  /* Keep the chat field usable: chips on their way are in the button's tooltip. */
  .top-up-note {
    display: none;
  }

  /* Under your own plate it would cover the dock; the I'm back button says it. */
  .seat.you .sit-out-tag {
    display: none;
  }

  .stack {
    font-size: 1.05rem;
  }

  .seat-cards .card {
    --cw: 2rem;
  }

  .seat.you .seat-cards .card {
    --cw: 3rem;
    translate: 0 -1.2rem;
  }

  .board {
    gap: 0.2rem;
  }

  .btn-big {
    padding: 0.8rem 1.2rem;
    font-size: 1.05rem;
  }

  .center {
    top: 51%;
  }

  .made {
    max-width: 5.8rem;
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
  }

  .pot-amount {
    font-size: 1.3rem;
  }

  /* Phone dock: raise sizing on top, then every action button in one row. */
  .actions,
  .actions.your-turn {
    gap: 0.5rem;
    padding: 0.6rem;
  }

  .actions {
    min-height: 7.6rem;
  }

  .actions button {
    flex: 1;
    padding: 0.65rem 0.6rem;
    font-size: 0.95rem;
  }

  .raise {
    display: contents;
  }

  .raise-picker {
    order: -1;
    flex-basis: 100%;
    min-width: 0;
  }

  .actions .act-raise,
  .actions .act-allin {
    flex: 1.4;
  }

  #result {
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
  }

  body[data-screen="table"] .topbar {
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0 0.25rem;
  }

  body[data-screen="table"] .brand-name {
    display: none;
  }

  body[data-screen="table"] .brand-chip {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
  }

  body[data-screen="table"] h1 {
    font-size: 1.15rem;
  }

  body[data-screen="table"] #status {
    overflow: hidden;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body[data-screen="table"] .header-actions {
    gap: 0.4rem;
  }

  .history-toggle {
    padding: 0.5rem 0.65rem;
  }

  .history-toggle-label {
    display: none;
  }

  .room {
    padding-bottom: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition: none !important;
  }

  .floaters {
    display: none;
  }
}

/* Hole cards turned face up at an all-in or a showdown. */
.seat-cards .card.turn-up {
  animation: card-turn-up 0.5s cubic-bezier(0.3, 1.2, 0.4, 1) both;
  animation-delay: var(--turn-delay, 0s);
}

@keyframes card-turn-up {
  0% { transform: rotateY(180deg); filter: brightness(0.3); }
  50% { transform: rotateY(90deg) scale(1.08); filter: brightness(0.3); }
  100% { transform: none; filter: none; }
}

/* Run it twice: the second run's board, a little smaller, under the first.
   The cards both runs share are dimmed so the new ones stand out. */
.board-two {
  zoom: 0.8;
  margin-top: -0.2rem;
}

.board-two[hidden] {
  display: none;
}

.board-two .card.shared {
  filter: brightness(0.7) saturate(0.8);
}

.history-board-two {
  margin-top: 0.3rem;
}

/* Seconds left to answer run it twice. */
.twice-clock {
  align-self: center;
  min-width: 3ch;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 2px var(--line);
  color: #fff;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.twice-clock.urgent {
  color: #ff8a7a;
  animation: twice-pulse 1s ease-in-out infinite;
}

@keyframes twice-pulse {
  50% { scale: 1.12; }
}

/* Each all-in player's run-it-twice answer, on their seat. */
.twice-pick {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.4rem);
  z-index: 3;
  translate: 0 -50%;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  color: #ddd;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

.twice-pick.twice {
  background: #f2c14e;
  box-shadow: inset 0 0 0 2px #8a5a12;
  color: #2a1a05;
}

.twice-pick.once {
  background: #b9473b;
  box-shadow: inset 0 0 0 2px #5e1d16;
  color: #fff;
}

.twice-pick.none {
  opacity: 0.8;
}

.twice-pick.fresh {
  animation: twice-pick-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes twice-pick-in {
  from { scale: 0.4; opacity: 0; }
}