/* Poker: shared player, referee and overview presentation. */
:root { color-scheme: dark; --bg:#101117; --surface:#191a23; --surface-2:#22232f; --line:#30313d; --muted:#a2a3b5; --text:#f3f3f7; --accent:#c8ed83; --accent-dark:#26341b; font-family: 'Thonburi','Noto Sans Thai','Tahoma',system-ui,sans-serif; background:var(--bg); color:var(--text); }
body.poker-app, body.lobby-page { background:radial-gradient(ellipse at 40% 0%,#1c1e2c55,transparent 55%),var(--bg); min-height:100vh; }
a { color:var(--accent); } button,a,input,select { -webkit-tap-highlight-color:transparent; }
.shell, .player-shell, .spectator-shell, .admin-shell, .lobby-shell { width:min(1600px,calc(100% - 64px)); margin:0 auto 36px; height:auto; display:block; padding:0; }
.app-topbar,.poker-app .topbar { min-height:88px; border-bottom:1px solid var(--line); align-items:center; margin:0 0 27px; }
.brand-lockup { display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; color:var(--text); }
.brand-mark { display:grid; place-items:center; width:39px; height:42px; background:var(--accent); color:#191d14; border-radius:12px; font-size:32px; transform:rotate(-7deg); }
.brand-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-name { font-size:19px; font-weight:850; letter-spacing:-.3px; line-height:1.2; white-space:nowrap; }
.brand-tagline { color:var(--muted); font-size:10px; font-weight:450; letter-spacing:.15px; line-height:1.3; white-space:nowrap; }
.role-tabs { display:flex; align-items:center; background:#171820; padding:5px; gap:5px; border:1px solid #292a35; border-radius:11px; }.role-tabs a { color:var(--muted); text-decoration:none; padding:9px 26px; border-radius:7px; font-size:13px; font-weight:650; }.role-tabs a[aria-current=page] { background:#34382b; color:var(--accent); }.role-tabs a:hover { background:#292b35; }
.connection-indicator { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.signal-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#777987; flex:none; }.connection-indicator.connected .signal-dot { background:var(--accent); box-shadow:0 0 9px #c8ed8333; }.connection-indicator.disconnected .signal-dot { background:#ee9a99; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 24px; }.page-heading h1 { font-size:30px; font-weight:700; letter-spacing:-.7px; line-height:1.35; margin:3px 0 7px; }.page-heading p { margin:0; font-size:12px; }.eyebrow { color:var(--accent); font-size:10px; letter-spacing:2px; font-weight:750; }.heading-separator { color:#575868; margin:0 8px; }.mode-tag { margin-left:10px; font-size:9px; letter-spacing:1px; border:1px solid #3a3c48; padding:3px 6px; border-radius:4px; color:#b6b7c7; }
.muted { color:var(--muted); }.topbar-actions { gap:8px; }button,.link-button { color:#1b2114; background:var(--accent); min-height:40px; font-size:12px; border-radius:7px; padding:9px 15px; font-weight:700; border:1px solid transparent; }button.secondary,.link-button.secondary { color:#c4c5d2; background:#20212b; border:1px solid #363743; }button.danger { color:#efb4a5; background:#402b2b; border-color:#704741; }button:hover:not(:disabled),.link-button:hover { filter:brightness(1.13); }button:disabled { opacity:.38; }button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:19px; }.panel h2 { font-size:15px; font-weight:650; margin:0 0 10px; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 15px; }.section-heading h2 { margin:0; }.section-caption { font-size:8px; letter-spacing:1.2px; color:#888a9e; }.panel p { font-size:12px; line-height:1.7; }.panel label { color:#b2b3c3; font-size:11px; }.panel input,.panel select,dialog input,dialog select { background:#12131b; border:1px solid #3a3b49; color:#eeeefa; border-radius:7px; font-size:12px; min-height:41px; padding:8px 10px; max-width:100%; width:100%; }.inline-form { gap:12px; margin-top:14px; }.inline-form label { min-width:0; flex:1 1 100px; }.inline-form>button { flex:1 0 auto; }.game-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:20px; }.table-column { min-width:0; }.controls.player-sidebar,.overview-sidebar { display:flex; flex-direction:column; gap:16px; margin:0; padding:0; min-width:0; background:none; border:none; position:static; height:auto; overflow:visible; }.arena-panel { padding:0; background:#181923; border:1px solid #343541; border-radius:17px; box-shadow:0 16px 50px #0002; overflow:hidden; }.table-head { padding:17px 22px; border-bottom:1px solid #2c2d38; min-height:58px; }.table-info { display:flex; align-items:center; gap:22px; }.table-number { font-size:10px; font-weight:700; letter-spacing:1.6px; color:#cecfdb; }.table-blinds { color:#8c8da3; font-size:10px; }.table-blinds b { margin-left:5px; color:#dbdce7; }.table-head>.muted { font-size:10px; }
.poker-arena { position:relative; height:590px; margin:0 12px; }.felt-surface { position:absolute; inset:86px 52px 77px; border-radius:45%; border:12px solid #30312f; background:radial-gradient(ellipse at center,#2b493e,#233c34 70%); outline:1px solid #484b41; box-shadow:inset 0 0 0 2px #60755b66,inset 0 0 60px #101b14,0 15px 20px #0004; }.felt-surface::after { content:''; position:absolute; inset:17px; border:1px solid #92a27824; border-radius:45%; }.felt-surface>span { position:absolute; bottom:29px; left:0; right:0; text-align:center; letter-spacing:2px; font-size:11px; color:#a0b99526; font-weight:800; }.table-center { position:absolute; top:183px; left:50%; transform:translateX(-50%); width:75%; z-index:1; text-align:center; }.street-tracker { display:flex; justify-content:center; gap:12px; margin-bottom:13px; }.street-tracker span { color:#93a49c; font-size:8px; font-weight:700; letter-spacing:.5px; padding-bottom:5px; border-bottom:2px solid transparent; }.street-tracker .active { color:var(--accent); border-color:var(--accent); }.street-tracker .complete { color:#dde4d8; }.pot { color:#a3b8ac; font-size:9px; letter-spacing:2px; }.pot strong { display:inline-block; color:#f6f7e9; font-size:32px; margin:0 8px; letter-spacing:0; line-height:1; }.pot>span { display:block; font-size:8px; margin-bottom:7px; }.pot small { font-size:9px; letter-spacing:0; }.board { min-height:0; padding:14px 0 11px; gap:7px; }.board .card { width:49px; height:68.6px; border-radius:5px; }.card { box-shadow:0 3px 9px #0004; }.card-back { background:repeating-linear-gradient(45deg,#2d3540 0px,#2d3540 3px,#303b44 3px,#303b44 4px); border:2px solid #627167; display:grid; place-items:center; }.card-back img { display:none; }.card-back::before { content:'♠'; color:#b3c19a55; font-size:25px; }.table-center h2 { font-size:11px; color:#dae3d7; margin:0 0 6px; font-weight:550; }.turn { min-height:19px; color:var(--accent); font-size:12px; font-weight:600; }
.table-seats,.spectator-seats.table-seats { position:absolute; inset:0; display:block; margin:0; }.table-seats .seat { position:absolute; z-index:2; width:147px; min-height:65px; padding:9px 10px; border-radius:10px; border:1px solid #454650; background:#242530; box-shadow:0 6px 15px #0003; transform:translate(-50%,-50%); transition:border-color .2s; }.table-seats .seat:nth-child(1) { left:24%; top:13%; }.table-seats .seat:nth-child(2) { left:50%; top:10%; }.table-seats .seat:nth-child(3) { left:76%; top:13%; }.table-seats .seat:nth-child(4) { left:88%; top:42%; }.table-seats .seat:nth-child(5) { left:81%; top:76%; }.table-seats .seat:nth-child(6) { left:61%; top:88%; }.table-seats .seat:nth-child(7) { left:37%; top:88%; }.table-seats .seat:nth-child(8) { left:16%; top:76%; }.table-seats .seat:nth-child(9) { left:12%; top:42%; }.seat.acting { outline:none; border:1px solid var(--accent); box-shadow:0 0 0 3px #c8ed8311,0 7px 20px #0004; }.seat.my-seat { background:#30382d; border-color:#8ea969; }.seat.folded { opacity:.55; }.table-seats .seat.empty-seat { border:1px dashed #444550; background:#1d1e28d9; box-shadow:none; min-height:61px; opacity:.8; }.seat-title { gap:6px; flex-wrap:nowrap; }.seat-title strong { font-size:11px; font-weight:600; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.table-seats .avatar { width:25px; height:25px; font-size:13px; border:2px solid #ffffff12; }.seat p { font-size:9px; color:#aaaabd; margin:5px 0 0; line-height:1.6; }.seat .hole { position:absolute; left:50%; top:calc(100% - 1px); transform:translateX(-50%); gap:3px; }.seat .hole .card { width:26px; height:36px; border-radius:3px; }.mini-badge { background:#d7d8cf; padding:2px 4px; font-size:8px; color:#242525; }.seat.acting::before { content:'กำลังเล่น'; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); font-size:8px; background:var(--accent); color:#29331c; border-radius:4px; padding:2px 7px; white-space:nowrap; }.table-bottom-note { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; color:#848599; font-size:9px; border-top:1px solid var(--line); }.table-bottom-note>span:last-child { font-size:8px; letter-spacing:1px; }
.my-hand-panel { display:flex!important; align-items:center; justify-content:space-between; gap:18px; margin:16px 0 0; padding:16px 22px; }.my-hand-panel .eyebrow { margin:0 0 4px; font-size:8px; }.my-hand-panel h2 { margin:0; }.my-hand-panel p.muted { font-size:11px; margin:5px 0 0; }.my-hand { display:flex; gap:7px; flex-shrink:0; }.my-hand .card { width:43px; height:60px; }.privacy-note { color:#a5ad9e; font-size:9px; }.my-hand-panel.guest-hand { opacity:.65; }.video-panel { padding:17px; }.video-panel .section-heading { margin:0 0 13px; }.video-panel h2 { font-size:13px; }.video-status { font-size:9px; color:#a1a2b3; }.video-stage { display:grid; place-items:center; aspect-ratio:16/9; background:radial-gradient(ellipse,#242632,#111219); border:1px solid #30313b; border-radius:9px; overflow:hidden; position:relative; }.video-empty { text-align:center; padding:14px; color:#8d8ea3; }.video-empty .camera-glyph { display:grid; place-items:center; margin:0 auto 10px; font-size:29px; height:38px; width:44px; background:#32333e; border-radius:10px; color:#9d9eb2; }.video-empty strong { font-size:12px; display:block; color:#c7c8d4; font-weight:550; }.video-empty p { font-size:9px; margin:4px 0 0; }.video-caption { display:flex; align-items:center; gap:6px; margin-top:11px; font-size:8px; letter-spacing:1px; color:#838599; }.video-source-label { margin-left:auto; letter-spacing:0; }.video-stage video,.video-stage iframe { display:block; width:100%; height:100%; border:none; aspect-ratio:16/9; object-fit:contain; }.video-panel.playing .video-status { color:var(--accent); }.video-panel.playing .signal-dot { background:var(--accent); }.video-panel.error .video-status { color:#e5a4a4; }
#join-panel h2,#waiting-panel h2 { font-size:17px; }#join-form { display:grid; grid-template-columns:1fr 1fr; gap:11px; }#join-form>label:first-child { grid-column:1/-1; }#join-form>button { grid-column:1/-1; width:100%; margin-top:2px; }.history { list-style:none; padding:0; margin:0; max-height:185px; font-size:10px; color:#b6b7c7; }.history li { position:relative; padding:0 0 11px 15px; margin:0; border-left:1px solid #353744; line-height:1.7; }.history li::before { content:''; width:5px; height:5px; border-radius:50%; background:#555968; position:absolute; left:-3px; top:6px; }.history li:first-child::before { background:var(--accent); }.history:empty::after { content:'กิจกรรมของโต๊ะจะแสดงที่นี่เมื่อเริ่มมือ'; color:#77798e; font-size:11px; }.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.action-bilingual { gap:4px; padding:12px 8px; }.action-bilingual small { font-size:9px; color:inherit; opacity:.75; }#action-panel { border-color:#657647; }#raise-form { display:grid; grid-template-columns:1fr; }.odds-row { font-size:11px; }.odds-bar { background:#2b2e39; }.odds-bar span { background:var(--accent); }.odds-info { background:#34382d; color:var(--accent); width:24px; min-height:24px; }.result { margin:16px; background:#2b3326; border:1px solid #657546; color:#e3e8d9; font-size:12px; }.result h2 { font-size:15px; }.privacy-badge { color:#a9b79b; background:#262e23; border:1px solid #384331; padding:7px 10px; border-radius:6px; font-size:10px; }.spectator-sidebar .panel { min-width:0; }.spectator-person { border-color:var(--line); font-size:11px; gap:10px; }.spectator-person:last-child { border:none; padding-bottom:0; }.spectator-person small { color:var(--muted); font-size:10px; }.spectator-players:empty::after { content:'ยังไม่มีผู้เล่นเข้าร่วมโต๊ะ'; color:var(--muted); font-size:11px; }.spectator-person .avatar { width:31px; height:31px; font-size:16px; }.message { background:#283523; border:1px solid #526645; color:#e4eddc; font-size:12px; margin:0 0 16px; }.message.error { background:#3b272c; border-color:#78434f; }#message:empty { display:none; }dialog { background:#191a23; color:#e9eaf1; border:1px solid #494b59; border-radius:15px; }dialog h2 { font-size:20px; }dialog p,dialog li { font-size:13px; line-height:1.8; }.result-player { background:#22242e; border-color:#3b3e4c; }.result-player.winner { border-color:#a3bc73; }.result-player h3 { font-size:14px; }.result-cards .card { width:38px; height:53px; }.badge { background:#30372a; color:var(--accent); }
/* Neutralize legacy fullscreen layouts; each view keeps the same usable hierarchy. */
.fullscreen-player .player-page,.spectator-page { height:auto; overflow:auto; }.fullscreen-player .player-shell { display:block; height:auto; width:min(1600px,calc(100% - 64px)); margin:0 auto 36px; padding:0; }.fullscreen-player .normal-player-layout { display:block; }.fullscreen-player .my-hand-panel { width:auto; text-align:left; border:1px solid var(--line); background:var(--surface); }.fullscreen-player .my-hand .card { width:43px; height:60px; }
@media(min-width:1500px) { .poker-arena { height:640px; }.felt-surface { inset:95px 65px 85px; }.table-center { top:205px; }.table-seats .seat { width:165px; }.board .card { width:56px; height:78px; }.game-workspace { grid-template-columns:minmax(0,1fr) 360px; } }
@media(max-width:1150px) { .shell,.player-shell,.spectator-shell,.admin-shell,.lobby-shell { width:calc(100% - 36px); }.game-workspace { grid-template-columns:minmax(0,1fr) 290px; gap:14px; }.poker-arena { height:540px; margin:0 5px; }.table-seats .seat { width:116px; padding:8px; }.seat-title strong { font-size:10px; }.table-seats .avatar { display:none; }.felt-surface { inset:85px 35px 75px; }.table-center { top:166px; }.street-tracker { gap:7px; }.board .card { width:40px; height:56px; }.table-bottom-note>span:last-child { display:none; }.privacy-note { display:none; }.role-tabs a { padding:8px 17px; } }
@media(max-width:900px) { .game-workspace { grid-template-columns:1fr; }.controls.player-sidebar,.overview-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }.poker-arena { height:570px; margin:0 15px; }.table-center { top:180px; }.table-seats .seat { width:142px; }.table-seats .avatar { display:inline-flex; }.felt-surface { inset:90px 65px 78px; }.board .card { width:49px; height:68px; }.page-heading { align-items:start; }.page-heading .topbar-actions { justify-content:flex-end; }.table-head { padding:15px 18px; }.page-heading h1 { font-size:27px; }.page-heading .topbar-actions button { padding:8px 10px; font-size:10px; }.connection-indicator { font-size:0; }.connection-indicator .signal-dot { width:7px; height:7px; }.topbar-actions .privacy-badge { display:none; } }
@media(max-width:600px) { .shell,.player-shell,.spectator-shell,.admin-shell,.lobby-shell { width:calc(100% - 24px); margin:0 auto 24px; }.app-topbar,.poker-app .topbar { display:flex; min-height:73px; gap:10px; margin-bottom:21px; }.brand-mark { width:29px; height:33px; font-size:26px; border-radius:8px; }.brand-name { font-size:15px; letter-spacing:-.2px; }.brand-tagline { font-size:8px; }.brand-lockup { gap:8px; }.role-tabs { padding:3px; gap:1px; margin-left:auto; }.role-tabs a { padding:7px 10px; font-size:11px; }.connection-indicator { display:none; }.page-heading { gap:10px; margin-bottom:19px; }.page-heading h1 { font-size:24px; }.page-heading .eyebrow { font-size:8px; }.page-heading p.muted { font-size:10px; }.mode-tag { display:none; }.page-heading .topbar-actions { max-width:142px; gap:5px; }.page-heading .topbar-actions button { min-height:31px; font-size:9px; padding:6px 8px; }.game-workspace { gap:14px; }.table-head { padding:13px; min-height:49px; }.table-info { gap:14px; }.table-number { font-size:8px; letter-spacing:1px; }.table-head>.muted { font-size:9px; }.table-blinds { font-size:9px; }.poker-arena { height:auto; min-height:0; margin:0; padding-top:225px; }.felt-surface { inset:15px 12px auto; height:208px; border-radius:80px; border-width:6px; }.felt-surface::after { inset:9px; border-radius:65px; }.felt-surface>span { display:none; }.table-center { width:100%; top:36px; }.street-tracker { margin-bottom:9px; gap:18px; }.street-tracker span { font-size:7px; }.pot strong { font-size:27px; }.pot>span { font-size:7px; margin-bottom:5px; }.board { padding:10px 0 8px; gap:7px; }.board .card { width:38px; height:53px; }.table-center h2 { font-size:10px; margin-bottom:4px; }.turn { font-size:10px; min-height:16px; }.table-seats,.spectator-seats.table-seats { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:13px 10px 11px; }.table-seats .seat { position:relative; inset:auto; transform:none; width:100%; min-height:68px; padding:9px 7px 8px; box-shadow:none; }.table-seats .seat .avatar { display:none; }.seat-title { gap:3px; flex-wrap:wrap; }.seat-title strong { max-width:100%; font-size:9px; }.seat p { font-size:8px; line-height:1.7; }.table-seats .seat.empty-seat { min-height:67px; }.seat .hole { position:static; transform:none; margin-top:6px; }.seat .hole .card { width:21px; height:29px; }.seat.acting::before { left:auto; right:4px; bottom:auto; top:-6px; transform:none; font-size:6px; padding:1px 4px; }.table-bottom-note { padding:11px 12px; font-size:8px; }.my-hand-panel { padding:13px 15px; margin-top:12px; }.my-hand-panel h2 { font-size:14px; }.my-hand-panel .muted { font-size:9px!important; max-width:200px; }.my-hand .card { width:35px; height:49px; }.controls.player-sidebar,.overview-sidebar { display:flex; gap:12px; }.player-sidebar #join-panel,.player-sidebar #waiting-panel,.player-sidebar #action-panel { order:-1; }.panel { padding:17px; border-radius:12px; }.video-stage { aspect-ratio:16/8; }.video-panel .section-heading { margin-bottom:11px; }.video-caption { margin-top:10px; }.panel h2 { font-size:14px; }#join-form { grid-template-columns:1fr 1fr; }.history { max-height:180px; }.topbar-actions { flex-wrap:wrap; }dialog { padding:19px; }.privacy-badge { font-size:9px; }.table-seats .mini-badge { font-size:6px; padding:1px 3px; }.fullscreen-player .player-shell { width:calc(100% - 24px); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.lobby-header-label { font-size:10px; color:#8e90a6; letter-spacing:3px; }.lobby-intro { display:flex; align-items:center; justify-content:space-between; min-height:310px; padding:25px 35px 45px 0; border-bottom:1px solid var(--line); }.lobby-intro h1 { font-size:40px; line-height:1.45; font-weight:650; letter-spacing:-1px; margin:10px 0 16px; }.lobby-intro h1>span { display:block; color:#acb092; font-size:26px; letter-spacing:0; font-weight:450; }.lobby-intro p.muted { font-size:13px; line-height:1.9; }.lobby-features { display:flex; gap:22px; font-size:10px; color:#b5b7c6; margin-top:25px; }.lobby-art { width:320px; height:240px; position:relative; flex:none; background:radial-gradient(ellipse,#76974c20,transparent 65%); }.decor-card { position:absolute; left:60px; top:12px; display:block; width:118px; height:168px; padding:14px; background:#e8e9d9; border:4px solid #b5bd9e; border-radius:13px; color:#282b24; font:bold 25px Georgia,serif; box-shadow:0 14px 30px #0008; }.decor-card small { font-size:67px; display:block; text-align:center; line-height:1; }.decor-card-one { transform:rotate(-19deg); }.decor-card-two { transform:rotate(14deg); left:150px; top:30px; }.decor-chip { position:absolute; left:72px; top:135px; width:86px; height:86px; background:#abbc86; color:#263222; border-radius:50%; border:7px dashed #edf0c9; outline:5px solid #68844c; display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:27px; font-weight:800; transform:rotate(-15deg); box-shadow:0 10px 25px #0007; }.decor-chip>span { font-size:8px; letter-spacing:0; }.lobby-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:35px; margin-top:31px; }.lobby-list { margin:0; max-height:none; overflow:visible; }.lobby-list .section-heading { margin-bottom:22px; }.lobby-list .section-heading :is(h1,h2) { font-size:23px; line-height:1.35; margin:0; }.lobby-list .eyebrow { margin:0 0 8px; }.room-card { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:24px; gap:22px; }.room-card h3 { font-size:20px; }.room-card p { font-size:11px; margin-top:9px; }.room-card .room-links { gap:7px; }.room-card .link-button { font-size:11px; }.room-symbol { display:grid; place-items:center; width:50px; height:53px; border-radius:13px; background:#293225; color:var(--accent); font-size:30px; flex:none; }.room-card-info { flex:1; min-width:160px; }.room-status { display:inline-flex; align-items:center; gap:6px; font-size:9px; color:#c3d5a4; margin:0 0 9px; }.room-status::before { content:''; width:5px; height:5px; background:#b1c983; border-radius:50%; }.create-room-panel { padding:24px; }.create-room-panel h2 { font-size:21px; margin-top:9px; }.create-room-panel .inline-form { display:grid; grid-template-columns:1fr; gap:16px; margin-top:23px; }.create-room-panel button { margin-top:4px; }.create-room-note { border-top:1px solid var(--line); padding-top:17px; margin-top:21px; color:#85879d; font-size:10px!important; line-height:1.9!important; }.lobby-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; border-top:1px solid var(--line); padding-top:23px; color:#73768a; font-size:9px; }.lobby-footer>span:first-child { font-size:11px; letter-spacing:2px; }.lobby-footer>span:last-child { font-size:8px; letter-spacing:1px; }.room-list>.muted { padding:32px; border:1px dashed var(--line); border-radius:12px; text-align:center; }
@media(max-width:900px) { .lobby-intro { padding-right:0; }.lobby-intro h1 { font-size:33px; }.lobby-art { width:260px; }.lobby-workspace { grid-template-columns:minmax(0,1fr) 285px; gap:20px; }.room-card { padding:18px; }.lobby-features { gap:15px; flex-wrap:wrap; } }
@media(max-width:600px) { .lobby-header-label { display:none; }.lobby-page .topbar { display:flex; min-height:73px; }.lobby-page .privacy-badge { font-size:9px; }.lobby-intro { min-height:0; padding:14px 0 27px; }.lobby-intro h1 { font-size:27px; margin:10px 0; }.lobby-intro h1>span { font-size:20px; }.lobby-intro p.muted { font-size:11px; }.lobby-art { display:none; }.lobby-features { margin-top:20px; font-size:9px; gap:12px; }.lobby-workspace { display:flex; flex-direction:column; gap:24px; margin-top:24px; }.room-card { gap:15px; }.room-symbol { width:41px; height:45px; font-size:25px; }.room-card-info { min-width:170px; }.room-card .room-links { width:100%; }.room-card .link-button { flex:1; padding:8px 9px; font-size:10px; }.room-card h3 { font-size:18px; }.create-room-panel { padding:20px; }.lobby-footer { flex-wrap:wrap; gap:12px; margin-top:30px; padding-top:20px; }.lobby-footer>span:last-child { display:none; } }
.controls.player-sidebar, .overview-sidebar { align-items:stretch; }
.controls.player-sidebar > .panel, .overview-sidebar > .panel { width:100%; }
.player-sidebar #action-panel { order:1; }
.player-sidebar #waiting-panel { order:2; }
.player-sidebar .player-history-panel { order:3; }
.player-sidebar #odds-panel { order:4; }
@media(max-width:600px) { .player-sidebar #action-panel { order:-3; } .player-sidebar #join-panel { order:-2; } .player-sidebar #waiting-panel { order:-1; } }
.arena-panel.spectator-table { height:auto; min-height:0; }
.poker-app .table-center .board .card { width:56px; height:78px; }
.video-empty button { margin-top:10px; font-size:10px; min-height:32px; padding:6px 10px; }
@media(min-width:1500px) { .poker-app .table-center .board .card { width:64px; height:90px; } }
@media(max-width:1150px) { .poker-app .table-center .board .card { width:40px; height:56px; } }
@media(max-width:600px) { .poker-app .table-center .board .card { width:38px; height:53px; } }
.session-bar { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin:-13px 0 21px; min-height:31px; font-size:10px; color:#989aad; }
.session-bar:empty { display:none; }.session-bar a { text-decoration:none; font-size:10px; }.session-bar button { font-size:9px; min-height:29px; padding:5px 9px; }.session-admin-link { margin-right:auto; }.credit-balance { background:#2e3824; border:1px solid #526340; color:var(--accent); border-radius:6px; padding:5px 9px; font-variant-numeric:tabular-nums; }.session-user { color:#d3d4df; }.session-note { color:#8e90a5; }.login-required { border-color:#626f43; }.login-required .link-button { width:100%; margin-top:10px; }.credit-help { font-size:10px!important; color:#b6ca92; }.made-hand-caption { color:var(--accent); font-size:11px; margin:7px 0 0; }.made-hand-caption:empty { display:none; }.card.hand-match { outline:3px solid #d1e783; outline-offset:2px; box-shadow:0 0 15px #c8ed8333; }.card.hand-match .card-image { opacity:1; }.hand-rank-help { font-size:11px; color:#c1c2ce; line-height:1.8; }.my-hand-panel { flex-wrap:wrap; }.my-hand-panel .made-hand-caption { flex-basis:100%; margin-top:-8px; }
.credit-balance { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; line-height:1.2; }
.credit-balance::before, .chip-amount::before { content:""; display:inline-block; flex:none; width:28px; height:20px; background:url('../image/chips.png') center / contain no-repeat; vertical-align:middle; }
.chip-amount { white-space:nowrap; }
.chip-amount::before { margin-right:6px; }
@media(max-width:600px) { .session-bar { gap:8px; margin:-10px 0 16px; font-size:9px; }.session-note { display:none; }.credit-balance { padding:4px 7px; }.session-admin-link { font-size:9px!important; }.card.hand-match { outline-width:2px; outline-offset:1px; } }
.hand-rank-reference { display:grid; list-style:none; padding:0; margin:18px 0; }
.actions button[hidden], .player-sidebar section[hidden], .player-sidebar div[hidden] { display:none!important; }
.player-sidebar #login-required { order:-2; }

/* Lobby access and room privacy badges. */
.lobby-page [hidden] { display:none!important; }
.lobby-page .lobby-workspace { grid-template-columns:minmax(0,1fr); }
.lobby-list-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.create-room-dialog { width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; margin:auto; padding:26px; }
.create-room-dialog::backdrop { background:#05060bbb; backdrop-filter:blur(4px); }
.create-room-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.create-room-heading .eyebrow { margin:0 0 8px; font-size:10px; }
.create-room-heading h2 { margin:0; font-size:23px; }
.create-room-heading button { margin:0; min-height:38px; }
.create-room-dialog #create-room-copy { margin:12px 0 0; font-size:13px; line-height:1.8; }
.create-room-dialog #create-room-message:empty { display:none; }
.create-room-dialog #create-room-message { margin:16px 0 0; }
.create-room-dialog .inline-form label { font-size:13px; }
.create-room-dialog input,.create-room-dialog select { min-height:44px; font-size:16px; }
.create-room-dialog .room-password-help { font-size:11px; }
.create-room-dialog .create-room-note { margin-bottom:0; }
.create-room-dialog #rfid-create-options { display:grid; gap:12px; padding:16px; }
@media(max-width:600px) {
  .lobby-list .section-heading { align-items:flex-start; flex-wrap:wrap; gap:14px; }
  .lobby-list-actions { flex-wrap:wrap; }
  .lobby-list-actions button { min-height:40px; font-size:12px; padding:8px 12px; }
  .create-room-dialog { padding:20px; }
}
.room-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.room-type-badge,.room-lock-badge { display:inline-flex; align-items:center; gap:4px; border:1px solid #3d4935; border-radius:5px; padding:3px 7px; background:#293225; color:#c0d4a6; font-size:9px; line-height:1.4; }
.room-type-badge.physical { background:#292c37; border-color:#444b60; color:#bbc6de; }
.room-lock-badge { background:#2e2b24; border-color:#514b3c; color:#cfbea0; }
.create-room-panel .inline-form label { position:relative; }
.room-optional { color:#77788c; font-size:9px; position:absolute; right:0; top:1px; }
.room-password-help { color:#828397; font-size:9px; line-height:1.6; font-weight:400; }
/* Rotated decorative cards must not widen the lobby on tablets. */
.lobby-intro { overflow:clip; }
.hand-rank-guide > h3 { margin-bottom:8px; font-size:19px; }
.hand-rank-guide .hand-rank-intro { color:#b6b9ca; font-size:13px; line-height:1.7; }
.hand-rank-guide .hand-rank-reference { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hand-rank-guide .hand-rank-reference li { display:grid; grid-template-columns:26px minmax(0,1fr); grid-template-rows:auto 1fr; gap:14px 10px; min-width:0; padding:16px; border:1px solid #353845; border-radius:10px; background:#20222d; }
.hand-rank-guide .rank-order { grid-column:1; grid-row:1; display:grid; place-items:center; align-self:start; min-height:26px; border-radius:7px; background:#c8ed8310; color:#c8de9d; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.hand-rank-guide .rank-example { grid-column:1/-1; grid-row:2; display:flex; align-self:end; justify-content:center; gap:5px; min-width:0; padding-top:2px; }
.hand-rank-guide .rank-example .reference-card { position:relative; display:block; flex:none; width:45px; height:62px; margin:0; overflow:hidden; border:1px solid #eeeef3; border-radius:5px; background:#fff; color:#15171d; box-shadow:0 3px 6px #0005; }
.reference-card-fallback { display:flex; height:100%; box-sizing:border-box; flex-direction:column; align-items:flex-start; padding:2px 4px; font-family:Arial,Helvetica,sans-serif; font-size:22px; line-height:1.05; }
.reference-card-fallback b { font-weight:800; }
.reference-card-fallback > span { align-self:flex-end; font-size:31px; }
.reference-card[data-suit=H] .reference-card-fallback,.reference-card[data-suit=D] .reference-card-fallback { color:#b82e35; }
.reference-card.card-face-ready .reference-card-fallback { display:none; }
.hand-rank-guide .rank-description { grid-column:2; grid-row:1; min-width:0; }
.hand-rank-guide .rank-description strong { display:block; font-size:17px; line-height:1.45; font-weight:650; color:#f0f2e8; }
.hand-rank-guide .rank-english { display:block; margin-top:2px; font-size:12px; line-height:1.5; color:#bdd18f; }
.hand-rank-guide .rank-description p { font-size:13px; line-height:1.7; margin:8px 0 0; color:#c3c6d5; }
.hand-rank-notes { margin:20px 0 14px; padding-left:22px; color:#bdc1d1; font-size:13px; line-height:1.8; }
.hand-rank-notes li+li { margin-top:6px; }
.hand-rank-source { padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:#a5aabd; }
.hand-rank-source a { color:#c6e390; text-underline-offset:3px; }
@media(max-width:800px) {
  .hand-rank-guide .hand-rank-reference { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:480px) {
  .hand-rank-guide .hand-rank-reference li { grid-template-columns:24px minmax(0,1fr); gap:12px 9px; padding:13px 10px; }
  .hand-rank-guide .rank-description strong { font-size:16px; }
  .hand-rank-guide .rank-example { gap:4px; }
  .hand-rank-guide .rank-example .reference-card { width:40px; height:55px; }
  .reference-card-fallback { font-size:20px; }
  .reference-card-fallback > span { font-size:27px; }
}
.room-login-link { margin-left:auto; color:#c8ed83; font-size:11px; text-decoration:none; min-height:36px; display:inline-flex; align-items:center; white-space:nowrap; }
@media(max-width:600px) { .room-login-link { font-size:10px; }.room-card-badges { margin-top:7px; }.room-type-badge,.room-lock-badge { font-size:8px; } }

/* Room-code entry and server-enforced entry cooldown. */
.room-entry-dialog [hidden],.room-access-page [hidden] { display:none!important; }
.room-code-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; margin-top:20px; padding:14px 18px; border-color:#435036; background:linear-gradient(115deg,#20261d,#191b25); }
.room-code-panel h2 { margin:0; font-size:15px; line-height:1.5; }
.room-code-panel > button { min-height:40px; padding:8px 18px; font-size:13px; white-space:nowrap; }
.room-code-dialog-copy { margin:18px 0; color:#b9c1cf; font-size:13px; line-height:1.8; }
.room-code-dialog #room-code-input { min-height:56px; text-align:center; font-size:26px; letter-spacing:6px; font-variant-numeric:tabular-nums; }
.room-code-dialog #room-code-input::placeholder { font-size:18px; letter-spacing:3px; }
.room-entry-message { min-height:0; margin:10px 0 0; font-size:12px; color:#b4c49c; line-height:1.7; }
.room-entry-message:empty { display:none; }
.room-entry-message.error { color:#efa89b; }
.room-entry-dialog { width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; margin:auto; padding:26px; border:1px solid #454b3b; background:#191b25; box-shadow:0 24px 90px #0009; }
.room-entry-dialog::backdrop { background:#06080dce; backdrop-filter:blur(5px); }
.room-entry-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.room-entry-heading .eyebrow { font-size:10px; color:#bbd58e; margin:0 0 8px; }
.room-entry-heading h2 { font-size:24px; margin:0; }
.room-entry-heading button { min-height:36px; margin:0; font-size:12px; }
.room-entry-name { margin:18px 0; color:#c7ceba; line-height:1.7; overflow-wrap:anywhere; }
.room-entry-dialog form label { display:block; margin-bottom:8px; color:#bfc5d1; font-size:13px; }
.room-entry-dialog input { display:block; width:100%; min-height:48px; font-size:18px; }
.room-entry-dialog form>button { width:100%; margin-top:16px; min-height:46px; font-size:14px; }
.room-code-dialog #room-code-form { display:grid; grid-template-columns:minmax(0,3fr) minmax(88px,1fr); gap:10px 12px; align-items:stretch; }
.room-code-dialog #room-code-form > label { grid-column:1 / -1; grid-row:1; margin:0; }
.room-code-dialog #room-code-input { grid-column:1; grid-row:2; min-width:0; max-width:none; }
.room-code-dialog #room-code-form > button { grid-column:2; grid-row:2; margin:0; min-height:56px; padding:10px 8px; white-space:nowrap; }
.room-code-dialog #room-code-message { grid-column:1 / -1; grid-row:3; margin:0; }
@media(max-width:380px) {
  .room-code-dialog #room-code-form { column-gap:10px; }
  .room-code-dialog #room-code-input { font-size:24px; letter-spacing:3px; }
  .room-code-dialog #room-code-input::placeholder { font-size:16px; letter-spacing:2px; }
}
.room-entry-note { margin:20px 0 0; border-top:1px solid #303641; padding-top:15px; font-size:11px; color:#929bad; line-height:1.8; }
.room-cooldown-dialog { text-align:center; padding:32px 28px; }
.room-cooldown-symbol { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px; border:1px solid #72844c; border-radius:50%; background:#364126; color:#cce991; }
.room-cooldown-symbol svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.room-cooldown-dialog .eyebrow { color:#bbd58e; font-size:10px; letter-spacing:2px; }
.room-cooldown-dialog h2 { font-size:24px; margin:10px 0 13px; }
.room-cooldown-dialog #room-cooldown-copy { color:#b9c1cf; font-size:13px; line-height:1.8; }
.room-cooldown-time { display:flex; align-items:baseline; justify-content:center; gap:10px; margin:19px 0; }
.room-cooldown-time strong { font-size:64px; color:#d0eb98; line-height:1.15; font-variant-numeric:tabular-nums; }
.room-cooldown-time span { font-size:14px; color:#b8c2a6; }
.room-cooldown-dialog>button { min-height:42px; margin-top:16px; }
.room-cooldown-dialog #room-entry-cooldown-close { width:100%; }
.room-unlisted-badge { display:inline-flex; align-items:center; border:1px solid #5f5878; border-radius:5px; padding:3px 7px; color:#c2b4e4; background:#2f293e; font-size:9px; line-height:1.4; }
.room-code-dialog #room-entry-status-retry { width:100%; min-height:40px; margin-top:12px; font-size:12px; }
@media(max-width:600px) {
  .room-code-panel { margin-top:18px; padding:12px 14px; gap:12px; }
  .room-code-panel h2 { font-size:14px; }
  .room-code-panel > button { padding:8px 14px; }
  .room-entry-dialog { padding:22px 20px; }
  .room-entry-heading h2,.room-cooldown-dialog h2 { font-size:21px; }
  .room-entry-heading button { padding:7px 11px; }
  .room-cooldown-time strong { font-size:58px; }
}

/* Keep the ClubCraft lockup readable alongside navigation on small screens. */
@media (max-width:600px) {
  .app-topbar { flex-wrap:wrap; row-gap:10px; padding-block:12px; }
  .lobby-header-label { letter-spacing:1px; }
  .lobby-page .privacy-badge { font-size:8px; }
}

/* Keep room entry and the room list near the top on phones. */
@media (max-width:600px), (max-width:950px) and (max-height:500px) {
  body.lobby-page .lobby-intro { display:none; }
}

/* Room creation quotes the server's rate before accepting a host service fee. */
.room-fee-settings { min-width:0; margin:0; padding:14px; border:1px solid #526443; border-radius:10px; background:#c8ed8307; }
.room-fee-settings legend { padding:0 7px; color:#d4e8ba; font-size:12px; }
.room-fee-fields { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; align-items:start; }
.room-fee-fields > * { min-width:0; }
.room-fee-fields > div { display:grid; gap:6px; font-size:12px; color:#b8b8c5; }
.room-fee-fields output { display:block; color:var(--accent); font-size:27px; font-weight:650; line-height:1.5; }
.room-fee-fields small,.room-fee-settings > small { display:block; color:#969ba5; font-size:11px; line-height:1.7; font-weight:400; }
.room-total-fee { display:block; padding-top:11px; margin-top:10px; border-top:1px solid #45533a; font-size:12px; line-height:1.8; color:#d2e4ba; }
.room-limit-note { padding:14px; border:1px solid #526443; border-radius:9px; color:#d6e6c2; line-height:1.8; }
.room-limit-note a { display:block; margin:8px 0; color:var(--accent); font-weight:650; }
.room-limit-note span { display:block; font-size:12px; color:#a6ad9c; }
.host-fees-panel { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px; padding:20px; border-color:#526443; }
.host-fees-panel h2 { font-size:17px; margin:0; }
.host-fees-panel .eyebrow { margin:0 0 7px; font-size:9px; }
.host-fees-panel .muted { font-size:11px; margin:7px 0 0; }
.host-fees-values { display:flex; gap:20px; flex-wrap:wrap; }
.host-fees-values > div { display:grid; gap:5px; }
.host-fees-values span { font-size:11px; color:#a1a696; }
.host-fees-values strong { font-size:16px; color:#d1e9ab; font-variant-numeric:tabular-nums; }
#host-fees-message { flex-basis:100%; margin:0; }
#host-fees-message:empty { display:none; }
@media(max-width:600px) { .host-fees-panel { padding:16px; }.host-fees-values { width:100%; gap:14px; }.host-fees-values strong { font-size:14px; } }