:root {
  color-scheme: dark;
  --ink: #f5eddc;
  --muted: #b8b09f;
  --gold: #e0b86c;
  --red: #e56b67;
  --felt: #174f43;
  --felt-dark: #0c302a;
  --panel: #171b1b;
  --line: rgba(255, 255, 255, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(circle at 50% -20%, #33403c 0, #111616 42%, #090c0c 100%);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
.back { color: var(--muted); text-decoration: none; font-size: 0; }
.back::after { content:'← FELLAS CARD ROOM'; color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.2em; }
.hidden { display: none !important; }
.shell { width: min(1440px, 100%); margin: auto; padding: 26px; }
header { position:relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
header > div:first-child { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
header > div:first-child .eyebrow { display:none; }
header > div:first-child h1 { position:absolute; right:176px; top:50%; margin:0; font-size:1.7rem; transform:translateY(-50%); }
.header-actions { display:flex; align-items:center; gap:8px; }
.settings-gear { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:rgba(255,255,255,.05); font-size:1.05rem; line-height:1; }
.settings-gear:hover { color:var(--gold); border-color:rgba(224,184,108,.55); }
.settings-modal { width:min(520px,calc(100vw - 40px)); padding:0; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#13201e; box-shadow:0 28px 90px rgba(0,0,0,.65); }
.settings-modal::backdrop { background:rgba(3,8,7,.72); backdrop-filter:blur(3px); }
.settings-modal form { margin:0; }
.settings-heading { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 16px; border-bottom:1px solid var(--line); }
.settings-heading h2,.settings-heading p { margin:0; }
.settings-close { width:34px; height:34px; padding:0; color:var(--muted); background:transparent; font-size:1.5rem; }
.settings-modal section { padding:18px 24px; border-bottom:1px solid var(--line); }
.settings-label { margin-bottom:12px; }
.settings-label strong { display:block; margin-bottom:3px; }
.settings-label span { color:var(--muted); font-size:.75rem; }
.suit-order { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.suit-order-list { display:flex; gap:8px; }
.ignore-suits { display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.05); color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.ignore-suits:hover { color:var(--gold); border-color:rgba(224,184,108,.55); }
.ignore-suits input { width:15px; height:15px; margin:0; accent-color:var(--gold); cursor:pointer; }
.suit-order-item { display:grid; grid-template-columns:24px 32px 24px; align-items:center; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:rgba(255,255,255,.05); text-align:center; }
.suit-order-item.red { color:var(--red); }
.suit-order-item span { font-family:Georgia,serif; font-size:1.3rem; }
.suit-order-item button { min-width:0; padding:8px 3px; color:var(--muted); background:transparent; }
.suit-order-item button:disabled { opacity:.2; cursor:default; }
.card-order-setting { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.card-order-setting .settings-label { margin:0; }
#card-order-direction { min-width:145px; }
.settings-footer { display:flex; justify-content:flex-end; gap:8px; padding:16px 24px 20px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 500; line-height: .9; }
h2 { margin-bottom: 8px; font-family: Georgia, serif; font-weight: 500; }
.eyebrow { margin-bottom: 8px; color: var(--gold); font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
.status { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: #9fe0c5; font-size: .8rem; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; }
.status.offline { color: var(--red); }
.join-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: clamp(28px, 6vw, 70px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg, rgba(23,79,67,.7), rgba(14,25,23,.88)); box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.join-panel h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .8rem; }
.join-row, .chat-form { display: flex; gap: 8px; }
input { min-width: 0; flex: 1; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--ink); background: rgba(0,0,0,.25); }
input:focus { border-color: var(--gold); }
button { border: 0; border-radius: 9px; padding: 12px 18px; color: #15130e; background: var(--gold); font-weight: 800; }
.error { min-height: 1.4em; margin: 8px 0 0; color: var(--red); }
.game { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.table-wrap, .chat-panel { border: 1px solid var(--line); border-radius: 20px; background: rgba(15,19,19,.88); overflow: hidden; }
.scoreboard { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.score { padding: 11px 14px; border-right: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.score:last-child { border-right: 0; }
.score strong { float: right; color: var(--ink); font-size: 1rem; }
.felt > .corner-leaderboard { position:absolute; z-index:6; right:12px; bottom:12px; display:block; width:135px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(7,23,20,.88); }
.felt > .corner-leaderboard::before { content:"Points"; display:block; margin-bottom:4px; color:var(--gold); font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.felt > .corner-leaderboard .score { display:flex; justify-content:space-between; gap:8px; padding:2px 0; border:0; font-size:.67rem; }
.felt > .corner-leaderboard .score strong { float:none; font-size:.72rem; }
.corner-round-tally { position:absolute; z-index:6; left:12px; bottom:38px; width:190px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:rgba(7,23,20,.88); font-size:.64rem; text-align:left; }
.round-tally-title { display:block; margin-bottom:3px; color:var(--gold); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; }
.round-tally-row { display:grid; grid-template-columns:minmax(0,1fr) 34px 34px; gap:5px; padding:1px 0; color:var(--ink); }
.corner-round-tally.single-value .round-tally-row { grid-template-columns:minmax(0,1fr) 34px; }
.round-tally-row span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.round-tally-row span:not(:first-child) { text-align:right; font-weight:800; }
.round-tally-header { color:var(--muted); font-size:.54rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.felt { position:relative; display:grid; grid-template:82px 1fr 82px / 150px 1fr 150px; height:500px; padding:14px; background:radial-gradient(ellipse,#216e5d 0%,var(--felt) 56%,var(--felt-dark) 100%); box-shadow:inset 0 0 80px rgba(0,0,0,.5); }
.seat { position:relative; z-index:20; align-self:center; justify-self:center; width:140px; min-height:74px; padding:8px; border-radius:9px; color:var(--muted); background:rgba(0,0,0,.25); text-align:center; font-size:.76rem; overflow:visible; }
.seat.active { color: var(--ink); box-shadow: 0 0 0 1px var(--gold); }
.seat-info { display:flex; flex-direction:column; gap:2px; }
.seat-info strong { color:var(--ink); }
.seat-info small { color:var(--muted); font-size:.62rem; }
.seat-hand { display:flex; justify-content:center; min-height:32px; margin-top:5px; }
.seat-hand .playing-card { flex:0 0 22px; width:22px; height:31px; margin-left:-13px; padding:0; border-width:2px; border-radius:3px; }
.seat-hand .playing-card:first-child { margin-left:0; }
.west .seat-hand,.east .seat-hand { position:absolute; top:50%; flex-direction:column; align-items:center; height:150px; margin:0; transform:translateY(-50%); }
.west .seat-hand { left:calc(100% + 8px); }
.east .seat-hand { right:calc(100% + 8px); }
.seat.me { min-height:0; padding:0; background:transparent; box-shadow:none; }
.seat.me .seat-info,.seat.me .seat-hand { display:none; }
.west .seat-hand .playing-card,.east .seat-hand .playing-card { flex:0 0 31px; margin-left:0; margin-top:-19px; }
.west .seat-hand .playing-card:first-child,.east .seat-hand .playing-card:first-child { margin-top:0; }
.seat-play { position:absolute; z-index:100; width:76px; min-height:108px; }
.seat-play .playing-card { position:relative; z-index:101; }
.north .seat-play { top:calc(100% + 10px); left:50%; transform:translateX(-50%); }
.south .seat-play { bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); }
.west .seat-play { top:50%; left:calc(100% + 55px); transform:translateY(-50%); }
.east .seat-play { top:50%; right:calc(100% + 55px); transform:translateY(-50%); }
.seat em { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 999px; font-size: .55rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.dealer-badge { color: var(--muted); border: 1px solid var(--line); }
.turn-badge { color: #15130e; background: var(--gold); }
.north { grid-area: 1 / 2; } .west { grid-area: 2 / 1; } .east { grid-area: 2 / 3; } .south { grid-area: 3 / 2; }
.center { grid-area: 2 / 2; align-self: center; text-align: center; }
.round-line { display:contents; color:rgba(255,255,255,.6); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
#trick-label { position:absolute; z-index:7; left:14px; bottom:14px; }
#broken { position:absolute; z-index:7; top:14px; left:180px; color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
#led-label { position:absolute; top:14px; left:14px; color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.led-suit { display:inline-block; margin-right:4px; font-size:1.55rem; line-height:.65; vertical-align:-.2em; }
.led-suit.suit-1,.led-suit.suit-2 { color:#e5484d; }
.led-suit.suit-0,.led-suit.suit-3 { color:#111817; }
.game-text-log { max-height:100px; overflow:auto; padding:8px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.game-text-log div { padding:2px 0; }
.trick { display:none; }
.trick-play { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); font-size: .68rem; font-weight: 700; }
.trick-play.led { box-shadow: 0 0 0 2px var(--gold); border-radius: 10px; padding: 4px; }
.lead-badge { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #15130e; background: var(--gold); }
.last-trick { display:none; }
.last-trick-cards { display: flex; justify-content: center; gap: 4px; margin-top: 5px; }
.last-trick-card { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.last-trick-card .playing-card { width: 32px; height: 46px; padding: 3px; font-size: .62rem; }
.playing-card { display: inline-flex; flex-direction: column; justify-content: space-between; width: 76px; height: 108px; padding: 8px; border: 0; border-radius: 7px; color: #171717; background: #faf6e9; box-shadow: 0 7px 17px rgba(0,0,0,.35); text-align: left; font-family: Georgia, serif; font-size: 1.25rem; }
.playing-card.red { color: #bd2b32; }
.playing-card.led-card { outline:3px solid var(--gold); outline-offset:3px; }
.lead-card-badge { display:block; width:max-content; margin:7px auto 0; padding:2px 6px; font-size:.55rem; font-style:normal; font-weight:800; letter-spacing:.06em; line-height:1.2; text-transform:uppercase; }
.playing-card.card-back { border:5px solid #f4ead3; background-color:#173f66; background-image:repeating-linear-gradient(45deg,transparent 0 7px,rgba(255,255,255,.2) 7px 9px),repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,255,255,.12) 7px 9px); box-shadow:inset 0 0 0 2px #173f66,0 7px 17px rgba(0,0,0,.35); }
.playing-card.deal-in { opacity: 0; animation: deal-in .32s cubic-bezier(.2,.8,.25,1) forwards; }
.playing-card.flip-in { animation: flip-in .42s cubic-bezier(.2,.75,.3,1); }
.motion-card { position: fixed !important; z-index: 1000; margin: 0 !important; pointer-events: none; }
@keyframes deal-in {
  from { opacity: 0; transform: translate(34px, -45px) rotate(7deg) scale(.86); }
  to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}
@keyframes flip-in {
  0% { transform: perspective(500px) rotateY(90deg); }
  100% { transform: perspective(500px) rotateY(0); }
}
button.playing-card { transition: transform .15s, box-shadow .15s; }
button.playing-card:hover { transform: translateY(-9px); box-shadow: 0 14px 22px rgba(0,0,0,.45); }
button.playing-card:disabled { cursor: default; filter: saturate(.45) brightness(.7); transform: none; }
.card-suit { align-self: flex-end; font-size: 1.5rem; }
#notice { min-height:42px; margin:4px 0; color:var(--muted); }
.mobile-game-status { display:none; }
.chat-panel #notice { order:0; min-height:0; margin:0; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.chat-panel #notice::before { content:'Dealer: '; color:var(--gold); font-weight:700; }
.game-text-toggle { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.game-text-toggle input { min-width:auto; margin-right:4px; }
.turn-status { position:absolute; z-index:7; top:14px; right:14px; min-width:110px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:#15130e; background:var(--gold); font-size:.72rem; font-weight:800; text-align:center; }
.start { margin-top: 10px; }
.solo-button { margin-top: 10px; }
.phase-controls { display:flex; min-height:48px; align-items:center; justify-content:center; }
.hearts-setup,.pass-panel { display:flex; align-items:center; justify-content:center; gap:8px; }
.hearts-setup label { margin:0; }
.hearts-setup input { flex:0 0 66px; width:66px; padding:9px 10px; }
.hearts-setup button,.pass-panel button { padding:9px 12px; }
.pass-panel span { color:var(--muted); font-size:.75rem; }
.pass-panel.active { padding:7px 9px; border:2px solid var(--gold); border-radius:11px; }
.playing-card.selected { outline:3px solid #5aa9ff; outline-offset:2px; transform:translateY(-9px); }
.turn-prompt { display:none; }
.hand { display:flex; justify-content:center; min-height:82px; padding:3px 16px 5px; gap:5px; overflow:visible; }
.hand .playing-card { flex: 0 0 62px; width: 62px; height: 91px; }
.hand .playing-card:hover,.hand .playing-card.selected { position:relative; z-index:50; }
.game .hand-card-group { position:relative; z-index:20; display:flex; gap:5px; border-radius:11px; }
.game .hand-card-group .playing-card { position:relative; z-index:1; }
.game .hand.active-turn .hand-card-group::after { content:""; position:absolute; z-index:0; inset:-7px; border:3px solid var(--gold); border-radius:15px; pointer-events:none; }
.chat-panel { display: flex; flex-direction: column; min-height: 650px; }
.chat-heading { display: flex; justify-content: space-between; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.chat-heading h2 { display:none; }
.chat-heading h2, .chat-heading p { margin-bottom: 0; }
.messages { flex: 1; max-height: 555px; padding: 14px; overflow-y: auto; }
.message { margin-bottom: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.message strong { color: var(--gold); font-size: .78rem; }
.message time { margin-left: 7px; color: #777f7b; font-size: .68rem; }
.message p { margin: 2px 0 0; }
.chat-form { padding: 12px; border-top: 1px solid var(--line); }
.chat-form button { padding-inline: 13px; }

/* Active desktop tables consume the viewport instead of extending the page. */
.shell:has(> #game:not(.hidden)) { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.shell:has(> #game:not(.hidden)) > header { flex:0 0 auto; }
.shell:has(> #game:not(.hidden)) > .game { flex:1 1 auto; min-height:0; }
.game:not(.hidden) > .table-wrap { display:flex; min-height:0; flex-direction:column; }
.game:not(.hidden) .scoreboard { flex:0 0 auto; }
.game:not(.hidden) .felt { flex:1 1 auto; min-height:0; height:auto; }
.game:not(.hidden) .felt + div { flex:0 0 auto; }
.game:not(.hidden) > .chat-panel { min-height:0; }
.game:not(.hidden) > .chat-panel .messages { min-height:0; max-height:none; }

@media (max-width: 900px) {
  .join-panel, .game { grid-template-columns: 1fr; }
  .chat-panel { min-height: 360px; }
  .messages { max-height: 260px; }
}
@media (max-width: 600px) {
  .shell { padding: 14px; }
  .join-panel { padding: 24px; }
  .join-row { flex-direction: column; }
  .felt { grid-template-columns: 80px 1fr 80px; min-height: 390px; padding: 8px; }
  .seat { width: 78px; }
  .playing-card { width: 58px; height: 84px; }
}

/* Portrait card room: the table becomes a deliberate vertical play surface. */
@media (max-width: 820px) {
  html,body { max-width:100%; overflow-x:hidden; }
  body { min-height:100dvh; }
  button,input { min-height:44px; }
  .shell,.shell:has(> #game:not(.hidden)) { width:100%; height:auto; min-height:100dvh; padding:8px; overflow:visible; display:block; }
  header { min-height:42px; margin:0 0 8px; gap:8px; }
  header > div:first-child { min-width:0; gap:8px; flex-wrap:nowrap; align-items:center; }
  header > div:first-child h1 { position:static; overflow:hidden; margin:0; color:var(--ink); font:600 1.12rem/1.1 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; transform:none; }
  .back::after { content:'← ROOMS'; font-size:.62rem; letter-spacing:.12em; white-space:nowrap; }
  .status { flex:0 0 auto; padding:6px 8px; font-size:.65rem; }
  .header-actions { gap:5px; }
  .settings-gear { width:34px; height:34px; min-height:34px; }
  .join-panel { grid-template-columns:1fr; gap:18px; padding:20px 16px; border-radius:14px; }
  .join-panel h2 { font-size:1.8rem; }
  .join-row { flex-direction:column; }
  .game { display:block; }
  .table-wrap,.chat-panel { border-radius:12px; }
  .game:not(.hidden) > .table-wrap { display:block; overflow:visible; }
  .felt {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:repeat(9,auto);
    grid-template-areas:
      "turn turn"
      "status status"
      "north north"
      "west east"
      "center center"
      "south south"
      "led led"
      "scores scores"
      "tally tally";
    gap:8px;
    width:100%;
    height:auto !important;
    min-height:0;
    padding:10px;
    overflow:visible;
  }
  .north { grid-area:north; }
  .west { grid-area:west; }
  .east { grid-area:east; }
  .south { grid-area:south; }
  .center { grid-area:center; width:100%; padding:5px 0; }
  .seat { align-self:stretch; width:100%; max-width:180px; min-height:94px; padding:7px; overflow:visible; }
  .north,.south { justify-self:center; }
  .west { justify-self:end; }
  .east { justify-self:start; }
  .seat.me { min-height:94px; padding:7px; color:var(--ink); background:rgba(0,0,0,.25); }
  .seat.me .seat-info { display:flex; }
  .seat.me .seat-hand { display:none; }
  .seat-hand,.west .seat-hand,.east .seat-hand { position:static; display:flex; flex-direction:row; justify-content:center; align-items:center; width:100%; height:30px; min-height:30px; margin:4px 0 0; overflow:hidden; transform:none; }
  .west .seat-hand .playing-card,.east .seat-hand .playing-card,.seat-hand .playing-card { flex:0 0 20px; width:20px; height:28px; margin:0 0 0 -12px; padding:0; }
  .seat-hand .playing-card:first-child,.west .seat-hand .playing-card:first-child,.east .seat-hand .playing-card:first-child { margin-left:0; margin-top:0; }
  .seat-play,.north .seat-play,.south .seat-play,.west .seat-play,.east .seat-play { position:static; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width:100%; min-height:58px; margin-top:5px; transform:none; }
  .seat-play .playing-card { width:42px; height:59px; padding:4px; font-size:.78rem; }
  .seat-play .lead-card-badge { margin-top:3px; }
  .round-line { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
  #trick-label,#broken,#led-label { position:static; }
  #led-label { grid-area:led; min-height:20px; text-align:center; }
  .turn-status { position:static; grid-area:turn; justify-self:stretch; min-width:0; padding:8px 10px; border-radius:8px; }
  .mobile-game-status { display:block; grid-area:status; min-height:34px; padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; color:var(--muted); background:rgba(7,23,20,.8); font-size:.72rem; line-height:1.35; text-align:center; }
  .felt > .corner-leaderboard { position:static; grid-area:scores; width:100%; padding:7px 9px; }
  .felt > .corner-leaderboard::before { margin-bottom:2px; }
  .felt > .corner-leaderboard .score { padding:3px 0; }
  .corner-round-tally { position:static; grid-area:tally; width:100%; }
  .phase-controls { min-height:52px; }
  .hearts-setup,.pass-panel { flex-wrap:wrap; }
  .pass-panel span { flex-basis:100%; text-align:center; }
  .felt + div { position:sticky; z-index:150; bottom:0; padding:4px 0 max(5px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(10,28,25,.97); box-shadow:0 -10px 24px rgba(0,0,0,.35); }
  .hand { justify-content:flex-start; width:100%; min-height:88px; padding:5px 10px 8px; overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; scrollbar-width:thin; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .hand .playing-card { flex:0 0 58px; width:58px; height:84px; scroll-snap-align:center; }
  .game .hand-card-group { flex:0 0 max-content; width:max-content; padding:5px; }
  button.playing-card:hover { transform:none; }
  button.playing-card:active:not(:disabled),.playing-card.selected { transform:translateY(-6px); }
  .chat-panel { min-height:0; margin-top:10px; }
  .chat-heading { padding:10px 12px; }
  .messages { min-height:80px; max-height:180px !important; padding:10px 12px; }
  .chat-form { position:sticky; bottom:0; padding:8px; background:rgba(15,19,19,.98); }
  .chat-form input { min-width:0; }
  .settings-modal { max-height:calc(100dvh - 20px); overflow:auto; }
}

@media (max-width: 430px) {
  .seat { max-width:calc(50vw - 18px); font-size:.68rem; }
  .playing-card { width:54px; height:78px; }
  .hand .playing-card { flex-basis:56px; width:56px; height:82px; }
}