:root {
  --gold: #e8c578;
  --gold-deep: #c9a227;
  --gold-soft: #e2c887;
  --gold-head: #d8b45a;
  --gold-grad: linear-gradient(#e8c578, #c9a227);
  --cream: #fdf6e6;
  --cream-2: #f3ece0;
  --cream-3: #e8d9b8;
  --muted: #a4907a;
  --muted-2: #8f7c66;
  --muted-3: #c9b596;
  --line: #3a2b21;
  --line-2: #4a3729;
  --line-3: #6b5327;
  --ink: #241a10;
  --ink-2: #1b1712;
  --red: #9d1f22;
  --screen: radial-gradient(110% 55% at 50% 0%, #33241c 0%, #201713 55%, #120e0c 100%);
  --serif: 'Marcellus', Georgia, serif;
  --narrow: 'Archivo Narrow', Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: #100c0a;
  color: var(--cream-2);
  font-family: 'Archivo', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--cream); }

/* ---------- keyframes ---------- */
@keyframes scIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes scUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(102%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes deal { from { opacity: 0; transform: translateY(-46px) rotate(-9deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes chipUp { from { opacity: 0; transform: translateY(12px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes toast { 0% { opacity: 0; transform: translateY(6px); } 14%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232, 197, 120, 0.45), 0 0 16px rgba(232, 197, 120, 0.12); }
  50% { box-shadow: 0 0 0 1px rgba(232, 197, 120, 0.9), 0 0 26px rgba(232, 197, 120, 0.3); }
}
@keyframes shrink { from { width: 100%; } to { width: 0%; } }

/* ---------- app shell ---------- */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(90% 60% at 50% 0%, #241a15 0%, #14100e 60%, #0c0908 100%);
  display: flex;
  justify-content: center;
}

/* Phone layout: one app-width column at full height. The wide layout (desktop.css) takes over at 1024px. */
.app {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #161110;
}
@media (min-width: 520px) {
  .app { box-shadow: 0 0 0 1px #2c211b, 0 40px 80px rgba(0, 0, 0, 0.65); }
}

.wordmark {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.24em;
  color: var(--gold-head);
}
.wordmark--lg { font-size: 16px; letter-spacing: 0.26em; }
.wordmark--sm { font-size: 13px; letter-spacing: 0.22em; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen--signin { background: radial-gradient(120% 62% at 50% 0%, #3d2c21 0%, #241a14 48%, #120e0c 100%); }
.screen--home, .screen--game, .screen--code, .screen--room { background: var(--screen); }
.screen--room { background: radial-gradient(110% 50% at 50% 0%, #33241c 0%, #201713 55%, #120e0c 100%); }
.screen--table { background: radial-gradient(120% 55% at 50% 4%, #3d2c21 0%, #241a14 46%, #120e0c 100%); overflow-y: auto; }

/* Entry animations run on mount only, so in-screen updates don't replay them. */
.screen--signin.mount { animation: fade 0.4s ease both; }
.screen--home.mount { animation: scUp 0.36s ease both; }
.screen--game.mount, .screen--code.mount { animation: scIn 0.32s ease both; }
.screen--room.mount { animation: scIn 0.34s ease both; }
.screen--table.mount { animation: fade 0.5s ease both; }

/* ---------- shared type ---------- */
.display { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--cream); }
.display--xl { font-size: 40px; line-height: 1.12; }
.display--lg { font-size: 37px; line-height: 1.1; }
.display--md { font-size: 29px; }

.lede { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 270px; }
.lede--tight { line-height: 1.55; max-width: 250px; }
.lede--full { font-size: 14px; line-height: 1.55; max-width: none; }

.eyebrow {
  font-family: var(--narrow);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow--gold { color: var(--gold-soft); letter-spacing: 0.2em; }

.fineprint { font-size: 12px; line-height: 1.55; color: var(--muted-2); text-align: center; }
.note { font-size: 12px; color: var(--muted-2); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  border: none;
  cursor: pointer;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold-grad);
}
.btn--gold {
  height: 60px;
  box-shadow: 0 12px 26px rgba(201, 162, 39, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn--gold:hover { filter: brightness(1.06); }
.btn--ghost {
  height: 60px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream-2);
  cursor: pointer;
  border-radius: 12px;
}
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--cream); }
.btn--wide {
  width: 100%;
  height: 56px;
  border-radius: 11px;
  font-size: 15.5px;
  box-shadow: 0 12px 26px rgba(201, 162, 39, 0.2);
}
.btn--wide:hover { filter: brightness(1.06); }
.btn--sheet { height: 52px; border-radius: 11px; font-size: 15px; }
.btn--back { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--muted); padding: 0; line-height: 1; }
.btn--back-sm { font-size: 19px; }

.btn--google {
  height: 58px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  color: #241a10;
  background: linear-gradient(#fdfaf1, #efe6d3);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
  border: none;
  cursor: pointer;
}
.btn--google:hover { filter: brightness(1.05); }
.btn--google .g {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #241a10;
  color: #f6efdd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
}

/* ---------- sign in ---------- */
.signin__top { padding: 74px 30px 0; display: flex; flex-direction: column; gap: 16px; }
.signin__foot { margin-top: auto; padding: 0 30px 40px; display: flex; flex-direction: column; gap: 16px; }

.felt-oval {
  margin: 44px 30px 0;
  height: 180px;
  border-radius: 100px / 90px;
  background: radial-gradient(60% 65% at 50% 38%, #1b6d4e, #14543c 55%, #0d3b2a);
  box-shadow: inset 0 0 0 6px #2b1a12, inset 0 0 0 7px var(--gold-deep), inset 0 0 46px rgba(0, 0, 0, 0.55), 0 20px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.felt-oval__mark {
  font-family: var(--serif);
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(201, 162, 39, 0.32);
}

/* ---------- cards ---------- */
.card {
  border-radius: 6px;
  background: linear-gradient(#fdfaf1, #f1e9d8);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  position: relative;
  color: var(--ink-2);
  display: block;
}
.card--red { color: var(--red); }
.card__r { position: absolute; left: 6px; top: 5px; font-size: 15px; font-weight: 600; line-height: 1; }
.card__s { position: absolute; right: 6px; bottom: 6px; font-size: 19px; line-height: 1; }

.card--hero { width: 46px; height: 64px; }
.card--tilt-l { transform: rotate(-7deg); }
.card--tilt-r { transform: rotate(5deg); }

.card--board {
  width: 44px;
  height: 62px;
  border-radius: 5px;
  background: linear-gradient(#fdfaf1, #f0e8d6);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}
.card--board .card__r { left: 5px; top: 4px; font-size: 14px; }
.card--board .card__s { right: 5px; bottom: 5px; font-size: 17px; }
.card--slot { width: 44px; height: 62px; border-radius: 5px; border: 1px dashed rgba(201, 162, 39, 0.28); }

.card--hole {
  width: 50px;
  height: 70px;
  background: linear-gradient(#fdfaf1, #f0e8d6);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.5);
}
.card--hole .card__r { font-size: 16px; }
.card--hole:first-child { transform: rotate(-5deg); }
.card--hole:last-child { transform: rotate(4deg); }

.deal { animation: deal 0.6s 0.15s ease both; }
.deal--2 { animation-delay: 0.32s; }
.card--board.deal { animation: deal 0.4s ease both; }
.card--hole.deal { animation: deal 0.5s 0.1s ease both; }
.card--hole.deal.deal--2 { animation-delay: 0.22s; }

/* ---------- sheets ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 5, 0.62);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.overlay.mount { animation: fade 0.22s ease both; }
.overlay--dark { background: rgba(8, 6, 5, 0.6); }

.sheet {
  background: #f7f2e8;
  border-radius: 22px 22px 0 0;
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink-2);
}
.sheet.mount { animation: sheetUp 0.34s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.sheet--dark {
  background: linear-gradient(#241a15, #191311);
  border-top: 1px solid var(--line-2);
  border-radius: 24px 24px 0 0;
  padding: 14px 22px 28px;
  gap: 20px;
  color: var(--cream-2);
}
.sheet__grip { width: 44px; height: 4px; border-radius: 2px; background: var(--line-2); align-self: center; }
.sheet__title { display: flex; flex-direction: column; gap: 3px; }
.sheet__title b { font-size: 17px; font-weight: 600; }
.sheet__title span { font-size: 13px; color: #6b6257; }

.acct {
  border: 1px solid #ddd5c6;
  background: #fff;
  cursor: pointer;
  border-radius: 12px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}
.acct:hover { background: #f2ede2; }
.acct__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.acct__av--new { background: none; border: 1px dashed #c3b9a6; font-size: 17px; color: #6b6257; font-weight: 400; }
.acct__who { display: flex; flex-direction: column; gap: 2px; }
.acct__who b { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.acct__who span { font-size: 12.5px; color: #6b6257; }
.acct__label { font-size: 14.5px; font-weight: 500; }
.link-btn { align-self: center; margin-top: 2px; background: none; border: none; cursor: pointer; font-size: 13px; color: #6b6257; }

/* ---------- home ---------- */
.topbar { padding: 30px 24px 0; display: flex; justify-content: space-between; align-items: center; }
.avatar-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn:hover { border-color: var(--gold-deep); }

.home__greet { padding: 56px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.home__cta { padding: 32px 24px 0; display: flex; flex-direction: column; gap: 11px; }
.home__rooms { margin-top: 34px; padding: 0 24px 30px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }

.room-row {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 15px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.room-row:hover { border-color: var(--line-3); background: rgba(232, 197, 120, 0.06); }
.room-row__who { display: flex; flex-direction: column; gap: 4px; }
.room-row__name { font-family: var(--serif); font-size: 16px; color: var(--cream); }
.room-row__meta { font-size: 12.5px; color: var(--muted); }
.room-row__code { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- profile ---------- */
.profile__id { display: flex; align-items: center; gap: 14px; }
.profile__av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.profile__name { font-family: var(--serif); font-size: 20px; color: var(--cream); }
.profile__mail { font-size: 12.5px; color: var(--muted-2); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__row { display: flex; gap: 10px; }
.field__row--tight { gap: 8px; }

.swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.chip-toggle {
  flex: 1;
  height: 44px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
}

.input {
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream-2);
  font-size: 15.5px;
  padding: 0 15px;
  outline: none;
  width: 100%;
}
.input:focus { border-color: var(--line-3); }

/* ---------- game picker ---------- */
.step { padding: 30px 24px 0; display: flex; align-items: center; gap: 14px; }
.game__head { padding: 44px 24px 0; }
.game__list { padding: 26px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.game-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 13px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.game-card__top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.game-card__name { font-family: var(--serif); font-size: 21px; color: var(--cream); }
.game-card__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.game-card__blurb { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.foot-cta { margin-top: auto; padding: 0 24px 34px; }

/* ---------- join by code ---------- */
.code__head { padding: 40px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.code__slots { padding: 28px 22px 0; display: flex; gap: 7px; }
.slot {
  flex: 1;
  height: 64px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 600;
  color: var(--cream);
}
.joining { padding: 20px 24px 0; display: flex; align-items: center; gap: 11px; animation: fade 0.2s ease both; }
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(232, 197, 120, 0.25);
  border-top-color: var(--gold);
  animation: spin 0.7s linear infinite;
}
.joining span:last-child { font-size: 13.5px; color: var(--gold); }

.keypad { margin-top: auto; padding: 0 18px 26px; display: flex; flex-direction: column; gap: 9px; }
.keypad__row { display: flex; gap: 9px; }
.key {
  flex: 1;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream-2);
  font-weight: 500;
}
.key:hover { background: rgba(232, 197, 120, 0.1); border-color: var(--line-3); }

/* ---------- room ---------- */
.room__top { padding: 28px 22px 0; display: flex; justify-content: space-between; align-items: center; }
.room__body { padding: 16px 22px 0; overflow: auto; display: flex; flex-direction: column; gap: 18px; }

.code-card {
  position: relative;
  border: 1px solid var(--line-3);
  border-radius: 14px;
  background: linear-gradient(rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.04));
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.code-card__left { display: flex; flex-direction: column; gap: 7px; }
.code-card__code {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.code-card__meta { font-size: 12.5px; color: var(--muted); }
.btn--copy {
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold-grad);
  border-radius: 8px;
  padding: 10px 13px;
}
.toast {
  position: absolute;
  right: 18px;
  bottom: -13px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--gold);
  border-radius: 6px;
  padding: 4px 9px;
  animation: toast 1.6s ease both;
}

.section { display: flex; flex-direction: column; gap: 11px; }
.section__head { display: flex; justify-content: space-between; align-items: baseline; }
.setting { display: flex; flex-direction: column; gap: 9px; }
.setting__label { font-size: 13px; color: var(--muted-3); }
.setting__opts { display: flex; gap: 7px; }
.opt { flex: 1; height: 40px; border-radius: 8px; font-size: 13px; }
.opt--locked { cursor: default; }
.opt--pick { cursor: pointer; }

.seat-you {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: linear-gradient(rgba(201, 162, 39, 0.12), rgba(201, 162, 39, 0.03));
  padding: 14px 15px;
}
.seat-you__av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
.seat-you__who { display: flex; flex-direction: column; gap: 3px; }
.seat-you__name { font-family: var(--serif); font-size: 17px; color: var(--cream); }
.seat-you__stack { font-size: 12.5px; color: var(--gold-soft); }
.badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 5px;
  padding: 5px 9px;
}

.roster { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.roster__head { display: flex; justify-content: space-between; }
.player {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 14px;
}
.player.enter { animation: scUp 0.3s ease both; }
.player__av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #e3d2b6;
  flex: none;
}
.player__who { display: flex; flex-direction: column; gap: 2px; }
.player__name { font-size: 14.5px; font-weight: 500; color: var(--cream-2); }
.player__sub { font-size: 12px; color: var(--muted-2); }
.player__state { margin-left: auto; font-size: 11.5px; }
.player--empty { border-style: dashed; background: none; animation: none; }
.player--empty .player__av { background: none; border: 1px dashed var(--line-2); }
.player--empty span:last-child { font-size: 14px; color: var(--muted-2); }

.room__foot {
  margin-top: auto;
  padding: 14px 22px 28px;
  border-top: 1px solid #2c211b;
  background: rgba(12, 9, 8, 0.5);
}
.room__foot-stack { display: flex; flex-direction: column; gap: 9px; }
.room__foot-stack--center { align-items: center; }
.waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 15px 18px;
  width: 100%;
  justify-content: center;
  animation: glow 2.2s ease-in-out infinite;
}
.waiting span:first-child { font-size: 14.5px; color: var(--cream-2); }
.dots { display: flex; gap: 4px; }
.dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: dots 1.1s infinite; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- table ---------- */
.table__top { padding: 26px 18px 0; display: flex; justify-content: space-between; align-items: center; }
.table__top-left { display: flex; align-items: center; gap: 10px; }
.table__top-right { display: flex; align-items: center; gap: 9px; }
.code-pill {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--cream-3);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 5px 9px;
  font-variant-numeric: tabular-nums;
}
.hand-label { font-family: var(--narrow); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }

.felt {
  margin: 14px 12px 0;
  position: relative;
  height: 392px;
  flex: none;
  border-radius: 150px;
  background: linear-gradient(#6a2731, #46161d 60%, #340f15);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.felt__rail { position: absolute; inset: 15px; border-radius: 136px; background: #2b1a12; box-shadow: inset 0 0 0 2px var(--gold-deep); }
.felt__cloth {
  position: absolute;
  inset: 20px;
  border-radius: 132px;
  background: radial-gradient(58% 62% at 50% 38%, #1d7454, #14543c 55%, #0c3626);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.5), inset 0 0 54px rgba(0, 0, 0, 0.6);
}
.felt__mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  text-align: center;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: rgba(201, 162, 39, 0.26);
}

.seats-top { position: absolute; left: 0; right: 0; top: 38px; display: flex; justify-content: center; gap: 16px; }
.seat { width: 98px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seat__art { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.seat__card {
  position: absolute;
  top: 2px;
  width: 15px;
  height: 21px;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #5c1a22 0 3px, #43121a 3px 6px);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.4);
}
.seat__card--l { left: 6px; transform: rotate(-14deg); }
.seat__card--r { right: 6px; transform: rotate(12deg); }
.seat__ring {
  position: absolute;
  inset: 6px 6px 0 6px;
  top: 10px;
  border-radius: 50%;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seat__ring > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #2e2118;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #f0e3c8;
}
.seat__name { font-size: 12.5px; font-weight: 500; color: var(--cream-2); }
.seat__stack {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(12, 9, 8, 0.55);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 3px 9px 3px 5px;
}
.seat__stack span:last-child { font-size: 11.5px; color: var(--cream-3); font-variant-numeric: tabular-nums; }
.seat__act { font-family: var(--narrow); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }

.chip-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: repeating-conic-gradient(#c9a227 0 14deg, #f6ecd2 14deg 28deg);
  box-shadow: inset 0 0 0 3px var(--gold-deep);
  flex: none;
}
.chip-dot--lg { width: 15px; height: 15px; background: repeating-conic-gradient(#c9a227 0 14deg, #f9f1dc 14deg 28deg); }

.middle { position: absolute; left: 0; right: 0; top: 186px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.pot { display: flex; align-items: flex-end; gap: 9px; }
.pot.mount { animation: chipUp 0.45s ease both; }
.chip-stack { display: flex; flex-direction: column-reverse; align-items: center; }
.chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip-stack .chip:not(:first-child) { margin-bottom: -24px; }
.chip--red { background: repeating-conic-gradient(#7a1f2b 0 15deg, #f4ead4 15deg 30deg); }
.chip--red > span { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(#93283a, #6b1a24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.chip--gold { background: repeating-conic-gradient(#c9a227 0 15deg, #f9f1dc 15deg 30deg); }
.chip--gold > span { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(#e0b53f, #a37c1f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.pot__label { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.pot__eyebrow { font-family: var(--narrow); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); }
.pot__value { font-family: var(--serif); font-size: 25px; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.board { display: flex; gap: 6px; }

.seats-bottom { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 34px; }
.seat-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(rgba(18, 13, 11, 0.9), rgba(12, 9, 8, 0.9));
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 5px 12px 5px 5px;
}
.seat-pill__ring { width: 34px; height: 34px; border-radius: 50%; padding: 2px; display: flex; flex: none; }
.seat-pill__ring > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #2e2118;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #f0e3c8;
}
.seat-pill__who { display: flex; flex-direction: column; gap: 1px; }
.seat-pill__name { font-size: 12px; font-weight: 500; color: var(--cream-2); }
.seat-pill__stack { font-size: 11px; color: var(--cream-3); font-variant-numeric: tabular-nums; }

.hand-bar { padding: 14px 18px 0; display: flex; align-items: center; gap: 13px; }
.hole { display: flex; gap: 6px; }
.hand-bar__read { display: flex; flex-direction: column; gap: 4px; }
.hand-bar__name { font-family: var(--serif); font-size: 16px; color: var(--cream); }
.hand-bar__stack { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cream-3); }
.hand-bar__turn { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.turn-label { font-family: var(--narrow); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.turn-clock { width: 74px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; display: block; }
.turn-clock > span { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #a37c1f, #e8c578); animation: shrink 18s linear both; }

.bets { padding: 12px 18px 0; display: flex; gap: 8px; }
.bet { flex: 1; height: 32px; border-radius: 7px; cursor: pointer; font-size: 11.5px; }

.acts { padding: 12px 18px 0; display: flex; gap: 8px; }
.act { height: 52px; cursor: pointer; border-radius: 9px; font-size: 14.5px; font-weight: 600; }
.act--fold { flex: 1; border: 1px solid #6a2731; background: rgba(106, 39, 49, 0.24); color: #eab7ba; }
.act--fold:hover { background: rgba(106, 39, 49, 0.4); }
.act--call { flex: 1.1; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--cream-2); }
.act--call:hover { border-color: var(--gold-deep); }
.act--raise {
  flex: 1.3;
  border: none;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold-grad);
  box-shadow: 0 8px 18px rgba(201, 162, 39, 0.24);
}
.act--raise:hover { filter: brightness(1.06); }

.feed-pane {
  margin-top: 14px;
  flex: 1;
  min-height: 180px;
  border-top: 1px solid #2c211b;
  background: rgba(10, 8, 7, 0.5);
  display: flex;
  flex-direction: column;
}
.tabs { display: flex; border-bottom: 1px solid #2c211b; }
.tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--narrow);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tab--on { border-bottom-color: var(--gold-deep); color: var(--gold); }
.feed { flex: 1; min-height: 0; overflow: auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 9px; }
.feed__row { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.feed__row.enter { animation: scUp 0.24s ease both; }
.feed__who { color: var(--muted); }
.feed__what { text-align: right; }
.chat-bar { padding: 0 18px 18px; display: flex; gap: 8px; }
.chat-bar .input { height: 42px; border-radius: 9px; font-size: 13px; padding: 0 13px; }
.btn--send {
  width: 64px;
  height: 42px;
  border: none;
  cursor: pointer;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold-grad);
  flex: none;
}

/* ---------- live play ---------- */
.card--back {
  background: repeating-linear-gradient(135deg, #5c1a22 0 4px, #43121a 4px 8px);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.45), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.card--hole.deal.deal--3 { animation-delay: 0.34s; }
.card--mini {
  width: 22px;
  height: 31px;
  border-radius: 3px;
  background: linear-gradient(#fdfaf1, #f0e8d6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.card--mini .card__r { left: 3px; top: 2px; font-size: 10px; }
.card--mini .card__s { right: 2px; bottom: 2px; font-size: 11px; }

/* Shown-down cards sit above the avatar so the initials stay readable. */
.seat__shown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 1; }
.seat__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat__act { min-height: 12px; white-space: nowrap; }
.seat--compact { width: 72px; gap: 4px; }
.seat--compact .seat__art { transform: scale(0.8); margin: -5px 0 -6px; }
.seat--compact .seat__name { font-size: 11px; }
.seat--compact .seat__stack { padding: 2px 7px 2px 4px; }
.seat--compact .seat__stack span:last-child { font-size: 10px; }
.seats-top--compact { gap: 4px; top: 30px; }

.seat-pill { position: relative; }
.seat-pill__act {
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  text-align: center;
  font-family: var(--narrow);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.seat-pill__cards { display: flex; gap: 2px; }
.seat-pill--compact { gap: 5px; padding: 3px 8px 3px 3px; }
.seat-pill--compact .seat-pill__ring { width: 28px; height: 28px; }
.seat-pill--compact .seat-pill__name { font-size: 11px; }
.seat-pill--compact .seat-pill__stack { font-size: 10px; }
.seats-bottom--compact { gap: 8px; }

.dealer-chip {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 2;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf6e6;
  color: #241a10;
  font-size: 9.5px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.dealer-chip--pill { right: auto; bottom: auto; left: -4px; top: -4px; }
.dealer-chip--me { position: static; margin-left: 4px; }

.pot__label { max-width: 190px; }
.pot__hand { font-size: 11.5px; color: var(--cream-3); }
.table-note { font-family: var(--serif); font-size: 17px; color: var(--cream-3); text-align: center; padding: 0 30px; }
.teen-info { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.teen-info span:first-child { font-family: var(--narrow); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); }
.teen-info span:last-child { font-size: 11px; color: rgba(243, 236, 224, 0.6); }

button[disabled] { cursor: default; }
.act[disabled], .bet[disabled], .btn[disabled], .btn--google[disabled], .key[disabled] { opacity: 0.45; filter: none; }
.act--raise[disabled] { box-shadow: none; }

.slider-row { padding: 10px 18px 0; }
.slider { width: 100%; height: 22px; margin: 0; accent-color: #c9a227; cursor: pointer; }

.sit-panel {
  margin: 12px 18px 0;
  min-height: 96px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.btn--rebuy { height: 44px; padding: 0 22px; border-radius: 9px; font-size: 14px; }

.reply-prompt { flex: 1; display: flex; align-items: center; gap: 8px; }
.reply-prompt span { flex: 1; font-size: 12.5px; color: var(--gold); }
.reply-prompt .bet { flex: none; padding: 0 12px; }
.bet.bet--gold { background: var(--gold-grad); color: var(--ink); border: none; font-weight: 700; }

.feed__sep { font-family: var(--narrow); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6f6156; padding-top: 4px; }
.feed__row--system .feed__who, .feed__row--system .feed__what { font-style: italic; }
.feed__empty { font-size: 12.5px; color: #6f6156; }

.code-card__btns { display: flex; flex-direction: column; gap: 6px; }
.btn--copy-ghost { background: rgba(255, 255, 255, 0.04); color: var(--cream-3); border: 1px solid var(--line-3); }

.toast-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100% - 40px);
  padding: 10px 16px;
  border-radius: 10px;
  background: #f7f2e8;
  color: #1b1712;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: fade 0.18s ease both;
}
.conn-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 19;
  padding: 6px;
  background: rgba(201, 162, 39, 0.94);
  color: #241a10;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.screen--loading { background: var(--screen); align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 14px; }
.empty-note { font-size: 13px; line-height: 1.55; color: var(--muted-2); padding: 6px 0; }
.join-error { padding: 14px 24px 0; font-size: 13px; line-height: 1.5; color: #eab7ba; }

.signin-form { display: flex; flex-direction: column; gap: 10px; }
.signin-form__input { height: 54px; font-size: 16px; text-align: center; }
.link-btn--muted { color: var(--muted-2); }
.profile__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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