/* One viewport, one hand. Only information dialogs scroll during play. */
body[data-app-play=true]{height:100dvh;overflow:hidden;overscroll-behavior:none}
body[data-app-play=true] main{max-width:980px;height:100dvh;padding: max(6px,env(safe-area-inset-top)) 10px max(6px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
body[data-app-play=true] main>header,body[data-app-play=true] main>.preferences,body[data-app-play=true] main>.rules,body[data-app-play=true] main>footer{display:none}
body[data-app-play=true] #app{flex:1;min-height:0}
.app-game{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
.app-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px;min-height:54px}
.app-topbar small{display:block;font-size:11px;margin-top:5px;color:var(--muted)}.app-totals{text-align:right;font-size:12px;line-height:1.6}.app-totals b{color:var(--teal)}body[data-theme=arcade] .app-totals b{color:#ffc96b}
.app-stage{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;width:100%;max-width:780px;margin:auto;height:100%}
.app-hand-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;min-height:34px}.app-hand-heading span{font-size:11px;color:var(--muted);text-align:right}
.app-stage .hand-grid.player-hand{height:100%;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:2px}
body .app-stage .hand-grid.player-hand .poker-card,body .app-stage .hand-grid.player-hand .empty-slot{height:100%;min-height:0;padding:8px 7px 44px;display:flex;flex-direction:column;transform:none;border-radius:12px}
body .app-stage .hand-grid.player-hand .position{display:block;font-size:9px;min-height:25px;line-height:1.25;padding-right:24px;letter-spacing:0}
body .app-stage .hand-grid.player-hand .poker-corner{right:6px;top:6px}body .app-stage .hand-grid.player-hand .poker-corner b{font-size:23px}body .app-stage .hand-grid.player-hand .poker-corner span{font-size:13px;margin:0}
body .app-stage .hand-grid.player-hand .card-art{margin:8px 0 0;padding:0;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
body .app-stage .hand-grid.player-hand .card-image,body .app-stage .hand-grid.player-hand .specimen-art{height:100%;max-height:100%;min-height:0;width:100%;object-fit:contain}
body .app-stage .hand-grid.player-hand .card h3{display:block;flex-shrink:0;font:700 13px/1.2 system-ui,sans-serif;min-height:0;margin:6px 0 0;overflow-wrap:anywhere}
body .app-stage .hand-grid.player-hand .trait,body .app-stage .hand-grid.player-hand .card-flavor,body .app-stage .hand-grid.player-hand .first-seen{display:none}
body .app-stage .hand-grid.player-hand .card-details{left:auto;right:1px;bottom:1px;width:44px;min-height:40px;font-size:0;padding:4px;color:var(--teal)}body .app-stage .hand-grid.player-hand .card-details::after{content:'ⓘ';font-size:22px}
body .app-stage .hand-grid.player-hand .discard-label{left:7px;bottom:14px;font-size:10px}body .app-stage .discard-selected .discard-label{color:#a73232}
.app-action{display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:48px}.app-action span{font-size:11px;color:var(--muted)}.app-action button{min-height:44px;flex:1;max-width:360px;padding:10px;font-size:13px}
.app-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);padding-top:7px}.app-nav button{padding:6px 2px;min-height:46px;font-size:11px;overflow-wrap:anywhere}.app-nav small{display:block;font-size:10px;margin-top:3px}
.app-stage-result{display:flex;align-items:center;justify-content:center}.app-result,.app-handoff{width:100%;max-width:620px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0}.app-result h2,.app-handoff h2{font-size:clamp(22px,4vw,36px);margin:0;overflow-wrap:anywhere}.app-result p,.app-handoff p{font-size:13px;line-height:1.4;margin:0}.app-result button,.app-handoff button{min-height:44px;width:min(100%,340px)}.app-handoff{grid-row:1/-1;margin:auto}
#app-panel{width:min(920px,calc(100vw - 20px));max-width:920px;height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:18px;color:var(--ink);background:var(--panel);overflow:hidden}
#app-panel[open]{display:flex;flex-direction:column}#app-panel::backdrop,#card-detail::backdrop{background:#080c20b8}
.app-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:12px 14px;border-bottom:1px solid var(--line)}.app-panel-head h2{font-size:20px;margin:0}.app-panel-head button{min-height:44px;white-space:nowrap}
.app-panel-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}.app-panel-content .score-table button{min-height:44px;font-size:11px}.app-panel-content .score-table-wrap{overflow:visible}.app-panel-content .wish-grid{grid-template-columns:1fr}.app-panel-content .wish-panel{margin:0}.app-panel-content .wish-panel summary{display:none}.app-panel-content .score-table td:first-child{width:auto}.app-panel-content .score-table small{font-size:10px}.app-panel-content .score-table td{padding:10px 4px}
.app-menu{display:grid;gap:12px}.app-menu button{min-height:44px}.app-menu label{display:flex;justify-content:space-between;align-items:center}
#card-detail{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}#card-detail .close-dialog{min-height:44px;position:sticky;top:0;z-index:5}
@media(max-width:380px){.app-nav button{font-size:10px}.app-hand-heading{font-size:12px}.app-hand-heading span{font-size:10px}.app-action button{font-size:12px}.app-panel-content{padding:10px}}
@media(max-height:650px){.app-game{gap:5px}.app-topbar{min-height:44px;padding:3px}.app-hand-heading{min-height:26px}.app-stage{gap:5px}body .app-stage .hand-grid.player-hand .poker-card{padding-top:5px;padding-bottom:38px}body .app-stage .hand-grid.player-hand .position{font-size:8px;min-height:22px}body .app-stage .hand-grid.player-hand .card h3{font-size:12px;margin-top:3px}.app-result{gap:7px}.app-result p{font-size:12px}.app-result h2{font-size:24px}}
@media(max-height:450px){.app-topbar{min-height:38px}.app-topbar small{display:inline;margin-left:8px}.app-nav button{min-height:44px}.app-stage .hand-grid.player-hand{gap:5px}body .app-stage .hand-grid.player-hand .poker-card{padding:4px 6px 0;display:grid;grid-template-columns:1fr 44px;grid-template-rows:1fr;align-items:center}body .app-stage .hand-grid.player-hand .position,body .app-stage .hand-grid.player-hand .card-art{display:none}body .app-stage .hand-grid.player-hand .poker-corner{position:static;grid-column:2;grid-row:1}body .app-stage .hand-grid.player-hand .poker-corner b{font-size:18px}body .app-stage .hand-grid.player-hand .card h3{padding:0 0 18px;grid-column:1;grid-row:1;font-size:12px}body .app-stage .hand-grid.player-hand .card-details{right:40px;bottom:0;min-height:32px;width:32px}body .app-stage .hand-grid.player-hand .discard-label{font-size:9px;bottom:4px;left:5px}.app-result{display:grid;grid-template-columns:1fr 1fr;gap:5px}.app-result h2,.app-result .eyebrow{grid-column:1/-1}.app-result h2{font-size:20px}.app-result p{font-size:11px}.app-result button{font-size:11px;padding:7px}.app-hand-heading{min-height:20px}}