/* TriFront Web Stage1063: keep one field card fully visible on wide landscapes. */

:root{
  --trf-stage1063-field-card-min-w:46px;
  --trf-stage1063-field-card-max-w:70px;
}

/*
 * Stage1062 intentionally fixed the two-player battlefield height. On a wide
 * desktop, the old two-column grid made each 2:3 card wider than one player's
 * half-row was tall, so even a single card overflowed vertically.
 *
 * Only roomy landscape screens use height-bounded auto-fit columns. Portrait,
 * smartphones and narrow/tall browser windows keep the proven Stage1062 rules.
 * Empty auto-fit tracks collapse, which centers one card; additional cards use
 * more columns at the same size and scroll only after a second grid row is needed.
 */
@media (min-width:760px) and (min-height:600px) and (min-aspect-ratio:4/3){
  #main .rowTop,
  #main .rowBottom{
    grid-template-columns:repeat(auto-fit, minmax(var(--trf-stage1063-field-card-min-w), var(--trf-stage1063-field-card-max-w))) !important;
    grid-auto-flow:row dense !important;
    grid-auto-rows:max-content !important;
    justify-content:center !important;
    justify-items:center !important;
    align-items:start !important;
    align-content:start !important;
    gap:6px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  #main .rowTop .card,
  #main .rowBottom .card{
    width:100% !important;
    min-width:0 !important;
    max-width:var(--trf-stage1063-field-card-max-w) !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:2 / 3 !important;
    margin:2px auto !important;
    justify-self:center !important;
  }
}

/* Stage1062 uses the shorter 230px field at this viewport height. */
@media (min-width:760px) and (min-height:600px) and (max-height:720px) and (min-aspect-ratio:4/3){
  :root{
    --trf-stage1063-field-card-min-w:44px;
    --trf-stage1063-field-card-max-w:66px;
  }
}