@font-face {
  font-family:Unbounded;
  src:url('/play/Unbounded.ttf') format('truetype');
  font-weight:800;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --void:#0b0b0f;
  --surface:#14141a;
  --raised:#1e1e26;
  --paper:#fafaf7;
  --secondary:#b5b5b6;
  --muted:#929297;
  --line:#333339;
  --accent:#ff2e7a;
  --felt:#181c20;
  --error:#ff787b;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  background:var(--void);
  color:var(--paper);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select {
  font:inherit;
}

button,a,input,select,summary {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.42;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
}

button {
  border:0;
  color:inherit;
  background:none;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px;
}

button:hover:enabled {
  filter:brightness(1.12);
}

[hidden] {
  display:none!important;
}

.skip {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:20;
  background:var(--paper);
  color:var(--void);
  padding:12px;
}

.skip:focus {
  top:12px;
}

.topbar {
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  border-bottom:1px solid #25252b;
  gap:24px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:17px;
  font-weight:850;
  letter-spacing:.1em;
  white-space:nowrap;
}

.brand-sub {
  display:block;
  font-size:8px;
  letter-spacing:.26em;
  color:var(--muted);
  margin-top:5px;
}

.top-actions {
  display:flex;
  align-items:center;
  gap:20px;
}

.top-actions #connection {
  color:var(--muted);
  font-size:12px;
}

.icon-button {
  font-size:21px;
  min-width:40px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:50%;
}

.text-button {
  font-weight:600;
  padding:12px 4px;
  font-size:13px;
  min-height:40px;
}

.primary,.secondary {
  padding:14px 22px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  min-height:46px;
}

.primary {
  background:var(--paper);
  color:#111116;
}

.secondary {
  background:#24242c;
  color:var(--paper);
  border:1px solid #373740;
}

.wide {
  width:100%;
}

.eyebrow {
  font-size:10px;
  letter-spacing:.18em;
  font-weight:750;
  color:var(--secondary);
  margin:0 0 12px;
}

.welcome {
  display:grid;
  grid-template-columns:minmax(0,1fr) 410px;
  gap:80px;
  max-width:1136px;
  margin:0 auto;
  padding:72px 36px 24px;
}

.welcome-copy {
  padding-top:18px;
}

.welcome h1 {
  font-family:Unbounded,Inter,sans-serif;
  font-size:clamp(44px,4.9vw,68px);
  line-height:1.11;
  letter-spacing:-.055em;
  margin:22px 0 24px;
}

.intro {
  font-size:17px;
  color:var(--secondary);
  line-height:1.7;
  max-width:440px;
}

.welcome-features {
  display:flex;
  gap:24px;
  font-size:11px;
  color:var(--secondary);
  margin-top:28px;
}

.welcome-features span:before {
  content:'•';
  color:var(--accent);
  margin-right:9px;
}

.entry-panel {
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  padding:28px;
  align-self:start;
  box-shadow:0 24px 70px #0004;
}

.tabbar {
  display:flex;
  border-bottom:1px solid var(--line);
  gap:24px;
  margin-bottom:26px;
}

.tabbar button {
  font-size:13px;
  font-weight:650;
  color:var(--muted);
  padding:0 0 16px;
  position:relative;
  min-height:40px;
}

.tabbar button[aria-selected=true] {
  color:var(--paper);
}

.tabbar button[aria-selected=true]:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--accent);
}

label {
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--secondary);
  font-size:12px;
  margin-bottom:18px;
  line-height:1.5;
}

input,select {
  background:#0c0c11;
  border:1px solid #37373e;
  border-radius:8px;
  color:var(--paper);
  padding:12px;
  width:100%;
  min-width:0;
  font-size:15px;
}

