.game-workspace{position:relative;display:grid;grid-template-columns:minmax(0,1fr);height:100%;min-height:0;min-width:0;overflow:hidden}
.game-workspace>main{min-width:0}
.deckdex-bar{gap:12px}.deckdex-bar strong{flex:1}.deckdex-bar button{padding:9px 12px;font-size:.8rem;min-height:44px}

.question-hint{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #d0afee55;border-radius:14px;background:#6c44942b}
.question-hint p{margin:0;flex:1;font-size:.8rem;line-height:1.4}.question-hint button{font-size:.8rem;padding:8px 12px}
.question-board .playcard{opacity:.55}.question-board .playcard.won{opacity:.15}
@media(max-width:1399px){.question-hint{padding:7px 10px}.question-hint p{font-size:.72rem}.question-hint button{font-size:.72rem}.question-hint{gap:8px}}
@media(max-height:500px){.question-hint{padding:4px 9px}.question-hint p{font-size:.7rem}.question-hint button{min-height:36px;padding:5px 9px}.deckdex-bar{padding:4px 10px}.deckdex-bar button{min-height:40px}}

/* The game panels use the visual viewport, independently of the game chrome.
   Only their content scrolls, so returning to the game stays within reach. */
#game-companion,#game-deckdex{
 --game-panel-top:max(8px,env(safe-area-inset-top));
 --game-panel-bottom:max(8px,env(safe-area-inset-bottom));
 top:calc(var(--game-viewport-top,0px) + var(--game-panel-top));
 bottom:auto;
 height:calc(var(--game-viewport-height,100dvh) - var(--game-panel-top) - var(--game-panel-bottom));
 max-height:calc(var(--game-viewport-height,100dvh) - var(--game-panel-top) - var(--game-panel-bottom));
 width:min(760px,calc(100% - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right))));
 min-height:0;
}
#game-companion{left:max(8px,env(safe-area-inset-left))}
#game-deckdex{right:max(8px,env(safe-area-inset-right))}
#game-companion>header,#game-deckdex>header{flex:none;min-width:0;gap:8px;padding:6px 12px}
#game-companion>header strong,#game-deckdex>header strong{min-width:0;overflow-wrap:break-word}
#game-companion>header button,#game-deckdex>header button{flex:none;min-height:44px;white-space:nowrap}
#game-companion>.pm-panel-body,#game-deckdex>.pm-panel-body{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#game-companion .companion-content{padding:clamp(12px,2vw,22px)}
#game-deckdex .deckdex-actions{flex:none;max-height:30%;overflow:auto}
@media(orientation:portrait){
 #game-companion,#game-deckdex{width:min(900px,calc(100% - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right))))}
}
@media(min-width:1400px) and (orientation:landscape){
 #game-companion,#game-deckdex{width:min(31vw,600px)}
}
@media(max-width:380px){
 #game-companion>header,#game-deckdex>header{padding-inline:8px;gap:4px}
 #game-companion>header button,#game-deckdex>header button{padding-inline:8px}
}