#tables-screen { --lobby-muted: #a9c8eb; --lobby-line: #085578; --lobby-accent: #00c5ed; position: absolute; inset: 0 0 72px; z-index: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; color: #f7fbff; background: radial-gradient(ellipse at 20% 5%, #052940 0%, #021a2d 60%, #031a30 100%); scrollbar-width: none; }
#tables-screen::-webkit-scrollbar { display: none; }
#tables-screen[hidden], #tables-screen [hidden] { display: none !important; }
#tables-screen:focus { outline: none; }
.tables-layout { width: 100%; max-width: 760px; margin: auto; padding: 26px 18px 18px; }
#tables-screen p { color: var(--lobby-muted, #a9c8eb); line-height: 1.5; }
#tables-screen button, .tables-filter { min-height: 44px; border: 1px solid var(--lobby-line, #085578); border-radius: 14px; background: #07324c66; color: #abd0f3; font: 600 15px/1.3 system-ui, sans-serif; cursor: pointer; }
#tables-screen button:disabled { opacity: .5; cursor: not-allowed; }
#tables-screen button:not(:disabled):active { filter: brightness(.86); }
#tables-screen svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tables-heading, .tables-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tables-heading h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 6px; }
.tables-heading p { font-size: 15px; }
#tables-screen .tables-icon-button { width: 44px; height: 44px; padding: 10px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.tables-balance { display: flex; align-items: center; gap: 12px; border: 1px solid var(--lobby-line); border-radius: 16px; padding: 16px 14px; margin: 22px 0 16px; background: #07314a55; }
#tables-screen .tables-balance > svg { width: 30px; height: 30px; color: var(--lobby-accent); }
.tables-balance > div { flex: 1; min-width: 0; }
.tables-balance span { display: block; color: var(--lobby-muted); font-size: 12px; margin-bottom: 3px; }
.tables-balance strong { display: block; line-height: 1.4; min-height: 1.4em; font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#tables-screen #tables-funds { border: 0; border-left: 1px solid #17516c; border-radius: 0; background: none; color: var(--lobby-accent); padding: 0 0 0 12px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tables-tools { display: flex; justify-content: space-between; gap: 12px; }
#tables-quick { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.tables-filter { display: flex; align-items: center; padding: 0 10px; gap: 8px; min-width: 0; }
.tables-filter svg { width: 20px !important; }
#tables-stake { border: 0; font: inherit; color: #abd0f3; background: transparent; max-width: 142px; min-height: 44px; cursor: pointer; }
#tables-stake option { background: #06243b; }
#tables-screen .tables-status { min-height: 1.5em; font-size: 13px; margin: 14px 0; color: #b1def3; }
#tables-screen .tables-status[data-error="true"] { color: #ffb8b8; }
#tables-toast { position: absolute; z-index: 6; left: 50%; bottom: 88px; transform: translateX(-50%); width: max-content; max-width: min(420px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #085578; border-radius: 14px; background: #08283f; color: #f7fbff; box-shadow: 0 8px 24px #0005; font-size: 15px; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
#tables-toast[data-visible="true"] { opacity: 1; }
#tables-toast[data-error="true"] { border-color: #a45b70; }
#tables-toast svg { width: 24px; height: 24px; flex-shrink: 0; color: #00c5ed; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#tables-toast[data-error="true"] svg { color: #ffb8b8; }
#tables-toast-message { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { #tables-toast { transition: none; } }
.tables-section-heading { margin: 22px 0 12px; }
.tables-section-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.tables-section-heading > span { min-width: 76px; text-align: right; color: var(--lobby-muted, #a9c8eb); font-size: 13px; white-space: nowrap; }
#tables-results { min-height: 220px; }
#tables-results:not([data-state="populated"]) { display: grid; border: 1px dashed #1b5872; border-radius: 16px; background: #05273c55; }
.tables-placeholder { min-height: 218px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--lobby-muted); font-size: 14px; --spinner-size: 32px; }
#tables-list { display: grid; gap: 10px; }
.table-card { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.16fr) minmax(clamp(72px, 20vw, 96px), max-content); align-items: center; gap: 10px; min-height: 104px; border: 1px solid var(--lobby-line); border-radius: 16px; padding: 14px 12px; background: linear-gradient(110deg, #06344c99, #04273d66); }
.table-card img { width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: contain; display: block; }
.table-details { min-width: 0; }
.table-card h3 { font-size: 1rem; line-height: 1.25; font-weight: 750; letter-spacing: -.025em; margin: 0 0 6px; overflow-wrap: anywhere; }
#tables-screen .table-card .table-stake { color: #f7fbff; font-size: .9375rem; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
#tables-screen .table-card .table-per, #tables-screen .table-card .table-players { font-size: .75rem; line-height: 1.35; }
.table-card .table-players { margin-top: 4px; display: flex; align-items: center; gap: 5px; }
#tables-screen .table-card[data-waiting="true"] .table-players { color: #03e8ba; font-weight: 700; }
#tables-screen .table-card[data-full="true"] .table-players { color: #ff944d; font-weight: 700; }
#tables-screen .table-players svg { width: 16px; height: 16px; stroke: none; }
.table-actions { display: grid; justify-items: stretch; gap: 14px; min-width: 0; }
.table-open { color: #03e8ba; font-size: .75rem; line-height: 1.25; display: flex; justify-content: center; align-items: center; gap: 6px; }
.table-card[data-full="true"] .table-open { color: #ff944d; }
.table-open::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; background: currentColor; border-radius: 50%; }
#tables-screen .table-join { min-height: 44px; padding: 9px 8px; border-radius: 13px; font-size: .9375rem; background: linear-gradient(135deg, #00c8ee, #00b8e6); }
:root[data-input-mode="keyboard"] #tables-screen .table-join:focus-visible { outline: 3px solid #d9f6ff; outline-offset: 3px; }
@media (hover: hover) { #tables-screen .table-join:not(:disabled):hover { filter: brightness(1.1); } }
#tables-screen .tables-primary { display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; color: #001824; background: #00bee9; border: 1px solid #29d6fa; font-weight: 750; }
#tables-telegram { min-height: 48px; border-radius: 12px; }
.tables-empty { align-self: center; text-align: center; padding: 30px 20px; }
#tables-screen .tables-empty svg { width: 80px; height: 48px; color: #4390b2; }
.tables-empty h3 { margin: 16px 0 5px; font-size: 17px; }
.tables-empty p { font-size: 14px; }
#tables-screen .tables-note { font-size: 12px; line-height: 1.5; }
.tables-phase-note { text-align: center; margin: 10px 4px; }
.tables-seat { padding: 0 16px 16px; background: #063a4c66; border: 1px solid #00a4c7; border-radius: 16px; }
.tables-seat .tables-section-heading { margin-top: 16px; }
#tables-seat-message { margin-bottom: 8px; }
#tables-leave { margin-top: 14px; padding: 8px 18px; }
@media (min-width: 600px) { .tables-layout { padding: 28px 30px; } .table-card { grid-template-columns: 160px 1fr 100px; padding: 18px; gap: 18px; } .table-card h3 { font-size: 1.25rem; } #tables-screen .table-card .table-stake { font-size: 1.125rem; } #tables-screen .table-card .table-per, #tables-screen .table-card .table-players, .table-open { font-size: .875rem; } }
@media (max-width: 359px) { .tables-layout { padding: 20px 12px; } .tables-balance { gap: 8px; padding: 12px; } #tables-screen .tables-balance > svg { display: none; } #tables-screen #tables-funds { font-size: 13px; } .table-card { grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr) minmax(64px,max-content); gap: 8px; padding: 14px 9px; } .table-card h3 { font-size: .875rem; } .tables-tools { gap: 8px; } #tables-quick { padding: 8px; font-size: 13px !important; } .tables-filter { font-size: 13px; gap: 5px; padding: 0 7px; } .tables-filter svg { display: none; } }

#tables-more { width: 100%; margin: 12px 0; }

#room-screen { --lobby-muted: #a9c8eb; position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; color: #f7fbff; background: radial-gradient(ellipse at 50% 28%, #06344c, #021a2d 75%); touch-action: pan-y; scrollbar-width: none; }
#room-screen::-webkit-scrollbar { display: none; }
#room-screen[hidden], #room-screen [hidden] { display: none !important; }
.room-layout { max-width: 560px; margin: auto; padding: 14px 16px 12px; }
#room-screen button { min-height: 48px; border-radius: 14px; font: inherit; font-weight: 650; cursor: pointer; }
#room-screen button:disabled { opacity: .5; cursor: default; }
:root[data-input-mode="keyboard"] #room-screen button:focus-visible { outline: 3px solid #d9f6ff; outline-offset: 3px; }
.room-back { display: flex; align-items: center; gap: 8px; background: none; color: #a9c8eb; border: 0; padding: 8px 0; }
.room-back svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; }
.room-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 12px; }
.room-heading-copy { min-width: 0; }
.room-heading h1 { margin: 0 0 5px; font-size: clamp(1.75rem, 7.5vw, 2.5rem); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
#room-subtitle { color: #a9c8eb; font-size: .875rem; line-height: 1.4; margin: 0; }
.room-stake-badge { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #306a8b; border-radius: 14px; background: #12384e66; flex-shrink: 0; }
.room-stake-badge .room-usdt { width: 32px; height: 32px; flex-shrink: 0; }
.room-stake-badge > div { display: grid; gap: 2px; }
.room-stake-badge span { color: #a9c8eb; font-size: .8125rem; }
.room-stake-badge strong { color: #f7fbff; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-table-art { max-width: 480px; width: 100%; margin: 0 auto 12px; }
.room-table-art img { display: block; width: 100%; height: auto; }
.room-seats { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); align-items: stretch; padding: 20px 10px 16px; border: 1px solid #245b79; border-radius: 20px; background: linear-gradient(120deg, #10364b66, #09283b88); }
.room-player { display: grid; grid-template-rows: 76px auto 30px 30px; align-content: start; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.room-identity { position: relative; width: 76px; height: 76px; margin: 0 auto; }
.room-identity::before { content: ''; position: absolute; inset: 4px; border: 4px solid #24465d; border-radius: 50%; }
.room-avatar { position: absolute; inset: 11px; display: grid; place-items: center; border: 1px solid #6287a5; border-radius: 50%; background: radial-gradient(ellipse at 30% 25%, #143d55, #08273c); color: #f7fbff; font-size: 1.375rem; font-weight: 650; }
.room-player[data-ready="true"] .room-identity::before { border-color: #4af2d6; }
.room-player[data-ready="true"] .room-avatar { border-color: transparent; }
.room-player[data-empty="true"] .room-identity::before { border-style: dashed; }
.room-ready-check { display: none; position: absolute; right: -1px; bottom: 0; place-items: center; width: 27px; height: 27px; border: 3px solid #072b40; border-radius: 50%; background: #4af2d6; color: #002f38; }
.room-player[data-ready="true"] .room-ready-check { display: grid; }
.room-ready-check svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.room-player h2 { margin: 0; font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; max-width: 100%; }
.room-player-status { display: flex; align-items: center; justify-content: center; gap: 6px; align-self: start; max-width: 100%; margin: 0; padding: 5px 14px; border: 1px solid transparent; border-radius: 24px; background: #153a53aa; color: #a9c8eb; font-size: .8125rem; line-height: 18px; }
.room-player-status svg { display: none; width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.room-player[data-ready="true"] .room-player-status { background: #03534f77; border-color: #08605b55; color: #4af2d6; }
.room-player[data-ready="true"] .room-player-status svg { display: block; }
.room-versus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #a9c8eb; font-size: .875rem; font-weight: 750; }
.room-versus::before, .room-versus::after { content: ''; width: 1px; flex: 1; max-height: 48px; background: #2c5b75; }
.room-seat-timer { position: absolute; inset: 0; color: #ffb844; pointer-events: none; }
.room-seat-timer svg { width: 100%; height: 100%; stroke-width: 3.5; }
.room-timer-track { stroke: #24465d; }
.room-timer-progress { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s linear; }
.room-countdown-pill { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; border: 1px solid #98712e; border-radius: 24px; background: #755d262b; color: #ffc264; font-size: .8125rem; line-height: 20px; white-space: nowrap; }
.room-countdown-pill svg { width: 18px; height: 18px; margin-right: 3px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.room-countdown-pill strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.room-waiting { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 74px; padding: 14px 0; }
#room-status { margin: 0; text-align: center; color: #f7fbff; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
#room-status[data-error="true"] { color: #ffb7bb; font-size: .875rem; }
#room-waiting-dots { display: flex; align-items: center; gap: 8px; height: 8px; }
#room-waiting-dots i { width: 8px; height: 8px; border-radius: 50%; background: #00c5ed; opacity: .3; animation: room-waiting-dot 1.8s ease-in-out infinite; }
#room-waiting-dots i:nth-child(2) { animation-delay: .3s; }
#room-waiting-dots i:nth-child(3) { animation-delay: .6s; }
@keyframes room-waiting-dot { 0%, 65%, 100% { opacity: .3; } 25% { opacity: 1; } }
.room-primary { width: 100%; padding: 12px; background: #00c5ed; border: 1px solid #41defa; color: #001824; font-size: 1.0625rem !important; }
#room-screen .room-primary[aria-pressed="true"]:disabled { opacity: 1; background: #03534f77; color: #4af2d6; border-color: #17675f; }
#room-screen .room-secondary { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 20px; padding: 18px 12px 8px; border: 0; border-top: 1px solid #28556f; border-radius: 0; background: transparent; color: #a9c8eb; font-weight: 500; }
.room-secondary svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#tables-return { margin-top: 14px; margin-right: 8px; }
@media (max-width: 359px) { .room-layout { padding: 12px; } .room-heading { gap: 8px; } .room-stake-badge { padding: 9px; gap: 6px; } .room-stake-badge .room-usdt { width: 26px; height: 26px; } .room-stake-badge strong { font-size: .875rem; } #room-subtitle { font-size: .75rem; } .room-seats { padding-inline: 6px; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); } .room-player-status { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .room-timer-progress { transition: none; } #room-waiting-dots i { animation: none; } #room-waiting-dots i:first-child { opacity: 1; } }

#online-starting { position: absolute; inset: 0; display: grid; place-items: center; z-index: 9; background: #021a2df5; color: #f7fbff; padding: 20px; text-align: center; }
#online-starting[hidden] { display: none; }
#online-starting h2 { font-size: 1.5rem; }
#online-starting p { color: #a9c8eb; line-height: 1.5; }

#room-exit-dialog { box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 28px); overflow-y: auto; margin: auto; padding: 24px; border: 1px solid #347899; border-radius: 20px; color: #f7fbff; background: radial-gradient(ellipse at top, #07344c, #031e33); box-shadow: 0 16px 60px #0008; }
#room-exit-dialog::backdrop { background: #00101dcc; }
#room-exit-dialog h2 { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.25; }
#room-exit-dialog p { color: #a9c8eb; line-height: 1.5; }
#room-exit-dialog #room-exit-error { color: #ffb7bb; }
.room-exit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.room-exit-actions button { min-height: 48px; padding: 12px; font: 600 1rem/1.3 system-ui, sans-serif; border-radius: 12px; border: 1px solid #41defa; background: #00c5ed; color: #001824; cursor: pointer; }
#room-exit-confirm { border-color: #ec7181; background: #4b1825; color: #ffd5db; }
:root[data-input-mode="keyboard"] .room-exit-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.room-exit-actions button:active { filter: brightness(.86); }
.room-exit-actions button:disabled { opacity: .5; cursor: default; }
@media (max-width: 359px) { #room-exit-dialog { padding: 20px; } .room-exit-actions { grid-template-columns: 1fr; } }

/* Stable, bounded loading state, including small landscape phones. */
.match-preparation-card { width: min(460px, 100%); box-sizing: border-box; max-height: 100%; overflow-y: auto; padding: 20px; border: 1px solid #286080; border-radius: 20px; background: #052438; }
#online-starting h2 { margin: 0 0 12px; }
#online-starting .match-preparation-time { color: #46dfff; font-variant-numeric: tabular-nums; min-height: 1.5em; }
#online-starting-back { min-height: 44px; border-radius: 12px; border: 1px solid #38d9f4; background: #08c7eb; color: #001c2b; padding: 12px 24px; font: inherit; font-weight: 650; cursor: pointer; }
#online-starting-back:disabled { opacity: .6; cursor: wait; }
#online-starting-back:focus-visible { outline: 2px solid white; outline-offset: 3px; }