/* TRUCUZIN FASE 2 — MOBILE GAME VIEWPORT V1.
 * Explicitly scoped to coarse-pointer phones. No touch targets/seat anchors,
 * cards, premium table assets, bets, timers or rules are modified.
 * Overlays are still owned by their respective game components.
 */

/* The visual viewport excludes Android browser bars when they are expanded.
   Do not let either game scene extend behind the bottom browser controls. */
@media (pointer:coarse) and (max-width:900px) and (orientation:portrait),
       (pointer:coarse) and (max-height:600px) and (orientation:landscape) {
 html[data-device="smartphone"] body #game:not(.hidden){
  height:var(--mobile-visible-height,100dvh)!important;
  max-height:var(--mobile-visible-height,100dvh)!important;
 }
 html[data-device="smartphone"] body #game:not(.hidden):not([data-match-type="poker"]) .table-wrap{
  height:var(--mobile-visible-height,100dvh)!important;
  max-height:var(--mobile-visible-height,100dvh)!important;
 }
 html[data-device="smartphone"] body #game[data-match-type="poker"] #game-menu{
  max-height:calc(var(--mobile-visible-height,100dvh) - 60px)!important;
 }
}
/* Budget a smaller molded table only when reduced visible height demands it.
   Never force min-width 290px on a 320px wide phone, and do not move seats. */
@media (pointer:coarse) and (max-width:700px) and (orientation:portrait) {
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .plastic-table{
  min-width:0!important;
  width:min(94vw,max(255px,calc((var(--mobile-visible-height,100dvh) - 340px) * 1.12)))!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .game-menu-wrap #game-menu{
  max-height:calc(var(--mobile-visible-height,100dvh) - 70px)!important;
  overflow-y:auto;
 }
}
/* Poker dock remains an independent grid row — no floating fixed controls. */
@media (pointer:coarse) and (max-width:900px) and (orientation:portrait),
       (pointer:coarse) and (max-height:600px) and (orientation:landscape) {
 html[data-device="smartphone"] body #game[data-match-type="poker"] #poker-action-dock{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box;
 }
 html[data-device="smartphone"] body #game[data-match-type="poker"] .poker-dialog-overlay{
  max-height:var(--mobile-visible-height,100dvh)!important;
 }
}
/* Reduce expensive blur on small touch screens without removing effects,
   3D mesh or changing any premium-theme gradient or material definition. */
@media (pointer:coarse) and (max-width:900px) and (orientation:portrait),
       (pointer:coarse) and (max-height:600px) and (orientation:landscape) {
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .table-shell .tcz-v5-shadow{
  filter:none!important;
  opacity:0!important;
 }
 html[data-device="smartphone"] body #game[data-match-type="poker"] .table-wrap::before{
  filter:none!important;
 }
}

/* Fase 3.1 — proportional Truco player badges only. Compact Redmi-class
   touch displays retain the same four seat anchors / hit targets. */
@media (pointer:coarse) and (max-height:700px) and (orientation:landscape) {
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat{
  --seat-avatar-size:clamp(30px,5.3vw,38px);
  width:clamp(70px,10vw,90px)!important;
  min-width:0!important;max-width:90px!important;
  height:clamp(55px,8.5vh,67px)!important;
  padding:0!important;
  animation:none!important;
  filter:none!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat .avatar,
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat > img:not(.trucuzin-coin){
  width:var(--seat-avatar-size)!important;
  height:var(--seat-avatar-size)!important;
  left:50%!important;top:3px!important;
  box-shadow:0 2px 5px #0006!important;
  border-width:2px!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat .seat-timer{
  width:calc(var(--seat-avatar-size) + 4px)!important;
  height:calc(var(--seat-avatar-size) + 4px)!important;
  left:50%!important;top:1px!important;
  transition:none!important;box-shadow:none!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat > div:not([class~="card-backs"]){
  width:clamp(70px,10vw,90px)!important;
  min-width:0!important;
  padding:2px 3px!important;
  bottom:0!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat strong{
  max-width:100%!important;font-size:9px!important;line-height:1.05!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat small{
  max-width:100%!important;font-size:8px!important;line-height:1.05!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat-balance{
  font-size:8px!important;line-height:1.1!important;
 }
}
/* The portrait layout is compact separately; leave the playable cards sized. */
@media (pointer:coarse) and (max-width:700px) and (orientation:portrait) {
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat{
  --seat-avatar-size:clamp(29px,8vw,36px);
  width:clamp(74px,22vw,92px)!important;
  min-width:0!important;max-width:92px!important;
  padding:3px 4px!important;
  animation:none!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat .avatar,
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat > img:not(.trucuzin-coin){
  width:var(--seat-avatar-size)!important;height:var(--seat-avatar-size)!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat .seat-timer{
  width:calc(var(--seat-avatar-size) + 5px)!important;
  height:calc(var(--seat-avatar-size) + 5px)!important;
  transition:none!important;box-shadow:none!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat strong{
  font-size:10px!important;max-width:52px!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat small{
  font-size:8px!important;max-width:52px!important;
 }
}
/* No repeated blurred aura rims or conic timer glow rasterization on coarse
   phones. The active border and countdown remain clear without repaint storms. */
@media (pointer:coarse) and (max-width:900px) {
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat.active{
  animation:none!important;
  box-shadow:inset 0 0 0 1px #ffed9f,0 0 0 2px #e9b84d!important;
 }
 html[data-device="smartphone"] body #game:not([data-match-type="poker"]) .seat-timer.danger{
  animation:none!important;filter:none!important;
 }
}