@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #081522;
  --panel: #0d1c2c;
  --panel-2: #102337;
  --line: #1c354b;
  --muted: #8ca1b8;
  --white: #f3f8ff;
  --teal: #31d5bb;
  --blue: #2389e8;
  --gold: #f0c15e;
}

* { box-sizing: border-box; }
body { min-width: 360px; min-height: 100vh; margin: 0; color: var(--white); background: radial-gradient(ellipse at 42% -40%, #16324d 0, var(--bg) 62%); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #65e6d0; outline-offset: 3px; }
[hidden] { display: none !important; }

.topbar { position: sticky; z-index: 20; top: 0; display: flex; height: 76px; align-items: center; gap: 34px; padding: 0 28px; border-bottom: 1px solid #203146; background: #081522f2; box-shadow: 0 8px 28px #02081244; backdrop-filter: blur(14px); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #2c90c2; border-radius: 12px; color: #c2f6ee; background: linear-gradient(145deg, #15698d, #124260); box-shadow: inset 0 1px #ffffff22, 0 4px 12px #0005; font-size: 24px; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: .12em; }
.main-nav { display: flex; height: 100%; align-items: center; gap: 7px; }
.nav-item { display: inline-flex; height: 42px; align-items: center; gap: 9px; padding: 0 15px; border: 1px solid transparent; border-radius: 11px; color: #b4c2d5; background: transparent; cursor: pointer; transition: color .2s ease, background .25s ease, border-color .25s ease, transform .2s ease; }
.nav-item span { color: #a4bad0; font-size: 19px; }
.nav-item:hover { color: #fff; background: #12253a; transform: translateY(-1px); }
.nav-item.active { border-color: #203c59; color: #eff7ff; background: linear-gradient(180deg, #173251, #10253a); box-shadow: inset 0 1px #ffffff12; }
.nav-item.active span { color: #57d5eb; }
.top-actions { display: flex; min-width: 0; align-items: center; gap: 13px; margin-left: auto; }
.wallet { display: flex; min-width: 151px; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid #284362; border-radius: 12px; background: linear-gradient(125deg, #10243a, #0e1c30); box-shadow: inset 0 1px #ffffff0b; }
.coin-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid #f6d67a; border-radius: 50%; color: #9e6418; background: radial-gradient(circle at 35% 28%, #fff0a6, #ecb83d 65%, #bc7d20); box-shadow: 0 0 15px #efc45235; font-size: 14px; }
.wallet small, .profile-button small { display: block; color: #9eacc1; font-size: 10px; line-height: 1.35; }
.wallet strong { color: #f5d179; font-size: 14px; letter-spacing: .02em; }
.icon-button { position: relative; display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border: 1px solid #1a3047; border-radius: 50%; color: #aabbd0; background: #0f2033; cursor: pointer; transition: color .2s ease, transform .2s ease, border-color .2s ease; font-size: 20px; }
.icon-button:hover { transform: translateY(-2px); border-color: #395779; color: #fff; }
.notification-button i { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border: 1px solid #081522; border-radius: 50%; background: #fa5e69; }
.profile-button { display: flex; min-width: 157px; align-items: center; gap: 10px; padding: 5px 9px; border: 1px solid #1a3047; border-radius: 999px; text-align: left; background: #0c1a2a; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.profile-button:hover { border-color: #345474; background: #102339; }
.profile-button > span:nth-child(2) { flex: 1; }
.profile-button strong { display: block; font-size: 11px; }
.profile-button b { color: #8499af; font-size: 14px; font-weight: 500; }
.avatar { position: relative; display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: visible; border: 2px solid #a4c9d7; border-radius: 50%; color: #f7fbff; background: linear-gradient(145deg, #315574, #14273d); box-shadow: 0 2px 10px #02081288; font-size: 13px; font-weight: 800; }
.avatar-you { border-color: #d4e6f4; background: radial-gradient(circle at 32% 25%, #70b7dd, #235384 72%); }
.avatar-minh { background: linear-gradient(145deg, #b97646, #4a2535); }
.avatar-linh { background: linear-gradient(145deg, #c66f89, #51374c); }
.avatar-quang { background: linear-gradient(145deg, #598ac7, #273968); }
.avatar-thao { background: linear-gradient(145deg, #b58f56, #614630); }
.avatar-hoang { background: linear-gradient(145deg, #657d8c, #263849); }
.avatar i { position: absolute; right: -2px; bottom: 1px; width: 11px; height: 11px; border: 2px solid #0d1b2a; border-radius: 50%; background: #2ad89c; }

.app-shell { display: grid; grid-template-columns: minmax(0, 1fr) 324px; gap: 18px; max-width: 1900px; min-height: calc(100vh - 76px); margin: 0 auto; padding: 18px; }
.game-column { min-width: 0; }
.table-stage { position: relative; min-height: 720px; height: calc(100vh - 112px); overflow: hidden; border: 1px solid #183348; border-radius: 18px; background: #092536 url('assets/table-background.png') center 52% / cover no-repeat; box-shadow: 0 20px 56px #02081277, inset 0 1px #ffffff12; isolation: isolate; }
.stage-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #06101b55 0%, #0717251c 28%, #03131b08 62%, #04101acc 100%), radial-gradient(ellipse at 50% 54%, transparent 36%, #05111c55 100%); }
.room-chip { position: absolute; z-index: 2; top: 20px; left: 20px; display: grid; grid-template-columns: auto; gap: 8px; min-width: 155px; padding: 11px 13px; border: 1px solid #41627f99; border-radius: 12px; background: #0a1a2bdd; box-shadow: 0 7px 22px #0005; backdrop-filter: blur(9px); }
.room-chip > div { display: flex; align-items: center; gap: 8px; }
.room-chip small { color: #90a8c1; font-size: 9px; letter-spacing: .13em; }
.room-chip strong { color: #e9f4ff; font-size: 13px; }
.copy-mark { margin-left: 5px; color: #8da7be; font-size: 15px; }
.room-capacity { color: #bbcad7; font-size: 10px; }
.room-capacity span { color: #62e2bd; font-weight: 700; }
.online-dot, .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #38d6a0; box-shadow: 0 0 9px #38d6a0aa; }
.table-note { position: absolute; top: 24px; right: 22px; display: flex; align-items: center; gap: 7px; color: #d5e6e8; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-shadow: 0 2px 6px #000; }
.live-dot { width: 7px; height: 7px; }
.dealer-zone { position: absolute; top: 11%; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); }
.dealer-avatar { display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid #f1d082; border-radius: 50%; color: #fbe4a1; background: radial-gradient(circle at 38% 28%, #775b45, #1d2831 72%); box-shadow: 0 0 0 4px #f2c86620, 0 5px 17px #0008; font-size: 22px; }
.dealer-name { min-width: 82px; padding: 8px 10px; border: 1px solid #dfbf7780; border-radius: 10px; text-align: center; background: #091725cc; box-shadow: 0 4px 12px #0005; backdrop-filter: blur(6px); }
.dealer-name strong { display: block; color: #fff0cb; font-size: 11px; }
.dealer-name span { display: block; margin-top: 2px; color: #d2c4a6; font-size: 9px; }
.card-row { display: flex; align-items: center; justify-content: center; }
.dealer-cards { position: absolute; top: 28%; left: 50%; z-index: 1; min-height: 95px; transform: translateX(-50%); }
.playing-card { position: relative; display: flex; width: 65px; height: 94px; flex: 0 0 65px; flex-direction: column; justify-content: space-between; margin-left: -12px; padding: 7px; border: 1px solid #d8dce3; border-radius: 7px; color: #1b2430; background: linear-gradient(130deg, #fff, #ecf0f4); box-shadow: 0 8px 17px #0008; animation: deal-card .48s cubic-bezier(.15,.85,.28,1) both; transform-origin: bottom center; }
.playing-card:first-child { margin-left: 0; }
.playing-card.red { color: #be3347; }
.card-corner { display: flex; flex-direction: column; align-items: center; font-family: Georgia, serif; font-size: 17px; font-weight: 700; line-height: .9; }
.card-corner small { font-size: 12px; }
.card-suit { align-self: center; font-family: Georgia, serif; font-size: 32px; line-height: 1; }
.playing-card.back { border: 4px solid #d7e4eb; background: repeating-linear-gradient(45deg, #233e6b 0 3px, #496792 3px 5px, #203960 5px 8px); box-shadow: inset 0 0 0 2px #d2dceb, 0 8px 17px #0008; }
.playing-card.back::after { position: absolute; inset: 8px; border: 1px solid #d8e5f1aa; border-radius: 2px; content: '✦'; display: grid; place-items: center; color: #dce9f1; font-size: 21px; }
.table-emblem { position: absolute; top: 42%; left: 50%; display: grid; justify-items: center; color: #8dd9d044; text-shadow: 0 0 19px #57dfd222; transform: translate(-50%, -50%); pointer-events: none; }
.table-emblem span { font-size: 22px; line-height: 1; }
.table-emblem strong { font-size: clamp(24px, 3vw, 38px); font-weight: 800; letter-spacing: .17em; }
.table-emblem small { margin-top: 4px; font-size: 8px; font-weight: 700; letter-spacing: .28em; }
.hand-area { position: absolute; top: 48%; left: 50%; display: flex; min-width: 230px; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); }
.player-cards { min-height: 106px; }
.player-cards .playing-card { width: 76px; height: 106px; flex-basis: 76px; }
.player-cards .card-corner { font-size: 20px; }
.player-cards .card-suit { font-size: 39px; }
.turn-badge { display: flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid #60e6bd99; border-radius: 999px; color: #d7fff1; background: linear-gradient(100deg, #123c3bdf, #0c3441e8); box-shadow: 0 0 18px #2ce3b833; font-size: 10px; font-weight: 700; backdrop-filter: blur(7px); }
.turn-badge span { color: #56e3a5; font-size: 9px; }
.turn-badge.ended { border-color: #f2cc70aa; color: #fff0c4; background: #433416dd; box-shadow: 0 0 18px #e5b34a33; }
.game-controls { position: absolute; z-index: 4; right: 0; bottom: 25%; left: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 15px; }
.bet-control { display: flex; height: 54px; align-items: center; gap: 8px; padding: 0 8px 0 11px; border: 1px solid #1c344e; border-radius: 15px; color: #e8f0fa; background: #071626ee; box-shadow: 0 8px 18px #0007, inset 0 1px #ffffff10; }
.bet-control .coin-icon { width: 27px; height: 27px; flex-basis: 27px; }
.bet-control strong { font-size: 11px; }
.bet-control output { color: #f2d17e; font-size: 11px; font-weight: 700; white-space: nowrap; }
.bet-control button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #2a4662; border-radius: 50%; color: #daebfa; background: #122a42; cursor: pointer; transition: background .18s ease, transform .18s ease; font-size: 20px; line-height: 1; }
.bet-control button:hover { transform: scale(1.07); background: #214564; }
.game-button { display: inline-flex; min-width: 162px; height: 56px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid transparent; border-radius: 15px; box-shadow: 0 8px 22px #0007, inset 0 1px #ffffff35; cursor: pointer; transition: transform .18s ease, filter .2s ease, box-shadow .2s ease; }
.game-button span { font-size: 19px; }
.game-button strong { font-size: 14px; letter-spacing: .01em; }
.game-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 12px 27px #0008, inset 0 1px #ffffff48; }
.game-button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.game-button:disabled { filter: grayscale(.35); opacity: .5; cursor: not-allowed; }
.hit-button { border-color: #41c9ec; color: #fff; background: linear-gradient(120deg, #087bb9, #178bd5); }
.stand-button { border-color: #55e39a; color: #fff; background: linear-gradient(120deg, #179b62, #1bbd70); }
.deal-button { min-width: 220px; border-color: #e8bf5d; color: #fff8df; background: linear-gradient(120deg, #aa7823, #d59a2c); }
.seat-row { position: absolute; z-index: 3; right: 18px; bottom: 14px; left: 18px; display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 9px; }
.seat-card { position: relative; display: flex; min-width: 0; min-height: 136px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 11px 7px 8px; border: 1px solid #25415a; border-radius: 18px; color: #edf5fb; background: linear-gradient(145deg, #091727f2, #10253bf2); box-shadow: 0 6px 17px #0008, inset 0 1px #ffffff0a; text-align: center; backdrop-filter: blur(8px); }
.seat-card .avatar { width: 50px; height: 50px; flex-basis: 50px; margin-bottom: 1px; font-size: 15px; }
.seat-card.current-seat { border-color: #39e4b6; box-shadow: 0 0 0 1px #20d9a555, 0 0 22px #1ce9b644, inset 0 1px #ffffff20; }
.seat-card.current-seat .avatar { box-shadow: 0 0 0 3px #41dfb533, 0 3px 10px #0008; }
.crown { position: absolute; top: -13px; left: calc(50% - 10px); color: #ffd76b; font-size: 19px; filter: drop-shadow(0 2px 3px #000); }
.seat-name { display: block; max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.seat-name small { margin-left: 4px; color: #58d8c1; font-size: 8px; }
.seat-points { min-height: 15px; color: #f5d277; font-size: 10px; font-weight: 700; }
.muted-points { color: #a7b8ca; font-size: 9px; font-weight: 500; }
.seat-bet { display: flex; width: 100%; align-items: center; justify-content: center; gap: 5px; margin-top: auto; padding: 4px 5px; border: 1px solid #233c56; border-radius: 999px; color: #d9e6f4; background: #102239; font-size: 9px; }
.seat-bet i { color: #f4cb65; font-style: normal; }
.empty-seat { justify-content: center; gap: 4px; border-style: dashed; color: #a7bad0; background: #081828bf; cursor: pointer; transition: border .2s ease, background .2s ease, transform .2s ease; }
.empty-seat:hover { transform: translateY(-3px); border-color: #55c8db; background: #10314aee; }
.plus-mark { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 4px; border: 1px solid #50718e; border-radius: 50%; color: #d5eafa; font-size: 28px; font-weight: 300; }
.empty-seat strong { font-size: 10px; }
.empty-seat small { color: #91a5ba; font-size: 8px; }
.result-toast { position: absolute; z-index: 9; top: 51%; left: 50%; max-width: min(90%, 390px); padding: 12px 19px; border: 1px solid #e5c771; border-radius: 999px; color: #fff4c7; background: #241c0ceF; box-shadow: 0 12px 32px #0009, 0 0 24px #edc64d44; opacity: 0; pointer-events: none; transform: translate(-50%, 9px) scale(.96); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); white-space: nowrap; font-size: 13px; font-weight: 700; }
.result-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.mobile-room-strip { display: none; }
.under-table { display: flex; justify-content: space-between; gap: 12px; padding: 11px 4px 2px; color: #92a6ba; font-size: 10px; }
.under-table span { display: flex; align-items: center; gap: 5px; }
.lock-icon { color: #69dcb7; font-style: normal; }
.under-table button { padding: 0; border: 0; color: #c2d4e5; background: none; cursor: pointer; }
.under-table button:hover { color: #72e2ce; }
.under-table button b { color: #63d8c4; }

.social-panel { align-self: start; min-width: 0; overflow: hidden; border: 1px solid #1c3149; border-radius: 16px; background: linear-gradient(160deg, #0d1b2b, #0b1725); box-shadow: 0 16px 42px #02081255; }
.panel-section { padding: 15px 15px 14px; }
.friends-section { border-bottom: 1px solid #1b2d42; }
.panel-heading { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: #eff6ff; font-size: 13px; font-weight: 700; }
.panel-heading h2 > span { color: #5ccee3; font-size: 17px; }
.panel-more { width: 26px; height: 26px; border: 0; border-radius: 7px; color: #90a6bd; background: transparent; cursor: pointer; font-size: 23px; line-height: 1; }
.panel-more:hover { color: #fff; background: #172b42; }
.search-box { display: flex; height: 38px; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 0 10px; border: 1px solid #263e58; border-radius: 9px; color: #7f9ab1; background: #0b1928; transition: border-color .2s ease, box-shadow .2s ease; }
.search-box:focus-within { border-color: #348a9d; box-shadow: 0 0 0 3px #2b9c9c20; }
.search-box > span { font-size: 21px; line-height: 1; }
.search-box input { width: 100%; border: 0; outline: 0; color: #edf6ff; background: transparent; font-size: 10px; }
.search-box input::placeholder { color: #8297ad; }
.friend-list { display: grid; gap: 2px; }
.friend-row { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 7px 0; border-radius: 10px; transition: background .18s ease; }
.friend-row:hover { background: #14263b; }
.friend-row .avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 12px; }
.friend-info { min-width: 0; flex: 1; }
.friend-info strong { display: block; overflow: hidden; color: #e3ecf8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.friend-info small { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #9aacc0; font-size: 9px; }
.friend-info small i { width: 6px; height: 6px; border-radius: 50%; background: #40d39e; }
.friend-info small .status-idle { background: #e3b84d; }
.friend-info small .status-offline { background: #72849a; }
.friend-action { min-width: 64px; height: 32px; padding: 0 10px; border: 1px solid #315a8c; border-radius: 9px; color: #d8e9ff; background: linear-gradient(130deg, #122c4c, #183760); cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; font-size: 9px; font-weight: 650; }
.friend-action:hover { transform: translateY(-1px); border-color: #5a9bd8; background: #214c7e; }
.invite-friend { border-color: #293f5b; color: #b7c8dc; background: #101e30; }
.activity-section { padding-top: 14px; }
.activity-filter { padding: 5px 8px; border: 1px solid #273c55; border-radius: 8px; color: #aabbd0; background: #101e30; cursor: pointer; font-size: 9px; }
.activity-filter span { margin-left: 5px; }
.activity-list { display: grid; gap: 3px; margin-top: 8px; }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1c2e41; }
.activity-row:last-child { border-bottom: 0; }
.activity-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #102136; font-size: 17px; }
.activity-icon.gold { color: #edbd4e; background: #453719; }
.activity-icon.blue { color: #72baff; background: #15294b; }
.activity-icon.green { color: #5de0a1; background: #123a36; }
.activity-row p { min-width: 0; margin: 0; }
.activity-row strong { display: block; overflow: hidden; color: #e1ebf6; font-size: 9px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.activity-row em { color: #f1ca63; font-style: normal; font-weight: 700; }
.activity-row small { display: block; margin-top: 4px; color: #8498ae; font-size: 8px; }
.discord-callout { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px; border: 1px solid #2e3c64; border-radius: 11px; background: linear-gradient(110deg, #171c3b, #132444); }
.discord-mark { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 9px; color: white; background: #5865f2; font-size: 19px; }
.discord-callout span:nth-child(2) { min-width: 0; flex: 1; }
.discord-callout strong, .discord-callout small { display: block; }
.discord-callout strong { color: #e5eaff; font-size: 9px; }
.discord-callout small { margin-top: 3px; color: #9ba9c8; font-size: 8px; line-height: 1.4; }
.discord-callout button { width: 25px; height: 25px; border: 0; border-radius: 7px; color: #c6d0ff; background: #283562; cursor: pointer; font-size: 19px; }
.discord-callout button:hover { background: #3a4c8b; }

.subpage { min-height: 680px; padding: 30px; border: 1px solid #1d344b; border-radius: 18px; background: radial-gradient(ellipse at 80% 0, #17344a 0, #0d1b2c 50%); box-shadow: 0 20px 56px #02081266; }
.subpage-heading { position: relative; padding: 4px 0 24px; }
.eyebrow { color: #55d5c2; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.subpage-heading h1 { margin: 8px 0 4px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.subpage-heading p { margin: 0; color: #9aacc0; font-size: 12px; }
.create-table { position: absolute; top: 23px; right: 0; height: 40px; padding: 0 15px; border: 1px solid #46cabf; border-radius: 10px; color: #effffc; background: linear-gradient(120deg, #137c87, #188c82); box-shadow: 0 5px 14px #0004; cursor: pointer; font-size: 11px; font-weight: 700; transition: transform .18s ease, filter .18s ease; }
.create-table:hover { transform: translateY(-2px); filter: brightness(1.13); }
.table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.table-tile { position: relative; display: flex; min-height: 184px; overflow: hidden; border: 1px solid #29445d; border-radius: 15px; background: linear-gradient(130deg, #132a40, #0d1b2b); box-shadow: 0 8px 20px #02081255; transition: transform .22s ease, border-color .22s ease; }
.table-tile:hover { transform: translateY(-3px); border-color: #39708a; }
.tile-art { display: grid; width: 145px; flex: 0 0 145px; place-items: center; overflow: hidden; color: #67dec2; background: radial-gradient(circle at 55% 55%, #1e745e, #0c3b38 72%); font-family: Georgia, serif; font-size: 49px; text-shadow: 0 5px 15px #001; }
.tile-art span { margin: -30px 0; color: #f08a8a; font-size: 45px; }
.alt-art { color: #ecd078; background: radial-gradient(circle at 55% 55%, #72552d, #30291d 72%); }
.alt-art span { color: #e4e9ef; }
.violet-art { color: #adb7ff; background: radial-gradient(circle at 55% 55%, #504e8f, #242646 72%); }
.violet-art span { color: #f3a3ac; }
.tile-content { min-width: 0; flex: 1; padding: 16px; }
.table-tag { display: inline-flex; align-items: center; min-height: 21px; margin-right: 5px; padding: 0 7px; border: 1px solid #2a4660; border-radius: 999px; color: #a6bdd0; background: #0c1b2a; font-size: 8px; font-weight: 750; letter-spacing: .04em; }
.live-tag { border-color: #246d58; color: #75e1b2; background: #123428; }
.tile-content h2 { margin: 11px 0 3px; font-size: 14px; }
.tile-content p { margin: 0; color: #92a8bc; font-size: 9px; }
.join-table { display: flex; min-width: 116px; height: 32px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 0 10px; border: 1px solid #2e6074; border-radius: 8px; color: #d9f5f6; background: #12374a; cursor: pointer; font-size: 9px; font-weight: 650; transition: background .18s ease, transform .18s ease; }
.join-table:hover { transform: translateX(2px); background: #19566a; }
.join-table span { font-size: 15px; }
.tile-seats { position: absolute; top: 14px; right: 13px; color: #c1d1dd; font-size: 10px; }
.ranking-page { background: radial-gradient(ellipse at 50% -10%, #24304b, #0d1b2c 60%); }
.period-switch { display: inline-flex; gap: 3px; margin-top: 20px; padding: 4px; border: 1px solid #263d56; border-radius: 10px; background: #0b1927; }
.period-switch button { min-height: 29px; padding: 0 11px; border: 0; border-radius: 7px; color: #9db0c3; background: transparent; cursor: pointer; font-size: 9px; }
.period-switch button.selected { color: #eff8ff; background: #1d3e5a; }
.rank-list { display: grid; max-width: 720px; gap: 8px; margin: 9px auto 0; }
.rank-row { display: grid; grid-template-columns: 38px 45px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 71px; padding: 9px 15px; border: 1px solid #233a52; border-radius: 13px; background: #0c1c2dcc; box-shadow: 0 5px 14px #02081244; }
.rank-first { border-color: #a17c3a; background: linear-gradient(100deg, #302715, #122236); box-shadow: 0 0 25px #d3a84413; }
.rank-number { color: #8298ae; font-size: 17px; font-weight: 800; text-align: center; }
.rank-first .rank-number { color: #f2ca63; }
.rank-row .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.rank-row > strong { font-size: 11px; }
.rank-row > strong small { display: block; margin-top: 4px; color: #8fa4b8; font-size: 8px; font-weight: 500; }
.rank-score { color: #f1ce70; font-size: 13px; font-weight: 750; }
.rank-score small { color: #b2c0cc; font-size: 9px; font-weight: 500; }
.toast { position: fixed; z-index: 60; bottom: 24px; left: 50%; max-width: calc(100vw - 32px); padding: 11px 17px; border: 1px solid #305971; border-radius: 10px; color: #eaf8ff; background: #10283b; box-shadow: 0 10px 30px #0009; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .25s ease; font-size: 11px; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.rules-dialog { position: fixed; width: min(420px, calc(100vw - 28px)); padding: 26px; border: 1px solid #31516c; border-radius: 17px; color: #eef6ff; background: linear-gradient(145deg, #122a40, #0b1928); box-shadow: 0 25px 80px #000b; }
.rules-dialog::backdrop { background: #020812b8; backdrop-filter: blur(5px); }
.rules-dialog form { position: absolute; top: 10px; right: 10px; }
.dialog-close { width: 30px; height: 30px; border: 0; border-radius: 8px; color: #b5c5d5; background: #1b3349; cursor: pointer; font-size: 20px; }
.dialog-kicker { color: #58dec3; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.rules-dialog h2 { margin: 8px 0 12px; font-size: 24px; }
.rules-dialog p { color: #b6c5d4; font-size: 11px; line-height: 1.7; }
.rules-dialog .virtual-note { padding: 10px; border: 1px solid #315647; border-radius: 9px; color: #a8e9cd; background: #112b26; }
.dialog-ok { width: 100%; height: 39px; margin-top: 6px; border: 0; border-radius: 9px; color: #f4fffc; background: linear-gradient(120deg, #168c8d, #20aa87); cursor: pointer; font-size: 11px; font-weight: 700; }

@keyframes deal-card { from { opacity: 0; transform: translateY(-22px) rotate(-7deg) scale(.92); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes draw-card { 0% { opacity: 0; transform: translate(95px, -70px) rotate(13deg) scale(.85); } 75% { opacity: 1; transform: translate(-4px, 3px) rotate(-2deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } }
@keyframes seat-pulse { 0%,100% { box-shadow: 0 0 0 1px #20d9a555, 0 0 20px #1ce9b633; } 50% { box-shadow: 0 0 0 2px #20d9a588, 0 0 30px #1ce9b655; } }
.card-drawn { animation: draw-card .48s cubic-bezier(.15,.85,.28,1) both; }
.current-seat { animation: seat-pulse 3s ease-in-out infinite; }

@media (max-width: 1220px) {
  .topbar { gap: 18px; padding-right: 17px; padding-left: 17px; }
  .nav-item { padding: 0 10px; font-size: 11px; }
  .app-shell { grid-template-columns: minmax(0, 1fr) 292px; gap: 12px; padding: 12px; }
  .table-stage { min-height: 700px; }
  .seat-row { right: 11px; left: 11px; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 6px; }
  .seat-card { min-height: 128px; padding-right: 4px; padding-left: 4px; }
  .game-controls { gap: 7px; }
  .game-button { min-width: 130px; padding: 0 11px; }
  .bet-control { gap: 6px; }
}
@media (max-width: 980px) {
  .topbar { position: relative; height: auto; min-height: 68px; flex-wrap: wrap; gap: 4px 15px; padding: 10px 14px; }
  .brand { margin-right: auto; }
  .brand-name { font-size: 16px; }
  .main-nav { order: 3; width: 100%; height: 42px; overflow-x: auto; }
  .nav-item { flex: 0 0 auto; }
  .top-actions { gap: 7px; margin-left: 0; }
  .wallet { min-width: 120px; padding: 5px 8px; }
  .wallet strong { font-size: 11px; }
  .profile-button { min-width: unset; }
  .profile-button > span:nth-child(2), .profile-button b { display: none; }
  .app-shell { grid-template-columns: minmax(0, 1fr); max-width: 820px; padding: 12px; }
  .social-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .friends-section { border-right: 1px solid #1b2d42; border-bottom: 0; }
  .table-stage { height: min(760px, calc(100vh - 166px)); min-height: 660px; }
}
@media (max-width: 650px) {
  body { min-width: 360px; }
  .topbar { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 14px; }
  .wallet { min-width: 102px; gap: 6px; }
  .wallet .coin-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .wallet small { font-size: 8px; }
  .wallet strong { font-size: 10px; }
  .notification-button { width: 32px; height: 32px; flex-basis: 32px; }
  .main-nav { gap: 2px; }
  .nav-item { height: 37px; gap: 6px; padding: 0 9px; font-size: 9px; }
  .nav-item span { font-size: 15px; }
  .app-shell { padding: 7px; }
  .table-stage { height: 750px; min-height: 750px; border-radius: 14px; background-position: center; }
  .room-chip { top: 12px; left: 12px; min-width: 123px; padding: 8px 9px; gap: 5px; }
  .room-chip small { font-size: 8px; }
  .room-chip strong { font-size: 11px; }
  .room-capacity { font-size: 8px; }
  .table-note { top: 17px; right: 12px; font-size: 7px; }
  .dealer-zone { top: 12%; }
  .dealer-avatar { width: 39px; height: 39px; }
  .dealer-name { min-width: 71px; padding: 6px; }
  .dealer-cards { top: 28%; }
  .playing-card { width: 56px; height: 82px; flex-basis: 56px; }
  .card-suit { font-size: 27px; }
  .table-emblem { top: 42%; }
  .table-emblem strong { font-size: 24px; }
  .hand-area { top: 48%; }
  .player-cards .playing-card { width: 63px; height: 91px; flex-basis: 63px; }
  .player-cards .card-suit { font-size: 34px; }
  .game-controls { bottom: 23%; flex-wrap: wrap; gap: 7px; padding: 0 8px; }
  .bet-control { height: 45px; gap: 5px; padding: 0 5px 0 8px; }
  .bet-control .coin-icon { width: 21px; height: 21px; flex-basis: 21px; font-size: 11px; }
  .bet-control strong, .bet-control output { font-size: 9px; }
  .bet-control button { width: 25px; height: 25px; flex-basis: 25px; font-size: 16px; }
  .game-button { min-width: 118px; height: 45px; gap: 6px; padding: 0 10px; border-radius: 12px; }
  .game-button strong { font-size: 11px; }
  .game-button span { font-size: 15px; }
  .deal-button { min-width: 170px; }
  .seat-row { right: 8px; bottom: 9px; left: 8px; grid-template-columns: repeat(6, 100px); overflow-x: auto; padding: 8px 3px 8px; scrollbar-color: #385976 #102035; scrollbar-width: thin; }
  .seat-card { min-height: 119px; border-radius: 13px; }
  .seat-card .avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .result-toast { top: 55%; font-size: 11px; }
  .mobile-room-strip { display: flex; align-items: center; justify-content: space-between; padding: 9px 3px; color: #9fb2c6; font-size: 9px; }
  .mobile-room-strip span { display: flex; align-items: center; gap: 6px; }
  .mobile-room-strip button { border: 0; color: #75d9d1; background: transparent; cursor: pointer; font-size: 9px; }
  .under-table { padding: 5px 3px 0; font-size: 8px; }
  .social-panel { grid-template-columns: minmax(0, 1fr); }
  .friends-section { border-right: 0; border-bottom: 1px solid #1b2d42; }
  .subpage { min-height: 620px; padding: 20px 14px; }
  .subpage-heading { padding-bottom: 20px; }
  .subpage-heading h1 { font-size: 25px; }
  .subpage-heading p { max-width: 65%; font-size: 10px; }
  .create-table { top: 36px; height: 34px; padding: 0 9px; font-size: 9px; }
  .table-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .table-tile { min-height: 160px; }
  .tile-art { width: 105px; flex-basis: 105px; font-size: 38px; }
  .tile-art span { font-size: 34px; }
  .tile-content { padding: 12px 10px; }
  .tile-content h2 { font-size: 12px; }
  .tile-content p { font-size: 8px; }
  .join-table { margin-top: 10px; }
  .rank-row { grid-template-columns: 23px 39px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .rank-score { font-size: 11px; }
}

/* Table-first layout: player hands follow the curved lower edge; controls stay below the felt. */
.main-nav .nav-item[data-view="game"] { min-width: 160px; }
.header-room { display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #203a55; border-radius:12px; color:#b7c8d8; background:#0b1a2a; font-size:10px; white-space:nowrap; }
.header-room i { height:20px; margin:0 5px; border-left:1px solid #29415a; }
.header-room > span:nth-last-child(1) { color:#afc5db; font-size:16px; }
.discord-button { display:flex; height:42px; align-items:center; gap:9px; padding:0 15px; border:1px solid #6871ff; border-radius:11px; color:#fff; background:linear-gradient(120deg,#4a5bdf,#6254ed); box-shadow:0 6px 18px #363bcc55; cursor:pointer; transition:filter .2s,transform .2s; }
.discord-button:hover { filter:brightness(1.12); transform:translateY(-1px); }
.app-shell { grid-template-columns:minmax(0,1fr) 324px; }
.table-stage { min-height:590px; height:calc(100vh - 285px); max-height:850px; background-position:center 50%; }
.dealer-zone { top:8%; }
.dealer-cards { top:21%; }
.table-emblem { top:47%; }
.room-chip { top:17px; left:17px; }
.table-seats { position:absolute; z-index:3; inset:0; pointer-events:none; }
.table-seat { position:absolute; display:flex; width:15%; min-width:110px; flex-direction:column; align-items:center; gap:3px; transform:translateX(-50%); pointer-events:auto; }
.seat-1 { left:11%; bottom:10%; }
.seat-2 { left:27%; bottom:7%; }
.seat-3 { left:44%; bottom:5%; }
.seat-4 { left:61%; bottom:5%; }
.seat-5 { left:78%; bottom:7%; }
.seat-6 { left:93%; bottom:10%; }
.seat-hand { display:flex; height:82px; align-items:flex-end; justify-content:center; padding:0 2px; }
.seat-score { position:absolute; bottom:calc(100% + 4px); left:50%; z-index:4; padding:3px 10px; border:1px solid #39d8c277; border-radius:999px; color:#9effe6; background:#06232beF; box-shadow:0 3px 12px #0009,0 0 14px #16cdb422; font-size:11px; font-weight:800; white-space:nowrap; transform:translateX(-50%); animation:score-pop .2s ease-out both; }
.seat-score.is-busted { border-color:#ff657577; color:#ff858e; background:#35131deF; }
.seat-hand .playing-card { width:48px; height:70px; flex-basis:48px; margin-left:-15px; padding:5px; border-radius:6px; }
.seat-hand .playing-card:first-child { margin-left:0; }
.seat-hand .card-corner { font-size:12px; }
.seat-hand .card-corner small { font-size:9px; }
.seat-hand .card-suit { font-size:23px; }
.seat-hand.own-hand .playing-card { width:58px; height:82px; flex-basis:58px; margin-left:-13px; }
.seat-hand.own-hand .card-corner { font-size:16px; }
.seat-hand.own-hand .card-suit { font-size:30px; }
.seat-meta { position:relative; display:flex; width:100%; min-height:57px; align-items:center; gap:7px; padding:5px 7px; border:1px solid #23455b; border-radius:16px; background:linear-gradient(145deg,#081929ed,#102941ee); box-shadow:0 6px 18px #0008,inset 0 1px #ffffff12; backdrop-filter:blur(7px); }
.seat-meta .avatar { width:42px; height:42px; flex-basis:42px; border-width:2px; }
.seat-info { min-width:0; flex:1; }
.seat-name { display:block; overflow:hidden; color:#eff6ff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.seat-state { display:block; margin-top:3px; color:#9eb2c5; font-size:8px; white-space:nowrap; }
.seat-wager { position:absolute; right:7px; bottom:-19px; padding:2px 7px; border:1px solid #2b4862; border-radius:99px; color:#f3d17b; background:#0b1a29e8; font-size:8px; }
.turn-active .seat-meta { border-color:#23e2b8; box-shadow:0 0 0 2px #16d9b344,0 0 22px #1ce9b655; }
.avatar-timed { outline:3px solid #45dfb7; outline-offset:2px; }
.seat-timer { position:absolute; top:-8px; left:-6px; display:grid; width:30px; height:30px; place-items:center; border:2px solid #33d8b5; border-radius:50%; color:#ecfff9; background:#09221feF; box-shadow:0 0 0 2px #0b1929; font-size:8px; font-weight:800; }
.empty-table-seat { min-height:88px; justify-content:center; border:1px dashed #7392a099; border-radius:50%; color:#c6d7e4; background:#07182488; cursor:pointer; }
.empty-plus { display:grid; width:42px; height:42px; place-items:center; border:1px dashed #91aabb; border-radius:50%; font-size:25px; }
.empty-table-seat small { font-size:8px; }
.result-toast { top:45%; }
.bottom-controls { display:grid; grid-template-columns:minmax(125px,.9fr) minmax(195px,1.1fr) minmax(170px,1fr) minmax(145px,.95fr) minmax(145px,.95fr); align-items:center; gap:10px; min-height:108px; margin-top:10px; padding:13px 15px; border:1px solid #1c354d; border-radius:16px; background:linear-gradient(120deg,#0c1b2beF,#0c1a2a); box-shadow:0 12px 32px #02081255; }
.bottom-controls { min-height:142px; }
.bet-panel { display:grid; min-width:0; gap:6px; }
.bet-panel .bet-control { height:52px; }
.quick-bets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.quick-bets button { min-width:0; height:27px; padding:0 3px; border:1px solid #31516a; border-radius:7px; color:#c8d8e5; background:#10263a; cursor:pointer; font-size:8px; font-weight:700; transition:background .18s,border-color .18s,color .18s; }
.quick-bets button:hover:not(:disabled) { border-color:#3ed4c0; color:#eafffb; background:#16434b; }
.quick-bets button:disabled { opacity:.35; cursor:not-allowed; }
.bottom-wallet { min-width:0; min-height:66px; padding:9px 11px; }
.bottom-wallet strong { font-size:16px; }
.bet-control { height:68px; gap:7px; padding:0 9px; }
.bet-control .bet-label { display:grid; gap:4px; min-width:55px; margin-right:auto; }
.bet-control output { font-size:13px; }
.bet-control button { width:37px; height:37px; flex-basis:37px; border-radius:9px; font-size:22px; }
.turn-summary { display:flex; min-width:0; align-items:center; gap:9px; }
.turn-light { width:17px; height:17px; flex:0 0 17px; border-radius:50%; background:#22d9a8; box-shadow:0 0 0 8px #20d9a822; }
.turn-summary > span:nth-child(2) { min-width:0; }
.turn-summary strong,.turn-summary small { display:block; }
.turn-summary strong { overflow:hidden; color:#f1f7ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.turn-summary small { margin-top:4px; color:#92a7bb; font-size:8px; line-height:1.4; }
.timer-readout { color:#72e4cd; font-size:14px; }
.game-button { min-width:0; width:100%; height:66px; gap:10px; padding:0 12px; border-radius:13px; text-align:left; }
.game-button > span:first-child { font-size:23px; }
.game-button > span:nth-child(2) strong,.game-button > span:nth-child(2) small { display:block; }
.game-button > span:nth-child(2) strong { font-size:12px; white-space:nowrap; }
.game-button > span:nth-child(2) small { margin-top:4px; font-size:8px; opacity:.85; white-space:nowrap; }
.game-button:disabled { opacity:.4; }
.mobile-room-strip { display:none; }
.table-seat.current-seat { animation:none !important; box-shadow:none !important; border:0 !important; }
.turn-active .seat-meta { border-color:#23455b; box-shadow:0 6px 18px #0008,inset 0 1px #ffffff12; }
.urgent-countdown { position:absolute; z-index:8; top:34%; left:50%; display:grid; justify-items:center; min-width:190px; padding:2px 22px 9px; color:#ff293b; text-align:center; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 16px #000e); animation:urgent-pop .32s cubic-bezier(.2,.9,.3,1.1) both; }
.urgent-countdown small { color:#ffabb2; font-size:11px; font-weight:800; letter-spacing:.24em; text-shadow:0 2px 8px #000; }
.urgent-countdown strong { color:#ff293b; font-size:clamp(96px,14vw,176px); font-weight:800; line-height:.95; text-shadow:0 0 18px #ff182dcc,0 6px 16px #000c; }
.urgent-countdown span { margin-top:2px; color:#ffe6e8; font-size:15px; font-weight:800; text-shadow:0 2px 9px #000; }
.empty-data { display:grid; gap:6px; padding:17px 8px; color:#c0d0df; font-size:10px; }
.empty-data small { color:#879db3; font-size:9px; line-height:1.5; }
.rank-list.empty-data { justify-items:center; max-width:none; min-height:200px; align-content:center; border:1px dashed #294760; border-radius:14px; background:#0a1928aa; text-align:center; }
.rank-list.empty-data > span { color:#63d6c1; font-size:30px; }
.avatar.has-discord-avatar { overflow:hidden; color:transparent; background-size:cover; background-position:center; }
.avatar.has-discord-avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.wallet.is-debt .coin-icon { color:#fff; border-color:#ff6575; background:linear-gradient(145deg,#d8475b,#7e2435); box-shadow:0 0 14px #ff536344; }
.wallet.is-debt small,.wallet.is-debt strong { color:#ff7180; }
@keyframes urgent-pop { from { opacity:0; transform:translate(-50%,-45%) scale(.75); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes score-pop { from { opacity:0; translate:0 3px; } to { opacity:1; translate:0 0; } }

/* Phone-first behavior: ask for landscape in a browser, and use a compact felt layout once rotated. */
.orientation-hint { display:none; }
.orientation-card { width:min(420px,calc(100vw - 36px)); padding:25px; border:1px solid #2c5268; border-radius:22px; color:#e8f4ff; background:linear-gradient(145deg,#10283a,#091725); box-shadow:0 25px 80px #000b; text-align:center; }
.orientation-icon { display:grid; width:58px; height:58px; margin:0 auto 14px; place-items:center; border:1px solid #2bcab7; border-radius:17px; color:#58ead1; background:#12343d; font-size:27px; }
.orientation-card h2 { margin:0 0 9px; font-size:20px; }
.orientation-card p { margin:0 0 18px; color:#a8bacb; font-size:13px; line-height:1.65; }
.orientation-button { min-height:43px; padding:0 17px; border:1px solid #22bda9; border-radius:11px; color:#f3fffc; background:linear-gradient(120deg,#168c9a,#168d75); font-weight:700; cursor:pointer; }
@media (max-width:760px) and (orientation:portrait) {
  .orientation-hint { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; background:radial-gradient(ellipse at 50% 40%,#17374a,#06111e 72%); }
}
@media (orientation:landscape) and (max-height:600px) {
  body { min-width:0; overflow-x:hidden; }
  .topbar { position:relative; display:flex; height:52px; min-height:52px; flex-wrap:nowrap; gap:8px; padding:5px 12px; }
  .brand { gap:7px; }
  .brand-mark { width:32px; height:32px; flex-basis:32px; }
  .brand-name { font-size:12px; }
  .main-nav { order:0; width:auto; height:36px; overflow:visible; }
  .main-nav .nav-item[data-view="game"] { min-width:0; }
  .nav-item { height:32px; padding:0 8px; font-size:9px; }
  .top-actions { gap:6px; margin-left:auto; }
  .discord-button { height:32px; padding:0 9px; font-size:9px; }
  .discord-button span { display:inline; }
  .app-shell { grid-template-columns:minmax(0,1fr); gap:6px; max-width:none; padding:7px; }
  .social-panel { display:none !important; }
  .table-stage { height:calc(100svh - 177px); min-height:245px; max-height:none; border-radius:14px; }
  .room-chip { top:7px; left:9px; min-width:100px; padding:5px 7px; }
  .room-chip small,.room-capacity { font-size:7px; }
  .room-chip strong { font-size:9px; }
  .table-note { top:9px; right:10px; font-size:7px; }
  .dealer-zone { top:4%; }
  .dealer-avatar { width:29px; height:29px; }
  .dealer-name { min-width:65px; padding:4px; font-size:8px; }
  .dealer-name span { font-size:7px; }
  .dealer-cards { top:17%; }
  .playing-card { width:39px; height:57px; flex-basis:39px; }
  .card-suit { font-size:20px; }
  .table-emblem { top:44%; }
  .table-emblem strong { font-size:18px; }
  .table-emblem small { font-size:6px; }
  .table-seat { width:15%; min-width:72px; gap:1px; }
  .seat-1 { left:9%; bottom:4%; }
  .seat-2 { left:25%; bottom:3%; }
  .seat-3 { left:42%; bottom:2%; }
  .seat-4 { left:59%; bottom:2%; }
  .seat-5 { left:76%; bottom:3%; }
  .seat-6 { left:92%; bottom:4%; display:flex; }
  .seat-hand { height:43px; }
  .seat-hand .playing-card { width:29px; height:42px; flex-basis:29px; margin-left:-9px; padding:3px; }
  .seat-hand .card-corner { font-size:8px; }
  .seat-hand .card-corner small { font-size:6px; }
  .seat-hand .card-suit { font-size:15px; }
  .seat-hand.own-hand .playing-card { width:34px; height:49px; flex-basis:34px; margin-left:-9px; }
  .seat-hand.own-hand .card-corner { font-size:9px; }
  .seat-hand.own-hand .card-suit { font-size:17px; }
  .seat-meta { min-height:34px; gap:4px; padding:3px 4px; border-radius:9px; }
  .seat-meta .avatar { width:26px; height:26px; flex-basis:26px; }
  .seat-name { font-size:7px; }
  .seat-state,.seat-wager { font-size:6px; }
  .seat-wager { bottom:-12px; }
  .seat-timer { top:-5px; left:-4px; width:21px; height:21px; font-size:6px; }
  .empty-table-seat { min-height:50px; }
  .empty-plus { width:25px; height:25px; font-size:17px; }
  .empty-table-seat small { font-size:6px; }
  .bottom-controls { grid-template-columns:minmax(90px,.8fr) minmax(150px,1.25fr) minmax(120px,1fr) repeat(2,minmax(110px,1fr)); gap:6px; min-height:72px; margin-top:5px; padding:6px; border-radius:11px; }
  .bottom-wallet { display:flex; min-height:45px; padding:5px; }
  .bottom-wallet .coin-icon { width:22px; height:22px; flex-basis:22px; }
  .bottom-wallet small { font-size:7px; }
  .bottom-wallet strong { font-size:10px; }
  .bet-panel { gap:3px; }
  .bet-panel .bet-control { height:38px; }
  .bet-control { height:38px; gap:4px; padding:0 4px; }
  .bet-control .coin-icon { display:none; }
  .bet-control strong,.bet-control output { font-size:8px; }
  .bet-control button { width:26px; height:26px; flex-basis:26px; font-size:16px; }
  .quick-bets { gap:2px; }
  .quick-bets button { height:19px; font-size:6px; }
  .turn-summary { display:flex; gap:5px; }
  .turn-light { width:11px; height:11px; flex-basis:11px; box-shadow:0 0 0 4px #20d9a822; }
  .turn-summary strong { font-size:8px; }
  .turn-summary small { font-size:6px; }
  .timer-readout { font-size:9px; }
  .game-button { height:49px; gap:5px; padding:0 6px; border-radius:9px; }
  .game-button > span:first-child { font-size:16px; }
  .game-button > span:nth-child(2) strong { font-size:9px; }
  .game-button > span:nth-child(2) small { font-size:6px; }
  .under-table { display:none; }
  .urgent-countdown { top:31%; }
  .urgent-countdown strong { font-size:clamp(72px,18vh,108px); }
}

@media (max-width:1400px) {
  .bottom-controls { grid-template-columns:1fr 1.15fr 1fr 1fr 1fr; }
  .turn-summary { display:none; }
  .table-seat { width:16%; min-width:90px; }
  .seat-meta { gap:5px; padding:4px; }
  .seat-meta .avatar { width:36px; height:36px; flex-basis:36px; font-size:11px; }
}
@media (max-width:980px) {
  .header-room { display:none; }
  .app-shell { grid-template-columns:minmax(0,1fr); }
  .table-stage { height:680px; min-height:680px; }
  .bottom-controls { grid-template-columns:1fr 1.2fr 1fr 1fr; }
  .bottom-wallet { display:none; }
  .turn-summary { display:flex; }
  .social-panel { display:grid; }
}
@media (max-width:650px) {
  .discord-button { height:35px; padding:0 10px; font-size:10px; }
  .discord-button span { display:none; }
  .table-stage { height:650px; min-height:650px; background-position:center; }
  .dealer-zone { top:11%; }
  .dealer-cards { top:24%; }
  .table-emblem { top:45%; }
  .table-emblem strong { font-size:20px; }
  .room-chip { top:10px; left:9px; min-width:110px; }
  .table-note { top:16px; right:9px; }
  .table-seat { width:22%; min-width:0; }
  .seat-1 { left:11%; bottom:9%; }
  .seat-2 { left:31%; bottom:5%; }
  .seat-3 { left:50%; bottom:4%; }
  .seat-4 { left:69%; bottom:5%; }
  .seat-5 { left:88%; bottom:9%; }
  .seat-6 { display:none; }
  .seat-hand { height:63px; }
  .seat-hand .playing-card { width:37px; height:55px; flex-basis:37px; margin-left:-12px; padding:4px; }
  .seat-hand .card-corner { font-size:10px; }
  .seat-hand .card-corner small { font-size:7px; }
  .seat-hand .card-suit { font-size:19px; }
  .seat-hand.own-hand .playing-card { width:42px; height:61px; flex-basis:42px; }
  .seat-hand.own-hand .card-corner { font-size:12px; }
  .seat-hand.own-hand .card-suit { font-size:22px; }
  .seat-meta { min-height:43px; border-radius:11px; }
  .seat-meta .avatar { width:29px; height:29px; flex-basis:29px; font-size:9px; }
  .seat-name { font-size:8px; }
  .seat-state { font-size:7px; }
  .seat-wager { bottom:-16px; font-size:7px; }
  .seat-timer { width:25px; height:25px; font-size:7px; }
  .bottom-controls { grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; padding:9px; }
  .bottom-wallet { display:flex; min-height:53px; grid-column:1; }
  .bottom-wallet strong { font-size:12px; }
  .bet-control { height:53px; grid-column:2; gap:4px; padding:0 5px; }
  .bet-panel { grid-column:2; gap:4px; }
  .bet-panel .bet-control { height:45px; grid-column:auto; }
  .quick-bets { gap:3px; }
  .quick-bets button { height:24px; padding:0 1px; font-size:7px; }
  .bet-control .coin-icon { display:none; }
  .bet-control strong { font-size:9px; }
  .bet-control output { font-size:10px; }
  .bet-control button { width:29px; height:29px; flex-basis:29px; font-size:17px; }
  .turn-summary { grid-column:1/-1; padding:5px 4px; }
  .turn-summary strong { font-size:10px; }
  .game-button { height:52px; gap:7px; padding:0 8px; }
  .game-button > span:first-child { font-size:18px; }
  .game-button > span:nth-child(2) strong { font-size:10px; }
  .game-button > span:nth-child(2) small { font-size:7px; }
  .mobile-room-strip { display:flex; }
  .under-table { display:none; }
}