/* Shared phone ergonomics. Board squares and game pieces retain their compact sizing. */
button,a,input,select{touch-action:manipulation}
@media(max-width:650px){
 input,select,textarea{font-size:16px!important}
 input,select,textarea,form{min-width:0}
 #chatForm button,.table-chat-form button,.lobby-message-form button,
 .actions>button,.topbar>button,header>button,.modal-head>button,
 .lobby-button,.lobby-table-filters button,.lobby-table-card button,
 .lobby-toolbar .game-picker button,.waiting-leave{min-height:44px}
 .table-frame-tools button{min-height:44px}
 .table-frame-tools{padding-top:max(6px,env(safe-area-inset-top))}
 .table-frame-panel{height:100dvh}
 .player b,.opponent b,.opponent strong,header b,#tableName{overflow-wrap:anywhere}
 #publicBoard,.board,.table-board{min-width:0;max-width:100%}
 .board form input,.panel form input{font-size:16px}
}
@media(max-width:400px){
 .table-board .hand{gap:6px;padding:8px 2px}
 .table-board .hand .playing-card{width:clamp(48px,16vw,64px);flex:0 0 auto}
 .table-board .table-center{gap:14px}
}
@media(max-height:500px) and (max-width:1050px){
 body.lobby-active .topbar{height:48px}
 body.lobby-active .landing{height:calc(100dvh - 48px)!important}
 .lobby-toolbar{max-height:100px;overflow-y:auto;flex-shrink:0}
}

/* Embedded/mobile gameplay stays inside one device viewport, in portrait or landscape. */
@media(max-width:650px){
 html:has(body.legacy-game),body.legacy-game{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;overscroll-behavior:none}
 body.legacy-game #gameContainer{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-height:0!important;margin:0!important;overflow:hidden!important}
 body.legacy-game #gameBoard{width:100vw!important;height:100vh!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
 body.legacy-game::after{content:none!important;display:none!important;animation:none!important}
 .compact-screen-notice{display:none!important}
}

/* A rotated phone can be wider than the portrait breakpoint; still fit one full game screen. */
@media (orientation:landscape) and (max-height:600px){
 html:has(body.legacy-game),body.legacy-game{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none}
 body.legacy-game #gameContainer{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-width:0!important;min-height:0!important;margin:0!important;overflow:hidden!important}
 body.legacy-game #gameBoard{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-width:0!important;min-height:0!important;overflow:hidden!important}
}