input[type=checkbox] {
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

input[type=range] {
  padding:0;
  accent-color:var(--accent);
  border:0;
}

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

.field-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-note {
  text-align:center;
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
  margin:16px 0 0;
}

.advanced {
  margin:0 0 22px;
  border-top:1px solid var(--line);
  padding-top:16px;
}

.advanced summary {
  font-size:12px;
  color:var(--secondary);
  cursor:pointer;
  padding:4px 0 12px;
}

.advanced label:first-of-type {
  margin-top:8px;
}

.code-input {
  font-size:24px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.mini-table {
  height:210px;
  position:relative;
  max-width:410px;
  margin-top:36px;
  background:radial-gradient(ellipse at 50% 80%,#24252e66,transparent 65%);
}

.mini-cards {
  position:absolute;
  top:20px;
  left:100px;
  display:flex;
}

.mini-cards>span {
  height:123px;
  width:86px;
  border-radius:8px;
  background:var(--paper);
  color:#111116;
  font-weight:750;
  font-size:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 28px #0005;
  transform:rotate(-14deg);
}

.mini-cards>span+span {
  color:#ad1830;
  transform:rotate(12deg) translate(-10px,-6px);
}

.mini-cards small {
  font-size:36px;
}

.mini-label {
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  letter-spacing:.26em;
  color:var(--muted);
}

.mini-chips {
  position:absolute;
  bottom:45px;
  left:82px;
  transform:rotate(-12deg);
}

.mini-chips i {
  display:block;
  width:51px;
  height:13px;
  background:var(--accent);
  border:3px dashed #fafaf7;
  border-radius:50%;
  margin-top:-5px;
  box-shadow:0 3px 0 #9d1b4b;
}

.welcome-footer {
  grid-column:1/-1;
  display:flex;
  gap:32px;
  justify-content:space-between;
  border-top:1px solid #25252b;
  padding-top:22px;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}

.welcome-footer>span:first-child {
  max-width:470px;
}

.welcome-footer a {
  text-decoration:none;
}

.header-table {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
}

.connection-dot {
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
}

.invite {
  font-family:ui-monospace,monospace;
  color:var(--paper);
  font-weight:700;
  letter-spacing:.13em;
  background:#202027;
  border:1px solid #36363e;
  border-radius:5px;
  padding:7px 10px;
}

.notice {
  padding:12px 32px;
  background:#39232c;
  color:#ffd2db;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:13px;
}

.notice button {
  font-size:23px;
}

.game {
  display:grid;
  grid-template-columns:minmax(0,1fr) 302px;
  min-height:calc(100dvh - 90px);
}

.table-column {
  min-width:0;
  padding:25px 32px 0;
  display:flex;
  flex-direction:column;
}

.table-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.table-toolbar .eyebrow {
  margin-bottom:5px;
  color:var(--paper);
}

#stakes-label {
  font-size:11px;
  color:var(--muted);
}

.table-tools {
  display:flex;
  gap:20px;
}

.table-stage {
  position:relative;
  min-height:clamp(300px,calc(100dvh - 360px),600px);
  flex:1;
  max-height:740px;
  margin:20px 0 16px;
  isolation:isolate;
}

#room-art {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:35%;
  opacity:.42;
  pointer-events:none;
}

.felt {
  position:absolute;
  inset:14% 9% 13%;
  border-radius:46%;
  background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--felt),#fff 6%),var(--felt));
  border:10px solid #1f2026;
  box-shadow:0 0 0 1px #41404788,0 22px 30px #0006,inset 0 0 30px #0003;
  z-index:-1;
}

.felt-line {
  position:absolute;
  inset:15px;
  border:1px solid #ffffff0e;
  border-radius:46%;
}

.table-watermark {
  position:absolute;
  bottom:17%;
  left:0;
  right:0;
  text-align:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5em;
  color:#ffffff0d;
}

.board-area {
  position:absolute;
  top:28%;
  left:15%;
  right:15%;
  text-align:center;
}

.street {
  font-size:9px;
  letter-spacing:.18em;
  color:var(--muted);
  height:12px;
  margin:0 0 10px;
  text-transform:uppercase;
}

.pot {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:15px;
}

.pot>span {
  font-size:9px;
  letter-spacing:.18em;
  color:var(--secondary);
}

.pot strong {
  font-size:28px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
}

.board,.cards {
  display:flex;
  gap:7px;
  justify-content:center;
}

.card {
  display:inline-flex;
  flex:0 0 auto;
  position:relative;
  width:56px;
  height:79px;
  border-radius:5px;
  background:var(--paper);
  color:#0b0b0f;
  box-shadow:0 4px 8px #0004;
  overflow:hidden;
}

.card.red {
  color:#ad1830;
}

.card.blue {
  color:#1756a0;
}

.card.green {
  color:#17613b;
}

