:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #f3e9d3; background: #10080e; font-synthesis: none; --gold: #e9c776; --dim-gold: #a28448; --cream: #fff2c9; --muted: #b4a5a6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 35%, #33101e, #10080e 75%); }
button, input { font: inherit; }
button { cursor: pointer; border: 0; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #ffedac; outline-offset: 4px; }
button:not(:disabled):active { filter: brightness(.85); }
button, a, input { -webkit-user-select: none; user-select: none; }
button .icon { pointer-events: none; }
.icon { width: 26px; height: 26px; flex: 0 0 auto; }
#app { width: min(calc(100vw - 32px), calc((100dvh - 62px) * 1.775), 1420px); margin: 16px auto; }
.game-shell { position: relative; width: 100%; aspect-ratio: 1136 / 640; overflow: hidden; border: 1px solid #5a4129; border-radius: 14px; box-shadow: 0 24px 90px #0009, 0 0 0 5px #1a0a13, 0 0 0 6px #4a2f2b; container-type: inline-size; isolation: isolate; }
.app-footnote { display: flex; justify-content: space-between; padding: 14px 5px 0; font-size: 10px; color: #9c8c8d; letter-spacing: .08em; text-transform: uppercase; }
.coin { width: 1.1em; height: 1.1em; min-width: 1.1em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #ffe18c; box-shadow: inset 0 0 0 2px #a36d0c, 0 2px 2px #0005; background: linear-gradient(135deg, #fff0aa, #d6a91b 48%, #986117); color: #b47b16; font: 700 .8em Georgia, serif; vertical-align: middle; text-shadow: 0 1px #fff2a0; }
.icon-button { background: none; color: #e4d4a9; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.icon-button:hover { background: #f6d88918; color: #fff0bb; }
.icon-button.on { color: #ffda68; }
.utilities { display: flex; gap: 5px; align-items: center; }
.utilities .icon { width: 2.6cqw; height: 2.6cqw; }
.utilities .icon-button { width: 3.5cqw; height: 3.5cqw; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }

/* The lobby keeps the reference's jewel-toned tier cards and gold frame. */
.lobby { background: #170b13; }
.lobby-room { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 35% 29%, #69461c77, transparent 22%), repeating-linear-gradient(100deg, transparent 0 9%, #eec87209 9.3% 9.6%, transparent 10% 20%), linear-gradient(175deg, #180912 5%, #3a1121 48%, #092d25 75%, #073b29); }
.lobby-room:after { content: ''; position: absolute; left: 0; right: 0; bottom: 10%; height: 20%; background: repeating-linear-gradient(35deg, transparent 0 48px, #d7bc7a0d 49px 50px), linear-gradient(#0c5b4588, #032e23); transform: skewY(-5deg); border-top: 6px double #816334; }
.lobby-hostess { position: absolute; left: 0; top: 7%; width: 27.5%; height: 82%; object-fit: cover; object-position: left top; mask-image: linear-gradient(to right, #000 78%, transparent), linear-gradient(#000 92%, transparent); mask-composite: intersect; z-index: -1; }
.lobby-header { position: absolute; left: 33%; top: 0; width: 34%; height: 12%; text-align: center; padding-top: .6%; background: linear-gradient(#78602b, #2e1c10 70%); border-bottom: 2px solid #e0bd62; clip-path: polygon(0 0, 100% 0, 88% 92%, 12% 92%); }
.brand { font: italic 900 3.8cqw Georgia, serif; letter-spacing: -.06em; color: #fff2ac; text-shadow: 0 2px #b1882e, 2px 3px #000; line-height: 1; }
.lobby-header p { font-size: .6cqw; letter-spacing: .23em; color: #e5c978; margin: .4cqw 0 0; }
.local-connection { position: absolute; top: 3.6%; right: 3%; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #6cda72; }
.local-connection .icon { width: 3cqw; height: 3cqw; }
.local-connection span { font-size: .62cqw; letter-spacing: .14em; }
.lobby-settings { position: absolute; top: 2.8%; left: 2.1%; width: 3.7cqw; height: 3.7cqw; color: #f2d390; background: #160b13b0; border: 1px solid #b9924c; }
.wild-intro { position: absolute; top: 72%; left: 3%; width: 22%; display: flex; flex-wrap: wrap; gap: .6cqw; text-align: center; justify-content: center; filter: drop-shadow(0 2px 3px #000); }
.wild-intro > span { background: linear-gradient(140deg, #fff9df, #cba13c); width: 2.8cqw; height: 3.5cqw; border-radius: 3px; font: bold 2.4cqw Georgia, serif; color: #6b1431; transform: rotate(-8deg); border: 1px solid #fff5ad; }
.wild-intro > span:nth-child(even) { color: #17252b; transform: rotate(8deg); }
.wild-intro p { margin: .4cqw 0 0; width: 100%; color: #d5c3a7; font-size: .82cqw; line-height: 1.5; letter-spacing: .06em; }
.wild-intro p b { color: #ffe5a9; font-size: .93cqw; letter-spacing: .03em; }
.lobby-tiers { position: absolute; left: 29%; right: 2.5%; top: 18%; bottom: 14%; display: grid; grid-template-columns: .94fr 1fr 1fr; grid-template-rows: 1fr 1fr; column-gap: 2.5%; row-gap: 7%; }
.level-card { position: relative; text-align: center; border-radius: 9px; border: 2px solid #e5bf6677; box-shadow: inset 0 0 0 3px #ffffff15, 0 7px 5px #0006; background: radial-gradient(at 20% 20%, #c756b1, transparent 75%), linear-gradient(150deg, #a735b5, #5b1866); padding: 2cqw .7cqw .7cqw; }
.level-card:before { content: '♠ ♡ ♣ ♢'; position: absolute; inset: 0; font-size: 4cqw; line-height: 1; color: #ffffff08; letter-spacing: .1em; overflow: hidden; padding-top: 7cqw; pointer-events: none; }
.level-card.featured { grid-row: span 2; background: linear-gradient(170deg, #0cbec6, #62be4d 32%, #e5ad34 56%, #ce2287 80%, #7208ad); padding-top: 13cqw; }
.level-9 { background: radial-gradient(at 20% 20%, #26bec9, transparent 75%), linear-gradient(150deg, #048caa, #084d86); }
.level-10 { background: radial-gradient(at 20% 20%, #e69d28, transparent 75%), linear-gradient(150deg, #d87217, #982e27); }
.level-11 { background: radial-gradient(at 20% 20%, #abca41, transparent 75%), linear-gradient(150deg, #5fae2d, #063963); }
.level-card h2 { position: absolute; top: -2.4cqw; right: .7cqw; margin: 0; color: #fff3a9; font-size: 4.7cqw; line-height: 1; font-style: italic; letter-spacing: -.08em; text-shadow: 0 3px #bf720a, 3px 4px #4e1603, -1px -1px #e29a2e; }
.level-card h2 small { font-size: 3cqw; }
.level-card dl { position: relative; margin: 0; color: #ffe99f; text-shadow: 1px 2px #5b3c21; font-size: 1.63cqw; line-height: 1.4; }
.level-card dl div { display: flex; gap: .4cqw; justify-content: center; }
.level-card dt:after { content: ':'; }
.level-card dd { margin: 0; }
.featured dl div { display: block; line-height: 1.15; margin-bottom: .7cqw; }
.featured dl dd { font-size: 2.5cqw; }
.featured h2 { right: -.2cqw; font-size: 5.5cqw; top: -2.5cqw; }
.featured h2 small { font-size: 3.8cqw; }
.hot-label { position: absolute; left: -2.5cqw; top: -3.5cqw; transform: rotate(-11deg); padding: .8cqw .9cqw; color: #ffe886; font: italic 900 2.1cqw Georgia, serif; background: linear-gradient(140deg, #ff9700, #c03312); border-radius: 60% 15% 50% 20%; box-shadow: 0 3px 0 #792717; z-index: 2; }
.tier-art { position: absolute; left: -.4cqw; top: -2.8cqw; width: 6cqw; height: 5cqw; transform: rotate(-5deg); }
.mini-card { display: inline-block; position: absolute; width: 3.2cqw; height: 4.5cqw; background: linear-gradient(130deg, #fff8d8, #e7b33f); border: 1px solid #fff6be; border-radius: 3px; color: #151f28; font: bold 1.3cqw Georgia, serif; text-align: left; padding: .25cqw; transform: rotate(-12deg); box-shadow: 0 3px 4px #0009; }
.mini-card span { display: block; font-size: 1.8cqw; text-align: center; }
.mini-card:nth-child(2) { left: 2.1cqw; top: .3cqw; transform: rotate(18deg); color: #981d40; }
.coin-stack { position: absolute; bottom: -.7cqw; left: -1cqw; display: flex; align-items: end; }
.coin-stack .coin { font-size: 2cqw; margin-right: -.6cqw; }
.coin-stack .coin:nth-child(2) { transform: translateY(-.6cqw); }
.featured .tier-art { top: 3.5cqw; left: 27%; transform: scale(1.5); }
.join-button { position: absolute; left: 8%; bottom: 5%; width: 84%; height: 3.7cqw; border-radius: 6px; border: 2px solid #ffd662; color: #fff8e0; background: linear-gradient(#ffd857 0%, #f39d09 48%, #d77300 52%, #e99108); text-shadow: 0 2px #9b4b09; font-size: 1.7cqw; font-weight: 800; box-shadow: inset 0 0 0 2px #f1ad19, 0 3px 0 #80420b; display: flex; gap: .7cqw; align-items: center; justify-content: center; }
.join-button .icon { width: 2cqw; height: 2cqw; stroke-width: 4px; }
.join-button:hover:not(:disabled) { filter: brightness(1.12); }
.join-button:disabled { background: linear-gradient(#65665b, #393a32); border-color: #909079; font-size: 1.12cqw; text-shadow: none; box-shadow: inset 0 0 0 2px #666; }
.featured .join-button { bottom: 6%; }
.more-tables { position: absolute; bottom: 10.9%; right: 3%; display: flex; align-items: center; gap: .6cqw; font-size: .9cqw; background: none; color: #f7d99a; }
.more-tables span { color: #bba486; font-size: .7cqw; }
.more-tables .icon { width: 1.2cqw; height: 1.2cqw; }
.lobby-footer { position: absolute; bottom: 0; width: 100%; height: 10.9%; display: flex; align-items: center; justify-content: space-between; padding: 0 2.3%; border-top: 2px solid #f5d898; background: linear-gradient(#b3975d, #6b521f 50%, #3d2c13); box-shadow: inset 0 1px 1px #ffedb1; }
.credit-label { font-size: .79cqw; letter-spacing: .12em; color: #f5e1ae; line-height: 1.6; }
.credit-label small { font-size: .7cqw; letter-spacing: .04em; color: #d2bd8f; }
.lobby-profile { position: absolute; left: 36%; right: 36%; top: -1px; bottom: 0; display: flex; align-items: center; gap: 1cqw; padding: 0 2%; background: linear-gradient(#271e16, #1d130b); border-radius: 0 0 50% 50% / 0 0 100% 100%; border-bottom: 1px solid #ebcf82; }
.lobby-profile img { width: 4.9cqw; height: 4.9cqw; border-radius: 50%; border: 2px solid #f2d88e; object-fit: cover; }
.lobby-profile > div { flex: 1; min-width: 0; }
.lobby-profile div > span { font-size: 1.6cqw; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-profile strong { font-size: 1.65cqw; display: flex; align-items: center; gap: .4cqw; color: #ffe55c; font-weight: 400; margin-top: .1cqw; }
.lobby-footer > .utilities { margin-left: auto; }

.mini-card { left: 0; top: 0; }

/* Independently rendered table: none of its changing controls are screenshots. */
.table-screen { background: #330013; }
.velvet { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 50% 25%, #85153170, transparent 65%), repeating-radial-gradient(ellipse at 50% 20%, #5b071524 0 4px, transparent 6px 17px), linear-gradient(#200009, #48041d 60%, #0b0611); }
.table-wood { position: absolute; left: 7.8%; top: 23%; width: 82.6%; height: 56.5%; border-radius: 40% / 48%; background: repeating-linear-gradient(1deg, #382214 0, #23150c 3px, #2b1d12 5px); border: .35cqw solid #130e0a; box-shadow: 0 1.6cqw 1cqw #0007, inset 0 0 .3cqw .2cqw #8f6c37, 0 0 0 1px #a47f42; }
.table-felt { position: absolute; inset: 1.6cqw; border-radius: 40% / 48%; background: radial-gradient(ellipse at 50% 55%, #0b6b51, #034835 80%); border: .35cqw solid #072a1e; box-shadow: inset 0 0 3cqw #001f18, 0 -.23cqw 0 #a88b3c; overflow: hidden; }
.table-felt:after { content: ''; position: absolute; inset: 0; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.4' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
.felt-line { position: absolute; inset: 1.3cqw; border-radius: 42% / 48%; border: 1px solid #91b68b1a; }
.felt-watermark { position: absolute; top: 49%; left: 30%; right: 30%; font: italic 900 4.3cqw Georgia, serif; text-align: center; color: #8acf9d12; letter-spacing: -.05em; }
.felt-watermark small { display: block; font: .67cqw Arial, sans-serif; letter-spacing: .18em; color: #c8d6b025; margin-top: .35cqw; }
.table-dealer { position: absolute; left: 43%; top: 0; width: 14.5%; height: 27%; object-fit: contain; object-position: top; z-index: -1; mask-image: linear-gradient(#000 95%, transparent); }
.table-toolbar { position: absolute; top: 2.7%; left: 3.1%; right: 2.8%; height: 12%; display: flex; justify-content: space-between; }
.toolbar-left, .toolbar-right { display: flex; align-items: flex-start; gap: 1.2cqw; }
.gold-square { background: linear-gradient(145deg, #3d372a, #080a0b 65%); border: 2px solid #8c713e; border-radius: 4px; color: #d9be7f; box-shadow: 0 4px 2px #0009, inset 0 0 0 3px #15171a; width: 6.2cqw; height: 6.2cqw; display: flex; align-items: center; justify-content: center; }
.gold-square .icon { width: 3.8cqw; height: 3.8cqw; stroke-width: 1.7; }
.gold-square:hover { color: #fff0b8; border-color: #c3a668; }
.level-switch { display: flex; align-items: center; gap: 1.7cqw; border: 1px solid #533038; box-shadow: inset 0 0 0 3px #240910, 0 3px 2px #16060b; border-radius: 3px; height: 4.7cqw; padding: 0 .9cqw; background: #13090f; color: #e2e0da; }
.level-switch .icon { width: 2.7cqw; height: 2.7cqw; color: #45d15b; }
.level-switch b { font-size: 2.6cqw; font-weight: 400; }
.level-switch > span { color: #ffdb57; font-size: 2.8cqw; }
.gear-button { width: 3.7cqw; height: 3.7cqw; color: #ba9a66; }
.gear-button .icon { width: 2.7cqw; height: 2.7cqw; }
.recent-button { width: 7.5cqw; height: 7cqw; display: flex; flex-direction: column; gap: .4cqw; align-items: center; justify-content: center; border-radius: 3px; background: radial-gradient(at 50% 30%, #694a13, #1d1921); color: #f2d17e; border: 1px solid #987b41; font-weight: bold; font-size: 1cqw; }
.recent-button .icon { width: 3.6cqw; height: 3.6cqw; }
.pot-area { position: absolute; left: 38.8%; top: 34.4%; width: 22.5%; text-align: center; }
.pot-label { position: absolute; top: -1.2cqw; left: 0; width: 100%; color: #98cbb1; font-size: .67cqw; letter-spacing: .18em; }
.pot-value { display: flex; align-items: center; justify-content: space-between; padding: .5cqw 2cqw .6cqw 1.1cqw; border-radius: 2.5cqw; background: #00392cc9; color: #ffce23; border: 1px solid #27694c88; box-shadow: 0 2px 0 #79ba9730; font-size: 2.6cqw; font-weight: 500; }
.pot-value .coin { font-size: 2.1cqw; }
.pot-chips { position: absolute; left: 34%; top: -5cqw; display: flex; }
.pot-chips .coin { font-size: 1.5cqw; transform: rotateX(38deg); margin-right: -.6cqw; box-shadow: 0 2px #755218, 0 4px #d9a831, 0 6px #694415; }
.pot-chips .coin:nth-child(2) { transform: rotateX(38deg) translateY(.5cqw); }
.seat { position: absolute; width: 12%; height: 21%; text-align: center; }
.seat-left { left: 11.2%; top: 15.3%; }
.seat-right { right: 11%; top: 15.3%; }
.seat-lower { right: 3.3%; top: 42%; }
.player-name { display: block; font-size: 1.15cqw; color: #c99bac; line-height: 1.6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.portrait { position: relative; width: 9.3cqw; height: 9.3cqw; margin: 0 auto; border: .3cqw solid #888897; background: #2f4d43; border-radius: 50%; box-shadow: 0 3px 6px #0007; }
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dealer-token { position: absolute; right: -.8cqw; top: .5cqw; border-radius: 50%; border: 2px solid #ffda8a; width: 2.6cqw; height: 2.6cqw; background: #a7352a; color: #fff0ad; font-size: 1.8cqw; }
.player-status { position: relative; display: inline-block; margin-top: -.8cqw; width: 100%; font-size: 1.8cqw; line-height: 2.3cqw; font-weight: bold; font-style: italic; border-radius: 2cqw; border: 2px solid #6ba9f4; background: linear-gradient(#1978de, #0045aa); box-shadow: 0 2px 1px #001340; color: #e3f0fd; text-shadow: 0 2px #004385; }
.seat.packed .portrait { filter: saturate(.4); border-color: #787373; opacity: .8; }
.seat.packed .player-status { background: linear-gradient(#797b75, #444844); border-color: #9c9d95; box-shadow: 0 2px #292a29; text-shadow: none; color: #deded6; }
.seat.packed .seat-cards { opacity: .35; }
.seat-cards { display: flex; position: absolute; top: 4.4cqw; left: 12cqw; }
.seat-right .seat-cards { left: -7.5cqw; }
.seat-lower .seat-cards { left: -8.7cqw; top: 4.7cqw; }
.contribution { position: absolute; display: flex; gap: .4cqw; align-items: center; color: #ffce24; font-size: 1.8cqw; top: 11.5cqw; left: 13cqw; white-space: nowrap; text-shadow: 0 2px #1c3821; }
.seat-right .contribution { left: -9cqw; }
.seat-lower .contribution { left: -10.5cqw; top: 11.6cqw; }
.contribution .coin { font-size: 1.3cqw; }
.table-caption { position: absolute; top: 71.4%; left: 18%; display: flex; gap: 1.3cqw; color: #97bba03b; font-size: .63cqw; letter-spacing: .06em; }
.your-seat { position: absolute; left: 33.5%; top: 55.4%; width: 13%; text-align: center; }
.your-seat .portrait { width: 13cqw; height: 13cqw; border-color: #b3a370; }
.your-seat .player-name { color: #83c5b0; font-size: 1.4cqw; }
.your-seat .player-status { font-size: 1.8cqw; border-color: #ff8a37; background: linear-gradient(#ff7e29, #ce3511); text-shadow: 0 2px #984220; }
.your-seat.winner .portrait, .seat.winner .portrait { border-color: #ffdf73; box-shadow: 0 0 1.4cqw #ffcd4e, 0 0 0 .3cqw #be8e1c; }
.winner .player-status { color: #4d2a07; background: linear-gradient(#ffe894, #cc930f); border-color: #ffdf7c; text-shadow: none; }
.your-hand { position: absolute; left: 48%; top: 59%; width: 20%; height: 23%; }
.card-fan { display: flex; align-items: center; height: 100%; transform: rotate(2deg); }
.playing-card { position: relative; display: inline-flex; width: 8.1cqw; height: 11.7cqw; min-width: 8.1cqw; border: 1px solid #f9f0c2; background: linear-gradient(140deg, #fffdf2 20%, #f5f0d9 65%, #e8dfbd); border-radius: .45cqw; box-shadow: .2cqw .3cqw .6cqw #001d1d77; color: #263943; font-family: Georgia, serif; vertical-align: top; }
.playing-card.red { color: #a52243; }
.playing-card.effective { background: linear-gradient(140deg, #fff9cb 5%, #f7e58f 53%, #d4b755); border-color: #fff3b4; }
.playing-card.wild { background: linear-gradient(140deg, #fff9dc, #f2cb61); }
.card-fan > .playing-card { transform: rotate(calc((var(--i) - 1) * 13deg)) translateY(calc((1 - var(--i)) * .2cqw)); margin-left: -1.2cqw; transform-origin: 50% 90%; }
.card-fan > .playing-card:first-child { margin-left: 0; }
.card-corner { position: absolute; top: .4cqw; left: .4cqw; font-size: 3cqw; line-height: 1; font-weight: 700; letter-spacing: -.1em; }
.card-corner b { display: block; font-size: 2.2cqw; line-height: 1; text-align: center; letter-spacing: 0; }
.card-suit { position: absolute; top: 32%; left: 0; width: 100%; text-align: center; font-size: 6cqw; line-height: 1; }
.card-bottom { position: absolute; bottom: .5cqw; right: .5cqw; font-weight: bold; font-size: 1.8cqw; transform: rotate(180deg); }
.playing-card em { font: 700 .55cqw Arial, sans-serif; position: absolute; bottom: .3cqw; left: .25cqw; color: #654307; letter-spacing: .04em; }
.playing-card.back { background: repeating-linear-gradient(45deg, transparent 0 4px, #7cb0bf44 4px 5px), repeating-linear-gradient(-45deg, transparent 0 4px, #7cb0bf44 4px 5px), linear-gradient(#1d6480, #184559); border: 2px solid #91b9bf; box-shadow: inset 0 0 0 3px #184757, inset 0 0 0 4px #75a4ac, .2cqw .3cqw .6cqw #001d1d77; color: #91c3c7; align-items: center; justify-content: center; }
.playing-card.back > span { font-size: 4cqw; opacity: .6; border: 1px solid #77a9b1; width: 70%; height: 70%; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.playing-card.small { width: 2.5cqw; min-width: 2.5cqw; height: 3.8cqw; border-radius: 1px; margin-left: -.1cqw; box-shadow: 0 2px 3px #0004; }
.small .card-corner { font-size: 1.65cqw; top: .1cqw; left: .2cqw; }
.small .card-corner b { font-size: 1.55cqw; }
.small .card-suit, .small .card-bottom { display: none; }
.small em { font-size: .4cqw; bottom: .1cqw; left: .1cqw; }
.small.back { width: 2.7cqw; min-width: 2.7cqw; height: 4.4cqw; margin-left: -1.2cqw; border-width: 1px; }
.small.back > span { font-size: 1.8cqw; }
.hand-label { position: absolute; bottom: -1.1cqw; left: -2cqw; right: -1.7cqw; text-align: center; font: bold italic 2.9cqw Georgia, serif; color: #fff2a8; padding: .3cqw .2cqw; background: linear-gradient(90deg, #a16b0500, #8b5c0dcf 15% 85%, #a16b0500); text-shadow: 0 2px #4b3700; white-space: nowrap; }
.hand-label small { display: block; font: 700 .6cqw Arial, sans-serif; color: #e7ca82; letter-spacing: .2em; margin-top: .3cqw; text-shadow: none; }
.see-cards { position: absolute; left: -1cqw; right: -2cqw; bottom: 1cqw; display: flex; align-items: center; justify-content: center; gap: .5cqw; background: linear-gradient(#f9d06e, #aa7c28); border: 2px solid #ffe39a; color: #39220d; border-radius: 5px; font-size: 1.6cqw; font-weight: bold; padding: 1cqw .2cqw; box-shadow: 0 5px 10px #0008; }
.see-cards .icon { width: 2cqw; height: 2cqw; }
.original-hand { position: absolute; top: 77%; left: 69%; display: flex; align-items: center; gap: .5cqw; }
.original-hand > span { color: #ac9e85; font-size: .58cqw; letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); }
.original-hand > div { display: flex; }
.blind-note { position: absolute; top: 75%; left: 73%; color: #d5c9af; font-size: 1cqw; line-height: 1.5; }
.blind-note b { color: #e7ca83; }
.your-stake { position: absolute; top: 48.5%; left: 52%; display: flex; gap: .4cqw; color: #ffd042; align-items: center; font-size: 2.2cqw; text-shadow: 0 2px #24391c; }
.your-stake > .coin { font-size: 2cqw; }
.your-stake small { display: block; font-size: .6cqw; letter-spacing: .16em; text-align: right; color: #a3b28c; margin-top: .2cqw; text-shadow: none; }
.round-message { position: absolute; top: 82%; left: 32%; right: 32%; text-align: center; color: #d2ba8c; font-size: .76cqw; white-space: nowrap; }
.wallet-panel { position: absolute; left: 33.5%; right: 33.5%; height: 13.2%; bottom: 0; background: radial-gradient(ellipse at 50% 110%, #005699, transparent 75%), linear-gradient(#2c2a25, #050b17); border: 2px solid #353b44; border-bottom: 0; border-radius: 4cqw 4cqw 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 2px 3px #7e7c6888; }
.wallet-panel > span { font-size: .65cqw; color: #aaa894; letter-spacing: .2em; }
.wallet-panel strong { width: 92%; display: flex; align-items: center; justify-content: space-between; color: #ffe460; font-size: 3.5cqw; font-weight: 500; line-height: 1.25; text-shadow: 0 2px 2px #695b23; }
.wallet-panel .coin { font-size: 2.7cqw; }
.wallet-panel > small { color: #90a4b2; font-size: .6cqw; letter-spacing: .12em; }
.action-bar { position: absolute; left: 3.2%; right: 3.2%; bottom: 3.5%; height: 11%; display: grid; grid-template-columns: 1fr 1fr 2.4fr 1fr 1fr; gap: .85%; align-items: stretch; }
.action-button { position: relative; display: flex; align-items: center; justify-content: center; gap: .3cqw; border: 2px solid #cbc9bf; border-radius: 5px; background: linear-gradient(#eae8dd, #a5a49a 55%, #d1d0be); color: #20211b; box-shadow: inset 0 0 0 3px #777b7566, 0 4px #282322; text-shadow: 0 1px #ede8c0; }
.action-button > span { display: block; font-size: 3.35cqw; line-height: .95; font-weight: 800; letter-spacing: -.06em; }
.action-button small { display: block; font-size: 1.9cqw; line-height: 1.1; letter-spacing: -.04em; }
.action-button .icon { width: 2.5cqw; height: 2.5cqw; stroke-width: 3px; }
.action-button.pack { background: linear-gradient(#6bf496, #1ebd54 48%, #0aa132 52%, #16b73b); color: #082c19; border-color: #9effa0; box-shadow: inset 0 0 0 3px #1aa74099, 0 4px #073713; }
.action-button.pack span { font-size: 2.7cqw; letter-spacing: -.03em; }
.action-button.pack small { font-size: .8cqw; margin-top: .5cqw; letter-spacing: .01em; }
.action-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.action-button:disabled { filter: brightness(.5) saturate(.2); opacity: .78; }
.table-footer { position: absolute; left: .8%; right: .8%; bottom: .3%; display: flex; justify-content: space-between; font-size: .65cqw; letter-spacing: .04em; color: #9f8590; align-items: center; }
.table-footer > button { background: none; color: #b99b7a; font-size: .65cqw; }
.table-footer > button:last-child { position: absolute; right: 0; bottom: 2.6cqw; padding: 0; }
.table-footer > button:last-child .icon { width: 1.5cqw; height: 1.5cqw; }
.table-turn-indicator { position: absolute; left: 41%; top: 44%; width: 18%; text-align: center; font-size: .85cqw; color: #9cbe92; letter-spacing: .16em; }
.table-turn-indicator i { display: inline-block; width: .5cqw; height: .5cqw; background: #ebd58c; border-radius: 50%; margin-right: .3cqw; box-shadow: 0 0 7px #ffed97; }
.is-busy .table-turn-indicator { opacity: .3; }
.result-banner { position: absolute; top: 42%; left: 27%; right: 27%; display: flex; justify-content: center; gap: 1cqw; align-items: center; background: linear-gradient(90deg, #3e180000, #2a2013dd 15% 85%, #3e180000); border-top: 1px solid #cda95455; border-bottom: 1px solid #cda95455; padding: .8cqw; text-align: center; color: #f1cd73; }
.result-banner > .icon { width: 4cqw; height: 4cqw; fill: #d8ac35; stroke: #ffdf8f; filter: drop-shadow(0 0 4px #e9c84955); }
.result-banner strong { display: block; font: 900 2.8cqw Georgia, serif; text-shadow: 0 2px #794713; letter-spacing: .03em; }
.result-banner span { display: block; font-size: .94cqw; color: #e2cba6; margin-top: .2cqw; }
.result-banner.loss { color: #d9cbb3; }
.result-banner.loss > .icon { fill: none; stroke: #bfb299; width: 3.4cqw; }
.result-banner.loss strong { font-size: 2.1cqw; text-shadow: none; }
.is-finished .pot-chips { opacity: .4; }

.table-dealer { clip-path: polygon(42% 0, 58% 0, 68% 10%, 70% 35%, 78% 51%, 96% 80%, 98% 90%, 88% 96%, 60% 100%, 38% 100%, 8% 96%, 2% 90%, 4% 80%, 20% 53%, 26% 34%, 30% 12%); }
.action-button { min-width: 0; }
.is-finished .action-button.pack span { font-size: 2.2cqw; }
.is-finished .your-stake { display: none; }
.round-message { top: 49%; left: 17%; right: 58%; white-space: normal; line-height: 1.5; }

/* Native dialogs and the mobile layout keep every action reachable. */
dialog { width: min(620px, calc(100vw - 28px)); max-height: min(88dvh, 850px); border-radius: 14px; padding: 28px; border: 1px solid #aa8750; background: linear-gradient(135deg, #301321, #190e17 75%); color: #eee2ce; box-shadow: 0 25px 100px #000c, inset 0 0 0 4px #a0844012; }
dialog::backdrop { background: #06040bd6; backdrop-filter: blur(7px); }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #b5965e3d; margin-bottom: 22px; }
.eyebrow { color: #bd9b5e; font-size: 9px; font-weight: bold; letter-spacing: .18em; }
.modal-header h1 { font: 26px Georgia, serif; color: #ffe4a4; margin: 7px 0 0; }
.modal-header .icon-button { flex: 0 0 40px; }
.rules-intro { display: flex; gap: 20px; align-items: center; }
.rules-intro p { font-size: 13px; line-height: 1.65; color: #d2c1b8; margin: 0; }
.wild-ranks { display: flex; flex: 0 0 auto; }
.wild-ranks span { display: inline-flex; width: 26px; height: 39px; justify-content: center; align-items: center; border-radius: 3px; background: linear-gradient(140deg, #fff5cf, #cba64a); border: 1px solid #fff3b2; font: bold 20px Georgia, serif; color: #66213b; margin-left: -4px; transform: rotate(-9deg); box-shadow: 0 3px 5px #0005; }
.wild-ranks span:nth-child(even) { color: #1d3133; transform: rotate(9deg) translateY(4px); }
.rules-steps { padding: 18px 0 12px 22px; font-size: 13px; line-height: 1.65; color: #cabbaf; }
.rules-steps li { margin-bottom: 10px; padding-left: 6px; }
.rules-steps b { color: #f2dfb6; }
dialog h2 { font: 20px Georgia, serif; color: #eedba8; }
.ranking-list { border: 1px solid #9c784333; border-radius: 8px; overflow: hidden; }
.ranking-list > div { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #9c784322; }
.ranking-list > div:last-child { border: 0; }
.ranking-list > div > b { color: #bb9c5c; font: italic 22px Georgia, serif; }
.ranking-list strong { display: block; font-size: 11px; letter-spacing: .07em; color: #ead6a6; }
.ranking-list small { display: block; font-size: 11px; color: #ab9a92; margin-top: 3px; }
.ranking-list code { font: 16px Georgia, serif; color: #e7c780; margin-left: auto; white-space: nowrap; }
.rules-note { margin: 20px 0 0; background: #0002; border: 1px solid #b89d6a22; border-radius: 6px; padding: 14px; font-size: 11px; line-height: 1.7; color: #b2a29a; }
.rules-note > b { color: #d0b783; }
.rules-note p:last-child { margin-bottom: 0; }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 25px; }
.primary-button { min-height: 45px; border-radius: 5px; padding: 11px 20px; background: linear-gradient(#f2ce80, #b7863a); border: 1px solid #f1d18f; color: #362318; font-weight: bold; font-size: 11px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 12px; justify-content: center; }
.primary-button .icon { width: 19px; height: 19px; }
.primary-button:hover { filter: brightness(1.12); }
.text-button { min-height: 44px; padding: 6px; background: none; font-size: 10px; color: #baaa95; }
.danger { background: linear-gradient(#cb8465, #9a4d40); color: #fff3e1; border-color: #d19170; }
.name-field { font-size: 10px; color: #c2a36c; letter-spacing: .1em; display: block; }
.name-field input { width: 100%; height: 46px; display: block; margin-top: 9px; border-radius: 5px; border: 1px solid #7a5b3e; color: #f2e7d2; padding: 0 13px; background: #130d14; font-size: 16px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid #b79a5c24; gap: 20px; cursor: pointer; }
.setting-row b { font-size: 14px; color: #dfceb0; }
.setting-row small { display: block; font-size: 11px; color: #a58f8c; margin-top: 5px; }
.setting-row input { accent-color: #e3bb6d; width: 23px; height: 23px; cursor: pointer; }
.settings-note { font-size: 10px; color: #97837e; line-height: 1.6; margin: 20px 0 0; }
.history-summary { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; font-size: 9px; letter-spacing: .07em; color: #a18c76; }
.history-summary b { display: block; font-size: 22px; color: #e8cb85; font-weight: 400; margin-top: 7px; }
.history-list > article { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid #a88d4b2b; }
.history-list > article > div:first-child { flex: 1; min-width: 0; }
.history-list strong { font-size: 13px; color: #e9d2a0; display: flex; align-items: center; gap: 8px; }
.history-list strong small { font-size: 9px; color: #b3a197; }
.history-list article > div > span { display: block; font-size: 9px; color: #8c7977; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; }
.history-cards { display: flex; gap: 2px; margin-right: 8px; }
.history-cards .playing-card.small { width: 23px; min-width: 23px; height: 34px; }
.history-cards .card-corner { font-size: 13px; left: 3px; top: 2px; }
.history-cards .card-corner b { font-size: 13px; }
.history-cards em { font-size: 4px; left: 2px; bottom: 1px; }
.history-list article > b { font: 18px Georgia, serif; min-width: 74px; text-align: right; }
.positive { color: #9bc993; }
.negative { color: #ce8d86; }
.empty-state { text-align: center; padding: 30px 10px; font: 50px Georgia, serif; color: #a68b53; }
.empty-state h2 { font-size: 24px; }
.empty-state p { font: 12px Arial, sans-serif; color: #b39c91; }
.dialog-subtitle { font-size: 12px; color: #c3ad9d; }
.all-tables { display: grid; gap: 7px; margin-top: 20px; }
.all-tables > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #a8782b0f; border: 1px solid #a88a473d; border-radius: 5px; padding: 12px; text-align: left; }
.all-tables > button:disabled { opacity: .32; }
.all-tables > button:hover:not(:disabled) { background: #f6d88a17; border-color: #d0ae68; }
.all-tables b { color: #e6cb85; font: italic bold 20px Georgia, serif; width: 50px; }
.all-tables span { font-size: 14px; width: 90px; text-align: right; color: #d8c8af; }
.all-tables small { display: block; font-size: 7px; color: #947e71; letter-spacing: .05em; margin-top: 4px; }
.all-tables .icon { width: 17px; height: 17px; color: #b89b65; }
.confirm-message { font-size: 15px; line-height: 1.8; color: #d5c4b4; margin: 25px 0; }
.table-log p { font-size: 12px; color: #c3b29d; line-height: 1.7; padding-bottom: 10px; border-bottom: 1px solid #b1914e2b; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 20; max-width: min(90vw, 540px); padding: 14px 22px; border: 1px solid #ad8b51; background: #25111e; box-shadow: 0 8px 40px #0008; color: #e5cda4; border-radius: 8px; font-size: 13px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translate(-50%, 15px); transition: opacity .2s, transform .2s; text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
html:has(dialog[open]) { overflow: hidden; }
[data-motion="on"] .is-busy .your-hand { animation: card-in .65s ease-out both; }
[data-motion="on"] .is-busy .pot-chips { animation: chip-in .8s ease both; }
[data-motion="on"] .result-banner.victory { animation: celebrate .6s ease-out both; }
@keyframes card-in { from { opacity: .2; transform: translate(-12px, -35px) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes chip-in { from { transform: translate(100px, 90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes celebrate { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
[data-motion="off"] *, [data-motion="off"] *:before, [data-motion="off"] *:after { animation: none !important; transition: none !important; }

@media (max-width: 900px) and (min-aspect-ratio: 1/1) {
  #app { width: min(calc(100vw - 18px), calc((100dvh - 22px) * 1.775)); margin: 5px auto; }
  .game-shell { border-radius: 7px; }
  .app-footnote { padding-top: 7px; font-size: 7px; }
}
@media (max-width: 720px) and (max-aspect-ratio: 1/1) {
  body { align-items: flex-start; }
  #app { width: 100%; margin: 0; }
  .game-shell { aspect-ratio: auto; min-height: 740px; height: calc(100dvh - 38px); max-height: 1100px; border-radius: 0; border: 0; box-shadow: none; }
  .app-footnote { padding: 11px 12px; gap: 12px; font-size: 7px; letter-spacing: .03em; }
  .lobby-header { top: 0; left: 20%; width: 60%; height: 12%; padding-top: 4%; }
  .brand { font-size: 12cqw; }
  .lobby-header p { font-size: 1.8cqw; letter-spacing: .15em; margin-top: 1.2cqw; }
  .lobby-hostess { display: none; }
  .lobby-settings { top: 3%; left: 4%; width: 10cqw; height: 10cqw; }
  .lobby-settings .icon { width: 6cqw; height: 6cqw; }
  .local-connection { right: 4%; top: 3%; }
  .local-connection .icon { width: 7cqw; height: 7cqw; }
  .local-connection span { font-size: 1.5cqw; margin-top: 1cqw; }
  .wild-intro { left: 4%; top: 14%; width: 92%; display: flex; align-items: center; flex-wrap: nowrap; gap: 2cqw; }
  .wild-intro > span { width: 6cqw; height: 8cqw; flex: 0 0 6cqw; font-size: 5.5cqw; }
  .wild-intro p { margin: 0 0 0 2cqw; width: auto; text-align: left; font-size: 1.8cqw; line-height: 1.7; letter-spacing: .04em; }
  .wild-intro p b { font-size: 2.4cqw; }
  .lobby-tiers { left: 5%; right: 5%; top: 23%; bottom: 17%; grid-template-columns: 1fr 1fr; grid-template-rows: .95fr 1fr 1fr; gap: 5.8% 5%; }
  .level-card { padding: 7cqw 2cqw 2cqw; border-radius: 6px; }
  .level-card.featured { grid-column: span 2; grid-row: auto; padding: 4cqw 3cqw 3cqw 40%; }
  .level-card h2 { font-size: 11cqw; top: -5cqw; right: 2cqw; }
  .level-card h2 small { font-size: 7cqw; }
  .level-card dl { font-size: 3.3cqw; line-height: 1.6; }
  .level-card dl div { gap: .8cqw; }
  .featured dl div { display: flex; margin: 0; line-height: 1.5; }
  .featured dl dd { font-size: 3.6cqw; }
  .featured h2 { left: 7%; right: auto; top: 25%; font-size: 15cqw; z-index: 1; }
  .featured h2 small { font-size: 9cqw; }
  .tier-art { width: 12cqw; height: 9cqw; left: 2cqw; top: -4cqw; }
  .mini-card { width: 6.5cqw; height: 9cqw; font-size: 3cqw; }
  .mini-card:nth-child(2) { left: 3.6cqw; top: 1cqw; }
  .mini-card span { font-size: 3.5cqw; }
  .coin-stack .coin { font-size: 4cqw; margin-right: -1.2cqw; }
  .coin-stack { bottom: -2cqw; left: -2cqw; }
  .featured .tier-art { display: none; }
  .hot-label { font-size: 4cqw; left: -2cqw; top: -4cqw; padding: 2cqw; }
  .join-button { height: 10cqw; min-height: 44px; font-size: 4cqw; left: 8%; width: 84%; bottom: 6%; border-radius: 5px; }
  .join-button .icon { width: 4cqw; height: 4cqw; margin-right: 1cqw; }
  .join-button:disabled { font-size: 2.7cqw; }
  .featured .join-button { left: auto; right: 4%; width: 54%; height: 8cqw; bottom: 6%; }
  .more-tables { bottom: 11.6%; right: 6%; font-size: 2.8cqw; gap: 2cqw; min-height: 36px; }
  .more-tables span { font-size: 2.2cqw; }
  .more-tables .icon { width: 3cqw; height: 3cqw; }
  .lobby-footer { height: 11%; padding: 0 4%; }
  .credit-label { display: none; }
  .lobby-profile { position: static; padding: 0; border: none; background: none; gap: 2cqw; }
  .lobby-profile img { width: 12cqw; height: 12cqw; }
  .lobby-profile div > span { font-size: 3.5cqw; max-width: 26cqw; }
  .lobby-profile strong { font-size: 4.6cqw; margin-top: .5cqw; gap: 1cqw; }
  .utilities { gap: .3cqw; }
  .utilities .icon-button { width: 10cqw; height: 11cqw; }
  .utilities .icon { width: 6cqw; height: 6cqw; }
  .desktop-only { display: none !important; }

  .table-toolbar { top: 2%; left: 3%; right: 3%; height: 9%; }
  .toolbar-left, .toolbar-right { gap: 2cqw; }
  .gold-square { width: 11cqw; height: 11cqw; border-radius: 4px; }
  .gold-square .icon { width: 7cqw; height: 7cqw; }
  .level-switch { height: 10cqw; padding: 0 2cqw; gap: 3cqw; }
  .level-switch b { font-size: 5cqw; }
  .level-switch > span { font-size: 6cqw; }
  .level-switch .icon { width: 4.3cqw; height: 4.3cqw; }
  .gear-button { width: 9cqw; height: 10cqw; }
  .gear-button .icon { width: 6cqw; height: 6cqw; }
  .recent-button { width: 11cqw; height: 11cqw; font-size: 1.8cqw; gap: .7cqw; }
  .recent-button .icon { width: 6cqw; height: 6cqw; }
  .table-dealer { left: 36%; top: 8%; width: 28%; height: 18%; }
  .table-wood { left: 3.5%; top: 23%; width: 93%; height: 42%; border-radius: 40% / 36%; border-width: 1cqw; box-shadow: 0 2cqw 2cqw #0007, inset 0 0 .5cqw .5cqw #8f6c37, 0 0 0 1px #a47f42; }
  .table-felt { inset: 3cqw; border-radius: 40% / 36%; border-width: 1cqw; box-shadow: inset 0 0 5cqw #001f18, 0 -.5cqw 0 #a88b3c; }
  .felt-line { inset: 2cqw; border-radius: 40% / 36%; }
  .felt-watermark { top: 47%; left: 24%; right: 24%; font-size: 12cqw; }
  .felt-watermark small { font-size: 1.5cqw; margin-top: 1cqw; }
  .seat { width: 22%; height: 14%; }
  .seat-left { left: 3.5%; top: 18%; }
  .seat-right { right: 3.5%; top: 18%; }
  .seat-lower { right: 1.5%; top: 43%; }
  .player-name { font-size: 2.5cqw; line-height: 1.7; }
  .portrait { width: 18cqw; height: 18cqw; border-width: .7cqw; }
  .player-status { margin-top: -1cqw; font-size: 3.4cqw; line-height: 4.8cqw; border-width: 1px; border-radius: 10cqw; }
  .dealer-token { width: 5cqw; height: 5cqw; font-size: 3.4cqw; top: 1cqw; right: -1.5cqw; border-width: 1px; }
  .seat-cards { top: 23cqw; left: 6cqw; }
  .seat-right .seat-cards { top: 23cqw; left: 6cqw; }
  .seat-lower .seat-cards { left: -10cqw; top: 7cqw; }
  .playing-card.small { width: 4.2cqw; min-width: 4.2cqw; height: 6.5cqw; }
  .small .card-corner { font-size: 2.8cqw; top: .2cqw; left: .3cqw; }
  .small .card-corner b { font-size: 2.6cqw; }
  .small em { font-size: .75cqw; }
  .small.back { width: 4.8cqw; min-width: 4.8cqw; height: 7cqw; margin-left: -2.4cqw; }
  .small.back > span { font-size: 3.4cqw; }
  .contribution { left: 2cqw; top: 32cqw; font-size: 3.6cqw; gap: 1cqw; }
  .contribution .coin { font-size: 2.7cqw; }
  .seat-right .contribution { left: 2cqw; }
  .seat-lower .contribution { top: 24cqw; left: -.5cqw; font-size: 3cqw; }
  .pot-area { left: 30%; top: 30%; width: 40%; }
  .pot-label { font-size: 1.6cqw; top: -2.5cqw; letter-spacing: .1em; }
  .pot-value { font-size: 5.8cqw; padding: 1cqw 3cqw 1cqw 2cqw; border-radius: 6cqw; }
  .pot-value .coin { font-size: 4cqw; }
  .pot-chips { top: -7cqw; left: 34%; }
  .pot-chips .coin { font-size: 3cqw; margin-right: -1.1cqw; }
  .your-seat { left: 12%; top: 51%; width: 27%; }
  .your-seat .portrait { width: 25cqw; height: 25cqw; border-width: .8cqw; }
  .your-seat .player-name { font-size: 3.1cqw; }
  .your-seat .player-status { font-size: 3.7cqw; line-height: 5.2cqw; }
  .your-hand { top: 54%; left: 43%; width: 35%; height: 14%; }
  .playing-card { width: 13.5cqw; min-width: 13.5cqw; height: 20cqw; border-radius: .8cqw; }
  .card-fan > .playing-card { margin-left: -2.5cqw; }
  .card-corner { font-size: 5cqw; top: .6cqw; left: .6cqw; }
  .card-corner b { font-size: 4cqw; }
  .card-suit { font-size: 10cqw; }
  .card-bottom { font-size: 3cqw; }
  .playing-card em { font-size: 1cqw; }
  .playing-card.back > span { font-size: 7cqw; }
  .see-cards { left: -1cqw; right: -3cqw; bottom: 0; padding: 2.5cqw .6cqw; font-size: 3.2cqw; gap: 1cqw; min-height: 44px; }
  .see-cards .icon { width: 4cqw; height: 4cqw; }
  .hand-label { bottom: -1.2cqw; left: -5cqw; right: -3cqw; font-size: 4.7cqw; padding: 1cqw 0; }
  .hand-label small { font-size: 1.4cqw; margin-top: 1cqw; }
  .original-hand { top: 68%; left: 70%; gap: 1cqw; }
  .original-hand > span { font-size: 1.3cqw; }
  .blind-note { left: 67%; top: 69%; font-size: 2.6cqw; }
  .your-stake { left: 39%; top: 46%; font-size: 4.5cqw; gap: 1cqw; }
  .your-stake > .coin { font-size: 3.7cqw; }
  .your-stake small { font-size: 1.3cqw; margin-top: .7cqw; }
  .table-caption { left: 15%; top: 64%; display: block; font-size: 1.5cqw; color: #b1c5a54d; line-height: 1.5; }
  .table-caption span { display: block; }
  .table-caption span:last-child { display: none; }
  .table-turn-indicator { top: 39%; left: 28%; width: 44%; font-size: 2.2cqw; }
  .table-turn-indicator i { width: 1.3cqw; height: 1.3cqw; margin-right: 1cqw; }
  .result-banner { top: 38%; left: 13%; right: 13%; padding: 1.4cqw 2cqw; gap: 2cqw; }
  .result-banner > .icon { width: 7cqw; height: 7cqw; }
  .result-banner strong { font-size: 5.5cqw; }
  .result-banner span { font-size: 2.2cqw; margin-top: .5cqw; }
  .result-banner.loss strong { font-size: 4.5cqw; }
  .result-banner.loss > .icon { width: 6cqw; }
  .wallet-panel { left: 4%; right: 4%; bottom: 21.5%; height: 7.5%; border-radius: 5cqw; flex-direction: row; padding: 0 5%; justify-content: space-between; }
  .wallet-panel > span { font-size: 1.7cqw; letter-spacing: .1em; width: 23%; line-height: 1.8; }
  .wallet-panel strong { width: auto; gap: 3cqw; font-size: 7cqw; }
  .wallet-panel .coin { font-size: 5cqw; }
  .wallet-panel > small { display: none; }
  .round-message { top: auto; bottom: 19%; left: 3%; right: 3%; font-size: 2.1cqw; white-space: normal; }
  .action-bar { left: 4%; right: 4%; bottom: 3.7%; height: 14%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; }
  .wallet-spacer { display: none; }
  .action-button { border-radius: 5px; }
  .action-button > span { font-size: 6.4cqw; line-height: 1; }
  .action-button small { font-size: 3cqw; line-height: 1.2; margin-top: .5cqw; letter-spacing: .02em; }
  .action-button.pack span { font-size: 5.1cqw; }
  .is-finished .action-button.pack span { font-size: 4.4cqw; }
  .action-button.pack small { font-size: 2.3cqw; margin-top: 1cqw; }
  .action-button .icon { width: 6cqw; height: 6cqw; margin-right: 2cqw; }
  .table-footer { font-size: 1.4cqw; bottom: 1%; left: 4%; right: 4%; letter-spacing: .02em; }
  .table-footer > button { font-size: 1.8cqw; min-height: 28px; }
  .table-footer > button:last-child { position: static; margin-left: 3cqw; }
  .table-footer > button:last-child .icon { width: 4cqw; height: 4cqw; }
  dialog { padding: 20px; max-height: 90dvh; }
  .modal-header h1 { font-size: 23px; }
  .rules-intro { gap: 13px; }
  .rules-intro p { font-size: 12px; }
  .rules-steps { font-size: 12px; }
  .ranking-list > div { gap: 10px; padding: 12px 10px; }
  .ranking-list strong { font-size: 10px; }
  .ranking-list small { font-size: 9px; }
  .ranking-list code { font-size: 13px; }
  .dialog-actions { gap: 8px; }
  .primary-button { padding: 11px 13px; font-size: 10px; }
  .text-button { font-size: 9px; }
  .history-list > article { gap: 5px; }
  .history-list article > b { min-width: 62px; font-size: 15px; }
  .history-list strong { gap: 5px; }
  .history-list strong small { font-size: 7px; }
  .all-tables > button { padding: 12px 8px; gap: 7px; }
  .all-tables b { width: 43px; font-size: 18px; }
  .all-tables span { font-size: 12px; width: 61px; }
  .all-tables small { font-size: 6px; }
  .toast { bottom: 15px; font-size: 12px; padding: 12px 17px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; scroll-behavior: auto !important; } }