/* Viewport layout. Keep essential actions visible without scaling the whole UI. */
:root{--bar-height:52px;--top-height:calc(var(--bar-height) + env(safe-area-inset-top,0px))}
html,body{min-height:100%;overflow-x:hidden}body{margin:0}
.lobby,.game-shell{height:100dvh;min-height:0}
.topbar{height:var(--top-height);padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
.wordmark{font-size:26px}.mode-pill{font-size:10px;margin-right:0}.top-actions{gap:8px}
.lobby-visual{top:var(--top-height);width:100%;height:calc(100% - var(--top-height))}.lobby-visual img{height:100%;object-position:65% center}
.lobby:after{background:linear-gradient(90deg,#071225f5 0%,#071225d9 38%,#07122535 72%),linear-gradient(0deg,#071225ad,transparent)}
.lobby-panel{height:calc(100dvh - var(--top-height));width:min(550px,48%);max-width:none;padding:12px 18px max(10px,env(safe-area-inset-bottom,0px));margin-left:3vw;display:flex;flex-direction:column;justify-content:center;gap:8px}
.lobby-main,.lobby-more{min-width:0}.lobby-panel .eyebrow,.lobby-panel .intro{display:none}
.lobby h1{font-size:clamp(25px,3.4vw,42px);line-height:1.02;margin:0 0 8px}.lobby h1 br{display:none}
.lobby .career-badge{margin:6px 0;padding:7px 10px;border-radius:9px}.lobby .career-badge b{font-size:13px}.lobby .career-badge small{font-size:11px}.lobby .career-badge progress{margin:4px 0;height:4px}
.lobby .resume-round{margin:6px 0;padding:7px 10px;min-height:34px;font-size:13px}
.lobby .difficulty-label{margin:8px 0 4px;font-size:11px}.lobby .levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:4px 0}
.lobby .level{min-width:0;padding:6px 2px;font-size:11px}.lobby .level>span{display:block;font-size:17px;margin:0 0 3px}.lobby .room-threshold{font-size:10px;margin:2px 0 0}
.lobby .room-detail{margin:5px 0 8px;font-size:11px;line-height:1.25}.lobby .enter{max-width:none;min-height:42px;padding:10px 14px;font-size:15px}
.lobby .text-button{margin:0;min-height:32px;padding:7px 4px;font-size:12px}.lobby-main>.text-button{width:100%;text-align:center}
.lobby .newcomer-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:none;margin:0 0 5px;padding:5px 9px;border-radius:8px}
.lobby .newcomer-banner p{display:none}.lobby .newcomer-banner strong{font-size:12px}.lobby .newcomer-banner .text-button{font-size:11px;min-height:30px;white-space:nowrap}
.lobby .career-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 5px}.lobby .career-links button{line-height:1.2;border:1px solid #ffffff12;border-radius:7px;text-decoration:none}
.lobby .fine{font-size:10px;line-height:1.3;margin:5px 0}.lobby .record{max-width:none;gap:20px;padding-top:5px}.lobby .record span{font-size:10px;letter-spacing:0}.lobby .record b{display:inline;font-size:17px;margin:0 5px 0 0}.lobby-note{bottom:18px}
/* The middle row absorbs available space; the hand determines its own height. */
.game-shell .arena-table{height:calc(100dvh - var(--top-height));min-height:0;max-height:none;display:grid;grid-template-rows:118px minmax(72px,1fr) auto calc(18px + env(safe-area-inset-bottom,0px))}
.game-shell .opponent{top:10px;width:25%;max-width:260px;padding:8px;gap:8px}.game-shell .opponent-1{left:2%}.game-shell .opponent-2{right:2%}
.game-shell .opponent .avatar{width:48px;height:52px}.game-shell .speech{top:calc(100% + 5px);padding:5px 8px;font-size:11px;min-height:0;line-height:1.25}
.game-shell .kitty{top:6px}.kitty>span{font-size:10px;margin-bottom:4px}.kitty>small{font-size:10px;margin-top:4px}.kitty .mini{width:32px;height:44px}
.game-shell .table-center{position:relative;inset:auto;grid-row:2;align-self:center;justify-self:center;width:94%;padding:2px 0}
.table-center .phase-tag{font-size:10px;letter-spacing:1px;margin-bottom:4px}.status{font-size:16px;line-height:1.25;min-height:20px}.played-label{margin-top:5px;font-size:12px;padding:3px 8px}.played-cards{margin-top:5px}.pass-trail{margin-top:3px}
.empty-table{font-size:28px;margin-top:6px}.crown-symbol{font-size:38px;margin-top:2px}
.game-shell .player-dock{position:relative;inset:auto;transform:none;grid-row:3;justify-self:center;width:min(96%,1100px);padding:0 3px}
.your-meta{margin:0 auto 4px;min-height:32px}.small-avatar{width:32px;height:32px}.hand-tools{margin:0 4px 3px;min-height:26px}.table-utilities button{min-height:26px}
.hand{min-height:0;padding-top:20px}.hand .card{height:96px}.selection-note{font-size:11px;line-height:1.25;min-height:15px;margin:4px 0}.actions{min-height:42px;gap:8px}.actions button{min-height:40px;padding:9px 16px}.your-speech{min-height:16px;font-size:11px;line-height:1.2;margin-top:4px}
.game-shell .bottom-note{position:relative;inset:auto;grid-row:4;align-self:center;padding:0 12px;font-size:9px;gap:8px;line-height:1.1}
/* Compact dialogs. Long rules/settings/results have explicit pages. */
dialog{width:min(740px,calc(100% - 16px));max-width:calc(100% - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:18px 20px;border-radius:14px;overscroll-behavior:contain}
dialog .eyebrow,.result-panel .eyebrow{font-size:10px;line-height:1.2;letter-spacing:1.5px;margin:0 40px 5px 0}
dialog h2,.trial-panel h2{font-size:28px;line-height:1.1;margin:4px 32px 10px 0}dialog h2 br{display:none}
dialog p,.trial-panel p,.guide-rules{font-size:13px;line-height:1.4;margin:8px 0}dialog .fine{font-size:11px}
dialog .primary,dialog .secondary{min-height:36px;padding:8px 12px;font-size:13px}dialog .text-button{min-height:32px;padding:6px;font-size:12px}
dialog .close-dialog{right:8px;top:4px}.rule-steps{padding-left:22px;margin:6px 0}.rule-steps li{font-size:14px;margin:0 0 14px}.rank-order{margin:10px 0;padding:10px}
.rules-grid{grid-template-columns:1fr 1fr;gap:6px}.rules-grid>div{padding:9px;font-size:12px}.rules-grid span{margin-top:5px}
.paged-panel[open],.result-panel.paged-panel{display:flex;flex-direction:column;overflow:hidden}
.panel-pages-nav{display:flex;gap:7px;align-items:center;margin:0 0 8px;flex:none}.panel-pages-nav button,.panel-pages-nav select{min-height:34px;color:#ffdc83;border:1px solid #7b683f;border-radius:7px;background:#17283e;font:600 13px 'DM Sans',sans-serif}.panel-pages-nav button{min-width:38px}.panel-pages-nav select{flex:1;min-width:0;padding:5px 8px}
.panel-pages-body{min-height:0;overflow:auto;overscroll-behavior:contain}.panel-page[hidden]{display:none!important}.panel-pages-footer{display:flex;gap:8px;margin-top:10px;flex:none}.panel-pages-footer>button{flex:1;margin:0!important;min-height:36px;padding:8px 10px;font-size:13px}
.audio-mode-choices{margin:6px 0;gap:6px}.audio-mode-choice{min-height:56px;padding:8px}.audio-mode-choice strong{font-size:13px}.audio-mode-choice span{font-size:11px;margin-top:3px;line-height:1.3}
.audio-options{gap:10px;margin:12px 0}.audio-options label{font-size:13px}.audio-options input[type=checkbox]{width:20px;height:20px}.voice-tests{gap:6px;margin:10px 0}.voice-tests button{font-size:12px}#voice-status{font-size:11px;padding:6px}
.lesson-list{gap:5px;margin:10px 0}.lesson-entry{padding:9px;font-size:14px;gap:10px;min-height:36px}.career-stats{margin:10px 0}.career-stats b{font-size:21px}.career-badge{margin:10px 0;padding:8px 10px}.rank-ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}.rank-ladder li{font-size:11px;padding:5px 1px;gap:4px}
.trial-actions{margin:10px 0;gap:6px}.trial-actions button,.trial-panel .primary{min-height:36px;padding:8px 12px}.guide-sides{grid-template-columns:1fr 1fr;gap:6px}.guide-sides>div{padding:10px;gap:5px}.guide-sides span{font-size:12px}.guide-hand{padding:22px 0 8px}.guide-card{height:72px;width:52px;font-size:24px}.guide-rules li{margin:8px 0}.trial-field{font-size:13px;gap:4px;margin:10px 0}.trial-field select{padding:8px}
.replay-seat{margin:6px 0;padding:6px}.replay-seat h3{margin:0 0 5px;font-size:12px}.replay-seat>div,.remaining-cards{display:grid;grid-template-columns:repeat(10,minmax(0,25px));grid-auto-rows:44px;gap:2px 0;justify-content:center}
.replay-seat .card,.remaining-cards .card.mini{width:32px;min-width:32px;height:44px;margin:0}.replay-seat .corner,.remaining-cards .corner{font-size:13px;left:3px;top:3px}.replay-seat .corner small,.remaining-cards .corner small{font-size:10px;margin-top:2px}.replay-seat .pip,.remaining-cards .pip{font-size:16px;right:3px;bottom:4px}.replay-slider{margin:8px 0}.replay-controls button{min-height:34px;padding:7px 10px}
.result-backdrop{padding:8px;overflow:hidden}.result-panel{width:min(680px,100%);max-height:calc(100dvh - 16px);padding:16px 20px;border-radius:14px}.result-panel h2{font-size:30px;margin:3px 0 10px}.result-panel p{font-size:12px;line-height:1.35;margin:6px 0}.score-earned{font-size:28px;line-height:1.1}.remaining-hands{margin:8px 0;padding:8px 0}.remaining-hands h3{font-size:14px;margin:0 0 7px}.remaining-seat+.remaining-seat{margin-top:10px}.remaining-seat h4{font-size:12px;margin:0 0 5px}.settlement{margin:8px 0}.settlement>div{font-size:12px;padding:6px 3px}.result-panel details{margin:5px 0}.result-panel .panel-page>.secondary{min-height:36px;padding:8px}
@media(max-width:900px){.lobby-panel{width:min(510px,100%);margin:0 auto;padding-inline:14px}.lobby:after{background:linear-gradient(90deg,#071225d9,#071225c9)}.lobby-note{display:none}}
@media(max-width:650px){
 :root{--bar-height:48px}.wordmark{font-size:22px}.top-actions{gap:4px}.topbar .small-button{font-size:11px;min-height:32px;padding:5px 7px}.topbar .icon-button{min-height:32px}.lobby h1{font-size:27px}.lobby-panel{justify-content:center;gap:5px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
 .game-shell .arena-table{grid-template-rows:108px minmax(76px,1fr) auto calc(16px + env(safe-area-inset-bottom,0px))}.game-shell .opponent{top:8px;width:35%;padding:6px;gap:5px}.game-shell .opponent .avatar{width:32px;height:38px}.player-name{font-size:11px}.player-name small{display:none}.role{font-size:10px;margin-top:3px}.opponent-meta{font-size:11px;margin-top:4px;gap:5px}.card-count{font-size:12px}.player-multi{font-size:10px;padding:1px 4px}.game-shell .speech{font-size:10px!important;padding:4px 5px}.kitty>span{font-size:8px;letter-spacing:0}.kitty>small{font-size:8px}.kitty>div{gap:2px}.kitty .mini{width:20px;height:29px}.kitty .mini .corner{font-size:10px;left:2px;top:2px}.kitty .mini .corner small{font-size:8px;margin:1px 0}.kitty .mini .pip{display:none}
 .game-shell .table-center{inset:auto}.game-shell .table-center .phase-tag{display:block;font-size:9px;letter-spacing:0}.game-shell .status{font-size:13px;min-height:17px}.game-shell .played-label{margin-top:4px;font-size:11px}.played-cards .mini{height:44px}.game-shell .pass-trail{font-size:10px}.game-shell .your-meta{margin-bottom:3px;min-height:30px}.small-avatar{width:28px;height:28px}.your-identity strong{font-size:11px}.your-meta .text-button{font-size:10px}.hand-summary{font-size:11px}.hand-tools{min-height:24px;margin-bottom:2px}.hand-tip{font-size:10px}.table-utilities button{font-size:11px;min-height:24px}.hand .card{height:75px}.hand{min-height:0}.selection-note{font-size:10px;margin:4px 0}.actions{min-height:40px}.actions button{min-height:38px;padding:8px 6px;font-size:13px}.your-speech{min-height:14px;font-size:10px;margin-top:3px}.game-shell .bottom-note{font-size:8px;padding:0 7px}.turn-clock{width:27px;height:27px;font-size:16px;right:-7px;bottom:-4px}
 dialog{padding:16px 14px}.result-panel{padding:14px}.panel-pages-footer{margin-top:8px}
}
@media(max-width:500px){.hand{grid-auto-rows:78px;padding:20px 18px 0 0;row-gap:0}.lobby .levels{grid-template-columns:repeat(4,minmax(0,1fr))}.lobby .level{font-size:10px}.lobby .career-links button{font-size:11px}}
@media(max-width:350px){.topbar{padding-inline:6px}.top-actions .audio-mode-select{width:86px;max-width:86px}.wordmark .hall-label{font-size:9px;letter-spacing:0}}
@media(max-height:700px){
 .lobby h1{font-size:23px;margin-bottom:4px}.lobby .career-badge{margin:4px 0}.lobby .career-badge small{font-size:10px}.lobby .difficulty-label{margin-top:5px}.lobby .record{display:none}.lobby .fine{margin:4px 0}.lobby .career-links button{min-height:30px}.lobby .newcomer-banner{margin:0;padding:2px 7px}
 .game-shell .arena-table{grid-template-rows:98px minmax(76px,1fr) auto calc(14px + env(safe-area-inset-bottom,0px))}.table-center .phase-tag{display:none!important}.game-shell .speech{max-width:100%;font-size:10px!important}.hand .card{height:68px}.hand{grid-auto-rows:71px}.your-meta{margin-bottom:2px}.game-shell .played-cards .mini{height:37px}.played-cards .mini .pip{font-size:14px}.played-cards .mini .corner{font-size:12px}.played-cards .mini .corner small{font-size:9px}.played-cards{margin-top:3px}.game-shell .pass-trail{margin-top:2px}.your-speech{font-size:10px}
 dialog h2,.trial-panel h2{font-size:25px;margin-bottom:8px}.result-panel h2{font-size:26px}.result-panel .remaining-hands{margin:5px 0}.result-panel .remaining-seat+.remaining-seat{margin-top:6px}
}
@media(max-width:500px) and (max-height:620px){.hand{grid-auto-rows:65px}.hand .card{height:62px}.actions button{font-size:12px;white-space:nowrap}.selection-note{margin:3px 0}.audio-options{gap:8px;margin:8px 0}#music-status{font-size:11px;line-height:1.25;margin:4px 0}}
@media(min-width:600px) and (max-height:500px){
 :root{--bar-height:40px}.topbar{padding-inline:10px}.wordmark{font-size:21px}.topbar .small-button,.topbar .icon-button{min-height:30px;padding:4px 8px}.mode-pill{display:none}
 .lobby-panel{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:center;width:min(980px,100%);padding:8px 16px;margin:auto}.lobby h1{display:none}.lobby .career-badge small,.lobby .career-badge progress{display:none}.lobby .career-badge{padding:6px 10px}.lobby .difficulty-label{margin-top:4px}.lobby .level{padding:4px 2px}.lobby .room-detail{margin:4px 0}.lobby .enter{min-height:36px;padding:7px}.lobby-main>.text-button{min-height:28px;padding:5px}.lobby .resume-round{min-height:30px;padding:5px;margin:4px 0}.lobby .career-links{grid-template-columns:1fr 1fr}.lobby .record{display:flex}.lobby .fine{margin-top:8px}
 .game-shell .arena-table{grid-template-rows:72px minmax(60px,1fr) auto 12px}.game-shell .opponent{top:5px;width:24%;padding:4px 6px}.game-shell .opponent .avatar{width:30px;height:34px}.player-name{font-size:11px}.role{font-size:10px;margin-top:2px}.opponent-meta{margin-top:3px}.game-shell .speech{font-size:9px!important;padding:3px 5px}.kitty .mini{width:22px;height:31px}.kitty>span,.kitty>small{font-size:8px}.kitty .mini .pip{display:none}
 .game-shell .table-center{width:46%;align-self:center}.game-shell .status{font-size:12px;min-height:15px}.played-label{font-size:10px;margin-top:2px;padding:2px 6px}.played-portrait{width:16px;height:16px}.game-shell .played-cards .mini{width:29px;height:33px;margin-left:-17px}.game-shell .played-cards .mini:first-child{margin-left:0}.game-shell .pass-trail{display:none}.crown-symbol{font-size:28px}.empty-table{font-size:20px;margin-top:2px}
 .game-shell .player-dock{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;width:96%}.your-meta{grid-column:1;grid-row:1;width:100%;min-height:26px;padding:0;margin:0!important}.small-avatar{height:23px;width:23px}.your-identity strong{font-size:10px}.hand-summary{font-size:10px}.your-meta .text-button{font-size:10px}.hand-tools{grid-column:2;grid-row:1;margin:0;min-height:26px}.hand-tip{font-size:9px}.table-utilities button{min-height:25px;font-size:10px}
 .hand{grid-column:1/-1;grid-row:2;display:flex;min-height:0;padding:18px 0 0;gap:0}.hand .card{height:62px;margin-left:calc(var(--step) - var(--card-width))!important}.hand .card:first-child{margin-left:0!important}.hand .corner{font-size:18px;left:4px;top:4px}.hand .corner small{font-size:12px;margin-top:2px}.hand .pip{font-size:22px;bottom:11px}.hand .lower{font-size:11px;bottom:3px}.hand .card.selected{transform:translateY(-16px)!important}
 .selection-note{grid-row:3;grid-column:1;margin:3px 0;font-size:9px;min-height:12px}.your-speech{grid-row:3;grid-column:2;margin:3px 0;font-size:9px;min-height:12px}.actions{grid-row:4;grid-column:1/-1;min-height:34px}.actions button{min-height:33px;padding:6px 14px;font-size:12px}.bottom-note{font-size:8px!important}
 dialog,.result-panel{padding:10px 16px;max-height:calc(100dvh - 12px)}dialog h2,.result-panel h2{font-size:22px;margin:2px 32px 5px 0}.panel-pages-nav{margin-bottom:5px}.panel-pages-footer{margin-top:5px}.panel-pages-footer>button{min-height:32px;padding:6px}.panel-pages-nav button,.panel-pages-nav select{min-height:30px}.panel-page p{font-size:12px;line-height:1.3}.audio-mode-choices{grid-template-columns:repeat(4,1fr)}.audio-options{grid-template-columns:1fr 1fr;gap:8px 16px;margin:8px 0}.voice-tests{margin:8px 0}.remaining-hands{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px}.remaining-hands h3{grid-column:1/-1;margin:0}.remaining-seat+.remaining-seat{margin:0!important}.remaining-cards{grid-auto-rows:35px;grid-template-columns:repeat(10,minmax(0,22px))}.remaining-cards .card.mini{width:28px;min-width:28px;height:35px}.remaining-cards .pip{display:none}.score-earned{font-size:23px}.result-panel .panel-page:has(.settlement){display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:start}.result-panel .panel-page:has(.settlement)>*{margin:3px 0}.result-panel .career-badge progress{margin:4px 0}.result-panel details p{font-size:11px}
 .rule-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px}.rule-steps li{font-size:12px;margin:0}.rules-grid{grid-template-columns:repeat(4,1fr)}.rules-grid>div{font-size:11px;padding:7px}.rank-order{padding:7px;margin:7px 0}.lesson-list{grid-template-columns:1fr 1fr}.lesson-entry{font-size:12px;min-height:32px;padding:7px}.rank-ladder{grid-template-columns:repeat(3,1fr)}.replay-seat{display:inline-block;width:32%;vertical-align:top}.replay-seat>div{grid-template-columns:repeat(5,minmax(0,25px))}.replay-seat .card{height:30px}.replay-seat>div{grid-auto-rows:31px}.replay-seat .pip{display:none}
 .panel-page:has(.career-stats){display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:start}.panel-page:has(.career-stats)>*{margin:3px 0}.panel-page:has(.career-stats) .career-badge small{font-size:11px}
 .trial-panel:has(.trial-field){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 10px}.trial-panel:has(.trial-field)>*{grid-column:1/-1;margin:3px 0}.trial-panel:has(.trial-field)>.trial-field{grid-column:auto;font-size:12px}.trial-field select{min-width:0;width:100%;font-size:12px}
}
@media(max-width:500px) and (max-height:650px){.replay-seat>div{grid-auto-rows:30px}.replay-seat .card{height:30px}.replay-seat .pip{display:none}.replay-seat{margin:4px 0}.replay-seat .corner{top:2px}.replay-seat .corner small{margin-top:0}} @media(min-width:600px) and (max-height:500px){.replay-seat{margin-block:2px}.replay-seat>div{grid-auto-rows:29px}.replay-seat .card{height:28px}}

/* Separate optional banter from essential card announcements. */
.audio-options .humor-toggle{min-height:24px;color:#ffdf91;cursor:pointer}.humor-toggle small{font-size:10px;color:#bbc7df;margin-left:5px}.audio-options .humor-toggle input{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;border:1px solid #73819a;border-radius:20px;background:#354258;position:relative;cursor:pointer;margin:0}.humor-toggle input:before{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:white;transition:transform .12s}.audio-options .humor-toggle input:checked{background:#b98109;border-color:#ffda68}.humor-toggle input:checked:before{transform:translateX(16px)}.humor-toggle input:focus-visible{outline:2px solid white;outline-offset:3px}