:root {
  color-scheme: dark;
  --bg: #131313; --surface: #0e0e0e; --text: #f5f5f5; --muted: #777;
  --line: #292929; --green: #28c281; --red: #ed586a;
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: inherit; -webkit-font-smoothing: antialiased }
h1,h2,h3,p { margin: 0 }
button,input,select { font: inherit }
button,a,input,select { -webkit-tap-highlight-color: transparent }
button { border: 0; color: inherit; cursor: pointer; transition: background .18s, box-shadow .18s, transform .16s }
button:active:not(:disabled) { transform: scale(.975) }
button:disabled { opacity: .36; cursor: default }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline: 2px solid #86b2e2; outline-offset: 3px }
a { color: inherit }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 }
button svg { pointer-events: none }
.shell { max-width: 440px; min-height: 100svh; margin: auto; padding: calc(12px + var(--safe-top)) 12px 114px }
.topbar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px }
.top-actions { display: flex; gap: 10px }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: #212121; border: 4px solid #0e0e0e; color: #bdbdbd; display: grid; place-items: center; font-size: 13px; font-weight: 600 }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; background: #0e0e0e; border-radius: 50%; color: #c8c8c8 }
.icon-button svg { width: 23px; height: 23px }
.balance { height: 168px; padding-top: 28px; text-align: center }
.balance p { color: #4c4c4c; font-size: 13px; margin-bottom: 10px }
.balance h1 { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 40px; line-height: 1.15; letter-spacing: -1.5px; font-weight: 600; font-variant-numeric: tabular-nums }
.balance-unit { color: #333; display: inline-flex; align-self: center }
.balance-unit svg { width: 28px; height: 28px; stroke-width: 2.3 }
.quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px }
.quick-action { border-radius: 16px; min-height: 56px; padding: 9px 2px 8px; background: #0e0e0e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600 }
.quick-action svg { height: 21px; width: 21px }
.quick-action:active { background: #252525 }
.promo { width: 100%; height: 88px; position: relative; display: block; text-align: left; padding: 13px 14px; margin-bottom: 12px; border-radius: 17px; overflow: hidden; background: linear-gradient(105deg,#121722,#2d5079); isolation: isolate }
.promo-copy { display: block; position: relative; z-index: 2 }
.promo-copy strong { display: block; font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: -.25px }
.promo-copy>span { font-size: 12px; display: flex; align-items: center; gap: 1px; margin-top: 5px; color: #f0f2f6 }
.promo-copy svg { width: 12px; height: 12px }
.promo-art { position: absolute; width: 144px; height: 100%; right: 3px; top: 0; pointer-events: none }
.promo-art .playing-card { width: 47px; height: 65px; font-size: 16px; position: absolute; top: 7px; right: 58px; transform: rotate(-19deg) skewY(4deg); background: linear-gradient(145deg,#fff 38%,#dce7f7); box-shadow: -1px 2px 0 #c9d7ec,-2px 3px 0 #849bc2,0 8px 9px #0a182c80 }
.promo-art .playing-card.red { top: 2px; right: 23px; transform: rotate(13deg) skewY(-5deg) }
.promo-art .chip { --chip: #77b5f3; position: absolute; bottom: 6px; right: 15px; width: 41px; height: 41px; font-size: 11px; color: #173970; border-color: #e0eeff; box-shadow: 0 2px 0 #356eb7,0 3px 0 #a6c9f3,0 5px 0 #2c619e,0 6px 0 #98beee,0 8px 0 #2d609b,0 10px 10px #081a3599; transform: rotate(-15deg) scaleY(.88) }
.promo-art .chip-under { --chip: #c2d5f1; right: 48px; bottom: 5px; transform: rotate(20deg) scaleY(.75); border-color: #f3f7ff; box-shadow: 0 2px 0 #6d8cbb,0 3px 0 #d0dff5,0 5px 0 #7794bc,0 7px 6px #0006; width: 33px; height: 33px; font-size: 9px }
.art-shadow { position: absolute; right: 10px; bottom: 0; width: 118px; height: 35px; border-radius: 50%; background: #0b1b3770; filter: blur(9px); transform: rotate(-12deg) }
.asset-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 58px; background: #0e0e0e; border-radius: 17px; margin-bottom: 12px }
.asset-icon,.tile-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #28c281; color: white }
.asset-icon svg { width: 30px; height: 30px; stroke-width: 1.6 }
.tile-icon svg { width: 25px; height: 25px }
.tile-icon.green { background: #2d9de8 }
.tile-icon.red { background: #f79e16 }
.tile-info { flex: 1; min-width: 0; display: block; text-align: left }
.tile-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tile-sub { display: block; margin-top: 3px; color: #656565; font-size: 12px; line-height: 1.25 }
.tile-end { margin-left: auto; flex-shrink: 0; display: block; text-align: right }
.tile-end b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap }
.tile-end small { display: block; font-size: 11px; color: #626262; margin-top: 4px }
.list-panel { background: #0e0e0e; border-radius: 17px; padding: 14px 12px 4px }
.section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px }
.section-head h2 { font-size: 14px; font-weight: 600; color: #d4d4d4 }
.section-head>span { font-size: 11px; color: #686868 }
.table-tile { display: flex; align-items: center; width: 100%; gap: 10px; text-align: left; padding: 9px 0; background: transparent; min-height: 62px }
.list-panel .table-tile+.table-tile { border-top: 1px solid #1a1a1a }
.row-arrow { color: #666; margin-left: auto; display: flex }
.row-arrow svg { width: 17px; height: 17px }
.notice { text-align: center; color: #626262; line-height: 1.6; font-size: 10px; margin: 17px 0 0 }
.notice span { color: #8d8d8d }
.entry-note { margin: 15px 5px 0; color: #8c8c8c; font-size: 11px; line-height: 1.6; text-align: center }
.entry-note button { color: #b9d7fb; padding: 0; background: none; font-size: inherit; text-decoration: underline }
.auth-link { text-decoration: none }
.auth-again { margin-top: 10px }
.startup-shell a { text-decoration: none }
.startup-name { font-size: 13px; color: #888 }
.startup-symbol { height: 21px; font-size: 21px; line-height: 21px; font-weight: 400 }
.startup-cards { position: absolute; right: 17px; top: 22px; font: 27px Georgia,serif; color: #e4efff; transform: rotate(-8deg) }
.nav-dock { position: fixed; z-index: 10; left: 50%; bottom: calc(13px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%); width: calc(100% - 30px); max-width: 410px }
.nav-dock:after { content: ''; position: absolute; z-index: -1; left: -15px; right: -15px; top: 38px; bottom: -20px; background: linear-gradient(#13131300,#131313 70%); pointer-events: none }
.bottom-nav { display: grid; grid-template-columns: repeat(4,1fr); padding: 3px; min-height: 57px; background: #0e0e0e; border: 1px solid #383838; border-radius: 34px }
.nav-item { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 4px; padding: 5px 3px; color: #c5c5c5; background: transparent; border-radius: 28px; font-size: 10px; font-weight: 600 }
.nav-item svg { width: 22px; height: 22px; stroke-width: 2 }
.nav-item.active { background: linear-gradient(130deg,#1d303e,#282828); color: #ddd }
.dock-caption { display: block; text-align: center; color: #777; font-size: 11px; margin-top: 35px }
::view-transition-old(root) { animation: page-out .13s ease-in both }
::view-transition-new(root) { animation: page-in .2s ease-out both }
@keyframes page-out { to { opacity: 0; transform: translateY(-3px) } }
@keyframes page-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }
.demo-banner { text-align: center; font-size: 9px; color: #777; margin-bottom: 12px }
.page-title { font-size: 26px; font-weight: 600; letter-spacing: -.65px; margin: 26px 2px 9px }
.intro { color: #909090; font-size: 13px; line-height: 1.65; margin-bottom: 20px }
.empty { padding: 35px 20px; text-align: center; background: #0b0b0b; border-radius: 18px }
.empty .spade { font: 40px Georgia; color: #999; margin-bottom: 15px }
.empty h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px }
.empty p { font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 20px }
.primary,.secondary,.danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; min-height: 45px; font-size: 13px; font-weight: 600; border-radius: 13px }
.primary { background: #eeeeec; color: #111 }
.primary:active { background: #ccc }
.secondary { background: #272727; color: #eee }
.danger { background: #342025; color: #ef9caa }
.wide { width: 100% }
.profile-top { text-align: center; padding: 27px 0 }
.profile-top .avatar { width: 66px; height: 66px; font-size: 24px; margin: 0 auto 14px }
.profile-top h1 { font-size: 22px; font-weight: 600; margin-bottom: 7px }
.profile-top p { color: #888; font-size: 13px }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px }
.stat { background: var(--surface); padding: 20px 5px; border-radius: 15px; text-align: center }
.stat strong { display: block; font-size: 25px; font-weight: 500; margin-bottom: 7px }
.stat span { color: #777; font-size: 11px }
.rule-block { padding: 18px; background: var(--surface); border-radius: 17px; margin-bottom: 12px }
.rule-block h3 { font-size: 14px; font-weight: 600; margin-bottom: 9px }
.rule-block p,.rule-block li { font-size: 12px; line-height: 1.8; color: #999 }
.rule-block ol { padding-left: 18px; margin: 0 }
.hand-rank { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #222; font-size: 12px }
.hand-rank:last-child { border: 0 }
.hand-rank span { font-size: 10px; color: #888; text-align: right }

/* Cards use one large pip and small independent corner indices. */
.playing-card { display: inline-block; position: relative; flex-shrink: 0; width: 42px; height: 60px; border: 1px solid #fff; border-radius: 5px; overflow: hidden; background: linear-gradient(120deg,#fff,#eaecef); color: #18212b; box-shadow: 0 2px 0 #9da4ad, 0 4px 7px #0005; font: 600 15px Georgia,serif }
.playing-card.red { color: #ce2e47 }
.playing-card .corner { position: absolute; top: 3px; left: 4px; display: flex; flex-direction: column; align-items: center; font: 700 .78em/.95 Georgia,serif }
.playing-card .corner b { font-size: .7em; font-weight: 400; margin-top: 2px }
.playing-card .corner:last-child { top: auto; left: auto; bottom: 3px; right: 4px; transform: rotate(180deg) }
.playing-card .pip { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 1.6em }
.playing-card.back { border: 3px solid #e9e9e9; background: repeating-linear-gradient(45deg,#c54359 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,#c54359 0 1px,#89223b 1px 4px) }
.playing-card.back:after { content: '♠'; position: absolute; inset: 4px; display: grid; place-items: center; border: 1px solid #f5c3cc88; border-radius: 2px; font-size: 20px; color: #f5e7eb }
.playing-card.placeholder { border: 1px solid #80b49a38; background: #003d2855; box-shadow: inset 0 1px 4px #00231766 }
.playing-card.placeholder:after { content: '♠'; position: absolute; inset: 0; display: grid; place-items: center; color: #93c7ae28; font-size: 23px }
.chip { --chip: #c82e4e; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 4px dashed #ffe4e7; outline: 1px solid var(--chip); background: radial-gradient(circle,transparent 0 45%,#fff1e7 46% 49%,transparent 50%),var(--chip); box-shadow: 0 3px 0 #77182b,0 5px 0 var(--chip),0 7px 8px #0005; color: white; font: 11px Georgia,serif; transform: rotate(-14deg) }

/* Table */
.table-shell { max-width: 850px; min-height: 100svh; margin: auto; padding: calc(16px + var(--safe-top)) 14px 20px; background: var(--bg) }
.table-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.center-title { text-align: center; min-width: 0 }
.center-title h1 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px }
.center-title p { color: #777; font-size: 11px; margin-top: 5px; letter-spacing: .4px }
.table-bar .icon-button { width: 36px; height: 36px; flex-shrink: 0 }
.connection { color: #8f9b92; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 10px; margin: 16px 0 0 }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #25b97f; display: inline-block }
.stage { height: 398px; position: relative; max-width: 650px; margin: 22px auto 0 }
.felt-rail { position: absolute; top: 54px; left: 44px; right: 44px; bottom: 47px; padding: 11px; border-radius: 48%; background: linear-gradient(120deg,#393b3c,#17191a 40%,#333637 75%,#171a19); border: 1px solid #4b504f; box-shadow: 0 12px 22px #0008,inset 0 2px 0 #757c7866,inset 0 -4px 0 #070908 }
.felt { height: 100%; position: relative; border-radius: 48%; border: 1px solid #65b78d; background: radial-gradient(ellipse at 50% 35%,#279c6899,#065536cc),repeating-conic-gradient(#288857 0% 25%,#22784e 0% 50%) 0/3px 3px; box-shadow: inset 0 2px 24px #002c20aa,0 0 0 3px #082719 }
.felt:after { content: ''; position: absolute; inset: 14px; border: 1px solid #b0ddbc33; border-radius: 48% }
.table-center { position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; z-index: 1 }
.felt-brand { font-size: 9px; letter-spacing: 2.3px; color: #abcfb755; margin-bottom: 18px; font-weight: 600 }
.community { display: flex; justify-content: center; gap: 4px }
.community .playing-card { width: 34px; height: 49px; font-size: 13px; animation: deal .3s both; animation-delay: calc(var(--i,0)*45ms) }
@keyframes deal { from { transform: translateY(-9px); opacity: 0 } to { transform: none; opacity: 1 } }
.pot-label { color: #c4dfce; font-size: 9px; margin: 15px 0 4px }
.pot-amount { color: white; font-size: 24px; font-weight: 600; letter-spacing: -.4px }
.pot-amount:before { content: '◉'; color: #e37589; font-size: 15px; margin-right: 5px }
.phase { color: #91bba3; font-size: 9px; margin-top: 8px }
.seat { position: absolute; z-index: 3; width: 78px; transform: translate(-50%,-50%); text-align: center }
.seat-avatar { position: relative; width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; margin: auto; border: 2px solid #656b66; background: linear-gradient(#505750,#2e3431); color: #e0e4e1; font-size: 16px; font-weight: 600; box-shadow: 0 3px 7px #0005 }
.seat:nth-of-type(3n) .seat-avatar { background: linear-gradient(#5b505d,#342e35); border-color: #756b77 }
.seat:nth-of-type(3n+1) .seat-avatar { background: linear-gradient(#4b6067,#2e3c40); border-color: #6d848a }
.seat-label { position: relative; margin-top: -2px; padding: 6px 4px; border-radius: 8px; background: #1b201e; border: 1px solid #4b514c; box-shadow: 0 3px 5px #0004 }
.seat-name { color: #e0e3e1; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.seat-stack { color: #fff; font-size: 12px; margin-top: 3px; font-weight: 600; font-variant-numeric: tabular-nums }
.badge { color: #79cda5; font-size: 7px; margin-right: 3px }
.seat.current .seat-avatar { border-color: #4bd19a; box-shadow: 0 0 0 3px #4bd19a22,0 3px 7px #0005 }
.seat.current .seat-label { border-color: #4bd19a }
.seat.folded { opacity: .42 }
.seat.empty-seat { opacity: .5 }
.seat.empty-seat .seat-avatar { background: #1a2520; border-style: dashed; border-color: #567262; color: #769180; box-shadow: none }
.seat-bet { margin-top: 5px; font-size: 9px; color: #e3acb6; text-shadow: 0 1px 3px #000 }
.seat-cards { height: 24px; display: flex; justify-content: center; gap: 2px; margin-bottom: -5px }
.seat-cards .playing-card { width: 23px; height: 32px; font-size: 8px; border-radius: 3px }
.seat-cards .playing-card.back { border-width: 2px }
.seat-cards .playing-card.back:after { inset: 2px; font-size: 14px }
.seat-cards .corner { top: 2px; left: 2px }
.seat-cards .corner:last-child { bottom: 2px; right: 2px; top: auto; left: auto }
.dealer { position: absolute; bottom: -3px; right: -7px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #222; background: #eee; border: 1px solid #aaa }
.blind { position: absolute; top: 0; right: -9px; font-size: 7px; background: #344b40; color: #d3e9d9; border: 1px solid #789c86; border-radius: 4px; padding: 2px }
.you-hand { display: flex; justify-content: center; gap: 7px; margin: 14px auto 10px; min-height: 65px }
.you-hand .playing-card { width: 46px; height: 65px; font-size: 18px; transform: rotate(-5deg) }
.you-hand .playing-card:last-child { transform: rotate(5deg) }
.hand-caption { color: #939993; font-size: 10px; text-align: center; margin-bottom: 18px }
.play-controls { max-width: 480px; margin: auto }
.turn-status { display: flex; justify-content: space-between; align-items: center; color: #aaa; font-size: 12px; margin-bottom: 9px }
.turn-status strong { color: #9bd1b5; font-weight: 600 }
.timer { color: #ddd; font-variant-numeric: tabular-nums }
.timer-bar { height: 2px; border-radius: 2px; background: #303832; margin-bottom: 12px; overflow: hidden }
.timer-bar span { display: block; background: #7ac7a1; height: 100%; width: var(--progress,100%); transition: width 1s linear }
.action-row { display: flex; gap: 8px }
.action-row button { flex: 1; min-width: 0; display: block; padding: 12px 5px; min-height: 46px; font-size: 12px }
.action-row button small { display: block; font-size: 10px; font-weight: 400; opacity: .7; margin-top: 3px }
.table-hint { color: #777; font-size: 10px; line-height: 1.6; text-align: center; margin: 12px 0 }
.lobby-actions { max-width: 400px; margin: auto; text-align: center }
.lobby-actions p { color: #888; font-size: 12px; line-height: 1.7; margin-bottom: 12px }
.table-code { font-size: 24px; font-family: ui-monospace,monospace; color: #ccc; letter-spacing: 4px }
.lobby-actions .primary,.lobby-actions .secondary { margin-top: 12px }
.leave-link { display: block; margin: 18px auto 0; font-size: 11px; color: #888; background: none; text-decoration: underline }
.result-box { background: #1a2820; border: 1px solid #3e654c; border-radius: 15px; padding: 18px; text-align: center; margin-bottom: 16px }
.eyebrow { font-size: 10px; color: #888 }
.result-box .eyebrow { color: #8db49b }
.result-box h2 { font-size: 20px; font-weight: 600; margin: 8px 0 }
.result-box p { font-size: 12px; color: #b3c7b8; line-height: 1.6 }
.event-line { color: #737c75; font-size: 10px; min-height: 15px; text-align: center; margin: 9px 0 }

/* Sheets and startup */
dialog { background: #181818; color: #eee; border: 1px solid #363636; border-radius: 20px; padding: 23px; width: calc(100% - 28px); max-width: 410px; box-shadow: 0 20px 70px #000a }
dialog::backdrop { background: #0009; backdrop-filter: blur(5px) }
.modal-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px }
.modal-title h2 { font-size: 22px; letter-spacing: -.5px; font-weight: 600 }
.modal-title button { color: #999; font-size: 26px; background: none; padding: 0 4px }
.field { display: block; font-size: 12px; color: #aaa; margin-bottom: 16px }
.field input,.field select { display: block; background: #0d0d0d; border: 1px solid #333; color: #eee; width: 100%; border-radius: 11px; min-height: 45px; padding: 12px; margin-top: 8px }
.field input::placeholder { color: #666 }
.field input[type=range] { padding: 0; min-height: 26px; accent-color: #b6c6bb }
.form-note { font-size: 11px; color: #858585; line-height: 1.7; margin: 15px 0 18px }
.raise-number { font-size: 34px; text-align: center; margin-bottom: 15px; font-variant-numeric: tabular-nums }
.presets { display: flex; gap: 6px; margin: 14px 0 }
.presets button { flex: 1; padding: 10px 3px; background: #2b2b2b; color: #ccc; border-radius: 9px; font-size: 11px }
.modal-error { font-size: 12px; color: #eda1ae; margin: 10px 0; min-height: 15px; line-height: 1.5 }
#toast { position: fixed; z-index: 30; bottom: 112px; left: 50%; transform: translate(-50%,10px); width: max-content; max-width: 90%; background: #303330; color: #eee; padding: 12px 16px; border: 1px solid #5c645e; border-radius: 12px; box-shadow: 0 8px 22px #0008; font-size: 12px; line-height: 1.5; pointer-events: none; opacity: 0; transition: .2s }
#toast.visible { opacity: 1; transform: translate(-50%,0) }
.boot { height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px }
.boot h1 { font-size: 17px; letter-spacing: 2px; font-weight: 600 }
.boot p { font-size: 12px; color: #888 }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: #222; color: #ddd; font: 34px Georgia,serif }
.loader { width: 22px; height: 22px; border: 2px solid #333; border-top-color: #bbb; border-radius: 50%; animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.login-card { text-align: center; padding-top: 80px }
.login-card .brand-mark { margin: 0 auto 25px }
.login-card h1 { font-size: 30px; font-weight: 600; margin-bottom: 15px }
.login-card>p { color: #888; font-size: 13px; line-height: 1.8; margin-bottom: 23px }
.login-card .primary { text-decoration: none }
.login-card .error-note { color: #dc8998; margin-top: 20px }

@media (max-width: 370px) {
  .quick-actions { gap: 7px }
  .quick-action { font-size: 11px }
  .promo { padding-left: 12px }
  .promo-copy strong { font-size: 14px }
  .promo-art { right: -4px; transform: scale(.93); transform-origin: right center }
  .tile-title { font-size: 14px }
  .tile-sub { font-size: 11px }
  .tile-end b { font-size: 13px }
  .table-shell { padding-left: 8px; padding-right: 8px }
  .stage { height: 370px }
  .felt-rail { left: 38px; right: 38px; padding: 9px }
  .seat { width: 72px }
  .seat-avatar { width: 37px; height: 37px; font-size: 14px }
  .seat-name { font-size: 8px }
  .seat-stack { font-size: 11px }
  .community { gap: 3px }
  .community .playing-card { width: 31px; height: 45px; font-size: 12px }
  .seat-cards .playing-card { width: 21px; height: 29px }
  .felt-brand { margin-bottom: 15px }
}
@media (min-width: 600px) {
  .shell { border-left: 1px solid #1a1a1a; border-right: 1px solid #1a1a1a; padding-left: 16px; padding-right: 16px }
  .table-shell { padding: 24px 35px }
  .table-bar { max-width: 650px; margin: auto }
  .stage { height: 440px }
  .felt-rail { top: 65px; bottom: 65px; left: 40px; right: 40px; padding: 16px; border-radius: 45% }
  .felt,.felt:after { border-radius: 45% }
  .community .playing-card { width: 51px; height: 72px; font-size: 19px }
  .seat { width: 95px }
  .seat-avatar { width: 51px; height: 51px; font-size: 19px }
  .seat-label { padding: 9px 6px }
  .seat-name { font-size: 10px }
  .seat-stack { font-size: 13px }
  .you-hand .playing-card { width: 52px; height: 74px; font-size: 21px }
  .table-center { top: 51% }
}
@media (prefers-reduced-motion: reduce) { * { animation: none!important; transition: none!important; scroll-behavior: auto!important } }