/* Activated for phones using device geometry, including desktop-overview mode. */
html,body{width:100%;min-width:0;overscroll-behavior-y:none}
body{overflow:hidden}
#app{height:100svh;height:var(--app-height,100dvh);min-height:0}
.shell{width:100%;height:100%;padding:env(safe-area-inset-top,0px) 16px max(8px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;overflow:hidden}
.topbar,.game-shell .topbar{height:52px;min-height:52px;flex-shrink:0}
.brand,.game-shell .brand{font-size:25px;gap:7px}
.brand-mark,.game-shell .brand-mark{width:30px;height:34px}
.topbar .text-button,.game-shell .topbar .text-button{font-size:11px;min-height:44px;gap:6px}
.topbar .quiet-label{display:none}
.shell>main{min-height:0;flex:1}
.shell>.footer{display:none}
input,select{font-size:16px!important} /* Keep iOS from zooming the whole page on focus. */
.mobile-only{display:inline-flex}

/* Welcome: one compact column, with both entry actions always visible. */
body[data-screen=welcome] .shell>main{display:flex;flex-direction:column;justify-content:center}
.hero{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:14px 0 8px;max-width:430px;width:100%;margin:0 auto;min-height:0;flex:1}
.hero-left{flex:0 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;text-align:center}
.hero .eyebrow,.hero .little-note{display:none}
.hero h1{font-size:clamp(30px,calc(var(--app-height,700px) * .048),42px);line-height:1.03;letter-spacing:-1.4px}
.hero-sub{font-size:12px;line-height:1.4;margin-top:7px}
.hero-art{width:80%;margin:0 auto -5px;min-height:0;flex-shrink:1}
.hero-art svg{width:100%;height:clamp(78px,calc(var(--app-height,700px) * .19),155px);display:block}
.welcome-card{width:100%;padding:16px 18px;border-radius:20px;flex-shrink:0;box-shadow:0 4px 0 #183d3108}
.welcome-card h2,.welcome-card>p{display:none}
.welcome-card .sticker{font-size:8px;padding:5px 8px;top:-11px;right:15px}
.welcome-card .field-label{font-size:11px;margin:2px 0 7px}
.welcome-card .input-wrap{height:46px;border-radius:10px}
.entry-button{min-height:57px;padding:10px 12px;gap:11px;margin-top:12px;border-radius:12px}
.entry-button.secondary{margin-top:10px}
.entry-button .entry-icon{width:31px}
.entry-button .entry-icon svg{width:28px;height:28px}
.entry-button strong{font-size:18px;line-height:1.1}
.entry-button small{font-size:10px;line-height:1.3;margin-top:3px}
.entry-button .arrow{font-size:20px}
.welcome-links{margin-top:12px;font-size:10px;line-height:1.5}
.welcome-links button{font-size:10px;min-height:24px}
.welcome-card .small-divider{display:none}
.trust-row{gap:12px;font-size:8px;margin-top:7px}
.resume{font-size:11px;padding:8px;min-height:37px;margin-top:10px}
.features{display:none}

/* Guest list: six compact cards and a fixed Deal button; details live in a sheet. */
body[data-screen=setup] main{display:flex;flex-direction:column;gap:12px}
.page-head{flex-shrink:0;padding:14px 0 0;margin:0;min-height:42px}
.page-head>div{display:flex;align-items:center;gap:8px}
.page-head .back-link{font-size:0;min-width:36px;height:36px;display:grid;place-items:center;margin:0;border-radius:50%;background:#f0eedf}
.page-head .back-link:before{content:'←';font-size:18px}
.page-head h1{font-size:27px;letter-spacing:-1.1px;line-height:1.12}
.page-head p,.page-head>.pill{display:none}
.setup-grid{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex:1;min-height:0;width:100%}
.hero-panel{flex-shrink:0;margin:0;display:grid;grid-template-columns:76px 1fr;grid-template-rows:40px 38px;gap:5px 14px;padding:12px 14px;border-radius:16px}
.hero-panel>.section-label,.hero-panel>.field-label{display:none}
.hero-preview{grid-column:1;grid-row:1/3;margin:0;align-self:center}
.hero-preview svg{height:58px;width:58px}
.hero-preview strong{font-size:11px;margin-top:3px;line-height:1.1}
.avatar-options{grid-column:2;grid-row:1;max-width:220px;width:100%;gap:7px;align-items:center}
.avatar-option{min-width:38px;min-height:38px;padding:2px}
.avatar-option svg{height:32px;width:32px}
.hero-panel .input-wrap{grid-column:2;grid-row:2;height:38px;padding:0 10px;border-radius:9px}
.hero-panel .input-wrap input{font-size:16px;min-width:0}
.game-facts{display:none}
.setup-grid>section:last-child{min-height:0;display:flex;flex-direction:column;flex:1;width:100%}
.opponents-head{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 10px;flex-shrink:0}
.opponents-head .section-label{font-size:9px;letter-spacing:.8px;gap:5px}
.opponents-head .step-dot{display:none}
.character-guide{background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:10px;padding:4px 0;min-height:28px;align-items:center}
.counter{grid-column:1/-1;width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:4px;border-radius:11px}
.counter button{width:100%;min-height:36px;height:36px;font-size:13px;border-radius:8px}
.opponent-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px;flex:0 1 auto;min-height:0;width:100%;height:clamp(208px,calc(var(--app-height,740px) * .34),280px)}
.opponent-card{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-radius:14px;text-align:center}
.opponent-card svg{height:clamp(36px,calc(var(--app-height,700px) * .07),64px);width:clamp(36px,calc(var(--app-height,700px) * .07),64px);flex-shrink:0;margin:0 auto 5px}
.opponent-card h3{font-size:12px;font-weight:600;letter-spacing:-.2px;line-height:1.2;max-width:100%}
.opponent-card .role-label{font-size:8px;letter-spacing:.4px;margin:4px 0 0}
.opponent-card p,.opponent-card .tags{display:none}
.opponent-card .selected-tick{width:15px;height:15px;font-size:9px;right:6px;top:6px}
.opponent-card:hover{transform:none}
.setup-bottom{flex-shrink:0;padding:0 0 4px;display:block}
.setup-bottom>p{display:none}
.setup-bottom .button{width:100%;min-height:48px;font-size:16px;padding:11px;border-radius:12px}

/* Portrait table: the table absorbs remaining height, rather than demanding 570px. */
.game-shell{padding-left:10px;padding-right:10px}
.game-shell>main{display:flex;flex-direction:column;overflow:hidden}
.game-header{height:48px;min-height:48px;padding:5px 2px;flex-shrink:0;gap:5px}
.game-header h1{font-size:16px;letter-spacing:-.4px;line-height:1.15}
.game-header h1>span{display:none}
.game-header .subline{font-size:9px;margin-top:3px;white-space:nowrap;letter-spacing:-.1px}
.game-header-right{gap:0}
.game-header-right>.speed-control,.game-header-right>.pill{display:none}
.table-tools{display:flex;align-items:center;gap:4px}
.table-tools button{display:flex;align-items:center;justify-content:center;gap:3px;min-height:38px;min-width:42px;padding:6px 7px;border:1px solid #e2e4d3;background:#f8f7e9;border-radius:9px;font-size:16px}
.table-tools button span{font-size:9px}
.game-layout{display:flex;flex:1;min-height:0;margin:0}
.game-main{display:grid;grid-template-rows:minmax(0,1fr) 38px 76px;gap:0;width:100%;height:100%;min-height:0}
.game-sidebar{display:none}
.table-wrap{height:100%;min-height:0;border-radius:20px;overflow:hidden}
.table-wrap:before{font-size:17px;left:11px;top:13px}
.table-wrap:after{font-size:13px;right:12px;bottom:13px}
.felt{inset:8% 6% 9%;border-width:7px;border-radius:46%;box-shadow:0 0 0 2px #9f8c69,inset 0 0 0 2px #9fcba4,0 5px 0 #d7d5bd}
.felt:after{inset:12px}
.table-center{top:42%;width:210px;transform:translate(-50%,-5%)}
.pot-label{font-size:8px;letter-spacing:1px}
.pot-number{font-size:26px;line-height:1.1;margin-top:3px}
.chip-icon{height:14px;width:14px;vertical-align:0}
.community{gap:4px;margin:10px 0 8px}
.community .card{height:52px;width:35px;padding:4px;border-radius:5px}
.community .card .rank{font-size:16px}
.community .card .suit{font-size:22px}
.street-label{font-size:8px;line-height:1;letter-spacing:1.3px}
.table-wordmark{font-size:11px;margin-top:10px;opacity:.75}
.table-badge{display:none}
.seat{width:78px}
.seat-avatar{padding:2px;background:#f9f7e9;border-width:1.5px}
.seat-avatar svg{width:clamp(34px,calc(var(--app-height,700px) * .065),46px);height:clamp(34px,calc(var(--app-height,700px) * .065),46px)}
.seat.acting .seat-avatar{box-shadow:0 0 0 3px #ffffff90}
.seat-name{font-size:9px;font-weight:600;line-height:1.15;margin-top:3px;max-width:100%}
.seat-stack{font-size:10px;line-height:1.1;padding:3px 6px;margin-top:3px;border-radius:10px}
.seat-action{font-size:8px;line-height:1.1;padding:3px 5px;margin-top:3px;max-width:84px;overflow:hidden;text-overflow:ellipsis}
.seat-hole{top:17px;left:calc(50% + 15px);gap:2px;transform:rotate(7deg)}
.seat-hole .card.back{visibility:hidden}
.seat-hole .card{width:16px;height:23px;padding:2px;border-radius:3px}
.seat-hole .rank{font-size:8px}
.seat-hole .suit{font-size:9px}
.seat-hole .card.back span{font-size:6px;padding:0}
.dealer-chip{width:16px;height:16px;font-size:8px;right:-6px;bottom:0}
.hero-seat{width:242px;padding:8px 10px;gap:8px;border-radius:14px;top:88%!important}
.hero-seat .seat-avatar svg{width:38px;height:38px}
.hero-seat .hero-info{max-width:88px;min-width:0}
.hero-seat .seat-name{font-size:11px;line-height:1.15}
.hero-seat .seat-stack{font-size:15px;margin-top:4px}
.hero-seat .seat-action{margin-top:3px}
.hero-hand{gap:4px}
.hero-hand .card{width:39px;height:55px;padding:4px}
.hero-hand .rank{font-size:17px}
.hero-hand .suit{font-size:24px}
.turn-bar{height:30px;min-height:0;margin:4px 0;padding:6px 10px;font-size:10px;line-height:1.2;gap:6px;border-radius:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.turn-bar .turn-detail{display:none}
.turn-bar .compact-thinking{display:inline}
.controls{position:static;bottom:auto;z-index:auto;min-height:0;height:72px;max-height:72px;margin:0;padding:10px;border-radius:13px;box-shadow:none;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.action-row{width:100%;gap:7px;grid-template-columns:1fr 1.25fr 1.15fr}
.action-row .button{min-height:46px;padding:10px 5px;font-size:14px;border-radius:9px;box-shadow:0 2px 0 #7fbb8e;white-space:nowrap;gap:3px}
.action-row .button.soft{box-shadow:0 2px 0 #e1d8c6}
.action-row .button small{font-size:8px}
.idle-controls{font-size:11px;line-height:1.4;padding:5px 8px}
.controls>.raise-panel{display:none}
.result-box h3,.result-box>p{display:none}
.result-box>.button{margin:0;width:100%;min-height:46px;font-size:15px}

/* Optional content is a scrollable, safe-area-aware bottom sheet. */
dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:540px;max-height:calc(var(--visible-height,var(--app-height,100dvh)) - 30px);border-radius:24px 24px 0 0;padding:27px 22px max(24px,env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
dialog:before{content:'';position:absolute;width:36px;height:4px;border-radius:4px;background:#d6ddcd;left:calc(50% - 18px);top:9px}
.help-close{width:36px;height:36px;margin:-2px -6px 0 8px;font-size:22px;position:relative;z-index:1}
.help-title{font-size:24px;letter-spacing:-.7px;line-height:1.15;margin-bottom:14px;padding-right:26px}
.help-body{font-size:13px}
.help-body .lineup-row{align-items:flex-start;padding:12px 0}
.help-body .lineup-row svg{width:42px;height:42px}
.help-body .lineup-row strong{font-size:12px}
.help-body .lineup-row p{font-size:12px;line-height:1.5;margin:4px 0}
.help-body .lineup-row small{font-size:10px}
.sheet-caption{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.sheet-history{min-height:60px;max-height:calc(var(--app-height,700px) * .55);overflow:auto}
.sheet-history p{padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}
.sheet-history strong{color:var(--ink)}
.sheet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}
.sheet-stats>div{background:#eff1e3;border-radius:12px;padding:12px 6px;text-align:center}
.sheet-stats strong{display:block;font-family:Outfit;font-size:23px}
.sheet-stats span{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.sheet-pace{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:15px}
.sheet-pace select{border:1px solid #d6dfcb;border-radius:10px;padding:9px;background:var(--paper);min-height:44px}
.sheet-cast .lineup-row{gap:9px;padding:12px 0}
.sheet-cast .lineup-row svg{width:40px;height:40px}
.sheet-cast .lineup-row>div{flex:1}
.sheet-cast .lineup-row strong{font-size:12px;margin-bottom:3px}
.sheet-cast .lineup-row small{font-size:11px;line-height:1.5;display:block}
.sheet-stack{font-size:12px;font-weight:700}
.sheet-cards{display:flex;gap:3px;margin-top:6px}
.sheet-cards .card{width:28px;height:39px;padding:3px;border-radius:4px}
.sheet-cards .rank{font-size:12px}
.sheet-cards .suit{font-size:16px}
.sheet-actions{display:grid;gap:14px;margin-top:22px}
.sheet-actions .button{min-height:48px}
.sheet-actions .small-link{min-height:35px;font-size:12px}
dialog .raise-panel{border:0;padding:0;margin:20px 0 0}
dialog .raise-controls{display:grid;grid-template-columns:1fr 98px;gap:14px}
dialog .raise-controls label{font-size:12px;grid-column:1/-1}
dialog .raise-controls input[type=range]{width:100%;height:44px;min-width:0;margin:0;accent-color:#4f9667}
dialog .raise-controls input[type=number]{width:98px;min-height:46px;font-size:18px!important;border-radius:10px}
dialog .raise-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
dialog .raise-presets button{min-height:42px;font-size:12px;padding:9px}
dialog .raise-presets .confirm-raise{grid-column:1/-1;width:100%;min-height:50px;margin:5px 0 0;font-size:16px;border-radius:12px}
#toast{bottom:max(20px,env(safe-area-inset-bottom,0px));font-size:12px;max-width:calc(100% - 24px);line-height:1.5;padding:12px 16px;z-index:30}
body[data-screen=game] #toast{bottom:100px}
.loading{padding:40px 10px}
.loading h2{font-size:24px;margin-top:16px}
.loading p{font-size:13px;line-height:1.6}

/* Short phones, including browser toolbars. Keep all primary controls on screen. */


/* Very short viewports may scroll; keyboard opening never hides/rebuilds content. */

/* Audio remains in Settings; keep the live table free of extra controls. */
.desktop-settings{display:none}
.audio-settings{padding:15px;margin:16px 0 20px}
.audio-heading h3{font-size:16px}
.audio-caption{font-size:11px}
.audio-master{min-height:40px;padding:8px 11px}
.audio-label{font-size:13px}
.audio-mute{min-height:38px;padding:7px 11px;font-size:11px}
.audio-volume input[type=range]{height:40px}

/* Nine opponents share the real remaining height; short screens scroll the cast. */
body[data-screen=setup] .setup-grid{min-height:0}
body[data-screen=setup] .setup-grid>section:last-child{min-height:0;overflow:hidden}
body[data-screen=setup] .opponent-grid{height:auto;flex:1 1 0;min-height:0;grid-template-rows:repeat(3,minmax(112px,1fr));gap:8px;padding:3px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;align-content:stretch}
body[data-screen=setup] .opponent-card{min-height:112px;padding:8px 4px;justify-content:center;overflow:visible}
body[data-screen=setup] .opponent-card svg{width:40px;height:40px;margin:0 auto 6px}
body[data-screen=setup] .opponent-card h3{flex-shrink:0;font-size:11px;line-height:1.2;min-height:14px;max-width:100%}
body[data-screen=setup] .opponent-card .difficulty{flex-shrink:0;margin-top:5px}

/* Device-normalized equivalents of the compact media queries. */

html[data-layout=phone][data-phone-height=short] .hero{gap:10px;padding-top:9px;padding-bottom:5px}
html[data-layout=phone][data-phone-height=short] .hero h1{font-size:32px}
html[data-layout=phone][data-phone-height=short] .hero-sub{font-size:11px;margin-top:5px}
html[data-layout=phone][data-phone-height=short] .hero-art svg{height:clamp(60px,calc(var(--app-height,650px) * .12),90px)}
html[data-layout=phone][data-phone-height=short] .welcome-card{padding:13px 16px}
html[data-layout=phone][data-phone-height=short] .welcome-card .input-wrap{height:43px}
html[data-layout=phone][data-phone-height=short] .entry-button{min-height:53px;padding:9px 11px;margin-top:10px}
html[data-layout=phone][data-phone-height=short] .welcome-links{margin-top:8px}
html[data-layout=phone][data-phone-height=short] .trust-row{font-size:8px;margin-top:4px}
html[data-layout=phone][data-phone-height=short] body[data-screen=setup] main{gap:9px}
html[data-layout=phone][data-phone-height=short] .page-head{padding-top:9px;min-height:36px}
html[data-layout=phone][data-phone-height=short] .page-head h1{font-size:24px}
html[data-layout=phone][data-phone-height=short] .setup-grid{gap:9px}
html[data-layout=phone][data-phone-height=short] .hero-panel{padding:9px 12px;grid-template-rows:36px 34px;gap:4px 12px;grid-template-columns:68px 1fr}
html[data-layout=phone][data-phone-height=short] .hero-preview svg{width:50px;height:50px}
html[data-layout=phone][data-phone-height=short] .hero-preview strong{font-size:10px}
html[data-layout=phone][data-phone-height=short] .avatar-option{min-height:34px;min-width:34px}
html[data-layout=phone][data-phone-height=short] .avatar-option svg{height:29px;width:29px}
html[data-layout=phone][data-phone-height=short] .hero-panel .input-wrap{height:34px}
html[data-layout=phone][data-phone-height=short] .opponents-head{gap:5px;margin-bottom:7px}
html[data-layout=phone][data-phone-height=short] .character-guide{min-height:25px}
html[data-layout=phone][data-phone-height=short] .counter button{height:32px;min-height:32px}
html[data-layout=phone][data-phone-height=short] .opponent-card{padding:6px 3px}
html[data-layout=phone][data-phone-height=short] .opponent-card svg{height:38px;width:38px;margin-bottom:4px}
html[data-layout=phone][data-phone-height=short] .opponent-card h3{font-size:11px}
html[data-layout=phone][data-phone-height=short] .opponent-card .role-label{margin-top:3px;font-size:7px}
html[data-layout=phone][data-phone-height=short] .setup-bottom .button{min-height:44px;padding:9px}
html[data-layout=phone][data-phone-height=short] .game-header{height:43px;min-height:43px}
html[data-layout=phone][data-phone-height=short] .game-main{grid-template-rows:minmax(0,1fr) 35px 70px}
html[data-layout=phone][data-phone-height=short] .controls{height:66px;max-height:66px;padding:8px}
html[data-layout=phone][data-phone-height=short] .turn-bar{height:28px;margin:4px 0 3px;font-size:9px}
html[data-layout=phone][data-phone-height=short] .seat-avatar svg{width:35px;height:35px}
html[data-layout=phone][data-phone-height=short] .seat-name{font-size:8px}
html[data-layout=phone][data-phone-height=short] .seat-stack{font-size:9px;padding:2px 5px}
html[data-layout=phone][data-phone-height=short] .seat-action{font-size:7px;padding:2px 4px}
html[data-layout=phone][data-phone-height=short] .seat-hole{top:13px;left:calc(50% + 12px)}
html[data-layout=phone][data-phone-height=short] .table-center{top:41%}
html[data-layout=phone][data-phone-height=short] .community{margin:8px 0 6px}
html[data-layout=phone][data-phone-height=short] .community .card{width:29px;height:42px}
html[data-layout=phone][data-phone-height=short] .community .card .suit{font-size:17px}
html[data-layout=phone][data-phone-height=short] .pot-number{font-size:21px}
html[data-layout=phone][data-phone-height=short] .table-wordmark{display:none}
html[data-layout=phone][data-phone-height=short] .hero-seat{padding:6px 9px;width:216px;top:87%!important}
html[data-layout=phone][data-phone-height=short] .hero-seat .seat-avatar svg{width:32px;height:32px}
html[data-layout=phone][data-phone-height=short] .hero-seat .seat-name{font-size:10px}
html[data-layout=phone][data-phone-height=short] .hero-seat .seat-stack{font-size:12px}
html[data-layout=phone][data-phone-height=short] .hero-hand .card{height:45px;width:32px}
html[data-layout=phone][data-phone-narrow=true] .shell{padding-left:12px;padding-right:12px}
html[data-layout=phone][data-phone-narrow=true] .game-shell{padding-left:7px;padding-right:7px}
html[data-layout=phone][data-phone-narrow=true] .game-header h1{font-size:14px}
html[data-layout=phone][data-phone-narrow=true] .game-header .subline{font-size:8px}
html[data-layout=phone][data-phone-narrow=true] .table-tools button span{display:none}
html[data-layout=phone][data-phone-narrow=true] .table-tools button{min-width:36px}
html[data-layout=phone][data-phone-narrow=true] .page-head h1{font-size:23px}
html[data-layout=phone][data-phone-narrow=true] .opponent-card h3{font-size:10px}
html[data-layout=phone][data-phone-narrow=true] .seat{width:70px}
html[data-layout=phone][data-phone-narrow=true] .seat-name{font-size:8px}
html[data-layout=phone][data-phone-narrow=true] .table-center{width:170px}
html[data-layout=phone][data-phone-narrow=true] .community .card{width:27px;height:42px}
html[data-layout=phone][data-phone-narrow=true] .hero-seat{width:214px}
html[data-layout=phone][data-phone-tiny=true] body:not([data-screen=game]){overflow:auto}
html[data-layout=phone][data-phone-tiny=true] body:not([data-screen=game]) #app{height:auto;min-height:100svh}
html[data-layout=phone][data-phone-tiny=true] body:not([data-screen=game]) .shell{height:auto;min-height:100svh;overflow:visible}
html[data-layout=phone][data-phone-tiny=true] .hero-left{display:none}
html[data-layout=phone][data-phone-tiny=true] .hero{padding:20px 0}
html[data-layout=phone][data-phone-tiny=true] .setup-grid{min-height:350px}