.card canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.card .corner {
  position:absolute;
  top:4px;
  left:5px;
  font-size:14px;
  line-height:1.05;
  font-weight:750;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.card .corner.bottom {
  top:auto;
  left:auto;
  bottom:4px;
  right:5px;
  transform:rotate(180deg);
}

.card .suit {
  font-size:12px;
}

.card .card-pip {
  position:absolute;
  font-size:27px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.card.back {
  background:#1e232e;
  border:2px solid #e7d9ba22;
}

.card.back:after {
  content:'♠';
  display:grid;
  place-items:center;
  position:absolute;
  inset:5px;
  border:1px solid #e7d9ba44;
  color:#e7d9ba77;
  font-size:24px;
}

.card.empty {
  background:#ffffff03;
  box-shadow:none;
  border:1px dashed #ffffff19;
}

.second-board {
  margin-top:8px;
}

.second-board .card {
  width:40px;
  height:56px;
}

.side-pots {
  font-size:10px;
  color:var(--secondary);
  margin-top:10px;
}

.table-message {
  font-size:12px;
  color:var(--secondary);
  line-height:1.5;
  margin:12px 0;
}

.board-area>.primary {
  padding:11px 18px;
  min-height:40px;
  font-size:12px;
}

.seat {
  position:absolute;
  transform:translate(-50%,-50%);
  width:126px;
  text-align:center;
}

.avatar-wrap {
  position:relative;
  width:66px;
  height:66px;
  margin:0 auto 6px;
  background:#15151b;
  border:1px solid #46444e;
  border-radius:50%;
  box-shadow:0 4px 16px #0005;
}

.avatar-wrap canvas {
  width:100%;
  height:100%;
  border-radius:50%;
}

.avatar-fallback {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:24px;
  color:var(--secondary);
}

.seat.acting .avatar-wrap {
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 86%);
}

.seat.winner .avatar-wrap {
  box-shadow:0 0 0 4px #e7d9ba66;
  border-color:#e7d9ba;
}

.seat.folded {
  opacity:.42;
}

.seat.me .seat-name {
  color:var(--paper);
}

.seat-name {
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  color:var(--secondary);
}

.seat-stack {
  font-size:13px;
  font-variant-numeric:tabular-nums;
  margin-top:4px;
  font-weight:700;
}

.seat-tag {
  font-size:8px;
  letter-spacing:.12em;
  color:var(--muted);
  margin-top:4px;
  text-transform:uppercase;
  min-height:12px;
}

.seat-commit {
  position:absolute;
  top:46px;
  right:-2px;
  background:#26252c;
  border:1px solid #4c4953;
  border-radius:20px;
  min-width:30px;
  padding:4px 7px;
  font-size:10px;
  font-weight:650;
}

.seat-reaction {
  position:absolute;
  top:-20px;
  right:8px;
  background:var(--paper);
  color:var(--void);
  font-size:23px;
  border-radius:14px;
  padding:5px 8px;
  box-shadow:0 5px 15px #0005;
  animation:pop .2s ease-out;
}

.pause-overlay {
  position:absolute;
  inset:0;
  background:#0b0b0fcc;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:24px;
  font-weight:650;
  z-index:2;
}

.own-dock {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid #34343c;
  border-radius:14px;
  background:#14141a;
  padding:18px 22px;
  min-height:116px;
}

.own-hand {
  display:flex;
  align-items:center;
  gap:22px;
}

.own-hand .card {
  width:49px;
  height:69px;
}

.own-hand strong {
  font-size:26px;
  letter-spacing:-.04em;
  font-weight:600;
  white-space:nowrap;
}

.own-hand .eyebrow {
  font-size:8px;
  margin-bottom:7px;
}

.own-hand #own-status {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
}

.action-area {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  max-width:65%;
}

#action-message {
  font-size:11px;
  color:var(--secondary);
  margin:0 0 10px;
}

