:root {
  --felt: #1d4de4;
  --felt-light: #3a84ff;
  --rail: #160d4c;
  --rail-glow: #27e7ff;
  --gold: #ffe45c;
  --green: #58ff9b;
  --pink: #ff42ef;
  --text: #f7fbff;
  --muted: #b7c7ff;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 66, 239, 0.36), transparent 24rem),
    radial-gradient(circle at 82% 14%, rgba(39, 231, 255, 0.32), transparent 26rem),
    linear-gradient(135deg, #12072b, #101d54 48%, #1a0538);
  color: var(--text);
}
body:not(.in-lobby) {
  min-height: 100dvh;
  overflow-x: hidden;
}
body:not(.in-lobby) {
  padding-bottom: 7.8rem;
}
.rotate-phone-message {
  display: none;
}
body.theme-ocean { --felt:#0879c9; --felt-light:#31d8ff; --rail:#06365f; --rail-glow:#7df9ff; --pink:#50b7ff; background:linear-gradient(135deg,#041627,#073d68,#041d3d); }
body.theme-emerald { --felt:#087b50; --felt-light:#46ffb1; --rail:#082f2d; --rail-glow:#58ff9b; --pink:#ffe45c; background:linear-gradient(135deg,#041e22,#07543c,#08192e); }
body.theme-ember { --felt:#8b2242; --felt-light:#ff6f7f; --rail:#4a102b; --rail-glow:#ff9f43; --pink:#ff4d6d; background:linear-gradient(135deg,#240714,#641f33,#190b22); }
body.high-contrast { --text:#fff; --muted:#fff; --gold:#fff16b; }
body.large-text { font-size: 115%; }
button, input, select { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  min-height: 2.6rem;
  padding: .55rem .75rem;
  text-transform: uppercase;
}
.lobby-screen {
  display: grid;
  gap: .9rem;
  margin: 0 auto;
  max-width: 1240px;
  min-height: 100vh;
  padding: 1rem;
}
body:not(.in-lobby) .lobby-screen {
  display: none;
}
body.in-lobby .game-shell {
  display: none;
}
.lobby-top,
.lobby-panel,
.featured-table {
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,0) 32%),
    linear-gradient(135deg, rgba(13,25,64,.94), rgba(35,14,82,.9));
  border: 1px solid rgba(39,231,255,.3);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.12);
}
.lobby-top {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .9rem 1rem;
  position: relative;
  z-index: 2;
}
.lobby-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
}
.lobby-stats span {
  background: rgba(5,12,27,.52);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  padding: .32rem .55rem;
}
.lobby-stats b {
  color: var(--gold);
}
.lobby-stats .header-chip-balance,
.score-strip .header-chip-balance {
  background: linear-gradient(180deg, rgba(255,228,92,.24), rgba(255,159,28,.14));
  border-color: rgba(255,228,92,.45);
  color: var(--gold);
  font-weight: 950;
}
.header-chip-balance.low {
  animation: lowChipPulse 1.4s ease-in-out infinite;
  background: linear-gradient(180deg, rgba(255,82,82,.28), rgba(255,159,28,.16));
  border-color: rgba(255,112,112,.58);
  color: #ffd7d7;
}
@keyframes lowChipPulse {
  50% { box-shadow: 0 0 18px rgba(255,82,82,.4); filter: brightness(1.18); }
}
.featured-table {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, .9fr) minmax(18rem, .7fr);
  min-height: 13rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
}
.featured-table::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,228,92,.28), transparent 13rem),
    radial-gradient(circle at 78% 36%, rgba(39,231,255,.36), transparent 15rem);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.featured-copy {
  position: relative;
  z-index: 1;
}
.featured-copy h2 {
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: .95;
  margin: 0;
}
.featured-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1rem;
  margin: .45rem 0 1rem;
}
.featured-copy button {
  background: linear-gradient(180deg, var(--gold), #ff9f43);
  color: #20120a;
}
.featured-visual {
  min-height: 11rem;
  position: relative;
  z-index: 1;
}
.mini-table {
  background: radial-gradient(ellipse at center, var(--felt-light), var(--felt) 58%, var(--rail));
  border: 1rem solid rgba(12,8,60,.88);
  border-radius: 999px;
  box-shadow: inset 0 0 28px rgba(0,0,0,.34), 0 0 34px var(--rail-glow);
  height: 9.6rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: min(25rem, 100%);
}
.mini-table i {
  background: #fff;
  border: 1px solid rgba(8,13,30,.72);
  border-radius: 4px;
  box-shadow: 0 8px 14px rgba(0,0,0,.36);
  height: 3.4rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.3rem;
}
.mini-table i:nth-child(1) { left: 29%; }
.mini-table i:nth-child(2) { left: 39%; }
.mini-table i:nth-child(3) { left: 49%; }
.mini-table i:nth-child(4) { left: 59%; }
.mini-table i:nth-child(5) { left: 69%; }
.mini-table i::before {
  color: #d1162c;
  content: "A";
  font-size: .9rem;
  font-weight: 950;
  left: .18rem;
  position: absolute;
  top: .12rem;
}
.mini-table span {
  background: linear-gradient(135deg, var(--gold), var(--pink));
  border-radius: 999px;
  bottom: -.7rem;
  color: #17071f;
  font-size: .72rem;
  font-weight: 950;
  left: 50%;
  padding: .28rem .65rem;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.lobby-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .42fr);
}
.lobby-panel {
  display: grid;
  gap: .75rem;
  padding: 1rem;
}
.lobby-section-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.lobby-section-head strong,
.create-table-panel strong {
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lobby-section-head span {
  color: var(--muted);
  font-size: .82rem;
}
.table-card {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04)),
    rgba(5,12,27,.36);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  display: grid;
  gap: .7rem;
  grid-template-columns: 4.3rem minmax(10rem, 1fr) minmax(0, 1.2fr) auto;
  min-height: 5.7rem;
  padding: .8rem;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.table-card:hover {
  border-color: rgba(39,231,255,.58);
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 0 24px rgba(39,231,255,.08);
  transform: translateY(-2px);
}
.table-card.in-progress {
  border-color: rgba(255,228,92,.38);
  box-shadow: inset 0 0 22px rgba(255,228,92,.06);
}
.table-icon {
  background: linear-gradient(160deg, #215cff, #07184f);
  border: .36rem solid rgba(12,8,60,.9);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(39,231,255,.34);
  height: 3rem;
  position: relative;
  width: 4rem;
}
.table-icon.hot {
  background: linear-gradient(160deg, #25c9ff, #2940b8 60%, #6a1fb4);
}
.table-icon.purple {
  background: linear-gradient(160deg, #9948ff, #1d327c);
}
.table-icon span,
.table-icon::before,
.table-icon::after {
  background: #fff;
  border-radius: 3px;
  content: "";
  height: 1.05rem;
  position: absolute;
  top: .62rem;
  width: .72rem;
}
.table-icon span { left: 1.08rem; }
.table-icon::before { left: 1.62rem; transform: rotate(4deg); }
.table-icon::after { left: 2.16rem; transform: rotate(8deg); }
.table-card b,
.table-card span {
  display: block;
}
.table-card b {
  color: var(--text);
  font-size: 1.08rem;
}
.status-dot {
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
  height: .48rem;
  margin-right: .32rem;
  vertical-align: middle;
  width: .48rem;
}
.status-dot.live {
  animation: pulseLive 1.4s ease infinite;
  background: var(--green);
  box-shadow: 0 0 12px rgba(88,255,155,.72);
}
@keyframes pulseLive {
  50% { transform: scale(1.25); opacity: .72; }
}
.table-card span,
.table-meta span {
  color: var(--muted);
  font-size: .78rem;
}
.table-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.table-meta span {
  background: rgba(5,12,27,.52);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: .25rem .45rem;
}
.table-card button,
.create-table-panel button {
  background: linear-gradient(180deg,#20d5ff,#1741a8);
  border: 1px solid rgba(177,246,255,.42);
}
.create-table-panel {
  position: sticky;
  top: 1rem;
}
.create-table-head {
  display: grid;
  gap: .2rem;
}
.create-table-head span {
  color: var(--muted);
  font-size: .8rem;
}
.create-table-panel label {
  color: var(--muted);
  display: grid;
  font-size: .84rem;
  gap: .42rem;
}
.create-table-panel input,
.create-table-panel select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  color: var(--text);
  min-height: 2.35rem;
  padding: .45rem .55rem;
}
.create-perks {
  display: flex;
  flex-wrap: wrap;
  gap: .36rem;
}
.create-perks span {
  background: rgba(255,228,92,.11);
  border: 1px solid rgba(255,228,92,.22);
  border-radius: 999px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 850;
  padding: .24rem .42rem;
}
.game-shell {
  display: grid;
  gap: 1rem;
  grid-template-areas: "top" "table";
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1500px;
  min-height: 100vh;
  padding: 1rem 1rem 2rem;
}
.top-bar, .action-panel {
  background: linear-gradient(135deg, rgba(20,31,72,.94), rgba(33,14,78,.88));
  border: 1px solid rgba(39,231,255,.3);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.12);
}
.top-bar {
  align-items: center;
  display: flex;
  grid-area: top;
  justify-content: space-between;
  padding: .85rem 1rem;
  position: relative;
}
.eyebrow { color: var(--gold); font-size: .78rem; font-weight: 950; letter-spacing: .08em; margin: 0 0 .2rem; text-transform: uppercase; }
h1 { font-size: clamp(1.4rem,2.2vw,2.4rem); margin: 0; }
.score-strip { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
.score-strip span, .score-strip button {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: var(--muted);
  min-height: 2.35rem;
  padding: .5rem .75rem;
}
.gold-button { background: linear-gradient(180deg, var(--gold), #ff9f43) !important; color:#20120a !important; }
.flyout {
  background: linear-gradient(145deg, rgba(10,16,43,.98), rgba(36,18,79,.96));
  border: 1px solid rgba(39,231,255,.34);
  border-radius: 8px;
  box-shadow: 0 24px 54px rgba(0,0,0,.48);
  display: none;
  gap: .75rem;
  max-height: 78vh;
  overflow: auto;
  padding: .9rem;
  position: absolute;
  right: 1rem;
  top: calc(100% + .55rem);
  width: min(23rem, calc(100vw - 2rem));
  z-index: 20050;
}
.flyout.open { display: grid; }
.menu-panel {
  width: min(36rem, calc(100vw - 2rem));
}
.menu-panel.open {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-panel section:nth-child(1),
.menu-panel section:nth-child(3),
.menu-panel section:nth-child(9) {
  grid-column: 1 / -1;
}
.menu-panel section:nth-child(1) { order: 1; }
.menu-panel section:nth-child(3) { order: 2; }
.menu-panel section:nth-child(9) { order: 3; }
.menu-panel section:nth-child(2) { order: 4; }
.menu-panel section:nth-child(4) { order: 5; }
.menu-panel section:nth-child(5) { order: 6; }
.menu-panel section:nth-child(6) { order: 7; }
.menu-panel section:nth-child(7) { order: 8; }
.menu-panel section:nth-child(8) { order: 9; }
.flyout section, .flyout label { display:grid; gap:.45rem; }
.flyout strong { color: var(--gold); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.flyout p, .flyout small, .flyout label { color: var(--muted); font-size:.84rem; }
.flyout input, .flyout select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  color: var(--text);
  min-height: 2.25rem;
  padding: .45rem .55rem;
}
.flyout label:has(input[type="checkbox"]) {
  align-items: center;
  display: flex;
  font-size: .74rem;
  gap: .35rem;
  min-height: 1.25rem;
}
.flyout input[type="checkbox"] {
  accent-color: var(--gold);
  height: .9rem;
  min-height: 0;
  padding: 0;
  width: .9rem;
}
.register-modal {
  display: none;
  padding-top: .35rem;
}
.register-modal.show { display: block; }
.register-modal.first-visit,
.register-modal.manual-open {
  background: rgba(2,6,18,.74);
  display: grid;
  inset: 0;
  padding: 1rem;
  place-items: center;
  position: fixed;
  z-index: 220;
}
.nickname-modal {
  background: rgba(2,6,18,.76);
  display: none;
  inset: 0;
  padding: 1rem;
  place-items: center;
  position: fixed;
  z-index: 230;
}
.nickname-modal.show {
  display: grid;
}
.nickname-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(39,231,255,.18), transparent 12rem),
    linear-gradient(145deg, rgba(10,16,43,.98), rgba(36,18,79,.97));
  border: 1px solid rgba(255,228,92,.38);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 36px rgba(39,231,255,.18);
  display: grid;
  gap: .75rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 1rem;
  width: 100%;
}
.nickname-card strong {
  color: var(--gold);
  font-size: 1.2rem;
}
.nickname-card p {
  color: var(--muted);
  margin: 0;
}
.nickname-card label {
  color: var(--muted);
  display: grid;
  font-size: .78rem;
  gap: .34rem;
}
.nickname-card input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  color: var(--text);
  min-height: 2.35rem;
  padding: .4rem .5rem;
}
.welcome-bonus-modal,
.tutorial-modal {
  background: rgba(2,6,18,.78);
  display: none;
  inset: 0;
  padding: 1rem;
  place-items: center;
  position: fixed;
  z-index: 250;
}
.welcome-bonus-modal.show,
.tutorial-modal.show {
  display: grid;
}
.welcome-bonus-card,
.tutorial-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,228,92,.22), transparent 12rem),
    linear-gradient(145deg, rgba(10,16,43,.98), rgba(36,18,79,.97));
  border: 1px solid rgba(255,228,92,.42);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 36px rgba(39,231,255,.18);
  display: grid;
  gap: .75rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 1rem;
  text-align: center;
  width: 100%;
}
.welcome-bonus-card strong {
  color: var(--gold);
  font-size: 1.35rem;
}
.welcome-bonus-card p,
.tutorial-card p {
  color: var(--text);
  font-weight: 850;
  margin: 0;
}
.welcome-bonus-card ul {
  color: var(--text);
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.welcome-bonus-card li {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .5rem;
}
.welcome-bonus-card .bonus-total {
  color: var(--gold);
  font-size: 1.05rem;
}
.tutorial-card p {
  font-size: 1.22rem;
  line-height: 1.35;
  min-height: 4.8rem;
  place-content: center;
}
.tutorial-dots {
  display: flex;
  gap: .4rem;
  justify-content: center;
}
.tutorial-dots span {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  height: .55rem;
  width: .55rem;
}
.tutorial-dots span.active {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255,228,92,.5);
}
.legal-modal {
  background: rgba(2,6,18,.82);
  display: none;
  inset: 0;
  padding: 1rem;
  place-items: center;
  position: fixed;
  z-index: 260;
}
.legal-modal.show {
  display: grid;
}
.legal-card {
  background: linear-gradient(145deg, rgba(10,16,43,.98), rgba(36,18,79,.97));
  border: 1px solid rgba(255,228,92,.38);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 36px rgba(39,231,255,.18);
  display: grid;
  gap: .7rem;
  max-height: min(78vh, 42rem);
  max-width: min(38rem, calc(100vw - 2rem));
  overflow: hidden;
  padding: .85rem;
  width: 100%;
}
.legal-close {
  justify-self: end;
  min-height: 2rem;
  padding: .35rem .7rem;
}
.legal-modal-content {
  overflow: auto;
  padding: .2rem .15rem .4rem;
}
.legal-modal-content ol {
  color: var(--muted);
  display: grid;
  font-size: .82rem;
  gap: .55rem;
  margin: .55rem 0 0;
  padding-left: 1.15rem;
}
.legal-modal-content strong {
  color: var(--text);
  display: block;
  font-size: 1.05rem;
}
.legal-modal-content small {
  color: var(--gold);
  display: block;
  margin-top: .2rem;
}
.register-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(39,231,255,.38);
  border-radius: 8px;
  display: grid;
  gap: .65rem;
  padding: .65rem;
}
.register-modal.first-visit .register-card,
.register-modal.manual-open .register-card {
  background: linear-gradient(145deg, rgba(10,16,43,.98), rgba(36,18,79,.97));
  box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 36px rgba(39,231,255,.22);
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 1rem;
  width: 100%;
}
.register-grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
}
.register-card label {
  color: var(--muted);
  display: grid;
  font-size: .74rem;
  gap: .3rem;
}
.register-card input,
.register-card select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  color: var(--text);
  min-height: 2.1rem;
  padding: .35rem .45rem;
}
.register-card .legal-check {
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  display: flex;
  font-size: .78rem;
  gap: .45rem;
  padding: .42rem .5rem;
}
.register-card .legal-check input {
  accent-color: var(--gold);
  height: 1rem;
  min-height: 0;
  width: 1rem;
}
.legal-link {
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
  text-decoration: underline;
}
.form-note { color: var(--muted); font-size: .82rem; margin: 0; }
.form-error { color: var(--gold); font-size: .84rem; font-weight: 900; min-height: 1.1rem; }
.form-error.name-taken {
  background: rgba(255,228,92,.1);
  border: 1px solid rgba(255,228,92,.32);
  border-radius: 8px;
  padding: .45rem .55rem;
}
.low-chip-notice {
  background: rgba(255,228,92,.08);
  border: 1px solid rgba(255,228,92,.22);
  border-radius: 8px;
  color: var(--gold);
  display: none;
  font-size: .78rem;
  line-height: 1.35;
  margin: 0;
  padding: .45rem .55rem;
}
.low-chip-notice.show {
  display: block;
}
.button-row, .theme-grid, .tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.player-profile {
  background: rgba(5,12,27,.34);
  border: 1px solid rgba(39,231,255,.18);
  border-radius: 8px;
  display: grid;
  gap: .5rem;
  padding: .65rem;
}
.player-profile.locked {
  opacity: .74;
}
.profile-row {
  align-items: center;
  display: flex;
  gap: .7rem;
  justify-content: space-between;
}
.profile-row span,
.profile-stats span {
  color: var(--muted);
  font-size: .72rem;
}
.profile-row strong,
.profile-stats strong {
  color: var(--text);
  font-size: .82rem;
  text-align: right;
}
.profile-actions {
  display: grid;
  gap: .42rem;
  grid-template-columns: 1fr;
}
.profile-actions button {
  min-height: 2.1rem;
}
.profile-stats {
  display: grid;
  gap: .45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-stats div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  display: grid;
  gap: .18rem;
  padding: .48rem;
}
.profile-stats strong {
  text-align: left;
}
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
}
.privacy-notice,
.legal-notice {
  background: rgba(5,12,27,.38);
  border: 1px solid rgba(255,228,92,.18);
  border-radius: 8px;
  max-height: 16rem;
  overflow: auto;
  padding: .65rem;
}
.privacy-notice ol,
.legal-notice ol {
  color: var(--muted);
  display: grid;
  font-size: .74rem;
  gap: .48rem;
  margin: 0;
  padding-left: 1.05rem;
}
.privacy-notice li,
.legal-notice li {
  padding-left: .1rem;
}
.privacy-notice b,
.legal-notice b {
  color: var(--text);
}
.privacy-notice small,
.legal-notice small {
  color: var(--gold);
}
.reload-modal {
  display: none;
  inset: 0;
  place-items: center;
  pointer-events: none;
  position: fixed;
  z-index: 160;
}
.reload-modal.show {
  display: grid;
}
.reload-card {
  background: linear-gradient(145deg, rgba(10,16,43,.98), rgba(36,18,79,.96));
  border: 1px solid rgba(255,228,92,.46);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.58), 0 0 34px rgba(255,228,92,.2);
  display: grid;
  gap: .65rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 1rem;
  pointer-events: auto;
}
.reload-card strong {
  color: var(--gold);
  font-size: 1.05rem;
}
.reload-card p,
.reload-card small {
  color: var(--muted);
  margin: 0;
}
.reload-card button {
  background: linear-gradient(180deg,#20d5ff,#1741a8);
  border: 1px solid rgba(177,246,255,.42);
  flex: 1;
}
.reload-card .free-chip-button,
.free-chip-button {
  background: linear-gradient(180deg, #ffe66c, #ff9f1c);
  border: 1px solid rgba(255,246,178,.82);
  box-shadow: 0 0 18px rgba(255,194,41,.24);
  color: #201004;
}
.reload-card .buy-chip-button,
.buy-chip-button {
  background: linear-gradient(180deg, #24d9ff, #1855c8);
  border: 1px solid rgba(177,246,255,.56);
}
.reload-card button:disabled {
  cursor: not-allowed;
  filter: grayscale(.65);
  opacity: .52;
}
.chip-store {
  display: grid;
  gap: .42rem;
  grid-template-columns: 1fr;
}
.chip-package {
  align-items: center;
  background: linear-gradient(180deg, rgba(20,216,255,.18), rgba(255,228,92,.1));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  min-height: 2.2rem;
  padding: .45rem .55rem;
}
.chip-package strong {
  color: var(--gold);
  font-size: .9rem;
}
.chip-package span {
  color: var(--text);
  font-size: .78rem;
  font-weight: 900;
}
.chip-package small {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}
.daily-card {
  text-align: center;
}
.wide { width:100%; }
.swatch { border:2px solid rgba(255,255,255,.25); min-height:2.4rem; min-width:3rem; padding:0; }
.neon { background:linear-gradient(135deg,#27e7ff,#ff42ef); }
.ocean { background:linear-gradient(135deg,#31d8ff,#073d68); }
.emerald { background:linear-gradient(135deg,#58ff9b,#07543c); }
.ember { background:linear-gradient(135deg,#ff9f43,#8b2242); }
.tags span, .history {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: var(--muted);
  font-size: .75rem;
  padding: .3rem .45rem;
}
.history { max-height: 7rem; overflow:auto; }
.table-scene {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 42%, rgba(39,231,255,.16), transparent 28rem),
    linear-gradient(60deg, rgba(255,66,239,.12) 25%, transparent 25% 75%, rgba(39,231,255,.11) 75%),
    #12104a;
  background-size: 42px 72px;
  border: 1px solid rgba(39,231,255,.36);
  border-radius: 8px;
  grid-area: table;
  min-height: 610px;
  overflow: hidden;
  position: relative;
}
.table-scene::after {
  background: rgba(1, 4, 18, .34);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 220ms ease;
  z-index: 50;
}
.table-scene.reveal-active::after {
  opacity: 1;
}
.table-scene.reveal-active .seat:has(.reveal-choice) {
  z-index: 90;
}
.table-scene.reveal-active .reveal-choice {
  pointer-events: auto;
  z-index: 91;
}
.poker-table { height:52%; left:50%; position:absolute; top:49%; transform:translate(-50%,-50%); width:76%; z-index:2; }
.rail, .felt { border-radius:999px; position:absolute; }
.rail {
  background: linear-gradient(160deg, var(--felt-light), var(--rail) 46%, #09092f);
  box-shadow: inset 0 0 0 10px rgba(39,231,255,.28), inset 0 0 0 22px rgba(18,8,74,.7), 0 0 44px var(--rail-glow);
  inset:0;
}
.felt {
  align-items:center;
  background: radial-gradient(ellipse at center, var(--felt-light), var(--felt) 52%, var(--rail));
  box-shadow: inset 0 0 42px rgba(0,0,0,.32);
  display:flex;
  inset:13%;
  justify-content:center;
}
.community { display:flex; gap:.88rem; min-height:11.9rem; transform:translateY(-1.8rem); z-index:12; }
.community:empty::before {
  background: rgba(5,12,27,.32);
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(247,251,255,.58);
  content: "Awaiting flop";
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .08em;
  padding: .32rem .7rem;
  text-transform: uppercase;
}
.card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,0) 35%),
    linear-gradient(180deg,#ffffff 0%,#fffdfa 58%,#e3eaf6 100%);
  border: 1px solid #2b3345;
  border-radius:5px;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 0 2px rgba(44,56,83,.16),
    inset 0 -5px 9px rgba(23,36,67,.14),
    0 1px 0 rgba(255,255,255,.88),
    0 9px 16px rgba(0,0,0,.48);
  color:#0e1422;
  display:block;
  font-family: Arial, Helvetica, sans-serif;
  font-size:2.44rem;
  font-weight:950;
  height:14rem;
  line-height:1;
  padding:.24rem;
  position: relative;
  width:9.72rem;
}
button.card {
  appearance: none;
  min-height: 0;
  padding: .24rem;
  text-transform: none;
}
.card::before {
  background: linear-gradient(115deg, rgba(255,255,255,.82), rgba(255,255,255,0) 52%);
  border-radius: 3px 3px 999px 3px;
  content: "";
  height: 36%;
  left: .12rem;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  top: .12rem;
  width: 52%;
  z-index: 3;
}
.card::after {
  border: 1px solid rgba(11,20,36,.12);
  border-radius: 3px;
  content: "";
  inset: .2rem;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.card .corner {
  display: grid;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-size: 2.51rem;
  font-weight: 950;
  gap: .02rem;
  letter-spacing: 0;
  line-height: .7;
  position: absolute;
  text-align: center;
  z-index: 4;
}
.card .corner small {
  font-size: 1.91rem;
  line-height: .86;
}
.card .corner.top {
  left: .18rem;
  top: .2rem;
}
.card .corner.bottom {
  bottom: .2rem;
  right: .18rem;
  transform: rotate(180deg);
}
.card .face {
  bottom: 1.51rem;
  left: 1.15rem;
  position: absolute;
  right: 1.15rem;
  top: 1.51rem;
  z-index: 1;
}
.card .pips {
  display: grid;
  font-size: 3.09rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  line-height: 1;
  place-items: center;
}
.card .pips i {
  display: grid;
  font-style: normal;
  place-items: center;
  text-shadow: 0 1px rgba(255,255,255,.72);
}
.card .pips-1 i:nth-child(1) { grid-column: 2; grid-row: 2 / span 2; font-size: 5.31rem; }
.card .pips-2 i:nth-child(1) { grid-column: 2; grid-row: 1; }
.card .pips-2 i:nth-child(2) { grid-column: 2; grid-row: 4; transform: rotate(180deg); }
.card .pips-3 i:nth-child(1) { grid-column: 2; grid-row: 1; }
.card .pips-3 i:nth-child(2) { grid-column: 2; grid-row: 2 / span 2; }
.card .pips-3 i:nth-child(3) { grid-column: 2; grid-row: 4; transform: rotate(180deg); }
.card .pips-4 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-4 i:nth-child(2) { grid-column: 3; grid-row: 1; }
.card .pips-4 i:nth-child(3) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-4 i:nth-child(4) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .pips-5 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-5 i:nth-child(2) { grid-column: 3; grid-row: 1; }
.card .pips-5 i:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
.card .pips-5 i:nth-child(4) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-5 i:nth-child(5) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .pips-6 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-6 i:nth-child(2) { grid-column: 3; grid-row: 1; }
.card .pips-6 i:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; }
.card .pips-6 i:nth-child(4) { grid-column: 3; grid-row: 2 / span 2; }
.card .pips-6 i:nth-child(5) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-6 i:nth-child(6) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .pips-7 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-7 i:nth-child(2) { grid-column: 3; grid-row: 1; }
.card .pips-7 i:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.card .pips-7 i:nth-child(4) { grid-column: 1; grid-row: 2 / span 2; }
.card .pips-7 i:nth-child(5) { grid-column: 3; grid-row: 2 / span 2; }
.card .pips-7 i:nth-child(6) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-7 i:nth-child(7) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .pips-8 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-8 i:nth-child(2) { grid-column: 3; grid-row: 1; }
.card .pips-8 i:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.card .pips-8 i:nth-child(4) { grid-column: 1; grid-row: 2 / span 2; }
.card .pips-8 i:nth-child(5) { grid-column: 3; grid-row: 2 / span 2; }
.card .pips-8 i:nth-child(6) { grid-column: 2; grid-row: 3 / span 2; transform: rotate(180deg); }
.card .pips-8 i:nth-child(7) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-8 i:nth-child(8) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .pips-9 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-9 i:nth-child(2) { grid-column: 2; grid-row: 1; }
.card .pips-9 i:nth-child(3) { grid-column: 3; grid-row: 1; }
.card .pips-9 i:nth-child(4) { grid-column: 1; grid-row: 2; }
.card .pips-9 i:nth-child(5) { grid-column: 3; grid-row: 2; }
.card .pips-9 i:nth-child(6) { grid-column: 1; grid-row: 3; transform: rotate(180deg); }
.card .pips-9 i:nth-child(7) { grid-column: 3; grid-row: 3; transform: rotate(180deg); }
.card .pips-9 i:nth-child(8) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-9 i:nth-child(9) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .pips-10 { font-size: 2.3rem; }
.card .pips-10 i:nth-child(1) { grid-column: 1; grid-row: 1; }
.card .pips-10 i:nth-child(2) { grid-column: 2; grid-row: 1; }
.card .pips-10 i:nth-child(3) { grid-column: 3; grid-row: 1; }
.card .pips-10 i:nth-child(4) { grid-column: 1; grid-row: 2; }
.card .pips-10 i:nth-child(5) { grid-column: 3; grid-row: 2; }
.card .pips-10 i:nth-child(6) { grid-column: 1; grid-row: 3; transform: rotate(180deg); }
.card .pips-10 i:nth-child(7) { grid-column: 3; grid-row: 3; transform: rotate(180deg); }
.card .pips-10 i:nth-child(8) { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.card .pips-10 i:nth-child(9) { grid-column: 2; grid-row: 4; transform: rotate(180deg); }
.card .pips-10 i:nth-child(10) { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.card .face-card {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 31%),
    linear-gradient(145deg, rgba(255,218,91,.32), rgba(46,119,231,.24) 45%, rgba(198,53,119,.24));
  border: 1px solid rgba(10,20,42,.22);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  display: grid;
  justify-items: center;
  overflow: hidden;
}
.card .royalty {
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), transparent 35%),
    linear-gradient(90deg, rgba(255,255,255,.35), transparent 18% 82%, rgba(0,0,0,.08));
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(12,20,36,.12);
  display: block;
  height: 84%;
  overflow: hidden;
  position: relative;
  width: 76%;
}
.card .royalty::before,
.card .royalty::after {
  content: "";
  position: absolute;
}
.card .royalty::before {
  background: currentColor;
  bottom: 9%;
  height: 31%;
  left: 18%;
  opacity: .24;
  transform: skewX(-15deg);
  width: 28%;
}
.card .royalty::after {
  background: currentColor;
  bottom: 9%;
  height: 31%;
  opacity: .18;
  right: 18%;
  transform: skewX(15deg);
  width: 28%;
}
.card .royalty i {
  display: block;
  font-style: normal;
  position: absolute;
}
.card .crown {
  background:
    linear-gradient(135deg, transparent 0 22%, #f8d557 23% 42%, transparent 43%),
    linear-gradient(225deg, transparent 0 22%, #f8d557 23% 42%, transparent 43%),
    linear-gradient(180deg, #ffe785, #d59b2b);
  clip-path: polygon(0 100%, 8% 42%, 26% 72%, 50% 20%, 74% 72%, 92% 42%, 100% 100%);
  height: 21%;
  left: 21%;
  top: 7%;
  width: 58%;
  z-index: 5;
}
.card .hair {
  background: #4b281a;
  border-radius: 48% 48% 38% 38%;
  height: 32%;
  left: 24%;
  top: 18%;
  width: 52%;
  z-index: 3;
}
.card .head {
  background:
    radial-gradient(circle at 36% 42%, #3d1f16 0 5%, transparent 6%),
    radial-gradient(circle at 64% 42%, #3d1f16 0 5%, transparent 6%),
    radial-gradient(ellipse at 50% 66%, rgba(183,69,72,.65) 0 9%, transparent 10%),
    linear-gradient(180deg,#ffd29d,#e9a56c);
  border: 1px solid rgba(84,42,25,.28);
  border-radius: 48% 48% 45% 45%;
  height: 31%;
  left: 31%;
  top: 24%;
  width: 38%;
  z-index: 4;
}
.card .robe {
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,.5) 19% 24%, transparent 25%),
    linear-gradient(225deg, transparent 0 18%, rgba(255,255,255,.5) 19% 24%, transparent 25%),
    linear-gradient(180deg, #315bd9, #842fae);
  border: 1px solid rgba(20,28,52,.2);
  border-radius: 46% 46% 14% 14%;
  bottom: 9%;
  height: 46%;
  left: 17%;
  width: 66%;
  z-index: 2;
}
.card .royalty b,
.card .royalty small {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 950;
  line-height: 1;
  position: absolute;
  text-shadow: 0 1px rgba(255,255,255,.58);
  z-index: 6;
}
.card .royalty b {
  bottom: 7%;
  font-size: 1.05rem;
  left: 10%;
}
.card .royalty small {
  bottom: 7%;
  font-size: .86rem;
  right: 10%;
}
.card .rank-q .hair {
  background: #8b4a28;
  border-radius: 46% 46% 42% 42%;
  height: 35%;
  left: 21%;
  width: 58%;
}
.card .rank-q .robe {
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,.55) 19% 24%, transparent 25%),
    linear-gradient(225deg, transparent 0 18%, rgba(255,255,255,.55) 19% 24%, transparent 25%),
    linear-gradient(180deg, #d64b8f, #5d4de0);
}
.card .rank-k .hair {
  background: #2f2520;
}
.card .rank-k .robe {
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,.5) 19% 24%, transparent 25%),
    linear-gradient(225deg, transparent 0 18%, rgba(255,255,255,.5) 19% 24%, transparent 25%),
    linear-gradient(180deg, #bf2f3c, #283cb8);
}
.card .rank-j .crown {
  clip-path: polygon(0 100%, 10% 56%, 50% 26%, 90% 56%, 100% 100%);
}
.card.red { color:#d1162c; }
.card.back {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.26) 0 10%, transparent 11%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 3px,transparent 3px 7px),
    linear-gradient(145deg,#25165f,#1c91d2 52%,#7330b8);
  background-size: auto, 10px 10px, auto;
  border-color: rgba(255,255,255,.5);
  color:transparent;
}
.card.back::before { display:none; }
.card.revealed { animation: revealFlip 620ms ease; box-shadow:0 0 0 3px var(--gold),0 0 24px rgba(255,216,79,.7),0 0 42px rgba(39,231,255,.42); }
@keyframes revealFlip { 0% { transform:rotateY(90deg) scale(.88); filter:brightness(.8); } 65% { transform:rotateY(-8deg) scale(1.08); filter:brightness(1.25); } 100% { transform:rotateY(0) scale(1); filter:brightness(1); } }
.reveal-choice {
  cursor:pointer;
  position:relative;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 0 2px rgba(44,56,83,.16),
    inset 0 -5px 9px rgba(23,36,67,.14),
    0 0 0 2px var(--gold),
    0 0 18px rgba(255,228,92,.58),
    0 9px 16px rgba(0,0,0,.48);
}
.reveal-choice::after {
  border: 1px solid rgba(11,20,36,.12);
  border-radius: 3px;
  content: "";
  inset: .2rem;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.result-banner, .winner-banner {
  border-radius:8px;
  font-weight:950;
  left:50%;
  padding:.4rem .75rem;
  position:absolute;
  text-align:center;
  text-transform:uppercase;
  transform:translateX(-50%);
  white-space:nowrap;
  z-index:15;
}
.result-banner { background:rgba(5,12,27,.58); bottom:7%; color:var(--green); font-size:clamp(.72rem,1.55vw,1.2rem); padding:.24rem .55rem; }
.result-banner.hide { opacity:0; }
.winner-banner {
  background: linear-gradient(135deg, var(--gold), var(--pink));
  box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 32px rgba(255,228,92,.34);
  color:#150b25;
  display:none;
  font-size: clamp(1rem, 2.2vw, 1.55rem);
  gap: .18rem;
  line-height: 1.15;
  min-width:min(26rem,82%);
  padding:.65rem 1rem;
  top:31%;
  z-index:220;
}
.winner-banner strong {
  font-size: 1.15em;
}
.winner-banner span {
  font-size: .82em;
}
.winner-banner.show { display:grid; }
.pot-stack { align-items:center; bottom:22%; cursor:help; display:flex; flex-direction:row; font-weight:950; gap:.5rem; left:50%; position:absolute; transform:translateX(-50%); z-index:13; }
.chips { background:radial-gradient(circle,#fff 0 22%,transparent 23%),conic-gradient(#58ff9b 0 12%,#fff 12% 20%,#58ff9b 20% 38%,#fff 38% 46%,#58ff9b 46% 64%,#fff 64% 72%,#58ff9b 72%); border:2px solid #fff; border-radius:50%; box-shadow:0 0 18px rgba(88,255,155,.62); height:2.35rem; width:2.35rem; }
.pot-stack span {
  opacity: 1;
  background: rgba(4,8,20,.9);
  border: 1px solid rgba(255,228,92,.44);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.38), 0 0 22px rgba(255,228,92,.18);
  color: var(--gold);
  font-size: clamp(1.25rem, 2.8vw, 2.15rem);
  margin-top: 0;
  padding: .3rem .9rem;
  text-shadow: 0 0 14px rgba(255,228,92,.42);
}
.betting-chips,
.player-chip-piles {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
.player-chip-piles {
  z-index: 3;
  pointer-events: auto;
}
.player-bet-stack {
  align-items: center;
  display: grid;
  gap: .15rem;
  justify-items: center;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 7;
}
.player-bet-stack.collecting {
  animation: collectBetStack 680ms ease forwards;
  z-index: 28;
}
@keyframes collectBetStack {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.62); }
}
.bankroll-stack {
  align-items: center;
  display: grid;
  gap: .18rem;
  justify-items: center;
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%) scale(1.08);
}
.bankroll-stack::before {
  content: "";
  inset: -.75rem -.9rem;
  position: absolute;
}
.bankroll-stack span {
  background: rgba(7,12,26,.92);
  border: 1px solid rgba(255,228,92,.55);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.42), 0 0 18px rgba(255,228,92,.24);
  color: var(--gold);
  font-size: .82rem;
  font-weight: 950;
  opacity: 0;
  padding: .24rem .58rem;
  transition: opacity 140ms ease, transform 140ms ease;
  transform: translateY(-.35rem) scale(.94);
  white-space: nowrap;
  z-index: 8;
}
.bankroll-stack:hover span {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.player-bet-stack span {
  background: rgba(7,12,26,.78);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: var(--gold);
  font-size: .62rem;
  font-weight: 950;
  padding: .1rem .36rem;
}
.chip-stack {
  height: 1.45rem;
  position: relative;
  width: 2.6rem;
}
.chip-stack.bankroll {
  height: 3.2rem;
  width: 4.35rem;
}
.chip-stack.bankroll .bet-chip {
  height: 1.35rem;
  left: calc(.05rem + (var(--i) % 7) * .41rem);
  top: calc(1.55rem - (var(--i) / 7) * .2rem);
  width: 1.35rem;
}
.bet-chip {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.36);
  display: block;
  height: 1.15rem;
  left: calc(.14rem + (var(--i) % 4) * .42rem);
  position: absolute;
  top: calc(.26rem - (var(--i) / 4) * .12rem);
  width: 1.15rem;
}
.chip-5 { background: radial-gradient(circle,#fff 0 20%,transparent 21%), conic-gradient(#d9263a 0 12%,#fff 12% 20%,#d9263a 20% 38%,#fff 38% 46%,#d9263a 46% 64%,#fff 64% 72%,#d9263a 72%); }
.chip-10 { background: radial-gradient(circle,#fff 0 20%,transparent 21%), conic-gradient(#1f8cff 0 12%,#fff 12% 20%,#1f8cff 20% 38%,#fff 38% 46%,#1f8cff 46% 64%,#fff 64% 72%,#1f8cff 72%); }
.chip-25 { background: radial-gradient(circle,#fff 0 20%,transparent 21%), conic-gradient(#19a85b 0 12%,#fff 12% 20%,#19a85b 20% 38%,#fff 38% 46%,#19a85b 46% 64%,#fff 64% 72%,#19a85b 72%); }
.chip-100 { background: radial-gradient(circle,#fff 0 20%,transparent 21%), conic-gradient(#111 0 12%,#fff 12% 20%,#111 20% 38%,#fff 38% 46%,#111 46% 64%,#fff 64% 72%,#111 72%); }
.reveal-overlay {
  background:linear-gradient(135deg,var(--gold),var(--pink));
  border-radius:8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.32), 0 0 42px rgba(255,228,92,.58);
  color:#17071f;
  font-size:clamp(.78rem,1.6vw,1.28rem);
  font-weight:950;
  left:50%;
  letter-spacing:.05em;
  opacity:0;
  padding:.2rem .55rem;
  pointer-events:none;
  position:absolute;
  text-transform:uppercase;
  top:22%;
  transform:translate(-50%,-50%) scale(.86);
  transition:opacity 220ms ease, transform 220ms ease;
  z-index:60;
}
.reveal-overlay span {
  display: block;
  font-size: .58em;
  letter-spacing: 0;
  margin-top: .06rem;
  text-transform: none;
}
.reveal-overlay.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.chip-flight {
  animation: none;
  background:radial-gradient(circle,#fff 0 20%,transparent 21%),conic-gradient(var(--gold) 0 12%,#fff 12% 20%,var(--gold) 20% 38%,#fff 38% 46%,var(--gold) 46% 64%,#fff 64% 72%,var(--gold) 72%);
  border:2px solid #fff;
  border-radius:50%;
  color:#20120a;
  display:grid;
  font-size:.64rem;
  font-weight:950;
  height:2.25rem;
  opacity:0;
  place-items:center;
  pointer-events:none;
  position:absolute;
  width:2.25rem;
  z-index:58;
}
.chip-flight.show { animation:flyChip 720ms ease forwards; left:var(--from-x,50%); top:var(--from-y,50%); }
@keyframes flyChip { 0%{left:var(--from-x);top:var(--from-y);opacity:0;transform:translate(-50%,-50%) scale(.8)} 20%{opacity:1} 100%{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(1)} }
.seat { align-items:center; display:grid; gap:.22rem; justify-items:center; min-width:8.2rem; position:absolute; text-align:center; z-index:7; }
.seat.folded { opacity:.48; }
.seat-open {
  opacity: 1;
  z-index: 24;
}
.seat-select-button {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.2), transparent 2.2rem),
    linear-gradient(180deg, rgba(39,231,255,.96), rgba(17,56,156,.96));
  border: 1px solid rgba(177,246,255,.72);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(39,231,255,.14), 0 12px 28px rgba(0,0,0,.42), 0 0 24px rgba(39,231,255,.36);
  color: #f7fbff;
  display: grid;
  gap: .1rem;
  min-height: 3.9rem;
  min-width: 8.2rem;
  padding: .55rem .9rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.42);
  transform: translateY(0);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.seat-select-button span {
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.seat-select-button strong {
  font-size: 1.05rem;
}
.seat-select-button:hover,
.seat-select-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(255,228,92,.24), 0 16px 34px rgba(0,0,0,.48), 0 0 34px rgba(255,228,92,.38);
  filter: brightness(1.08);
  transform: translateY(-.18rem);
}
.seat.acting .player-nameplate { box-shadow:0 0 0 3px rgba(255,228,92,.28),0 0 24px rgba(255,228,92,.5); }
.seat.turn-spotlight::before {
  background: radial-gradient(circle, rgba(255,228,92,.36), rgba(39,231,255,.16) 42%, transparent 68%);
  border-radius: 50%;
  content: "";
  height: 15.5rem;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15.5rem;
  z-index: -1;
}
.seat.turn-spotlight .player-nameplate {
  border-color: rgba(255,228,92,.72);
  box-shadow: 0 0 0 3px rgba(255,228,92,.22), 0 0 28px rgba(255,228,92,.7), 0 0 48px rgba(39,231,255,.28);
}
.seat.turn-spotlight .status-pill {
  background: rgba(255,228,92,.94);
  color: #20120a;
}
.turn-timer {
  background:
    radial-gradient(circle, rgba(5,12,27,.08) 0 47%, transparent 48%),
    conic-gradient(from 90deg, var(--gold) var(--timer-progress, 0%), rgba(255,255,255,.16) 0);
  box-shadow: 0 0 0 4px rgba(255,228,92,.22), 0 0 36px rgba(255,228,92,.44), inset 0 0 18px rgba(255,228,92,.2);
  border-radius: 50%;
  display: none;
  height: 15.25rem;
  left: 50%;
  opacity: .96;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15.25rem;
  z-index: 1;
}
.turn-timer::before {
  background: radial-gradient(circle, transparent 0 46%, rgba(5,12,27,.48) 47% 58%, transparent 59%);
  border-radius: 50%;
  content: "";
  inset: .18rem;
  position: absolute;
}
.turn-timer span {
  background: rgba(7,12,26,.94);
  border: 1px solid rgba(255,228,92,.58);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,228,92,.34);
  color: var(--gold);
  display: grid;
  font-size: 1.25rem;
  font-weight: 950;
  height: 2.45rem;
  left: 50%;
  place-items: center;
  position: absolute;
  top: -1rem;
  transform: translateX(-50%);
  width: 2.45rem;
}
.seat.turn-spotlight .turn-timer {
  display: block;
}
.seat .hole-cards,
.seat .player-nameplate,
.seat .hand-readout,
.seat .status-pill,
.seat .action-pop {
  position: relative;
  z-index: 3;
}
.seat.timer-expired .turn-timer {
  animation: timerPulse 760ms ease infinite;
  background:
    radial-gradient(circle, rgba(5,12,27,.08) 0 47%, transparent 48%),
    conic-gradient(from 90deg, #ff4d6d 100%, rgba(255,255,255,.12) 0);
}
@keyframes timerPulse {
  50% { filter: brightness(1.45); transform: translate(-50%, -50%) scale(1.06); }
}
.player-nameplate { background:linear-gradient(180deg,rgba(22,43,105,.94),rgba(25,12,72,.94)); border:1px solid rgba(39,231,255,.22); border-radius:7px; min-width:6.25rem; padding:.28rem .46rem; }
.player-nameplate strong, .player-nameplate span { display:block; }
.player-nameplate strong { font-size:.88rem; line-height:1.05; }
.player-nameplate span { color:var(--muted); font-size:.78rem; }
.hole-cards { display:flex; gap:.54rem; justify-content:center; min-height:9.37rem; }
.hole-cards .card { font-size:2.47rem; height:9.05rem; width:6.06rem; }
.hole-cards .card .corner {
  font-size: 1.84rem;
}
.hole-cards .card .corner small {
  font-size: 1.37rem;
}
.hole-cards .card .face {
  bottom: .98rem;
  left: .74rem;
  right: .74rem;
  top: .98rem;
}
.hole-cards .card .pips {
  font-size: 2.09rem;
}
.hole-cards .card .pips-1 i:nth-child(1) {
  font-size: 3.89rem;
}
.hole-cards .card .pips-10 {
  font-size: 1.61rem;
}
.hole-cards .card .royalty b {
  font-size: 1.93rem;
}
.hole-cards .card .royalty small {
  font-size: 1.37rem;
}
.hole-cards .card {
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center center;
}
.seat-bottom .hole-cards .card {
  height:9.91rem;
  transform-origin: bottom center;
  width:6.67rem;
}
.seat .hole-cards .card:hover,
.seat .hole-cards .card:focus-visible {
  box-shadow: 0 18px 34px rgba(0,0,0,.48), 0 0 0 3px var(--gold), 0 0 32px rgba(255,228,92,.62);
  position: relative;
  transform: translateY(var(--card-zoom-y, -2.2rem)) translateX(var(--card-zoom-x, 0)) scale(var(--card-zoom-scale, 1.95));
  z-index: 80;
}
.seat-bottom,
.seat-bottom-left,
.seat-bottom-right {
  --card-zoom-y: -3.2rem;
  --card-zoom-scale: 2.15;
}
.seat-top,
.seat-top-left,
.seat-top-right {
  --card-zoom-y: 2.4rem;
  --card-zoom-scale: 2;
}
.seat-left-lower,
.seat-left-upper {
  --card-zoom-x: 3.4rem;
  --card-zoom-y: .2rem;
  --card-zoom-scale: 1.95;
}
.seat-right-lower,
.seat-right-upper {
  --card-zoom-x: -3.4rem;
  --card-zoom-y: .2rem;
  --card-zoom-scale: 1.95;
}
.seat-bottom .hole-cards .card.reveal-choice:hover,
.seat-bottom .hole-cards .card.reveal-choice:focus-visible {
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 0 2px rgba(44,56,83,.16),
    inset 0 -5px 9px rgba(23,36,67,.14),
    0 0 0 2px var(--gold),
    0 0 18px rgba(255,228,92,.58),
    0 9px 16px rgba(0,0,0,.48);
  z-index: 80;
}
.community .card {
  font-size:1.86rem;
  height:10.71rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center center;
  width:7.43rem;
}
.community .card .corner {
  font-size: 2.07rem;
}
.community .card .pips {
  font-size: 2.48rem;
}
.community .card .pips-1 i:nth-child(1) {
  font-size: 4.31rem;
}
.community .card .royalty b {
  font-size: 2.37rem;
}
.community .card .royalty small {
  font-size: 1.63rem;
}
.community .card:hover,
.community .card:focus-visible {
  box-shadow: 0 18px 34px rgba(0,0,0,.48), 0 0 0 3px var(--gold), 0 0 32px rgba(255,228,92,.62);
  position: relative;
  transform: translateY(-1.2rem) scale(1.65);
  z-index: 90;
}
.action-pop, .hand-readout, .status-pill { border-radius:999px; font-size:.65rem; font-weight:950; padding:.16rem .42rem; text-transform:uppercase; }
.action-pop {
  background: linear-gradient(180deg, var(--gold), #ff9f43);
  box-shadow: 0 10px 20px rgba(0,0,0,.36), 0 0 20px rgba(255,228,92,.38);
  color:#17110a;
  min-height: 1.25rem;
  opacity:0;
  position: relative;
  transform: translateY(.3rem) scale(.92);
  transition: opacity 150ms ease, transform 150ms ease;
  white-space: nowrap;
  z-index: 12;
}
.action-pop::after {
  border-left: .28rem solid transparent;
  border-right: .28rem solid transparent;
  border-top: .32rem solid #ff9f43;
  bottom: -.28rem;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.action-pop:not(:empty),
.seat.acting .action-pop:not(:empty) {
  opacity:1;
  transform: translateY(0) scale(1);
}
.hand-readout { background:rgba(9,8,28,.78); border:1px solid rgba(255,228,92,.28); color:var(--gold); opacity:0; }
.hand-readout:not(:empty) { opacity:1; }
.status-pill { background:rgba(255,216,79,.13); border:1px solid rgba(255,216,79,.34); color:var(--gold); }
.seat-bottom { bottom:8%; left:50%; transform:translateX(-50%); }
.seat-left-lower { left:1%; top:58%; transform:translateY(-50%); }
.seat-left-upper { left:1%; top:30%; transform:translateY(-50%); }
.seat-top-left { left:25%; top:3%; transform:translateX(-50%); }
.seat-top { left:50%; top:-1%; transform:translateX(-50%); }
.seat-top-right { right:25%; top:3%; transform:translateX(50%); }
.seat-right-upper { right:1%; top:30%; transform:translateY(-50%); }
.seat-right-lower { right:1%; top:58%; transform:translateY(-50%); }
.seat-bottom-right { right:19%; bottom:3%; }
.seat-bottom-left { left:19%; bottom:3%; }
.dealer-chip,
.blind-chip {
  border-radius: 50%;
  display: grid;
  font-weight: 950;
  height: 1.45rem;
  place-items: center;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.45rem;
  z-index: 4;
}
.dealer-chip { background:#fff; color:#17203a; }
.blind-chip {
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 0 10px rgba(0,0,0,.42);
  color: #160d12;
  font-size: .56rem;
}
.small-blind { background: #ffe45c; }
.big-blind { background: #dfe7ff; }
.action-panel {
  background: linear-gradient(180deg, rgba(3,8,26,0), rgba(3,8,26,.9) 28%, rgba(3,8,26,.98));
  border: 0;
  border-radius: 0;
  bottom: 0;
  box-shadow: 0 -18px 44px rgba(0,0,0,.42);
  display: grid;
  gap: .55rem;
  grid-area: actions;
  left: 0;
  padding: .7rem max(1rem, env(safe-area-inset-left)) max(.85rem, env(safe-area-inset-bottom));
  pointer-events: none;
  position: fixed;
  right: 0;
  top: auto;
  z-index: 130;
}
.controls {
  display: grid;
  gap: clamp(.55rem, 2vw, 1rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 820px;
  pointer-events: auto;
  position: relative;
  width: min(100%, 820px);
}
.quick-chat, .reaction-row { display:grid; gap:.42rem; }
.controls button, .quick-chat button, .reaction-row button, .chat-form button { background:linear-gradient(180deg,#20d5ff,#1741a8); border:1px solid rgba(177,246,255,.42); }
.controls button {
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255,255,255,.38), inset 0 -14px 22px rgba(0,0,0,.32), 0 14px 30px rgba(0,0,0,.42), 0 0 20px rgba(32,213,255,.26);
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  min-height: clamp(3.4rem, 8vh, 4.6rem);
  padding: .6rem 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.42);
}
.controls #foldButton { background: linear-gradient(180deg,#2b8dff,#071e62); }
.controls #callButton { background: linear-gradient(180deg,#1fc5ff,#123b95); }
.controls #raiseButton { background: linear-gradient(180deg,#ffe45c,#b97800); border-color: rgba(255,244,164,.72); color: #211304; }
.controls .secondary { background:linear-gradient(180deg,#8b5cff,#23156d); }
.hidden-action { display: none !important; }
.utility-action {
  font-size: .72rem !important;
  min-height: 2.2rem !important;
  opacity: .82;
  padding: .28rem .6rem !important;
  position: absolute;
  right: 0;
  top: -2.7rem;
  width: auto;
}
.controls button.queued {
  background: linear-gradient(180deg, var(--gold), #ff9f43);
  box-shadow: 0 0 0 3px rgba(255,228,92,.24), 0 0 22px rgba(255,228,92,.52);
  color: #20120a;
}
.bet-sizing {
  background:
    radial-gradient(circle at 74% 15%, rgba(255,228,92,.2), transparent 8rem),
    linear-gradient(180deg, rgba(39,231,255,.18), rgba(39,91,255,.06)),
    linear-gradient(180deg, rgba(9,31,113,.99), rgba(13,11,76,.99));
  border: 1px solid rgba(64,180,255,.62);
  border-radius: 18px;
  bottom: 5.85rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.18), 0 0 28px rgba(32,213,255,.32);
  display: none;
  gap: .8rem;
  justify-self: center;
  max-width: min(25rem, calc(100vw - 1.5rem));
  padding: 1.05rem;
  pointer-events: auto;
  position: absolute;
  right: max(1rem, calc((100vw - 1320px) / 2 + 1rem));
  width: min(25rem, calc(100vw - 1.5rem));
}
.bet-sizing.show {
  animation: betSheetIn 170ms ease both;
  display: grid;
}
@keyframes betSheetIn {
  from { opacity: 0; transform: translateY(1rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bet-sheet-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.bet-sheet-head span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bet-sizing label {
  color: var(--muted);
  display: grid;
  font-size: .74rem;
  gap: .38rem;
}
.bet-sizing strong {
  color: var(--gold);
  font-size: clamp(1.65rem, 5vw, 2.4rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(255,228,92,.42);
}
.bet-sizing input[type="range"] {
  accent-color: var(--gold);
  cursor: pointer;
  min-height: 2.7rem;
  width: 100%;
}
.quick-bet-row,
.bet-confirm-row {
  display: grid;
  gap: .55rem;
}
.quick-bet-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bet-confirm-row {
  grid-template-columns: .85fr 1.15fr;
}
.bet-sizing button {
  background: linear-gradient(180deg, var(--gold), #ff9f43);
  border: 1px solid rgba(255,255,255,.24);
  color: #20120a;
  border-radius: 999px;
  min-height: 3.05rem;
  padding: .45rem .55rem;
  text-shadow: 0 1px rgba(255,255,255,.24);
}
.quick-bet-row button {
  background: linear-gradient(180deg,#24a9ff,#0d3d96);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 8px 18px rgba(0,0,0,.28);
  color: #f7fbff;
  text-shadow: 0 2px 4px rgba(0,0,0,.42);
}
#cancelBetButton {
  background: linear-gradient(180deg,#5b6b94,#172140);
  color: #f7fbff;
}
#confirmBetButton {
  box-shadow: 0 0 22px rgba(255,228,92,.3);
}
.bet-sizing button:disabled {
  cursor: not-allowed;
  filter: grayscale(.65);
  opacity: .5;
}
.chat-panel { display:none; }
.odds-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,228,92,.24);
  border-radius: 8px;
  display: grid;
  gap: .5rem;
  left: max(1rem, calc((100vw - 1320px) / 2 + 1rem));
  max-width: min(18rem, calc(100vw - 2rem));
  padding: .55rem;
  pointer-events: auto;
  position: absolute;
  bottom: 5.85rem;
}
.odds-list {
  display: grid;
  gap: .3rem;
}
.odds-list div {
  align-items: center;
  background: rgba(5,12,27,.48);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: var(--muted);
  display: flex;
  font-size: .72rem;
  justify-content: space-between;
  padding: .26rem .4rem;
}
.odds-list b {
  color: var(--text);
}
.odds-list span {
  color: var(--gold);
  font-weight: 950;
}
.chat-header { align-items:center; display:flex; justify-content:space-between; }
.chat-header strong { color:var(--gold); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.chat-header span { color:var(--muted); font-size:.64rem; }
.chat-feed { color:var(--muted); display:grid; font-size:.74rem; gap:.3rem; max-height:13rem; min-height:9rem; overflow:auto; }
.chat-feed div { background:rgba(5,12,27,.45); border-radius:7px; display:flex; gap:.35rem; padding:.28rem .4rem; }
.chat-feed b { color:var(--text); }
.chat-form { display:grid; gap:.35rem; grid-template-columns:minmax(0,1fr) auto; }
.chat-form input { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:7px; color:var(--text); min-width:0; padding:.35rem .45rem; }
.chat-warning { color:var(--gold); font-size:.68rem; min-height:.9rem; }
.reaction-row { grid-template-columns:repeat(4,1fr); }
.quick-chat button, .reaction-row button { font-size:.64rem; min-height:1.55rem; padding:.16rem .24rem; text-transform:none; }
.reaction-row button { font-size:.82rem; }
.message-log {
  background: rgba(5,12,27,.72);
  border: 1px solid rgba(39,231,255,.22);
  border-radius: 8px;
  bottom: 5.85rem;
  color: var(--muted);
  display: none;
  font-size: .82rem;
  left: max(1rem, calc((100vw - 1320px) / 2 + 1rem));
  max-height: 7rem;
  max-width: min(21rem, calc(100vw - 2rem));
  overflow: auto;
  padding: .55rem;
  pointer-events: auto;
  position: absolute;
}
body.large-cards .card { font-size:3.3rem; height:14.84rem; width:10.33rem; }
body.large-cards .hole-cards .card { font-size:2.67rem; height:9.75rem; width:6.58rem; }
body.large-cards .community .card { font-size:2.52rem; height:11.35rem; width:7.9rem; }
@media (max-width: 820px) {
  .lobby-top {
    align-items: stretch;
    flex-direction: column;
  }
  .lobby-stats {
    justify-content: flex-start;
  }
  .featured-table,
  .lobby-grid {
    grid-template-columns: 1fr;
  }
  .featured-table {
    min-height: 23rem;
  }
  .featured-visual {
    min-height: 10rem;
  }
  .table-card {
    grid-template-columns: 4rem minmax(0, 1fr);
  }
  .table-card .table-meta,
  .table-card button {
    grid-column: 1 / -1;
  }
  .create-table-panel {
    position: static;
  }
  body:not(.in-lobby) { padding-bottom: 7.4rem; }
  .game-shell { grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "table"; padding:.6rem .6rem 1.5rem; }
  .top-bar { align-items:stretch; flex-direction:column; }
  .table-scene { min-height:690px; }
  .poker-table { height:38%; top:48%; width:96%; }
  .seat { min-width:6.4rem; }
  .player-nameplate { min-width:5.15rem; padding:.24rem .3rem; }
  .seat-bottom { bottom:10%; }
  .seat.turn-spotlight::before {
    height: 12.6rem;
    width: 12.6rem;
  }
  .turn-timer {
    height: 12.25rem;
    width: 12.25rem;
  }
  .turn-timer span {
    font-size: 1.05rem;
    height: 2.1rem;
    top: -.8rem;
    width: 2.1rem;
  }
  .hole-cards .card { font-size:1.87rem; height:7.22rem; width:4.84rem; }
  .seat-bottom .hole-cards .card { height:8.1rem; width:5.43rem; }
  .community { gap:.41rem; transform:translateY(-1.05rem) scale(.89); }
  .pot-stack { bottom:25%; }
  .pot-stack span { font-size:1.1rem; padding:.22rem .62rem; }
  .chips { height:1.75rem; width:1.75rem; }
  .controls { gap:.42rem; }
  .controls button { font-size:.95rem; min-height:3.25rem; padding:.45rem .35rem; }
  .utility-action { display:none; }
  .bet-sizing { bottom:5.4rem; left:.75rem; right:.75rem; max-width:none; width:auto; }
  .odds-panel {
    bottom: 5.4rem;
    display: grid;
    left: .75rem;
    max-width: min(14rem, calc(100vw - 1.5rem));
    opacity: .94;
    padding: .45rem;
  }
  .bet-sizing.show ~ .odds-panel { display:none; }
  .odds-list div { font-size:.66rem; padding:.2rem .32rem; }
  .message-log { display:none; }
}

@media (max-width: 767px) and (orientation: portrait) {
  html,
  body {
    min-height: 100dvh;
    overflow: hidden;
  }

  body:not(.in-lobby) .rotate-phone-message {
    align-items: center;
    background:
      radial-gradient(circle at 50% 24%, rgba(39,231,255,.22), transparent 15rem),
      linear-gradient(145deg, rgba(6,13,42,.98), rgba(32,10,70,.98));
    color: var(--text);
    display: grid;
    font-size: clamp(1.4rem, 7vw, 2.2rem);
    font-weight: 950;
    inset: 0;
    justify-items: center;
    line-height: 1.18;
    padding: 2rem;
    position: fixed;
    text-align: center;
    text-shadow: 0 3px 14px rgba(0,0,0,.5);
    z-index: 9999;
  }

  .rotate-phone-message::before {
    border: .28rem solid rgba(255,228,92,.9);
    border-left-color: transparent;
    border-radius: 50%;
    content: "";
    display: block;
    height: 4.5rem;
    margin-bottom: 1rem;
    width: 4.5rem;
  }
}

@media (max-width: 767px), (max-height: 520px) and (orientation: landscape) {
  .lobby-screen {
    gap: .55rem;
    padding: .55rem;
  }

  .lobby-top,
  .featured-table,
  .lobby-panel {
    padding: .65rem;
  }

  .lobby-top {
    gap: .45rem;
  }

  .lobby-stats {
    gap: .28rem;
  }

  .lobby-stats span,
  .score-strip span,
  .score-strip button {
    font-size: .66rem;
    min-height: 1.75rem;
    padding: .26rem .42rem;
  }

  .featured-table {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  html,
  body {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body:not(.in-lobby) {
    padding-bottom: clamp(4.65rem, 14dvh, 5.65rem);
  }

  body:not(.in-lobby) .game-shell {
    gap: .25rem;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    max-width: none;
    min-height: 0;
    overflow: hidden;
    padding: .28rem .35rem .2rem;
  }

  body:not(.in-lobby) .top-bar {
    align-items: center;
    border-radius: 6px;
    flex-direction: row;
    gap: .4rem;
    min-height: 0;
    padding: .28rem .45rem;
  }

  body:not(.in-lobby) .top-bar h1 {
    font-size: clamp(.92rem, 2.3vw, 1.25rem);
    line-height: 1;
  }

  body:not(.in-lobby) .top-bar .eyebrow {
    font-size: .54rem;
    margin: 0 0 .08rem;
  }

  body:not(.in-lobby) .score-strip {
    align-items: center;
    gap: .22rem;
  }

  body:not(.in-lobby) .score-strip span,
  body:not(.in-lobby) .score-strip button {
    font-size: clamp(.52rem, 1.45vw, .66rem);
    min-height: 1.55rem;
    padding: .18rem .34rem;
  }

  body:not(.in-lobby) .flyout {
    max-height: calc(100dvh - 3.2rem);
    right: .35rem;
    top: calc(100% + .25rem);
  }

  body:not(.in-lobby) .table-scene {
    aspect-ratio: auto;
    border-radius: 6px;
    height: calc(100dvh - clamp(7.25rem, 21dvh, 8.9rem));
    min-height: 0;
    width: 100%;
  }

  body:not(.in-lobby) .poker-table {
    height: 49%;
    top: 50%;
    width: 86%;
  }

  body:not(.in-lobby) .rail {
    box-shadow: inset 0 0 0 5px rgba(39,231,255,.28), inset 0 0 0 12px rgba(18,8,74,.7), 0 0 24px var(--rail-glow);
  }

  body:not(.in-lobby) .felt {
    inset: 12%;
  }

  body:not(.in-lobby) .community {
    gap: .2rem;
    min-height: 4.5rem;
    transform: translateY(-.55rem);
  }

  body:not(.in-lobby) .community .card,
  body:not(.in-lobby) .card {
    border-radius: 4px;
    font-size: .9rem;
    height: 4.55rem;
    padding: .1rem;
    width: 3.05rem;
  }

  body:not(.in-lobby) .card::after {
    inset: .1rem;
  }

  body:not(.in-lobby) .card .corner {
    font-size: .62rem;
  }

  body:not(.in-lobby) .card .pips,
  body:not(.in-lobby) .community .card .pips {
    font-size: 1rem;
  }

  body:not(.in-lobby) .card .pips-1 i:nth-child(1),
  body:not(.in-lobby) .community .card .pips-1 i:nth-child(1) {
    font-size: 1.8rem;
  }

  body:not(.in-lobby) .card .pips-10 {
    font-size: .72rem;
  }

  body:not(.in-lobby) .card .royalty b,
  body:not(.in-lobby) .community .card .royalty b {
    font-size: 1.08rem;
  }

  body:not(.in-lobby) .card .royalty small,
  body:not(.in-lobby) .community .card .royalty small {
    font-size: .7rem;
  }

  body:not(.in-lobby) .hole-cards {
    gap: .13rem;
    min-height: 2.7rem;
  }

  body:not(.in-lobby) .hole-cards .card {
    font-size: .72rem;
    height: 2.85rem;
    width: 1.9rem;
  }

  body:not(.in-lobby) .seat-bottom .hole-cards .card {
    height: 3.55rem;
    width: 2.35rem;
  }

  body:not(.in-lobby) .hole-cards .card .corner {
    font-size: .5rem;
  }

  body:not(.in-lobby) .hole-cards .card .pips {
    font-size: .82rem;
  }

  body:not(.in-lobby) .hole-cards .card .pips-1 i:nth-child(1) {
    font-size: 1.35rem;
  }

  body:not(.in-lobby) .seat {
    gap: .08rem;
    min-width: 4.1rem;
  }

  body:not(.in-lobby) .seat-bottom {
    bottom: 6.6%;
  }

  body:not(.in-lobby) .seat-left-lower,
  body:not(.in-lobby) .seat-right-lower {
    top: 60%;
  }

  body:not(.in-lobby) .seat-left-upper,
  body:not(.in-lobby) .seat-right-upper {
    top: 30%;
  }

  body:not(.in-lobby) .seat-top {
    top: 1%;
  }

  body:not(.in-lobby) .seat-top-left,
  body:not(.in-lobby) .seat-top-right {
    top: 2%;
  }

  body:not(.in-lobby) .seat-bottom-left,
  body:not(.in-lobby) .seat-bottom-right {
    bottom: 3.5%;
  }

  body:not(.in-lobby) .player-nameplate {
    border-radius: 5px;
    gap: .02rem;
    min-width: 3.55rem;
    padding: .1rem .22rem;
  }

  body:not(.in-lobby) .player-nameplate strong {
    font-size: .54rem;
  }

  body:not(.in-lobby) .player-nameplate span {
    font-size: .48rem;
  }

  body:not(.in-lobby) .action-pop,
  body:not(.in-lobby) .hand-readout,
  body:not(.in-lobby) .status-pill {
    border-radius: 5px;
    font-size: .45rem;
    padding: .08rem .2rem;
  }

  body:not(.in-lobby) .seat.turn-spotlight::before {
    height: 5.25rem;
    width: 5.25rem;
  }

  body:not(.in-lobby) .turn-timer {
    height: 5.35rem;
    width: 5.35rem;
  }

  body:not(.in-lobby) .turn-timer span {
    font-size: .62rem;
    height: 1.25rem;
    top: -.36rem;
    width: 1.25rem;
  }

  body:not(.in-lobby) .pot-stack {
    bottom: 25.5%;
    gap: .15rem;
    transform: translateX(-50%) scale(.76);
  }

  body:not(.in-lobby) .pot-stack span {
    font-size: .88rem;
    padding: .14rem .42rem;
  }

  body:not(.in-lobby) .chips {
    height: 1.12rem;
    width: 1.12rem;
  }

  body:not(.in-lobby) .bankroll-stack {
    transform: translate(-50%, -50%) scale(.56);
  }

  body:not(.in-lobby) .player-bet-stack {
    transform: translate(-50%, -50%) scale(.68);
  }

  body:not(.in-lobby) .dealer-chip,
  body:not(.in-lobby) .blind-chip {
    font-size: .42rem;
    height: 1rem;
    width: 1rem;
  }

  body:not(.in-lobby) .reveal-overlay,
  body:not(.in-lobby) .winner-banner {
    font-size: clamp(.85rem, 3vw, 1.25rem);
    padding: .35rem .65rem;
  }

  body:not(.in-lobby) .reveal-overlay {
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 22px rgba(255,228,92,.46);
    font-size: clamp(.66rem, 2.4vw, .92rem);
    line-height: 1;
    max-width: min(12rem, 44vw);
    padding: .18rem .42rem;
    top: 14%;
    white-space: nowrap;
  }

  body:not(.in-lobby) .reveal-overlay span {
    font-size: .48em;
    margin-top: .03rem;
  }

  body:not(.in-lobby) .odds-panel {
    bottom: 4.25rem;
    left: .4rem;
    max-width: 11.5rem;
    padding: .32rem;
  }

  body:not(.in-lobby) .odds-list {
    gap: .16rem;
  }

  body:not(.in-lobby) .odds-list div {
    font-size: .52rem;
    padding: .14rem .24rem;
  }

  body:not(.in-lobby) .action-panel {
    gap: .22rem;
    padding: .34rem max(.42rem, env(safe-area-inset-left)) max(.42rem, env(safe-area-inset-bottom));
  }

  body:not(.in-lobby) .controls {
    gap: .28rem;
    max-width: 100%;
    width: 100%;
  }

  body:not(.in-lobby) .controls button {
    font-size: clamp(.7rem, 2.7vw, .9rem);
    min-height: clamp(2.3rem, 11dvh, 3rem);
    padding: .25rem .3rem;
  }

  body:not(.in-lobby) .bet-sizing {
    bottom: 3.45rem;
    gap: .35rem;
    left: auto;
    max-height: calc(100dvh - 4rem);
    max-width: min(20rem, calc(100vw - .8rem));
    overflow: auto;
    padding: .5rem;
    right: .4rem;
    width: min(20rem, calc(100vw - .8rem));
  }

  body:not(.in-lobby) .bet-sizing strong {
    font-size: 1.35rem;
  }

  body:not(.in-lobby) .bet-sizing input[type="range"] {
    min-height: 1.8rem;
  }

  body:not(.in-lobby) .bet-sizing button {
    font-size: .65rem;
    min-height: 2rem;
    padding: .25rem .32rem;
  }

  body:not(.in-lobby) .message-log,
  body:not(.in-lobby) .chat-panel {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  body:not(.in-lobby) .reveal-overlay {
    font-size: clamp(.58rem, 2.05vw, .78rem);
    left: 50%;
    max-width: min(10rem, 38vw);
    padding: .14rem .34rem;
    top: 11.5%;
    transform: translate(-50%, -50%) scale(.82);
  }

  body:not(.in-lobby) .reveal-overlay.show {
    transform: translate(-50%, -50%) scale(.92);
  }

  body:not(.in-lobby) .winner-banner {
    font-size: clamp(.72rem, 2.4vw, .96rem);
    padding: .24rem .5rem;
  }
}

@media (max-width: 430px) {
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
    width: 100vw;
  }

  .rotate-phone-message {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  :root {
    --phone-topbar-h: clamp(2.15rem, 8svh, 2.85rem);
    --phone-actions-h: clamp(2.55rem, 11.5svh, 3.45rem);
    --phone-edge-x: max(.28rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  html,
  body {
    height: 100svh;
    max-height: 100svh;
    max-width: 100vw;
    overflow: hidden;
    overscroll-behavior: none;
    width: 100vw;
  }

  body:not(.in-lobby) {
    padding-bottom: calc(var(--phone-actions-h) + env(safe-area-inset-bottom));
  }

  body:not(.in-lobby) .game-shell {
    gap: .18rem;
    grid-template-rows: var(--phone-topbar-h) minmax(0, 1fr);
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding:
      max(.18rem, env(safe-area-inset-top))
      var(--phone-edge-x)
      0
      var(--phone-edge-x);
    width: 100vw;
  }

  body:not(.in-lobby) .top-bar {
    border-radius: 5px;
    height: var(--phone-topbar-h);
    min-height: 0;
    overflow: visible;
    padding: .16rem .32rem;
  }

  body:not(.in-lobby) .top-bar h1 {
    font-size: clamp(.72rem, 2.35svh, 1rem);
  }

  body:not(.in-lobby) .top-bar .eyebrow {
    font-size: clamp(.42rem, 1.45svh, .56rem);
  }

  body:not(.in-lobby) .score-strip {
    flex-wrap: nowrap;
    gap: .16rem;
    max-width: 70vw;
    overflow: hidden;
  }

  body:not(.in-lobby) .score-strip span,
  body:not(.in-lobby) .score-strip button {
    border-radius: 999px;
    font-size: clamp(.46rem, 1.6svh, .6rem);
    min-height: clamp(1.2rem, 4.4svh, 1.55rem);
    padding: .12rem .26rem;
    white-space: nowrap;
  }

  body:not(.in-lobby) .table-scene {
    height: calc(100svh - var(--phone-topbar-h) - var(--phone-actions-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .46rem);
    max-height: calc(100svh - var(--phone-topbar-h) - var(--phone-actions-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .46rem);
    min-height: 0;
    overflow: hidden;
    width: calc(100vw - (var(--phone-edge-x) * 2));
  }

  body:not(.in-lobby) .poker-table {
    height: min(45svh, 54%);
    top: 49.5%;
    width: min(88vw, 86%);
  }

  body:not(.in-lobby) .community {
    gap: min(.24rem, .75vw);
    min-height: min(13svh, 4.15rem);
    transform: translateY(-1.7svh);
  }

  body:not(.in-lobby) .community .card,
  body:not(.in-lobby) .card {
    border-radius: 4px;
    font-size: min(2.2vw, .78rem);
    height: min(12.2svh, 4.15rem);
    padding: min(.12rem, .32vw);
    width: min(7.4vw, 2.85rem);
  }

  body:not(.in-lobby) .card .corner {
    font-size: min(1.55vw, .56rem);
  }

  body:not(.in-lobby) .card .pips,
  body:not(.in-lobby) .community .card .pips {
    font-size: min(2.55vw, .92rem);
  }

  body:not(.in-lobby) .card .pips-1 i:nth-child(1),
  body:not(.in-lobby) .community .card .pips-1 i:nth-child(1) {
    font-size: min(4.2vw, 1.55rem);
  }

  body:not(.in-lobby) .card .royalty b,
  body:not(.in-lobby) .community .card .royalty b {
    font-size: min(2.65vw, .95rem);
  }

  body:not(.in-lobby) .card .royalty small,
  body:not(.in-lobby) .community .card .royalty small {
    font-size: min(1.75vw, .62rem);
  }

  body:not(.in-lobby) .hole-cards {
    gap: min(.14rem, .42vw);
    min-height: min(8svh, 2.7rem);
  }

  body:not(.in-lobby) .hole-cards .card {
    font-size: min(1.75vw, .62rem);
    height: min(8.2svh, 2.62rem);
    width: min(4.8vw, 1.75rem);
  }

  body:not(.in-lobby) .seat-bottom .hole-cards .card {
    height: min(9.9svh, 3.05rem);
    width: min(5.6vw, 2.05rem);
  }

  body:not(.in-lobby) .hole-cards .card .corner {
    font-size: min(1.15vw, .42rem);
  }

  body:not(.in-lobby) .hole-cards .card .pips {
    font-size: min(1.9vw, .7rem);
  }

  body:not(.in-lobby) .hole-cards .card .pips-1 i:nth-child(1) {
    font-size: min(3vw, 1.05rem);
  }

  body:not(.in-lobby) .seat {
    gap: min(.08rem, .25vw);
    min-width: min(13vw, 3.85rem);
  }

  body:not(.in-lobby) .seat-bottom {
    bottom: 5.8%;
    left: 50%;
  }

  body:not(.in-lobby) .seat-bottom-left {
    bottom: 4%;
    left: 22%;
  }

  body:not(.in-lobby) .seat-bottom-right {
    bottom: 4%;
    right: 22%;
  }

  body:not(.in-lobby) .seat-left-lower {
    left: .25%;
    top: 58%;
  }

  body:not(.in-lobby) .seat-left-upper {
    left: .25%;
    top: 29%;
  }

  body:not(.in-lobby) .seat-right-lower {
    right: .25%;
    top: 58%;
  }

  body:not(.in-lobby) .seat-right-upper {
    right: .25%;
    top: 29%;
  }

  body:not(.in-lobby) .seat-top-left {
    left: 28%;
    top: 1.5%;
  }

  body:not(.in-lobby) .seat-top {
    top: .8%;
  }

  body:not(.in-lobby) .seat-top-right {
    right: 28%;
    top: 1.5%;
  }

  body:not(.in-lobby) .player-nameplate {
    border-radius: 4px;
    min-width: min(12vw, 3.5rem);
    padding: min(.11rem, .35svh) min(.22rem, .7vw);
  }

  body:not(.in-lobby) .player-nameplate strong {
    font-size: min(1.55vw, .5rem);
  }

  body:not(.in-lobby) .player-nameplate span {
    font-size: min(1.35vw, .45rem);
  }

  body:not(.in-lobby) .status-pill,
  body:not(.in-lobby) .hand-readout,
  body:not(.in-lobby) .action-pop {
    font-size: min(1.3vw, .42rem);
    padding: .06rem .16rem;
  }

  body:not(.in-lobby) .turn-timer,
  body:not(.in-lobby) .seat.turn-spotlight::before {
    height: min(14.5svh, 4.5rem);
    width: min(14.5svh, 4.5rem);
  }

  body:not(.in-lobby) .turn-timer span {
    font-size: min(1.75vw, .56rem);
    height: min(3.6svh, 1.08rem);
    top: -.28rem;
    width: min(3.6svh, 1.08rem);
  }

  body:not(.in-lobby) .pot-stack {
    bottom: 24%;
    gap: .12rem;
    transform: translateX(-50%) scale(.68);
  }

  body:not(.in-lobby) .pot-stack span {
    font-size: min(2.45vw, .8rem);
    padding: .12rem .34rem;
  }

  body:not(.in-lobby) .chips {
    height: min(3.7svh, 1rem);
    width: min(3.7svh, 1rem);
  }

  body:not(.in-lobby) .bankroll-stack {
    transform: translate(-50%, -50%) scale(.48);
  }

  body:not(.in-lobby) .player-bet-stack {
    transform: translate(-50%, -50%) scale(.55);
  }

  body:not(.in-lobby) .dealer-chip,
  body:not(.in-lobby) .blind-chip {
    font-size: min(1.05vw, .36rem);
    height: min(3.2svh, .86rem);
    width: min(3.2svh, .86rem);
  }

  body:not(.in-lobby) .reveal-overlay {
    border-radius: 5px;
    box-shadow: 0 0 0 100vmax rgba(1,4,18,.38), 0 0 18px rgba(255,228,92,.42);
    font-size: min(2.1vw, .7rem);
    line-height: 1;
    max-width: 36vw;
    padding: .12rem .3rem;
    top: 13%;
    white-space: nowrap;
    z-index: 80;
  }

  body:not(.in-lobby) .reveal-overlay.show {
    transform: translate(-50%, -50%) scale(.9);
  }

  body:not(.in-lobby) .winner-banner {
    box-shadow: 0 0 0 100vmax rgba(1,4,18,.42), 0 14px 32px rgba(0,0,0,.45), 0 0 22px rgba(255,228,92,.28);
    font-size: min(2.35vw, .82rem);
    max-width: 58vw;
    padding: .18rem .42rem;
    top: 66%;
    z-index: 82;
  }

  body:not(.in-lobby) .odds-panel {
    bottom: calc(var(--phone-actions-h) + env(safe-area-inset-bottom) + .22rem);
    left: max(.3rem, env(safe-area-inset-left));
    max-height: 17svh;
    max-width: 31vw;
    overflow: auto;
    padding: .22rem;
    position: fixed;
    z-index: 135;
  }

  body:not(.in-lobby) .odds-list div {
    font-size: min(1.35vw, .46rem);
    padding: .1rem .18rem;
  }

  body:not(.in-lobby) .action-panel {
    min-height: var(--phone-actions-h);
    padding:
      .22rem
      max(.34rem, env(safe-area-inset-right))
      max(.24rem, env(safe-area-inset-bottom))
      max(.34rem, env(safe-area-inset-left));
  }

  body:not(.in-lobby) .controls {
    gap: .22rem;
  }

  body:not(.in-lobby) .controls button {
    border-radius: 999px;
    font-size: min(2.45vw, .78rem);
    min-height: clamp(2rem, 9.5svh, 2.55rem);
    padding: .2rem .24rem;
  }

  body:not(.in-lobby) .bet-sizing {
    bottom: auto;
    box-shadow: 0 0 0 100vmax rgba(1,4,18,.56), 0 18px 42px rgba(0,0,0,.55), 0 0 24px rgba(32,213,255,.25);
    left: 50%;
    max-height: 74svh;
    max-width: min(78vw, 21rem);
    padding: .45rem;
    right: auto;
    top: 48%;
    transform: translate(-50%, -50%);
    width: min(78vw, 21rem);
    z-index: 180;
  }

  body:not(.in-lobby) .bet-sizing.show {
    animation: none;
    transform: translate(-50%, -50%);
  }

  body:not(.in-lobby) .bet-sheet-head span,
  body:not(.in-lobby) .bet-sizing label {
    font-size: min(1.7vw, .58rem);
  }

  body:not(.in-lobby) .bet-sizing strong {
    font-size: min(4.4vw, 1.35rem);
  }

  body:not(.in-lobby) .bet-sizing input[type="range"] {
    min-height: 1.6rem;
  }

  body:not(.in-lobby) .bet-sizing button {
    font-size: min(1.65vw, .56rem);
    min-height: 1.85rem;
    padding: .2rem .26rem;
  }

  .nickname-modal,
  .welcome-bonus-modal,
  .tutorial-modal,
  .reload-modal,
  .legal-modal,
  .register-modal.first-visit,
  .register-modal.manual-open {
    background: rgba(1,4,18,.82);
    padding:
      max(.45rem, env(safe-area-inset-top))
      max(.55rem, env(safe-area-inset-right))
      max(.45rem, env(safe-area-inset-bottom))
      max(.55rem, env(safe-area-inset-left));
  }

  .nickname-card,
  .welcome-bonus-card,
  .tutorial-card,
  .reload-card,
  .legal-card,
  .register-modal.first-visit .register-card,
  .register-modal.manual-open .register-card {
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
    max-width: min(82vw, 25rem);
    overflow: auto;
    padding: .65rem;
  }
}

@media (orientation: landscape) and (max-height: 400px) {
  :root {
    --phone-topbar-h: clamp(1.85rem, 7.2dvh, 2.45rem);
    --phone-actions-h: clamp(2.25rem, 10dvh, 3rem);
  }

  html,
  body {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  body:not(.in-lobby) .game-shell {
    height: 100dvh;
    max-height: 100dvh;
    padding-top: max(.12rem, env(safe-area-inset-top));
  }

  body:not(.in-lobby) .top-bar {
    height: var(--phone-topbar-h);
    padding: .12rem .26rem;
  }

  body:not(.in-lobby) .top-bar h1 {
    font-size: clamp(.66rem, 2.15dvh, .92rem);
  }

  body:not(.in-lobby) .top-bar .eyebrow {
    font-size: clamp(.38rem, 1.25dvh, .5rem);
  }

  body:not(.in-lobby) .score-strip span,
  body:not(.in-lobby) .score-strip button {
    font-size: clamp(.42rem, 1.38dvh, .54rem);
    min-height: clamp(1.05rem, 3.8dvh, 1.35rem);
    padding: .08rem .22rem;
  }

  body:not(.in-lobby) .table-scene {
    height: calc(100dvh - var(--phone-topbar-h) - var(--phone-actions-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .34rem);
    max-height: calc(100dvh - var(--phone-topbar-h) - var(--phone-actions-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .34rem);
  }

  body:not(.in-lobby) .action-panel {
    min-height: var(--phone-actions-h);
    padding:
      .16rem
      max(.3rem, env(safe-area-inset-right))
      max(.18rem, env(safe-area-inset-bottom))
      max(.3rem, env(safe-area-inset-left));
  }

  body:not(.in-lobby) .controls {
    gap: .18rem;
  }

  body:not(.in-lobby) .controls button {
    font-size: min(2.2vw, .68rem);
    min-height: clamp(1.85rem, 8.6dvh, 2.3rem);
    padding: .16rem .2rem;
  }

  body:not(.in-lobby) .winner-banner {
    align-items: center;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    border-radius: 8px;
    box-shadow: 0 0 0 100vmax rgba(1,4,18,.66), 0 18px 44px rgba(0,0,0,.55), 0 0 26px rgba(255,228,92,.35);
    font-size: clamp(.64rem, 2.2vw, .82rem);
    inset: 0;
    justify-content: center;
    left: 0;
    margin:
      max(.55rem, env(safe-area-inset-top))
      max(.7rem, env(safe-area-inset-right))
      calc(var(--phone-actions-h) + env(safe-area-inset-bottom) + .45rem)
      max(.7rem, env(safe-area-inset-left));
    max-height: calc(100dvh - 120px);
    max-width: none;
    min-height: 0;
    overflow-y: auto;
    padding: .4rem .55rem;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    transform: none;
    width: auto;
    z-index: 9999;
  }

  body:not(.in-lobby) .winner-banner.show {
    display: flex;
  }

  body:not(.in-lobby) .winner-banner strong {
    font-size: 1.05em;
  }

  body:not(.in-lobby) .winner-banner span {
    font-size: .76em;
  }
}

@media (max-width: 400px), (orientation: landscape) and (max-height: 400px) {
  body:not(.in-lobby) .bet-sizing {
    animation: none;
    border-radius: 14px 14px 0 0;
    bottom: max(.18rem, env(safe-area-inset-bottom));
    box-shadow: 0 -16px 38px rgba(0,0,0,.58), 0 0 0 100vmax rgba(1,4,18,.18), inset 0 1px rgba(255,255,255,.18);
    gap: .28rem;
    height: auto;
    left: 50%;
    max-height: 40dvh;
    max-width: 90vw;
    min-height: 25dvh;
    overflow-y: auto;
    padding: .36rem .48rem .42rem;
    position: fixed;
    right: auto;
    top: auto;
    transform: translate(-50%, 112%);
    width: 90vw;
    z-index: 9998;
  }

  body:not(.in-lobby) .bet-sizing.show {
    animation: mobileBetSheetIn 180ms ease both;
    display: grid;
    transform: translate(-50%, 0);
  }

  body:not(.in-lobby) .bet-sheet-head {
    gap: .35rem;
  }

  body:not(.in-lobby) .bet-sheet-head span,
  body:not(.in-lobby) .bet-sizing label {
    font-size: 12px;
  }

  body:not(.in-lobby) .bet-sizing strong {
    font-size: clamp(1rem, 4.8vw, 1.3rem);
  }

  body:not(.in-lobby) .bet-sizing input[type="range"] {
    min-height: 1.25rem;
  }

  body:not(.in-lobby) .quick-bet-row,
  body:not(.in-lobby) .bet-confirm-row {
    gap: .28rem;
  }

  body:not(.in-lobby) .bet-sizing button {
    font-size: 14px;
    min-height: 1.48rem;
    padding: .16rem .24rem;
  }
}

@keyframes mobileBetSheetIn {
  from { opacity: .88; transform: translate(-50%, 112%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (orientation: landscape) and (max-height: 620px) {
  html,
  body {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
    width: 100vw;
  }

  body:not(.in-lobby) {
    --mobile-topbar: clamp(2rem, 8dvh, 3.15rem);
    --mobile-actions: clamp(2.55rem, 10dvh, 4rem);
    padding:
      max(.18rem, env(safe-area-inset-top))
      max(.28rem, env(safe-area-inset-right))
      calc(var(--mobile-actions) + env(safe-area-inset-bottom))
      max(.28rem, env(safe-area-inset-left));
  }

  body:not(.in-lobby) .game-shell {
    gap: clamp(.12rem, .6dvh, .32rem);
    grid-template-rows: var(--mobile-topbar) minmax(0, 1fr);
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width: none;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - .56rem);
  }

  body:not(.in-lobby) .top-bar {
    align-items: center;
    border-radius: 6px;
    flex-direction: row;
    gap: clamp(.18rem, .7vw, .55rem);
    height: var(--mobile-topbar);
    min-height: 0;
    overflow: hidden;
    padding: clamp(.1rem, .7dvh, .32rem) clamp(.24rem, .9vw, .62rem);
  }

  body:not(.in-lobby) .top-bar h1 {
    font-size: clamp(.72rem, 2.6dvh, 1.22rem);
    line-height: 1;
  }

  body:not(.in-lobby) .top-bar .eyebrow {
    font-size: clamp(.38rem, 1.45dvh, .62rem);
    margin: 0;
  }

  body:not(.in-lobby) .score-strip {
    flex-wrap: nowrap;
    gap: clamp(.12rem, .45vw, .36rem);
    justify-content: flex-end;
    max-width: 68vw;
    overflow: hidden;
  }

  body:not(.in-lobby) .score-strip span,
  body:not(.in-lobby) .score-strip button {
    font-size: clamp(.46rem, 1.55dvh, .72rem);
    min-height: clamp(1.12rem, 4.2dvh, 1.8rem);
    padding: clamp(.08rem, .35dvh, .24rem) clamp(.22rem, .8vw, .5rem);
    white-space: nowrap;
  }

  body:not(.in-lobby) .table-scene {
    aspect-ratio: auto;
    border-radius: 6px;
    height: calc(100dvh - var(--mobile-topbar) - var(--mobile-actions) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - clamp(.5rem, 1.2dvh, .9rem));
    max-height: calc(100dvh - var(--mobile-topbar) - var(--mobile-actions) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - clamp(.5rem, 1.2dvh, .9rem));
    min-height: 0;
    overflow: hidden;
    width: 100%;
  }

  body:not(.in-lobby) .poker-table {
    height: clamp(36%, 44dvh, 52%);
    top: 50%;
    width: clamp(76%, 84vw, 92%);
  }

  body:not(.in-lobby) .seat {
    gap: clamp(.04rem, .2dvh, .12rem);
    min-width: clamp(3.2rem, 11vw, 5.8rem);
  }

  body:not(.in-lobby) .player-nameplate {
    border-radius: 5px;
    min-width: clamp(3rem, 10vw, 5rem);
    padding: clamp(.05rem, .25dvh, .16rem) clamp(.16rem, .6vw, .34rem);
  }

  body:not(.in-lobby) .player-nameplate strong {
    font-size: clamp(.44rem, 1.35dvh, .72rem);
  }

  body:not(.in-lobby) .player-nameplate span,
  body:not(.in-lobby) .status-pill,
  body:not(.in-lobby) .hand-readout,
  body:not(.in-lobby) .action-pop {
    font-size: clamp(.38rem, 1.1dvh, .58rem);
  }

  body:not(.in-lobby) .community {
    gap: clamp(.16rem, .55vw, .5rem);
    min-height: clamp(3.2rem, 13dvh, 6rem);
    transform: translateY(clamp(-1rem, -2dvh, -.35rem));
  }

  body:not(.in-lobby) .community .card {
    font-size: clamp(.76rem, 2.4dvh, 1.55rem);
    height: clamp(3.55rem, 13.5dvh, 6.8rem);
    width: clamp(2.35rem, 8.6dvh, 4.7rem);
  }

  body:not(.in-lobby) .hole-cards .card {
    height: clamp(2.2rem, 8.5dvh, 4.8rem);
    width: clamp(1.5rem, 5.7dvh, 3.2rem);
  }

  body:not(.in-lobby) .seat-bottom .hole-cards .card {
    height: clamp(2.6rem, 10dvh, 5.25rem);
    width: clamp(1.8rem, 6.7dvh, 3.55rem);
  }

  body:not(.in-lobby) .pot-stack {
    bottom: clamp(22%, 25dvh, 31%);
    transform: translateX(-50%) scale(clamp(.58, 1.55dvh, .9));
  }

  body:not(.in-lobby) .winner-banner {
    font-size: clamp(.76rem, 2.7dvh, 1.35rem);
    left: 50%;
    max-width: min(72vw, 30rem);
    min-width: min(18rem, 68vw);
    padding: clamp(.35rem, 1.2dvh, .8rem) clamp(.55rem, 1.6vw, 1.05rem);
    position: absolute;
    top: clamp(14%, 20dvh, 26%);
    transform: translateX(-50%);
    z-index: 9999;
  }

  body:not(.in-lobby) .action-panel {
    min-height: var(--mobile-actions);
    padding:
      clamp(.16rem, .7dvh, .38rem)
      max(.34rem, env(safe-area-inset-right))
      max(.18rem, env(safe-area-inset-bottom))
      max(.34rem, env(safe-area-inset-left));
  }

  body:not(.in-lobby) .controls {
    gap: clamp(.16rem, .7vw, .55rem);
    max-width: min(100%, 52rem);
  }

  body:not(.in-lobby) .controls button {
    font-size: clamp(.68rem, 2.2dvh, 1.05rem);
    min-height: clamp(1.9rem, 7.5dvh, 3rem);
    padding: clamp(.14rem, .5dvh, .42rem) clamp(.22rem, .8vw, .62rem);
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  :root {
    --phone-topbar-h: clamp(1.95rem, 7.1dvh, 2.55rem);
    --phone-actions-h: clamp(2.3rem, 9.4dvh, 3.05rem);
  }

  body:not(.in-lobby) .game-shell {
    gap: .12rem;
    padding-top: max(.12rem, env(safe-area-inset-top));
  }

  body:not(.in-lobby) .top-bar {
    box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.1);
    gap: .24rem;
    height: var(--phone-topbar-h);
    padding: .1rem .28rem;
  }

  body:not(.in-lobby) .top-bar h1 {
    font-size: clamp(.66rem, 2dvh, .92rem);
  }

  body:not(.in-lobby) .top-bar .eyebrow {
    font-size: clamp(.36rem, 1.2dvh, .48rem);
    margin: 0;
  }

  body:not(.in-lobby) .score-strip {
    gap: .12rem;
    max-width: 67vw;
  }

  body:not(.in-lobby) .score-strip span,
  body:not(.in-lobby) .score-strip button {
    font-size: clamp(.4rem, 1.25dvh, .54rem);
    min-height: clamp(.98rem, 3.5dvh, 1.28rem);
    padding: .07rem .2rem;
  }

  body:not(.in-lobby) .table-scene {
    height: calc(100dvh - var(--phone-topbar-h) - var(--phone-actions-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .22rem);
    max-height: calc(100dvh - var(--phone-topbar-h) - var(--phone-actions-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .22rem);
  }

  body:not(.in-lobby) .poker-table {
    height: min(43dvh, 51%);
    top: 50.5%;
    width: min(84vw, 84%);
  }

  body:not(.in-lobby) .seat,
  body:not(.in-lobby) .seat-open {
    gap: .05rem;
    min-width: min(11.2vw, 3.25rem);
  }

  body:not(.in-lobby) .seat-select-button {
    box-shadow: 0 0 0 2px rgba(39,231,255,.12), 0 8px 18px rgba(0,0,0,.34), 0 0 16px rgba(39,231,255,.24);
    gap: .04rem;
    min-height: min(9dvh, 3.3rem);
    min-width: min(17.2vw, 7.1rem);
    padding: .36rem .64rem;
    transform: scale(.88);
  }

  body:not(.in-lobby) .seat-select-button span {
    font-size: min(1.35vw, .58rem);
  }

  body:not(.in-lobby) .seat-select-button strong {
    font-size: min(2.15vw, .9rem);
  }

  body:not(.in-lobby) .player-nameplate {
    min-width: min(10.4vw, 3.15rem);
    padding: .06rem .16rem;
  }

  body:not(.in-lobby) .player-nameplate strong {
    font-size: min(1.35vw, .46rem);
  }

  body:not(.in-lobby) .player-nameplate span {
    font-size: min(1.18vw, .4rem);
  }

  body:not(.in-lobby) .status-pill,
  body:not(.in-lobby) .hand-readout,
  body:not(.in-lobby) .action-pop {
    font-size: min(1.15vw, .38rem);
    padding: .045rem .14rem;
  }

  body:not(.in-lobby) .result-banner {
    bottom: 16%;
    font-size: min(1.85vw, .62rem);
    max-width: 34vw;
    padding: .12rem .3rem;
    z-index: 40;
  }

  body:not(.in-lobby) .reveal-overlay {
    font-size: min(1.8vw, .62rem);
    max-width: 32vw;
    padding: .1rem .26rem;
    top: 10%;
  }

  body:not(.in-lobby) .pot-stack {
    bottom: 27%;
    transform: translateX(-50%) scale(.6);
  }

  body:not(.in-lobby) .action-panel {
    min-height: var(--phone-actions-h);
    padding:
      .13rem
      max(.28rem, env(safe-area-inset-right))
      max(.16rem, env(safe-area-inset-bottom))
      max(.28rem, env(safe-area-inset-left));
  }

  body:not(.in-lobby) .controls {
    gap: .16rem;
  }

  body:not(.in-lobby) .controls button {
    font-size: min(2.05vw, .64rem);
    min-height: clamp(1.7rem, 7.6dvh, 2.1rem);
    padding: .12rem .18rem;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  body:not(.in-lobby) {
    --mobile-topbar: clamp(2rem, 8dvh, 3.15rem);
    --mobile-actions: clamp(2.55rem, 10dvh, 4rem);
  }

  body:not(.in-lobby) .game-shell {
    box-sizing: border-box;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - .56rem);
  }

  body:not(.in-lobby) .table-scene {
    height: calc(100dvh - var(--mobile-topbar) - var(--mobile-actions) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - clamp(.5rem, 1.2dvh, .9rem));
    max-height: calc(100dvh - var(--mobile-topbar) - var(--mobile-actions) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - clamp(.5rem, 1.2dvh, .9rem));
  }

  body:not(.in-lobby) .winner-banner {
    display: none;
    font-size: clamp(.76rem, 2.7dvh, 1.35rem);
    left: 50%;
    max-width: min(72vw, 30rem);
    min-width: min(18rem, 68vw);
    padding: clamp(.35rem, 1.2dvh, .8rem) clamp(.55rem, 1.6vw, 1.05rem);
    position: absolute;
    top: clamp(12%, 18dvh, 24%);
    transform: translateX(-50%);
    z-index: 9999;
  }

  body:not(.in-lobby) .winner-banner.show {
    display: grid;
  }

  body:not(.in-lobby) .action-panel {
    min-height: var(--mobile-actions);
  }

  body:not(.in-lobby) .controls button {
    font-size: clamp(.68rem, 2.2dvh, 1.05rem);
    min-height: clamp(1.9rem, 7.5dvh, 3rem);
  }
}

@media (max-width: 900px), (max-height: 620px) {
  html,
  body {
    box-sizing: border-box;
    max-width: 100vw;
    min-height: 100dvh;
    overflow-x: hidden;
    width: 100vw;
  }

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

  body.in-lobby {
    min-height: 100dvh;
    overflow: hidden;
  }

  .lobby-screen {
    --lobby-gap: clamp(.35rem, 1.4dvh, .75rem);
    gap: var(--lobby-gap);
    height: 100dvh;
    max-height: 100dvh;
    max-width: 100vw;
    overflow: auto;
    padding:
      max(.45rem, env(safe-area-inset-top))
      max(.45rem, env(safe-area-inset-right))
      max(.45rem, env(safe-area-inset-bottom))
      max(.45rem, env(safe-area-inset-left));
    width: 100vw;
  }

  .lobby-top {
    align-items: center;
    border-radius: 7px;
    display: grid;
    gap: clamp(.28rem, 1dvh, .6rem);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(.42rem, 1.2dvh, .75rem);
  }

  .lobby-top h1 {
    font-size: clamp(1rem, 4.4vw, 1.7rem);
    line-height: 1.02;
  }

  .lobby-top .eyebrow,
  .featured-copy .eyebrow {
    font-size: clamp(.48rem, 1.65vw, .72rem);
    margin-bottom: .08rem;
  }

  .lobby-stats {
    gap: clamp(.16rem, .7vw, .36rem);
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .lobby-stats span {
    font-size: clamp(.54rem, 1.75vw, .7rem);
    padding: clamp(.16rem, .45dvh, .28rem) clamp(.28rem, .9vw, .5rem);
  }

  .lobby-top > .gold-button {
    font-size: clamp(.62rem, 1.9vw, .8rem);
    min-height: clamp(1.85rem, 5.8dvh, 2.55rem);
    padding: .28rem .55rem;
  }

  .featured-table {
    border-radius: 7px;
    gap: clamp(.4rem, 1.1dvh, .8rem);
    grid-template-columns: minmax(0, 1fr) minmax(8rem, .45fr);
    min-height: 0;
    padding: clamp(.48rem, 1.35dvh, .8rem);
  }

  .featured-copy h2 {
    font-size: clamp(.9rem, 3.3vw, 1.35rem);
    line-height: 1.05;
    margin: .08rem 0;
  }

  .featured-copy p:not(.eyebrow) {
    font-size: clamp(.58rem, 1.75vw, .78rem);
    margin: .18rem 0 .35rem;
  }

  .featured-copy button,
  .table-card button,
  .create-table-panel button {
    font-size: clamp(.62rem, 1.8vw, .78rem);
    min-height: clamp(1.85rem, 5.4dvh, 2.45rem);
    padding: .28rem .5rem;
  }

  .featured-visual {
    min-height: clamp(5rem, 20dvh, 8rem);
  }

  .mini-table {
    border-width: clamp(.42rem, 1.7vw, .75rem);
    height: min(100%, 24dvh);
    min-height: 4.5rem;
    width: 100%;
  }

  .mini-table i {
    height: clamp(1.35rem, 6dvh, 2.4rem);
    width: clamp(.9rem, 4dvh, 1.55rem);
  }

  .mini-table span {
    bottom: -.5rem;
    font-size: clamp(.52rem, 1.65vw, .72rem);
    padding: .18rem .38rem;
  }

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

  .lobby-panel {
    border-radius: 7px;
    gap: clamp(.35rem, .9dvh, .62rem);
    padding: clamp(.48rem, 1.25dvh, .75rem);
  }

  .lobby-section-head strong,
  .create-table-panel strong {
    font-size: clamp(.62rem, 1.8vw, .78rem);
  }

  .lobby-section-head span,
  .create-table-head span {
    font-size: clamp(.52rem, 1.55vw, .68rem);
  }

  .table-card {
    border-radius: 7px;
    gap: clamp(.32rem, .9vw, .58rem);
    grid-template-columns: clamp(2.4rem, 8vw, 3.4rem) minmax(0, 1fr) auto;
    min-height: 0;
    padding: clamp(.38rem, 1dvh, .62rem);
  }

  .table-icon {
    height: clamp(2.35rem, 8dvh, 3.25rem);
    width: clamp(2.35rem, 8dvh, 3.25rem);
  }

  .table-card b {
    font-size: clamp(.72rem, 2.35vw, .95rem);
    line-height: 1.08;
  }

  .table-card span,
  .table-meta span {
    font-size: clamp(.5rem, 1.55vw, .68rem);
  }

  .table-meta {
    gap: .22rem;
  }

  .create-table-panel {
    position: static;
  }

  .create-table-panel label {
    font-size: clamp(.58rem, 1.65vw, .74rem);
    gap: .22rem;
  }

  .create-table-panel input,
  .create-table-panel select {
    min-height: clamp(1.8rem, 5.4dvh, 2.35rem);
    padding: .28rem .42rem;
  }

  .create-perks {
    gap: .22rem;
  }

  .create-perks span {
    font-size: clamp(.48rem, 1.45vw, .64rem);
    padding: .16rem .3rem;
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  .lobby-screen {
    align-content: start;
  }

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

  .featured-visual {
    min-height: clamp(4.8rem, 16dvh, 7rem);
  }

  .table-card {
    grid-template-columns: clamp(2.25rem, 10vw, 3rem) minmax(0, 1fr);
  }

  .table-card .table-meta,
  .table-card button {
    grid-column: 1 / -1;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.in-lobby {
    overflow: hidden;
  }

  .lobby-screen {
    align-content: start;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .lobby-top {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.45fr) auto;
  }

  .lobby-stats {
    grid-column: auto;
    justify-content: center;
  }

  .featured-table {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, .34fr);
  }

  .featured-visual {
    min-height: clamp(4.2rem, 18dvh, 6.6rem);
  }

  .lobby-grid {
    min-height: 0;
    overflow: hidden;
  }

  .table-browser {
    min-height: 0;
    overflow: auto;
  }

  .create-table-panel {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  .featured-copy p:not(.eyebrow),
  .featured-visual,
  .table-meta span:nth-child(3) {
    display: none;
  }

  .lobby-top h1 {
    font-size: clamp(.82rem, 3.2dvh, 1.15rem);
  }

  .lobby-stats span {
    font-size: clamp(.46rem, 1.55dvh, .58rem);
  }

  .featured-table,
  .lobby-panel {
    padding: clamp(.34rem, 1dvh, .55rem);
  }

  .table-card {
    padding: clamp(.28rem, .8dvh, .45rem);
  }
}

/* Universal layout split:
   - Lobby remains a normal responsive page.
   - Game table uses one fixed design canvas scaled by app.js to the visible viewport. */
html,
body {
  height: 100%;
  width: 100%;
}

body {
  overflow-x: hidden;
}

body.in-lobby {
  min-height: 100dvh;
  overflow-y: auto;
}

body:not(.in-lobby) {
  height: 100dvh;
  overflow: hidden;
  padding: 0;
}

body.in-lobby .app-viewport {
  display: none;
}

body:not(.in-lobby) .app-viewport {
  display: block;
}

.app-viewport {
  background: #050b18;
  height: 100dvh;
  inset: 0;
  overflow: hidden;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  position: fixed;
  width: 100vw;
  z-index: 1;
}

.game-stage {
  height: 900px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  width: 1600px;
}

body:not(.in-lobby) .game-stage .game-shell {
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 70px minmax(0, 1fr);
  grid-template-areas:
    "top"
    "table";
  height: 900px;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  padding: 16px 16px 112px;
  width: 1600px;
}

body:not(.in-lobby) .game-stage .top-bar {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  grid-area: top;
  height: 70px;
  justify-content: space-between;
  min-height: 0;
  overflow: visible;
  padding: .85rem 1rem;
}

body:not(.in-lobby) .game-stage .top-bar h1 {
  font-size: 2.15rem;
  line-height: 1;
}

body:not(.in-lobby) .game-stage .top-bar .eyebrow {
  font-size: .78rem;
  margin: 0 0 .2rem;
}

body:not(.in-lobby) .game-stage .score-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  max-width: 1020px;
}

body:not(.in-lobby) .game-stage .score-strip span,
body:not(.in-lobby) .game-stage .score-strip button {
  font-size: .92rem;
  min-height: 2.35rem;
  padding: .5rem .75rem;
}

body:not(.in-lobby) .game-stage .table-scene {
  aspect-ratio: auto;
  grid-area: table;
  height: 702px;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  position: relative;
  transform: none;
  width: 100%;
}

body:not(.in-lobby) .game-stage .poker-table {
  height: 52%;
  left: 50%;
  max-height: none;
  max-width: none;
  min-height: 0;
  position: absolute;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 76%;
}

body:not(.in-lobby) .game-stage .community {
  gap: .88rem;
  left: 50%;
  min-height: 11.9rem;
  position: absolute;
  top: 44%;
  transform: translate(-50%, -50%);
}

body:not(.in-lobby) .game-stage .community .card {
  font-size: 1.86rem;
  height: 10.71rem;
  width: 7.43rem;
}

body:not(.in-lobby) .game-stage .hole-cards .card {
  font-size: 2.47rem;
  height: 9.05rem;
  width: 6.06rem;
}

body:not(.in-lobby) .game-stage .seat-bottom .hole-cards .card {
  height: 9.91rem;
  width: 6.67rem;
}

body:not(.in-lobby) .game-stage .seat {
  gap: .22rem;
  min-width: 8.2rem;
  position: absolute;
}

body:not(.in-lobby) .game-stage .seat-bottom {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-left-lower {
  left: 1%;
  top: 58%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-left-upper {
  left: 1%;
  top: 30%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-top-left {
  left: 25%;
  top: 3%;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-top {
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-top-right {
  right: 25%;
  top: 3%;
  transform: translateX(50%);
}

body:not(.in-lobby) .game-stage .seat-right-upper {
  right: 1%;
  top: 30%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-right-lower {
  right: 1%;
  top: 58%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-bottom-right {
  bottom: 3%;
  right: 19%;
  transform: none;
}

body:not(.in-lobby) .game-stage .seat-bottom-left {
  bottom: 3%;
  left: 19%;
  transform: none;
}

body:not(.in-lobby) .game-stage .player-nameplate {
  min-width: 5.15rem;
  padding: .24rem .3rem;
}

body:not(.in-lobby) .game-stage .player-avatar {
  height: 3.15rem;
  width: 3.15rem;
}

body:not(.in-lobby) .game-stage .seat-timer {
  height: 4.1rem;
  width: 4.1rem;
}

body:not(.in-lobby) .game-stage .pot-display {
  font-size: 1.25rem;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}

body:not(.in-lobby) .game-stage .winner-banner {
  left: 50%;
  max-height: 520px;
  max-width: 540px;
  overflow-y: auto;
  position: absolute;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

body:not(.in-lobby) .game-stage .reveal-banner {
  left: 50%;
  max-width: 420px;
  padding: .9rem 1.2rem;
  position: absolute;
  top: 24%;
  transform: translate(-50%, -50%);
  z-index: 9998;
}

body:not(.in-lobby) .game-stage .odds-panel {
  bottom: 5.85rem;
  left: 1rem;
  max-height: none;
  max-width: 18rem;
  position: absolute;
  transform: none;
  z-index: 14;
}

body:not(.in-lobby) .game-stage .action-panel {
  bottom: 0;
  display: flex;
  left: 0;
  min-height: 96px;
  padding: .7rem 1rem .85rem;
  position: absolute;
  right: 0;
  top: auto;
  z-index: 30;
}

body:not(.in-lobby) .game-stage .controls {
  gap: 1rem;
  max-width: 820px;
  width: 820px;
}

body:not(.in-lobby) .game-stage .controls button {
  font-size: 1.28rem;
  min-height: 4rem;
  padding: .6rem 1rem;
}

body:not(.in-lobby) .game-stage .bet-sheet {
  bottom: 6.3rem;
  left: 50%;
  max-height: 21rem;
  max-width: 30rem;
  position: absolute;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  width: 30rem;
  z-index: 40;
}

body:not(.in-lobby) .game-stage .message-log {
  max-height: 6.2rem;
}

@media (orientation: portrait) and (max-width: 767px) {
  body:not(.in-lobby) .rotate-phone-message {
    display: grid;
  }
}

/* Final game-screen lock: lobby can scroll, poker table cannot pan or drift. */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body:not(.in-lobby) {
  height: 100%;
  inset: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  padding: 0;
  position: fixed;
  touch-action: none;
  width: 100%;
}

body:not(.in-lobby) .game-viewport,
body:not(.in-lobby) .app-viewport {
  background: #050b18;
  height: 100dvh;
  inset: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  touch-action: none;
  width: 100vw;
}

body:not(.in-lobby) .game-stage {
  height: 900px;
  left: 50%;
  max-height: none;
  max-width: none;
  overflow: visible;
  position: fixed;
  top: 50%;
  transform-origin: center center;
  width: 1600px;
  will-change: transform;
}

body.in-lobby {
  position: static;
  touch-action: auto;
}

/* Responsive table-screen rebuild: no full-page canvas scaling. */
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.in-lobby {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
  position: static;
  touch-action: auto;
}

body:not(.in-lobby) {
  inset: 0;
  overflow: hidden;
  position: fixed;
  touch-action: none;
}

body:not(.in-lobby) .game-viewport,
body:not(.in-lobby) .app-viewport {
  background: #050b18;
  display: block;
  height: 100dvh;
  inset: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  touch-action: manipulation;
  width: 100vw;
}

body:not(.in-lobby) .game-stage {
  height: 100%;
  inset: 0;
  left: auto;
  overflow: hidden;
  position: absolute;
  top: auto;
  transform: none !important;
  width: 100%;
  will-change: auto;
}

body:not(.in-lobby) .game-stage .game-shell {
  display: grid;
  gap: clamp(4px, .8dvh, 10px);
  grid-template-areas:
    "top"
    "table";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(44px, 9dvh, 64px) minmax(0, 1fr);
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding:
    max(4px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    calc(clamp(58px, 14dvh, 86px) + max(6px, env(safe-area-inset-bottom)))
    max(8px, env(safe-area-inset-left));
  width: 100vw;
}

body:not(.in-lobby) .game-stage .top-bar {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: clamp(6px, 1vw, 14px);
  grid-area: top;
  height: clamp(44px, 9dvh, 64px);
  justify-content: space-between;
  min-height: 0;
  overflow: visible;
  padding: clamp(4px, 1dvh, 8px) clamp(8px, 1.2vw, 14px);
}

body:not(.in-lobby) .game-stage .top-bar h1 {
  font-size: clamp(16px, 2.6vw, 28px);
  line-height: 1;
}

body:not(.in-lobby) .game-stage .top-bar .eyebrow {
  font-size: clamp(8px, 1.2vw, 12px);
  margin: 0 0 2px;
}

body:not(.in-lobby) .game-stage .score-strip {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(4px, .7vw, 9px);
  justify-content: flex-end;
  max-width: 72vw;
  overflow: visible;
}

body:not(.in-lobby) .game-stage .score-strip span,
body:not(.in-lobby) .game-stage .score-strip button {
  font-size: clamp(9px, 1.35vw, 14px);
  min-height: clamp(26px, 5.8dvh, 38px);
  padding: clamp(3px, .7dvh, 7px) clamp(6px, .9vw, 11px);
  white-space: nowrap;
  z-index: 20000;
}

body.flyout-open:not(.in-lobby) .game-stage .top-bar {
  overflow: visible;
}

body:not(.in-lobby) .game-stage .score-strip button {
  pointer-events: auto;
  position: relative;
  touch-action: manipulation;
  z-index: 20010;
}

body:not(.in-lobby) .game-stage .flyout {
  pointer-events: auto;
  touch-action: manipulation;
  z-index: 20050;
}

body:not(.in-lobby) .game-stage .table-scene,
body:not(.in-lobby) .game-stage .poker-table {
  overscroll-behavior: none;
  touch-action: manipulation;
}

body:not(.in-lobby) .game-stage .table-scene {
  aspect-ratio: auto;
  grid-area: table;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  position: relative;
  transform: none;
  width: 100%;
}

body:not(.in-lobby) .game-stage .poker-table {
  height: min(52dvh, 360px);
  left: 50%;
  max-height: none;
  max-width: none;
  min-height: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1300px);
}

body:not(.in-lobby) .game-stage .community {
  gap: clamp(4px, .8vw, 12px);
  left: 50%;
  min-height: clamp(56px, 19dvh, 118px);
  position: absolute;
  top: 43%;
  transform: translate(-50%, -50%);
}

body:not(.in-lobby) .game-stage .community .card {
  font-size: clamp(18px, 3.2vw, 36px);
  height: clamp(76px, 22dvh, 136px);
  width: clamp(52px, 7.6vw, 94px);
}

body:not(.in-lobby) .game-stage .hole-cards {
  gap: clamp(2px, .45vw, 8px);
  min-height: clamp(42px, 14dvh, 96px);
}

body:not(.in-lobby) .game-stage .hole-cards .card {
  font-size: clamp(14px, 2.2vw, 28px);
  height: clamp(48px, 14.5dvh, 100px);
  width: clamp(34px, 5vw, 68px);
}

body:not(.in-lobby) .game-stage .seat-bottom .hole-cards .card {
  height: clamp(58px, 16dvh, 112px);
  width: clamp(40px, 5.8vw, 76px);
}

body:not(.in-lobby) .game-stage .card .corner {
  font-size: clamp(11px, 1.6vw, 20px);
}

body:not(.in-lobby) .game-stage .card .corner small {
  font-size: .78em;
}

body:not(.in-lobby) .game-stage .card .pips {
  font-size: clamp(16px, 2.5vw, 32px);
}

body:not(.in-lobby) .game-stage .card .pips-1 i:nth-child(1) {
  font-size: clamp(26px, 4vw, 52px);
}

body:not(.in-lobby) .game-stage .community .card .corner {
  font-size: clamp(14px, 2vw, 25px);
}

body:not(.in-lobby) .game-stage .community .card .pips {
  font-size: clamp(22px, 3.4vw, 42px);
}

body:not(.in-lobby) .game-stage .seat {
  gap: clamp(1px, .25dvh, 4px);
  min-width: clamp(70px, 9vw, 120px);
  position: absolute;
}

body:not(.in-lobby) .game-stage .seat-bottom {
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-left-lower {
  left: 1.2%;
  top: 58%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-left-upper {
  left: 1.2%;
  top: 29%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-top-left {
  left: 25%;
  top: 2%;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-top {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-top-right {
  right: 25%;
  top: 2%;
  transform: translateX(50%);
}

body:not(.in-lobby) .game-stage .seat-right-upper {
  right: 1.2%;
  top: 29%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-right-lower {
  right: 1.2%;
  top: 58%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-bottom-right {
  bottom: 2.5%;
  right: 18%;
  transform: none;
}

body:not(.in-lobby) .game-stage .seat-bottom-left {
  bottom: 2.5%;
  left: 18%;
  transform: none;
}

body:not(.in-lobby) .game-stage .player-nameplate {
  border-radius: 6px;
  min-width: clamp(62px, 8vw, 108px);
  padding: clamp(2px, .45dvh, 5px) clamp(4px, .55vw, 8px);
}

body:not(.in-lobby) .game-stage .player-nameplate strong {
  font-size: clamp(10px, 1.4vw, 16px);
}

body:not(.in-lobby) .game-stage .player-nameplate span,
body:not(.in-lobby) .game-stage .status-pill,
body:not(.in-lobby) .game-stage .hand-readout,
body:not(.in-lobby) .game-stage .action-pop {
  font-size: clamp(8px, 1.1vw, 13px);
}

body:not(.in-lobby) .game-stage .player-avatar {
  height: clamp(32px, 6dvh, 58px);
  width: clamp(32px, 6dvh, 58px);
}

body:not(.in-lobby) .game-stage .turn-timer,
body:not(.in-lobby) .game-stage .seat-timer {
  height: clamp(54px, 12dvh, 98px);
  width: clamp(54px, 12dvh, 98px);
}

body:not(.in-lobby) .game-stage .pot-stack {
  bottom: 25%;
}

body:not(.in-lobby) .game-stage .pot-stack span,
body:not(.in-lobby) .game-stage .pot-display {
  font-size: clamp(15px, 2.4vw, 28px);
}

body:not(.in-lobby) .game-stage .odds-panel {
  bottom: clamp(64px, 15dvh, 96px);
  left: max(8px, env(safe-area-inset-left));
  max-height: min(42dvh, 220px);
  max-width: clamp(150px, 24vw, 260px);
  overflow: hidden;
  position: absolute;
  transform: none;
}

body:not(.in-lobby) .game-stage .action-panel {
  bottom: 0;
  display: grid;
  gap: 0;
  height: clamp(58px, 14dvh, 86px);
  left: 0;
  min-height: 0;
  padding:
    6px
    max(10px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  position: fixed;
  right: 0;
  top: auto;
  z-index: 60;
}

body:not(.in-lobby) .game-stage .controls {
  display: grid;
  gap: clamp(8px, 1vw, 16px);
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 auto;
  max-width: min(980px, 78vw);
  width: 100%;
}

body:not(.in-lobby) .game-stage .controls button {
  font-size: clamp(18px, 2.5vw, 30px);
  height: 100%;
  min-height: 0;
  padding: 0 clamp(8px, 1vw, 16px);
}

body:not(.in-lobby) .game-stage .controls .utility-action {
  display: none;
}

body:not(.in-lobby) .game-stage .bet-sheet,
body:not(.in-lobby) .game-stage .bet-sizing {
  bottom: calc(clamp(58px, 14dvh, 86px) + max(6px, env(safe-area-inset-bottom)));
  left: 50%;
  max-height: min(42dvh, 260px);
  max-width: min(90vw, 520px);
  overflow-y: auto;
  position: fixed;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  width: min(90vw, 520px);
}

body:not(.in-lobby) .game-stage .winner-banner {
  left: 50%;
  max-height: min(72dvh, 420px);
  max-width: min(86vw, 560px);
  overflow-y: auto;
  position: absolute;
  top: 26%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

body:not(.in-lobby) .game-stage .reveal-overlay {
  left: 50%;
  max-width: min(72vw, 430px);
  padding: clamp(6px, 1.2dvh, 14px) clamp(10px, 1.4vw, 18px);
  position: absolute;
  top: 21%;
  transform: translate(-50%, -50%);
  z-index: 9998;
}

/* Turn visibility and readable action feedback. */
body:not(.in-lobby) .game-stage .turn-callout {
  align-items: center;
  background: linear-gradient(180deg, rgba(255,228,92,.98), rgba(255,159,43,.96));
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.46), 0 0 26px rgba(255,228,92,.52);
  color: #140f08;
  display: none;
  gap: clamp(6px, .85vw, 11px);
  left: 50%;
  line-height: 1;
  padding: clamp(5px, .95dvh, 10px) clamp(10px, 1.45vw, 19px);
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: clamp(92px, 20dvh, 150px);
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10020;
}

body:not(.in-lobby) .game-stage .turn-callout.show {
  display: inline-flex;
}

body:not(.in-lobby) .game-stage .turn-callout strong {
  font-size: clamp(13px, 1.85vw, 23px);
  font-weight: 1000;
}

body:not(.in-lobby) .game-stage .turn-callout span {
  align-items: center;
  background: rgba(11,15,31,.92);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: clamp(14px, 2vw, 25px);
  font-weight: 1000;
  height: clamp(24px, 4.2dvh, 38px);
  justify-content: center;
  min-width: clamp(24px, 4.2dvh, 38px);
  padding: 0 .35em;
}

body:not(.in-lobby) .game-stage .seat.turn-spotlight {
  z-index: 95;
}

body:not(.in-lobby) .game-stage .seat.turn-spotlight::before {
  animation: activeSeatPulse 1s ease-in-out infinite;
  background:
    radial-gradient(circle, rgba(255,228,92,.34), rgba(39,231,255,.2) 45%, transparent 72%);
  border: 3px solid rgba(255,228,92,.72);
  box-shadow: 0 0 30px rgba(255,228,92,.75), 0 0 48px rgba(39,231,255,.42);
  height: clamp(86px, 18dvh, 150px);
  left: 50%;
  opacity: 1;
  pointer-events: none;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(86px, 18dvh, 150px);
  z-index: 0;
}

@keyframes activeSeatPulse {
  50% { filter: brightness(1.25); transform: translate(-50%, -50%) scale(1.06); }
}

body:not(.in-lobby) .game-stage .turn-label {
  background: linear-gradient(180deg, #fff16b, #ffb13d);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.38), 0 0 22px rgba(255,228,92,.54);
  color: #1b1207;
  display: none;
  font-size: clamp(10px, 1.45vw, 17px);
  font-weight: 1000;
  left: 50%;
  letter-spacing: 0;
  padding: clamp(3px, .6dvh, 7px) clamp(8px, 1vw, 12px);
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: calc(-1 * clamp(20px, 4dvh, 34px));
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 125;
}

body:not(.in-lobby) .game-stage .seat.turn-spotlight .turn-label {
  display: block;
}

body:not(.in-lobby) .game-stage .turn-timer {
  background:
    radial-gradient(circle, rgba(5,12,27,.92) 0 45%, transparent 46%),
    conic-gradient(from 90deg, #ffe45c var(--timer-progress, 0%), rgba(255,255,255,.16) 0);
  box-shadow: 0 0 0 3px rgba(255,228,92,.28), 0 0 30px rgba(255,228,92,.58), inset 0 0 18px rgba(255,228,92,.18);
  display: none;
  height: clamp(58px, 13dvh, 104px);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 13dvh, 104px);
  z-index: 115;
}

body:not(.in-lobby) .game-stage .seat.turn-spotlight .turn-timer {
  display: block;
}

body:not(.in-lobby) .game-stage .turn-timer span {
  align-items: center;
  background: #07101f;
  border: 2px solid rgba(255,228,92,.78);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: clamp(14px, 2.2vw, 26px);
  font-weight: 1000;
  height: clamp(26px, 5dvh, 44px);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: calc(-1 * clamp(8px, 1.4dvh, 14px));
  transform: translateX(-50%);
  width: clamp(26px, 5dvh, 44px);
  z-index: 2;
}

body:not(.in-lobby) .game-stage .seat.timer-expired .turn-timer {
  animation: timerPulse 650ms ease-in-out infinite;
  background:
    radial-gradient(circle, rgba(5,12,27,.92) 0 45%, transparent 46%),
    conic-gradient(from 90deg, #ff4d6d 100%, rgba(255,255,255,.12) 0);
}

body:not(.in-lobby) .game-stage .action-pop {
  background: linear-gradient(180deg, #fff16b, #ff9f2f);
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(0,0,0,.52), 0 0 30px rgba(255,228,92,.64);
  color: #160f08;
  font-size: clamp(16px, 2.4vw, 30px);
  font-weight: 1000;
  left: 50%;
  line-height: 1;
  min-height: 0;
  opacity: 0;
  padding: clamp(6px, 1dvh, 11px) clamp(12px, 1.7vw, 24px);
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: calc(-1 * clamp(48px, 9dvh, 78px));
  transform: translate(-50%, 8px) scale(.92);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
  z-index: 10030;
}

body:not(.in-lobby) .game-stage .action-pop:not(:empty) {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body:not(.in-lobby) .game-stage .action-pop::after {
  border-left: clamp(5px, .7vw, 8px) solid transparent;
  border-right: clamp(5px, .7vw, 8px) solid transparent;
  border-top: clamp(6px, .8vw, 10px) solid #ff9f2f;
  bottom: calc(-1 * clamp(5px, .7vw, 8px));
}

/* Focus the table on large action popups, active highlight, and timer only. */
body:not(.in-lobby) .game-stage .status-pill {
  display: none !important;
}

body:not(.in-lobby) .game-stage .turn-callout {
  top: clamp(92px, 20dvh, 150px);
}

body:not(.in-lobby) .game-stage .reveal-overlay {
  top: 29%;
}

body:not(.in-lobby) .game-stage .winner-banner {
  top: 22%;
  z-index: 10040;
}

body:not(.in-lobby) .game-stage .hole-cards:has(.revealed) {
  gap: clamp(8px, 1vw, 16px);
}

body:not(.in-lobby) .game-stage .hole-cards .card.revealed {
  animation: none;
  transform: none !important;
  z-index: 8;
}

body:not(.in-lobby) .game-stage .hole-cards .card.back {
  z-index: 7;
}

/* Keep turn/action popups inside the visible table area. */
body:not(.in-lobby) .game-stage .seat-top-left .action-pop,
body:not(.in-lobby) .game-stage .seat-top .action-pop,
body:not(.in-lobby) .game-stage .seat-top-right .action-pop,
body:not(.in-lobby) .game-stage .seat-left-upper .action-pop,
body:not(.in-lobby) .game-stage .seat-right-upper .action-pop {
  bottom: calc(-1 * clamp(50px, 10dvh, 84px));
  top: auto;
}

body:not(.in-lobby) .game-stage .seat-top-left .action-pop::after,
body:not(.in-lobby) .game-stage .seat-top .action-pop::after,
body:not(.in-lobby) .game-stage .seat-top-right .action-pop::after,
body:not(.in-lobby) .game-stage .seat-left-upper .action-pop::after,
body:not(.in-lobby) .game-stage .seat-right-upper .action-pop::after {
  border-bottom: clamp(6px, .8vw, 10px) solid #fff16b;
  border-top: 0;
  bottom: auto;
  top: calc(-1 * clamp(5px, .7vw, 8px));
}

body:not(.in-lobby) .game-stage .seat-top-left .turn-label,
body:not(.in-lobby) .game-stage .seat-top .turn-label,
body:not(.in-lobby) .game-stage .seat-top-right .turn-label,
body:not(.in-lobby) .game-stage .seat-left-upper .turn-label,
body:not(.in-lobby) .game-stage .seat-right-upper .turn-label {
  bottom: calc(-1 * clamp(22px, 4.5dvh, 38px));
  top: auto;
}

body:not(.in-lobby) .game-stage .seat-left-lower .action-pop,
body:not(.in-lobby) .game-stage .seat-left-upper .action-pop,
body:not(.in-lobby) .game-stage .seat-left-lower .turn-label,
body:not(.in-lobby) .game-stage .seat-left-upper .turn-label {
  left: 0;
  transform: translate(0, 8px) scale(.92);
}

body:not(.in-lobby) .game-stage .seat-left-lower .action-pop:not(:empty),
body:not(.in-lobby) .game-stage .seat-left-upper .action-pop:not(:empty) {
  transform: translate(0, 0) scale(1);
}

body:not(.in-lobby) .game-stage .seat-right-lower .action-pop,
body:not(.in-lobby) .game-stage .seat-right-upper .action-pop,
body:not(.in-lobby) .game-stage .seat-right-lower .turn-label,
body:not(.in-lobby) .game-stage .seat-right-upper .turn-label {
  left: auto;
  right: 0;
  transform: translate(0, 8px) scale(.92);
}

body:not(.in-lobby) .game-stage .seat-right-lower .action-pop:not(:empty),
body:not(.in-lobby) .game-stage .seat-right-upper .action-pop:not(:empty) {
  transform: translate(0, 0) scale(1);
}

body:not(.in-lobby) .game-stage .seat-left-lower .turn-label,
body:not(.in-lobby) .game-stage .seat-left-upper .turn-label,
body:not(.in-lobby) .game-stage .seat-right-lower .turn-label,
body:not(.in-lobby) .game-stage .seat-right-upper .turn-label {
  max-width: min(38vw, 260px);
}

/* Clip all card artwork inside card borders. */
.card,
.playing-card,
.card-face,
.card .face,
.card .pips,
.card .face-card {
  overflow: hidden;
}

.card {
  contain: paint;
  overflow: hidden !important;
}

.card *,
.playing-card *,
.card-face * {
  max-height: 100%;
  max-width: 100%;
}

.card .face {
  inset: 18% 13% 14%;
}

.card .pips {
  align-items: center;
  font-size: clamp(1rem, 28%, 2.65rem);
  gap: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  justify-items: center;
  line-height: .82;
}

.card .pips i {
  line-height: .82;
  max-height: 1em;
  overflow: hidden;
}

.card .pips-1 i:nth-child(1) {
  font-size: 1.7em;
}

.card .pips-9,
.card .pips-10 {
  font-size: clamp(.78rem, 22%, 1.92rem);
}

body:not(.in-lobby) .game-stage .community .card .pips {
  font-size: clamp(18px, 2.7vw, 34px);
}

body:not(.in-lobby) .game-stage .community .card .pips-9,
body:not(.in-lobby) .game-stage .community .card .pips-10 {
  font-size: clamp(14px, 2.15vw, 26px);
}

body:not(.in-lobby) .game-stage .hole-cards .card .pips {
  font-size: clamp(13px, 2vw, 25px);
}

body:not(.in-lobby) .game-stage .hole-cards .card .pips-9,
body:not(.in-lobby) .game-stage .hole-cards .card .pips-10 {
  font-size: clamp(11px, 1.6vw, 20px);
}

/* Mobile-friendly bet slider touch target. */
.bet-sizing input[type="range"],
body:not(.in-lobby) .game-stage .bet-sizing input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}

.bet-sizing input[type="range"]::-webkit-slider-runnable-track,
body:not(.in-lobby) .game-stage .bet-sizing input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--gold), var(--felt-light));
  border-radius: 999px;
  height: 10px;
}

.bet-sizing input[type="range"]::-webkit-slider-thumb,
body:not(.in-lobby) .game-stage .bet-sizing input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background:
    radial-gradient(circle at 35% 28%, #fff 0 13%, transparent 14%),
    linear-gradient(180deg, #fff16b, #ff9f2f);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 8px rgba(255,228,92,.2);
  cursor: pointer;
  height: 44px;
  margin-top: -17px;
  width: 44px;
}

.bet-sizing input[type="range"]::-moz-range-track,
body:not(.in-lobby) .game-stage .bet-sizing input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, var(--gold), var(--felt-light));
  border: 0;
  border-radius: 999px;
  height: 10px;
}

.bet-sizing input[type="range"]::-moz-range-thumb,
body:not(.in-lobby) .game-stage .bet-sizing input[type="range"]::-moz-range-thumb {
  background: linear-gradient(180deg, #fff16b, #ff9f2f);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 8px rgba(255,228,92,.2);
  cursor: pointer;
  height: 44px;
  width: 44px;
}

.bet-sizing,
body:not(.in-lobby) .game-stage .bet-sizing {
  touch-action: none;
}

/* Keep the countdown badge off cards and player nameplates. */
body:not(.in-lobby) .game-stage .seat-left-lower .turn-timer,
body:not(.in-lobby) .game-stage .seat-left-upper .turn-timer {
  left: 100%;
  top: 50%;
  transform: translate(10px, -50%);
}

body:not(.in-lobby) .game-stage .seat-right-lower .turn-timer,
body:not(.in-lobby) .game-stage .seat-right-upper .turn-timer {
  left: auto;
  right: 100%;
  top: 50%;
  transform: translate(-10px, -50%);
}

body:not(.in-lobby) .game-stage .seat-top-left .turn-timer,
body:not(.in-lobby) .game-stage .seat-top .turn-timer,
body:not(.in-lobby) .game-stage .seat-top-right .turn-timer {
  left: 50%;
  top: 100%;
  transform: translate(-50%, 8px);
}

body:not(.in-lobby) .game-stage .seat-bottom-left .turn-timer,
body:not(.in-lobby) .game-stage .seat-bottom .turn-timer,
body:not(.in-lobby) .game-stage .seat-bottom-right .turn-timer {
  left: 50%;
  top: auto;
  bottom: 100%;
  transform: translate(-50%, -8px);
}

body:not(.in-lobby) .game-stage .seat-left-lower .turn-timer span,
body:not(.in-lobby) .game-stage .seat-left-upper .turn-timer span,
body:not(.in-lobby) .game-stage .seat-right-lower .turn-timer span,
body:not(.in-lobby) .game-stage .seat-right-upper .turn-timer span {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Universal responsive table system.
   Final override layer: one viewport-driven table layout, no device-specific scaling. */
html,
body {
  max-width: 100%;
  overscroll-behavior: none;
  width: 100%;
}

body:not(.in-lobby),
body:not(.in-lobby) .app-viewport,
body:not(.in-lobby) .game-viewport {
  height: 100dvh;
  inset: 0;
  max-height: 100dvh;
  overflow: hidden !important;
  position: fixed;
  touch-action: none;
  width: 100vw;
}

body:not(.in-lobby) .game-viewport {
  --actions-h: clamp(48px, 12dvh, 86px);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
  --safe-top: env(safe-area-inset-top);
  --topbar-h: clamp(36px, 8dvh, 64px);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

body:not(.in-lobby) .game-stage {
  height: 100%;
  inset: 0;
  left: auto;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  top: auto;
  transform: none !important;
  transform-origin: center;
  width: 100%;
}

body:not(.in-lobby) .game-stage .game-shell {
  display: grid;
  gap: clamp(3px, .7dvh, 10px);
  grid-template-areas:
    "top"
    "table"
    "actions";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--actions-h);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(3px, .7dvh, 8px) clamp(5px, .9vw, 14px);
  width: 100%;
}

body:not(.in-lobby) .game-stage .top-bar {
  align-items: center;
  display: grid;
  gap: clamp(3px, .7vw, 10px);
  grid-area: top;
  grid-template-columns: minmax(78px, .45fr) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(2px, .45dvh, 7px) clamp(5px, .8vw, 12px);
  white-space: nowrap;
}

body:not(.in-lobby) .game-stage .top-bar > div:first-child {
  min-width: 0;
  overflow: hidden;
}

body:not(.in-lobby) .game-stage .top-bar .eyebrow,
body:not(.in-lobby) .game-stage .top-bar h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.in-lobby) .game-stage .top-bar .eyebrow {
  font-size: clamp(7px, 1.1vw, 12px);
  line-height: 1;
  margin: 0 0 clamp(1px, .2dvh, 3px);
}

body:not(.in-lobby) .game-stage .top-bar h1 {
  font-size: clamp(10px, 2vw, 27px);
  line-height: 1;
}

body:not(.in-lobby) .game-stage .score-strip {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(2px, .45vw, 8px);
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

body:not(.in-lobby) .game-stage .score-strip span,
body:not(.in-lobby) .game-stage .score-strip button {
  border-radius: clamp(4px, .8vw, 8px);
  flex: 0 1 auto;
  font-size: clamp(7px, 1.25vw, 14px);
  line-height: 1;
  min-height: clamp(22px, 4.8dvh, 38px);
  min-width: 0;
  overflow: hidden;
  padding: clamp(2px, .5dvh, 7px) clamp(3px, .65vw, 10px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.in-lobby) .game-stage .table-scene {
  grid-area: table;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

body:not(.in-lobby) .game-stage .poker-table {
  height: clamp(150px, 58dvh, 500px);
  left: 50%;
  max-height: 72%;
  max-width: 94%;
  min-height: 0;
  position: absolute;
  top: 51%;
  transform: translate(-50%, -50%);
  width: clamp(250px, 78vw, 1320px);
}

body:not(.in-lobby) .game-stage .community {
  gap: clamp(2px, .65vw, 12px);
  left: 50%;
  min-height: 0;
  position: absolute;
  top: 43%;
  transform: translate(-50%, -50%);
}

body:not(.in-lobby) .game-stage .community .card {
  font-size: clamp(15px, 3.1vw, 38px);
  height: clamp(54px, 17dvh, 142px);
  width: clamp(38px, 6.1vw, 98px);
}

body:not(.in-lobby) .game-stage .hole-cards {
  gap: clamp(1px, .35vw, 7px);
  min-height: 0;
}

body:not(.in-lobby) .game-stage .hole-cards .card {
  font-size: clamp(12px, 2.25vw, 30px);
  height: clamp(38px, 13dvh, 104px);
  width: clamp(27px, 4.7vw, 72px);
}

body:not(.in-lobby) .game-stage .seat-bottom .hole-cards .card {
  font-size: clamp(15px, 2.7vw, 34px);
  height: clamp(46px, 15dvh, 118px);
  width: clamp(32px, 5.35vw, 82px);
}

body:not(.in-lobby) .game-stage .card .corner {
  font-size: clamp(9px, 1.65vw, 21px);
}

body:not(.in-lobby) .game-stage .community .card .corner {
  font-size: clamp(11px, 2vw, 26px);
}

body:not(.in-lobby) .game-stage .card .pips {
  font-size: clamp(13px, 2.7vw, 34px);
}

body:not(.in-lobby) .game-stage .community .card .pips {
  font-size: clamp(16px, 3.35vw, 44px);
}

body:not(.in-lobby) .game-stage .seat {
  gap: clamp(1px, .22dvh, 4px);
  max-width: clamp(62px, 12vw, 150px);
  min-width: clamp(48px, 9vw, 122px);
}

body:not(.in-lobby) .game-stage .seat-bottom {
  bottom: clamp(1%, 2.2dvh, 7%);
  left: 50%;
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-left-lower {
  left: clamp(0px, .7vw, 12px);
  top: 61%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-left-upper {
  left: clamp(0px, .7vw, 12px);
  top: 31%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-top-left {
  left: 25%;
  top: clamp(0px, .5dvh, 8px);
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-top {
  left: 50%;
  top: clamp(0px, .25dvh, 5px);
  transform: translateX(-50%);
}

body:not(.in-lobby) .game-stage .seat-top-right {
  right: 25%;
  top: clamp(0px, .5dvh, 8px);
  transform: translateX(50%);
}

body:not(.in-lobby) .game-stage .seat-right-upper {
  right: clamp(0px, .7vw, 12px);
  top: 31%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-right-lower {
  right: clamp(0px, .7vw, 12px);
  top: 61%;
  transform: translateY(-50%);
}

body:not(.in-lobby) .game-stage .seat-bottom-left {
  bottom: clamp(0px, 1dvh, 12px);
  left: 18%;
  transform: none;
}

body:not(.in-lobby) .game-stage .seat-bottom-right {
  bottom: clamp(0px, 1dvh, 12px);
  right: 18%;
  transform: none;
}

body:not(.in-lobby) .game-stage .player-nameplate {
  border-radius: clamp(4px, .7vw, 7px);
  max-width: 100%;
  min-width: clamp(45px, 8.5vw, 110px);
  padding: clamp(1px, .35dvh, 5px) clamp(3px, .55vw, 8px);
}

body:not(.in-lobby) .game-stage .player-nameplate strong {
  font-size: clamp(8px, 1.35vw, 16px);
}

body:not(.in-lobby) .game-stage .player-nameplate span,
body:not(.in-lobby) .game-stage .hand-readout {
  font-size: clamp(7px, 1.05vw, 13px);
}

body:not(.in-lobby) .game-stage .turn-timer,
body:not(.in-lobby) .game-stage .seat-timer {
  height: clamp(34px, 9dvh, 96px);
  width: clamp(34px, 9dvh, 96px);
}

body:not(.in-lobby) .game-stage .turn-label,
body:not(.in-lobby) .game-stage .action-pop {
  font-size: clamp(9px, 1.45vw, 18px);
  max-width: min(42vw, 260px);
  padding: clamp(4px, .75dvh, 9px) clamp(7px, 1vw, 14px);
}

body:not(.in-lobby) .game-stage .pot-stack {
  bottom: 24%;
}

body:not(.in-lobby) .game-stage .pot-stack span,
body:not(.in-lobby) .game-stage .pot-display,
body:not(.in-lobby) .game-stage #potCenter {
  font-size: clamp(13px, 2.4vw, 30px);
  white-space: nowrap;
}

body:not(.in-lobby) .game-stage .odds-panel {
  bottom: calc(var(--actions-h) + clamp(2px, .6dvh, 8px));
  left: clamp(4px, 1vw, 12px);
  max-height: min(34dvh, 210px);
  max-width: clamp(108px, 22vw, 260px);
  overflow: hidden;
  position: absolute;
  transform: none;
  width: clamp(108px, 22vw, 260px);
}

body:not(.in-lobby) .game-stage .odds-panel .chat-header,
body:not(.in-lobby) .game-stage .odds-list {
  font-size: clamp(7px, 1.05vw, 13px);
}

body:not(.in-lobby) .game-stage .action-panel {
  align-items: stretch;
  bottom: auto;
  display: grid;
  grid-area: actions;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  left: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  right: auto;
  top: auto;
  z-index: 80;
}

body:not(.in-lobby) .game-stage .controls {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(4px, .9vw, 14px);
  height: 100%;
  margin: 0 auto;
  max-width: min(980px, 96vw);
  min-width: 0;
  width: 100%;
}

body:not(.in-lobby) .game-stage .controls button {
  flex: 1 1 0;
  font-size: clamp(12px, 2.4vw, 30px);
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 clamp(5px, .9vw, 16px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.in-lobby) .game-stage .controls .utility-action {
  display: none;
}

body:not(.in-lobby) .game-stage .bet-sizing {
  bottom: calc(var(--actions-h) + var(--safe-bottom) + clamp(4px, .8dvh, 10px));
  left: 50%;
  max-height: min(40dvh, 260px);
  max-width: min(92vw, 560px);
  overflow-y: auto;
  position: fixed;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  z-index: 9998;
}

body:not(.in-lobby) .game-stage .winner-banner {
  left: 50%;
  max-height: calc(100dvh - var(--topbar-h) - var(--actions-h) - 24px);
  max-width: min(86vw, 560px);
  overflow-y: auto;
  position: absolute;
  top: 24%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

body:not(.in-lobby) .game-stage .reveal-overlay {
  left: 50%;
  max-width: min(70vw, 420px);
  padding: clamp(4px, .9dvh, 12px) clamp(8px, 1.2vw, 18px);
  top: 20%;
}

body:not(.in-lobby) .game-stage .turn-callout {
  border-width: 1px;
  gap: clamp(4px, .65vw, 9px);
  padding: clamp(4px, .75dvh, 8px) clamp(8px, 1.1vw, 16px);
  top: clamp(54px, 17dvh, 140px);
}

body:not(.in-lobby) .game-stage .turn-callout strong {
  font-size: clamp(11px, 1.55vw, 20px);
}

body:not(.in-lobby) .game-stage .turn-callout span {
  font-size: clamp(12px, 1.7vw, 22px);
  height: clamp(22px, 3.7dvh, 34px);
  min-width: clamp(22px, 3.7dvh, 34px);
}

@media (max-width: 620px) {
  body:not(.in-lobby) .game-stage .top-bar {
    grid-template-columns: minmax(48px, .28fr) minmax(0, 1fr);
  }

  body:not(.in-lobby) .game-stage .top-bar h1 {
    display: none;
  }

  body:not(.in-lobby) .game-stage .score-strip span:nth-of-type(3),
  body:not(.in-lobby) .game-stage .score-strip span:nth-of-type(5) {
    display: none;
  }
}

@media (max-width: 430px) {
  body:not(.in-lobby) .game-viewport {
    --actions-h: clamp(44px, 10dvh, 64px);
    --topbar-h: clamp(32px, 7dvh, 48px);
  }

  body:not(.in-lobby) .game-stage .score-strip span:nth-of-type(2),
  body:not(.in-lobby) .game-stage .score-strip button:nth-of-type(2) {
    display: none;
  }

  body:not(.in-lobby) .game-stage .poker-table {
    height: clamp(130px, 54dvh, 360px);
    width: 88vw;
  }

  body:not(.in-lobby) .game-stage .seat-top-left {
    left: 22%;
  }

  body:not(.in-lobby) .game-stage .seat-top-right {
    right: 22%;
  }

  body:not(.in-lobby) .game-stage .seat-bottom-left {
    left: 13%;
  }

  body:not(.in-lobby) .game-stage .seat-bottom-right {
    right: 13%;
  }
}

@media (max-height: 420px) {
  body:not(.in-lobby) .game-viewport {
    --actions-h: clamp(42px, 11dvh, 58px);
    --topbar-h: clamp(30px, 8dvh, 42px);
  }

  body:not(.in-lobby) .game-stage .game-shell {
    gap: 2px;
    padding-block: 2px;
  }

  body:not(.in-lobby) .game-stage .top-bar h1 {
    display: none;
  }

  body:not(.in-lobby) .game-stage .score-strip span:nth-of-type(2),
  body:not(.in-lobby) .game-stage .score-strip span:nth-of-type(5) {
    display: none;
  }

  body:not(.in-lobby) .game-stage .poker-table {
    height: 55dvh;
    top: 51%;
  }

  body:not(.in-lobby) .game-stage .seat-top,
  body:not(.in-lobby) .game-stage .seat-top-left,
  body:not(.in-lobby) .game-stage .seat-top-right {
    top: 0;
  }

  body:not(.in-lobby) .game-stage .odds-panel {
    display: none;
  }
}

@media (min-width: 1000px) and (min-height: 680px) {
  body:not(.in-lobby) .game-viewport {
    --actions-h: clamp(68px, 10dvh, 96px);
    --topbar-h: clamp(54px, 7dvh, 76px);
  }

  body:not(.in-lobby) .game-stage .poker-table {
    height: min(58dvh, 520px);
    width: min(86vw, 1320px);
  }
}

/* Targeted mobile fixes: keep transient text readable without resizing the table. */
body:not(.in-lobby) .game-stage .winner-banner {
  box-sizing: border-box;
  left: 50%;
  max-width: min(72vw, 440px);
  overflow-wrap: anywhere;
  padding: clamp(6px, 1.1dvh, 12px) clamp(8px, 1.3vw, 16px);
  top: clamp(42px, 17dvh, 96px);
  transform: translate(-50%, 0);
  white-space: normal;
  word-break: normal;
}

body:not(.in-lobby) .game-stage .winner-banner strong,
body:not(.in-lobby) .game-stage .winner-banner span {
  line-height: 1.15;
  white-space: normal;
}

body:not(.in-lobby) .game-stage .action-pop,
body:not(.in-lobby) .game-stage .turn-label {
  font-size: clamp(7px, 1.05vw, 13px);
  line-height: 1;
  max-width: min(26vw, 150px);
  padding: clamp(2px, .45dvh, 5px) clamp(5px, .75vw, 9px);
  pointer-events: none;
  white-space: nowrap;
  z-index: 140;
}

body:not(.in-lobby) .game-stage .seat-top-left .action-pop,
body:not(.in-lobby) .game-stage .seat-top .action-pop,
body:not(.in-lobby) .game-stage .seat-top-right .action-pop,
body:not(.in-lobby) .game-stage .seat-left-upper .action-pop,
body:not(.in-lobby) .game-stage .seat-right-upper .action-pop {
  bottom: auto;
  top: 100%;
  transform: translate(-50%, 5px);
}

body:not(.in-lobby) .game-stage .seat-left-lower .action-pop,
body:not(.in-lobby) .game-stage .seat-left-upper .action-pop {
  left: 100%;
  right: auto;
  top: 50%;
  transform: translate(6px, -50%);
}

body:not(.in-lobby) .game-stage .seat-right-lower .action-pop,
body:not(.in-lobby) .game-stage .seat-right-upper .action-pop {
  left: auto;
  right: 100%;
  top: 50%;
  transform: translate(-6px, -50%);
}

body:not(.in-lobby) .game-stage .seat-bottom .action-pop,
body:not(.in-lobby) .game-stage .seat-bottom-left .action-pop,
body:not(.in-lobby) .game-stage .seat-bottom-right .action-pop {
  bottom: 100%;
  top: auto;
  transform: translate(-50%, -5px);
}

@media (orientation: landscape) and (max-height: 430px) {
  body:not(.in-lobby) .game-stage .winner-banner {
    max-width: min(66vw, 360px);
    top: clamp(34px, 13dvh, 58px);
  }

  body:not(.in-lobby) .game-stage .winner-banner strong {
    font-size: clamp(12px, 2.4vw, 18px);
  }

  body:not(.in-lobby) .game-stage .winner-banner span {
    font-size: clamp(9px, 1.8vw, 13px);
  }

  body:not(.in-lobby) .game-stage .action-pop,
  body:not(.in-lobby) .game-stage .turn-label {
    font-size: clamp(7px, 1.45vw, 11px);
    max-width: min(22vw, 118px);
    padding: 2px 6px;
  }

  body:not(.in-lobby) .game-stage .bet-sizing {
    animation: none !important;
    bottom: auto !important;
    box-sizing: border-box;
    gap: clamp(4px, 1dvh, 8px);
    left: 50%;
    max-height: min(38dvh, 148px);
    max-width: 85vw;
    overflow-y: auto;
    padding: clamp(6px, 1.2dvh, 10px);
    position: fixed !important;
    right: auto;
    top: clamp(72px, 22dvh, 96px) !important;
    transform: translateX(-50%) !important;
    width: min(85vw, 390px);
    z-index: 10020;
  }

  body:not(.in-lobby) .game-stage .bet-sizing label {
    gap: clamp(2px, .6dvh, 5px);
  }

  body:not(.in-lobby) .game-stage .bet-sizing label span,
  body:not(.in-lobby) .game-stage .bet-sizing small {
    font-size: clamp(9px, 1.8vw, 12px);
    line-height: 1.05;
  }

  body:not(.in-lobby) .game-stage .bet-sizing strong {
    font-size: clamp(14px, 3vw, 20px);
    line-height: 1;
  }

  body:not(.in-lobby) .game-stage .bet-sizing input[type="range"] {
    height: clamp(28px, 7dvh, 40px);
    margin: 0;
    touch-action: none;
  }

  body:not(.in-lobby) .game-stage .bet-sizing button {
    border-radius: 7px;
    font-size: clamp(10px, 2vw, 13px);
    min-height: clamp(28px, 7.4dvh, 36px);
    padding: clamp(4px, 1dvh, 7px) clamp(6px, 1.4vw, 10px);
  }

  body:not(.in-lobby) .game-stage .quick-bet-row,
  body:not(.in-lobby) .game-stage .bet-confirm-row {
    gap: clamp(4px, .8vw, 8px);
  }
}

/* Targeted overlay fixes: iPad bet sheet, iPhone top space, and scrollable menu. */
body:not(.in-lobby) .game-stage .bet-sizing,
body:not(.in-lobby) .game-stage .bet-sizing.show {
  z-index: 30000;
}

body:not(.in-lobby) .game-stage .bet-sizing input[type="range"] {
  position: relative;
  z-index: 30001;
}

body:not(.in-lobby) .game-stage .menu-panel,
body:not(.in-lobby) .game-stage .menu-panel.open {
  max-height: 80dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30010;
}

@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  body:not(.in-lobby) .game-stage .bet-sizing,
  body:not(.in-lobby) .game-stage .bet-sizing.show {
    bottom: clamp(82px, 13dvh, 116px);
    box-sizing: border-box;
    left: 50%;
    max-height: min(48dvh, 340px);
    max-width: min(85vw, 460px);
    overflow-y: auto;
    padding: clamp(10px, 1.4dvh, 16px);
    position: fixed;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    width: min(85vw, 460px);
  }

  body:not(.in-lobby) .game-stage .bet-sizing input[type="range"] {
    height: 54px !important;
    min-height: 54px !important;
  }

  body:not(.in-lobby) .game-stage .bet-sizing input[type="range"]::-webkit-slider-thumb {
    height: 44px;
    width: 44px;
  }

  body:not(.in-lobby) .game-stage .bet-sizing input[type="range"]::-moz-range-thumb {
    height: 44px;
    width: 44px;
  }

  body:not(.in-lobby) .game-stage .menu-panel,
  body:not(.in-lobby) .game-stage .menu-panel.open {
    max-height: min(80dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px));
    width: min(34rem, calc(100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 1rem));
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  body:not(.in-lobby) .app-viewport,
  body:not(.in-lobby) .game-viewport {
    padding-top: max(0px, calc(env(safe-area-inset-top, 0px) - 10px));
  }

  body:not(.in-lobby) .game-stage .game-shell {
    padding-top: clamp(1px, .25dvh, 4px);
  }

  body:not(.in-lobby) .game-stage .top-bar {
    padding-top: clamp(1px, .22dvh, 3px);
  }

  body:not(.in-lobby) .game-stage .menu-panel,
  body:not(.in-lobby) .game-stage .menu-panel.open {
    max-height: 80dvh;
    overflow-y: auto;
  }
}