/* TriFront Web Stage1067: minimum two-column adaptive battlefield grid. */

:root{
  --trf-stage1067-card-w:62px;
  --trf-stage1067-card-h:93px;
  --trf-stage1067-columns:1;
  --trf-stage1067-column-gap:6px;
  --trf-stage1067-stack-step:18px;
}

/*
 * The row owns a fixed number of equal-width columns. Cards first fill those
 * columns from left to right. Further cards enter the next 18px grid track,
 * overlapping only the card in the same column.
 */
#main .rowTop,
#main .rowBottom{
  display:grid !important;
  grid-template-columns:repeat(var(--trf-stage1067-columns), var(--trf-stage1067-card-w)) !important;
  grid-auto-flow:row !important;
  grid-auto-rows:var(--trf-stage1067-stack-step) !important;
  column-gap:var(--trf-stage1067-column-gap) !important;
  row-gap:0 !important;
  justify-content:center !important;
  justify-items:center !important;
  align-content:start !important;
  align-items:start !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overflow-anchor:none !important;
  scrollbar-gutter:stable both-edges !important;
}

/* A lone card is centered and never gets a redundant vertical scrollbar. */
#main .rowTop.trf-stage1067-empty,
#main .rowBottom.trf-stage1067-empty,
#main .rowTop.trf-stage1067-single,
#main .rowBottom.trf-stage1067-single{
  overflow-y:hidden !important;
  scrollbar-gutter:auto !important;
}

@supports selector(.rowTop:has(> .card:only-child)){
  #main .rowTop:has(> .card:only-child),
  #main .rowBottom:has(> .card:only-child){
    overflow-y:hidden !important;
    scrollbar-gutter:auto !important;
  }
}

/*
 * Normal, highlighted and only-card states share the same outer geometry.
 * Stage1065's negative vertical margin is explicitly removed.
 */
#main .rowTop > .card,
#main .rowBottom > .card,
#main .rowTop > .card.recentCard,
#main .rowBottom > .card.recentCard,
#main .rowTop > .card:only-child,
#main .rowBottom > .card:only-child,
#main .rowTop > .card + .card,
#main .rowBottom > .card + .card{
  flex:0 0 var(--trf-stage1067-card-h) !important;
  width:var(--trf-stage1067-card-w) !important;
  min-width:var(--trf-stage1067-card-w) !important;
  max-width:var(--trf-stage1067-card-w) !important;
  height:var(--trf-stage1067-card-h) !important;
  min-height:var(--trf-stage1067-card-h) !important;
  max-height:var(--trf-stage1067-card-h) !important;
  aspect-ratio:auto !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin-top:2px !important;
  margin-right:0 !important;
  margin-bottom:2px !important;
  margin-left:0 !important;
  justify-self:center !important;
  align-self:start !important;
  border-width:3px !important;
  border-style:solid !important;
  position:relative !important;
  z-index:var(--trf-stage1067-layer, 1) !important;
}

/* Preserve Stage1065's compact desktop clipping protection. */
@media (min-width:600px) and (max-height:780px) and (max-aspect-ratio:4/3){
  :root{
    --trf-stage1062-field-height:220px;
  }
}