.action-buttons {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.action-buttons button {
  padding:13px 17px;
  min-width:74px;
}

.action-buttons .fold {
  color:#c1c1cd;
}

.action-buttons .all-in {
  color:#ffcc79;
  border-color:#67502b;
  background:#2c241a;
}

.raise-controls {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.raise-controls label {
  width:100%;
  font-size:10px;
  margin:0;
  text-align:right;
}

.raise-controls input[type=number] {
  width:112px;
}

.raise-controls input[type=range] {
  width:110px;
}

.table-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px 2px;
  color:var(--muted);
  font-size:10px;
  min-height:46px;
}

.sidebar {
  border-left:1px solid #2a2a31;
  background:#111116;
  display:flex;
  flex-direction:column;
  padding:28px 24px 20px;
  max-height:calc(100dvh - 90px);
  position:sticky;
  top:0;
  min-height:600px;
}

.sidebar-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.sidebar h2 {
  font-size:16px;
  letter-spacing:-.02em;
  margin:0;
}

.sidebar-heading>span {
  font-size:10px;
  color:var(--muted);
}

.sidebar-tabs {
  gap:17px;
  margin-bottom:8px;
}

.sidebar-tabs button {
  font-size:11px;
}

.side-panel {
  overflow:auto;
  flex:1;
  min-height:100px;
  padding-top:8px;
}

.player-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 0;
  border-bottom:1px solid #24242b;
  font-size:12px;
}

.player-row .player-name {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.player-row .player-name small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:4px;
}

.player-row strong {
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.player-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5b5b66;
  flex:0 0 auto;
}

.player-dot.acting {
  background:var(--accent);
}

.player-row button {
  color:var(--muted);
  font-size:15px;
  min-width:28px;
  min-height:36px;
}

.sidebar-bottom {
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid #2a2a31;
}

.sidebar-bottom .text-button {
  color:var(--muted);
  font-size:11px;
  margin-top:8px;
}

.reactions {
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin:22px 0;
}

.reactions button {
  padding:8px;
  min-width:34px;
  min-height:36px;
  border-radius:7px;
  background:#202027;
  font-size:17px;
}

.subtle {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
}

.history {
  list-style:none;
  padding:0;
  margin:22px 0;
}

.history li {
  border-left:1px solid #3a3943;
  padding:2px 0 18px 13px;
  font-size:11px;
  line-height:1.6;
  color:var(--secondary);
}

.history time {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-bottom:3px;
}

.manage-section {
  padding:16px 0;
  border-bottom:1px solid #2a2a31;
}

.manage-section h3 {
  font-size:12px;
  margin:0 0 12px;
}

.manage-section button {
  margin:4px 0;
}

.manage-section select {
  font-size:12px;
}

.manage-section label {
  font-size:11px;
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-bottom:24px;
}

.dialog-heading h2 {
  margin:0;
  font-size:23px;
  letter-spacing:-.04em;
}

dialog {
  background:var(--surface);
  color:var(--paper);
  border:1px solid #44434c;
  border-radius:18px;
  padding:28px;
  width:min(640px,calc(100vw - 32px));
  max-height:85dvh;
  overflow:auto;
  box-shadow:0 32px 100px #0008;
}

dialog::backdrop {
  background:#000a;
  backdrop-filter:blur(5px);
}

.dialog-heading .icon-button {
  flex-shrink:0;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

th,td {
  text-align:right;
  border-bottom:1px solid var(--line);
  padding:13px 8px;
  overflow-wrap:anywhere;
}

th {
  font-size:10px;
  color:var(--muted);
  font-weight:600;
}

td:first-child,th:first-child {
  text-align:left;
}

.transfer-row {
  padding:12px 0;
  font-size:13px;
  color:var(--secondary);
  border-bottom:1px solid var(--line);
}

.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  padding:14px 22px;
  background:var(--paper);
  color:var(--void);
  border-radius:9px;
  font-size:13px;
  box-shadow:0 8px 32px #0006;
  z-index:30;
}

.avatar-editor {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
}

.avatar-preview {
  display:block;
  width:120px;
  height:120px;
  margin:0 auto 24px;
}

.score-note {
  font-size:12px;
  color:var(--secondary);
  line-height:1.7;
}

.rank-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
}

.rank-row label {
  margin:0;
  flex:1;
}

.rank-row input {
  width:65px;
}

.review-row {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}

#toggle-sidebar {
  display:none;
}

.disconnected .connection-dot {
  background:#999;
}

.disconnected .card:not(.empty) {
  filter:brightness(.6);
}

.high-contrast {
  --secondary:#ddd;
  --muted:#c1c1c9;
  --line:#73737d;
}

.reduced-motion * {
  animation:none!important;
  transition:none!important;
}

@keyframes pop {
  from {
    transform:scale(.75);
    opacity:0;
  }
  to {
    transform:scale(1);
    opacity:1;
  }
}

