/* Shared constraints and fallbacks for desktop, mobile browser chrome, and keyboards. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{--app-viewport-height:100vh}
@supports(height:100dvh){:root{--app-viewport-height:100dvh}}
body[data-app-play=true],body[data-app-play=true] main{height:var(--app-viewport-height)}
body[data-app-play=true] main{padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top,0px));padding-right:max(10px,env(safe-area-inset-right,0px));padding-bottom:max(6px,env(safe-area-inset-bottom,0px));padding-left:max(10px,env(safe-area-inset-left,0px))}
body[data-app-play=true] #app,.app-game,.app-stage,.app-topbar>span,.app-hand-heading>*{min-width:0}
.app-topbar>span:first-child{overflow-wrap:anywhere}.app-totals{max-width:48%;overflow-wrap:anywhere;flex-shrink:0}
.app-hand-heading span{max-width:58%}.app-nav button,.launch-setup-nav button,.launch-categories button{touch-action:manipulation}
#app-panel{width:calc(100vw - 20px);width:min(920px,calc(100vw - max(20px,env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px))));height:min(760px,calc(var(--app-viewport-height) - 24px));max-height:calc(var(--app-viewport-height) - 24px);margin:auto}
#card-detail{max-height:calc(var(--app-viewport-height) - 24px)}
.app-panel-content{overflow-x:auto;overflow-y:auto}.app-panel-content .score-table-wrap{overflow-x:auto;overscroll-behavior-x:contain}.app-panel-content .score-table{min-width:300px}
.app-panel-content .library{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}.app-panel-content .library>*{min-width:0}
.app-panel-content .card h3,.app-panel-content .recipe,.app-panel-content .mystery-item,.app-panel-content .wish,.app-result p{overflow-wrap:anywhere}
.app-panel-content select{font-size:16px}.app-menu label{gap:12px;flex-wrap:wrap}.app-menu select{max-width:100%}
.app-panel-content .card-details{min-height:44px}.app-panel-content summary{padding:10px 0;min-height:44px}
body .app-stage .hand-grid.player-hand .card-details{min-height:44px;width:44px}
.launch-step-body{overflow:auto;overscroll-behavior:contain;scroll-padding:12px}.launch-setup{overflow:hidden}.launch-names input{scroll-margin:12px}
.app-result-highlights{display:flex;flex-direction:column;gap:7px;max-width:100%}
@media(max-width:380px){.launch-brand h1{font-size:29px}.launch-categories button{font-size:11px}.launch-setup-nav button{font-size:11px}.app-panel-head h2{font-size:18px}.app-panel-head{gap:8px;padding:10px}}
/* The visual viewport also shrinks for keyboards without changing CSS media height. */
body[data-compact=true] .app-launcher{gap:5px}
body[data-compact=true] .launch-brand{min-height:70px;padding:6px 0 0}
body[data-compact=true] .launch-wordmark{gap:3px}
body[data-compact=true] .launch-brand .site-fan-mark{width:40px;height:32px}
body[data-compact=true] .launch-brand h1{font-size:26px}
body[data-compact=true] .launch-tagline,body[data-compact=true] .launch-save{display:none}
body[data-compact=true] .launch-setup{gap:8px}
body[data-compact=true] .launch-step-heading h2{font-size:20px}
body[data-compact=true] .launch-step-heading p{font-size:11px;margin:4px 0 0}
body[data-compact=true] .launch-names{gap:8px}
body[data-compact=true] .app-result-highlights{display:none}
@media(max-height:550px){.app-result-highlights{display:none}.app-result{gap:5px}.app-result h2{font-size:22px}.app-result p{font-size:12px}}
@media(min-height:451px){body .app-stage .hand-grid.player-hand .poker-card{padding-bottom:48px}}
@media(max-width:599px) and (max-height:450px){body .app-stage .hand-grid.player-hand .card-details{right:1px;bottom:1px}body .app-stage .hand-grid.player-hand .card h3{font-size:11px}}
/* Wide, short displays keep card pictures alongside their names and ranks. */
@media(min-width:600px) and (max-height:450px){
 body .app-stage .hand-grid.player-hand .poker-card{grid-template-columns:minmax(0,40%) minmax(0,1fr) 44px;gap:5px;padding:4px}
 body .app-stage .hand-grid.player-hand .card-art{display:flex;grid-column:1;grid-row:1;margin:0;height:100%;padding-bottom:14px}
 body .app-stage .hand-grid.player-hand .card h3{grid-column:2;padding:0;font-size:12px}
 body .app-stage .hand-grid.player-hand .poker-corner{grid-column:3;align-self:start}
 body .app-stage .hand-grid.player-hand .card-details{right:1px;bottom:1px}
}
@media(forced-colors:active){.launch-brand h1 span{background:none!important;color:CanvasText!important;text-shadow:none}button:focus-visible{outline:2px solid Highlight}.discard-selected{outline:2px solid Highlight}}