/* Compact playing surface on phones. Intro and invitation artwork stays intact. */
@media(max-width:680px){
 body:has(.game-shell:not([hidden])),body:has(.four-table:not([hidden])){height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #cx-avatar-hud{flex:none}
 .game-shell .brand-block,.game-shell .cloudix-brand,.four-hud>img{display:none}
 .game-shell:not([hidden]){height:auto;min-height:0;flex:1;width:100%;padding:4px;gap:4px;grid-template-rows:auto auto minmax(0,1fr) auto auto;align-content:stretch}
 .game-shell .scoreboard{padding:4px;gap:4px}
 .game-shell .score-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .game-shell .score-card{padding:4px;min-width:0}
 .game-shell .score-card small{font-size:10px}
 .game-shell .score-avatar{width:24px;height:24px}
 .game-shell .opponent-zone,.game-shell .table-zone,.game-shell .player-zone,.game-shell .play-panel{padding:4px;min-height:0}
 .game-shell .zone-header{min-height:18px;margin-bottom:3px;font-size:11px}
 .game-shell .cpu-hand{min-height:0;gap:4px}
 .game-shell .cpu-hand .card{width:36px;height:50px}
 .game-shell .hand-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .game-shell .hand-grid .card{width:100%;height:clamp(62px,11dvh,84px)}
 .game-shell .table-zone{display:flex;flex-direction:column}
 .game-shell .table-grid{min-height:0;overflow:auto;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
 .game-shell .table-grid .card{width:100%;height:62px}
 .game-shell .play-panel{grid-template-columns:minmax(0,1fr) auto auto;gap:4px;font-size:11px}
 .game-shell .play-panel button{padding:8px;min-height:40px;font-size:12px}
 .four-table:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0;padding:4px}
 .four-hud{width:100%;flex:none;font-size:12px}
 .four-board{flex:1;width:100%;height:auto;min-height:0;margin:4px auto 0}
}