@media(min-width:1600px) {
  .table-column {
    padding:32px 56px 0;
  }
  .game {
    grid-template-columns:minmax(0,1fr) 340px;
  }
  .sidebar {
    padding:32px;
  }
  .table-stage {
    min-height:clamp(360px,calc(100dvh - 360px),740px);
  }
  .seat {
    width:145px;
  }
  .avatar-wrap {
    width:80px;
    height:80px;
  }
  .seat-name {
    font-size:13px;
  }
  .seat-stack {
    font-size:15px;
  }
  .card {
    width:66px;
    height:93px;
  }
  .board-area {
    top:31%;
  }
  .pot strong {
    font-size:35px;
  }
}

@media(max-width:1190px) {
  .game {
    grid-template-columns:minmax(0,1fr) 266px;
  }
  .sidebar {
    padding:24px 18px;
  }
  .topbar {
    padding:0 24px;
  }
  .table-column {
    padding:24px 20px 0;
  }
  .welcome {
    gap:40px;
  }
  .table-stage {
    min-height:clamp(280px,calc(100dvh - 390px),470px);
  }
  .seat {
    width:102px;
  }
  .avatar-wrap {
    width:57px;
    height:57px;
  }
  .seat-commit {
    right:-4px;
  }
  .own-dock {
    padding:16px;
    gap:14px;
  }
  .own-hand {
    gap:12px;
  }
  .action-buttons {
    gap:6px;
  }
  .action-buttons button {
    font-size:12px;
    padding:12px;
    min-width:60px;
  }
  .own-hand strong {
    font-size:23px;
  }
  .own-hand .card {
    width:40px;
    height:57px;
  }
  .own-hand .cards {
    gap:4px;
  }
  .board .card {
    width:48px;
    height:68px;
  }
  .table-tools {
    gap:10px;
  }
}

@media(max-width:1000px) {
  .header-table #table-title {
    display:none;
  }
  .topbar {
    gap:16px;
  }
  .game {
    grid-template-columns:minmax(0,1fr);
  }
  .sidebar {
    position:static;
    max-height:none;
    min-height:0;
    border-top:1px solid var(--line);
    border-left:0;
  }
  .sidebar[hidden] {
    display:none!important;
  }
  .side-panel {
    max-height:400px;
  }
  .sidebar-bottom {
    margin-top:24px;
  }
  .table-stage {
    height:clamp(300px,calc(100dvh - 370px),510px);
    min-height:300px;
    flex:none;
  }
  .table-column {
    padding:20px 32px 0;
  }
  #toggle-sidebar {
    display:block;
  }
  .welcome {
    grid-template-columns:1fr 370px;
    gap:32px;
    padding:48px 28px 24px;
  }
  .welcome h1 {
    font-size:45px;
  }
  .welcome-features {
    flex-direction:column;
    gap:12px;
  }
  .intro {
    font-size:15px;
  }
  .entry-panel {
    padding:22px;
  }
  .mini-cards {
    left:50px;
  }
  .top-actions {
    gap:12px;
  }
  .own-dock .card {
    width:49px;
    height:69px;
  }
  .own-dock {
    min-height:118px;
  }
  .seat {
    width:116px;
  }
  .avatar-wrap {
    width:66px;
    height:66px;
  }
}

@media(max-width:720px) {
  .topbar {
    height:64px;
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
    gap:12px;
  }
  .brand {
    font-size:13px;
    gap:6px;
    letter-spacing:.06em;
  }
  .brand svg,.brand img {
    width:28px;
    height:28px;
  }
  .brand-sub {
    display:none;
  }
  .at-table .brand>span {
    display:none;
  }
  .top-actions {
    gap:10px;
  }
  .top-actions #connection {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .top-actions .icon-button {
    min-width:44px;
    min-height:44px;
    font-size:17px;
  }
  .header-table {
    gap:6px;
    margin-left:auto;
  }
  .header-table .connection-dot {
    display:none;
  }
  .invite {
    font-size:11px;
    padding:7px;
    white-space:nowrap;
    min-height:40px;
  }
  input,select {
    font-size:16px;
  }
  .text-button {
    min-height:44px;
  }
  .welcome {
    display:flex;
    flex-direction:column;
    padding:32px 22px;
    gap:32px;
  }
  .welcome-copy {
    padding-top:0;
  }
  .welcome h1 {
    font-size:clamp(32px,9vw,44px);
    margin:18px 0;
  }
  .intro {
    max-width:440px;
  }
  .welcome-features {
    flex-direction:row;
    flex-wrap:wrap;
    gap:16px;
    margin-top:20px;
  }
  .mini-table {
    display:none;
  }
  .entry-panel {
    width:100%;
    max-width:440px;
    align-self:center;
    padding:24px;
  }
  .welcome-footer {
    flex-direction:column;
    gap:12px;
  }
  .game {
    min-height:calc(100dvh - 64px);
  }
  .table-column {
    padding:12px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  }
  .table-toolbar {
    padding:0 4px;
    align-items:flex-start;
    gap:8px;
  }
  .table-stage {
    height:clamp(300px,calc(100dvh - 380px),470px);
    min-height:300px;
    margin:10px 0 12px;
  }
  .felt {
    inset:12% 10% 12%;
    border-width:7px;
    border-radius:44%;
  }
  .board-area {
    left:17%;
    right:17%;
    top:25%;
  }
  .board {
    gap:4px;
  }
  .board .card {
    width:clamp(26px,8vw,34px);
    height:clamp(37px,11.3vw,48px);
  }
  .card .corner {
    font-size:10px;
    top:3px;
    left:3px;
  }
  .card .corner.bottom {
    bottom:3px;
    right:3px;
  }
  .card .suit {
    font-size:9px;
  }
  .card .card-pip {
    font-size:22px;
  }
  .pot {
    margin-bottom:8px;
  }
  .street {margin-bottom:6px}
  .side-pots {margin-top:6px;font-size:9px}
  .table-message:empty {display:none}
  .pot strong {
    font-size:24px;
  }
  .seat {
    width:86px;
  }
  .table-stage.crowded .seat {
    width:74px;
  }
  .table-stage.crowded .avatar-wrap {
    width:40px;
    height:40px;
  }
  .avatar-wrap {
    width:49px;
    height:49px;
    margin-bottom:4px;
  }
  .seat-name {
    font-size:10px;
  }
  .seat-stack {
    font-size:11px;
  }
  .seat-tag {
    font-size:7px;
  }
  .seat-commit {
    font-size:9px;
    top:33px;
    right:-2px;
    padding:3px 5px;
    min-width:25px;
  }
  .seat-reaction {
    font-size:18px;
    top:-18px;
    right:0;
  }
  .own-dock {
    flex-direction:column;
    gap:14px;
    padding:16px;
    position:sticky;
    bottom:max(8px,env(safe-area-inset-bottom));
    z-index:3;
    box-shadow:0 -8px 24px #0005;
  }
  .own-hand {
    width:100%;
    justify-content:space-between;
    gap:16px;
  }
  .own-hand .card {
    width:43px;
    height:60px;
  }
  .own-hand .corner {
    font-size:12px;
  }
  .own-hand strong {
    font-size:25px;
  }
  .action-area {
    width:100%;
    max-width:100%;
    align-items:stretch;
  }
  .action-buttons {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
    gap:8px;
  }
  .action-buttons button {
    flex:1;
    min-width:65px;
    padding:12px 10px;
  }
  .action-buttons button:last-child:nth-child(odd) {
    grid-column:1/-1;
  }
  #action-message {
    text-align:center;
    font-size:11px;
  }
  .table-message {
    font-size:10px;
    margin:8px 0;
  }
  .board-area>.primary {
    font-size:11px;
    padding:10px 14px;
  }
  .raise-controls {
    justify-content:center;
  }
  .raise-controls label {
    text-align:center;
  }
  .raise-controls input[type=range] {
    flex:1;
    min-width:70px;
  }
  .table-footer {
    font-size:9px;
    padding:14px 4px;
  }
  .table-tools .text-button {
    font-size:11px;
    white-space:nowrap;
  }
  .table-tools {
    gap:10px;
    flex-shrink:0;
  }
  .player-row button,.reactions button {
    min-width:44px;
    min-height:44px;
  }
  .notice {
    padding:8px 16px;
    font-size:12px;
  }
  .sidebar {
    padding:24px;
  }
  .sidebar-tabs {
    gap:28px;
  }
  .table-watermark {
    letter-spacing:.3em;
    font-size:8px;
  }
}

.sidebar-dialog {
  width:min(460px,calc(100vw - 24px));
  height:calc(100dvh - 24px);
  max-height:calc(100dvh - 24px);
  margin:12px 12px 12px auto;
  padding:0;
}
.sidebar-dialog .sidebar {
  height:100%;
  min-height:0;
  max-height:none;
  padding:20px;
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  border:0;
}
.sidebar-dialog .sidebar-heading {gap:12px;margin-bottom:16px}
.sidebar-dialog .sidebar-heading>span {margin-left:auto}
.sidebar-dialog .side-panel {max-height:none;min-height:0;overscroll-behavior:contain}
.sidebar-dialog .sidebar-bottom {margin-top:16px;padding-top:16px}
.sidebar-dialog .icon-button {min-width:44px;min-height:44px}
.sidebar-dialog .sidebar-heading,.sidebar-dialog .sidebar-tabs,.sidebar-dialog .sidebar-bottom {flex-shrink:0}

@media(max-width:720px) and (max-height:650px) {
  .table-stage {height:240px;min-height:240px}
  .board-area {top:19%}
  .seat.me {display:none}
  .own-dock {padding:12px;gap:8px}
  .own-hand .card {width:35px;height:49px}
  .own-hand strong {font-size:22px}
  #action-message {margin-bottom:6px}
}

@media(max-width:720px) {
  .table-stage.crowded .board-area {top:30%}
  .table-stage.crowded .board {gap:3px}
  .table-stage.crowded .board .card {width:22px;height:32px}
}

/* In a short landscape viewport, keep controls beside the felt. */
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  .topbar {height:56px;padding:0 12px}
  .brand {font-size:13px}
  .brand-sub {display:none}
  .game {min-height:calc(100dvh - 56px)}
  .table-column {display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,30vw,260px);grid-template-rows:auto minmax(0,1fr) auto;gap:8px 12px;padding:8px 12px 0}
  .table-toolbar {grid-column:1/-1;padding:0}
  .table-stage {grid-column:1;grid-row:2;height:clamp(190px,calc(100dvh - 150px),320px);min-height:190px;margin:0}
  .board-area {top:20%;left:16%;right:16%}
  .board {gap:4px}
  .board .card {width:28px;height:40px}
  .street {margin-bottom:4px;height:10px;font-size:8px}
  .pot {margin-bottom:6px}
  .pot strong {font-size:22px}
  .side-pots {margin-top:4px;font-size:9px}
  .table-message {font-size:9px;margin:6px 0}
  .table-message:empty {display:none}
  .seat {width:76px}
  .avatar-wrap,.table-stage.crowded .avatar-wrap {width:36px;height:36px;margin-bottom:3px}
  .seat-name {font-size:9px}
  .seat-stack {font-size:10px;margin-top:2px}
  .seat-tag {font-size:7px;min-height:8px;margin-top:2px}
  .seat.me {display:none}
  .own-dock {grid-column:2;grid-row:2;align-self:center;flex-direction:column;min-height:0;padding:12px;gap:8px;position:sticky;bottom:8px}
  .own-hand {width:100%;justify-content:space-between;gap:8px}
  .own-hand .card {width:35px;height:49px}
  .own-hand strong {font-size:22px}
  .action-area {width:100%;max-width:100%;align-items:stretch}
  .action-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .action-buttons button {min-width:0;min-height:44px;padding:8px;font-size:12px}
  .action-buttons button:last-child:nth-child(odd) {grid-column:1/-1}
  #action-message {font-size:10px;text-align:center;margin-bottom:6px}
  .table-footer {grid-column:1/-1;min-height:20px;padding:4px 0;font-size:9px}
  .raise-controls {gap:8px;justify-content:center}
  .raise-controls label {text-align:center}
  .raise-controls input[type=range] {width:100%}
  .raise-controls input[type=number] {width:95px;font-size:16px}
  .sidebar-dialog .sidebar {padding:12px}
  .sidebar-dialog .sidebar-heading {margin-bottom:8px}
  .sidebar-dialog .sidebar-bottom {margin-top:8px;padding-top:8px}
}

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

.seat-cards {
  display:flex;
  gap:3px;
  justify-content:center;
  margin-top:5px;
}

.seat-cards .card {
  width:27px;
  height:38px;
}

.seat-cards .corner {
  font-size:8px;
  top:2px;
  left:2px;
}

.seat-cards .corner.bottom {
  display:none;
}

.seat-cards .suit {
  font-size:7px;
}

.seat-cards .card-pip {
  font-size:14px;
}

.field-error {
  color:var(--error);
}


main:focus { outline:none; }