/* TriFront Web Stage1065: one-column vertical battlefield stacks. */

:root{
  --trf-stage1065-card-w:62px;
  --trf-stage1065-card-h:93px;
  --trf-stage1065-stack-step:18px;
  --trf-stage1065-next-margin:-77px;
}

/*
 * Use one layout at every aspect ratio. This overrides Stage1063's auto-fit
 * grid and Stage1064's landscape row stack, so a viewport breakpoint cannot
 * change the direction or spacing of cards during a match.
 */
#main .rowTop,
#main .rowBottom{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  align-content:center !important;
  gap:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overflow-anchor:none !important;
  scrollbar-gutter:stable both-edges !important;
}

/* Empty and one-card rows never display a redundant scrollbar. */
#main .rowTop:empty,
#main .rowBottom:empty,
#main .rowTop.trf-stage1065-empty,
#main .rowBottom.trf-stage1065-empty,
#main .rowTop.trf-stage1065-single,
#main .rowBottom.trf-stage1065-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;
  }
}

/*
 * Fixed outer geometry applies to normal and recentCard states. The glow may
 * change colour/opacity, but never card size, margin, direction or layer.
 */
#main .rowTop > .card,
#main .rowBottom > .card,
#main .rowTop > .card.recentCard,
#main .rowBottom > .card.recentCard,
#main .rowTop > .card:only-child,
#main .rowBottom > .card:only-child{
  flex:0 0 var(--trf-stage1065-card-h) !important;
  width:var(--trf-stage1065-card-w) !important;
  min-width:var(--trf-stage1065-card-w) !important;
  max-width:var(--trf-stage1065-card-w) !important;
  height:var(--trf-stage1065-card-h) !important;
  min-height:var(--trf-stage1065-card-h) !important;
  max-height:var(--trf-stage1065-card-h) !important;
  aspect-ratio:auto !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin-top:2px !important;
  margin-right:auto !important;
  margin-bottom:2px !important;
  margin-left:auto !important;
  grid-column:auto !important;
  justify-self:center !important;
  align-self:center !important;
  border-width:3px !important;
  border-style:solid !important;
  position:relative !important;
  z-index:var(--trf-stage1065-layer, 1) !important;
}

/* Stage1064 gave the first landscape card a zero left margin. Re-center it. */
#main .rowTop > .card:first-child,
#main .rowBottom > .card:first-child,
#main .rowTop > .card.recentCard:first-child,
#main .rowBottom > .card.recentCard:first-child{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Later cards move only downward; there is no horizontal overlap. */
#main .rowTop > .card + .card,
#main .rowBottom > .card + .card,
#main .rowTop > .card.recentCard + .card,
#main .rowBottom > .card.recentCard + .card{
  margin-top:var(--trf-stage1065-next-margin) !important;
  margin-right:auto !important;
  margin-left:auto !important;
}

/*
 * A compact desktop window previously sat just above Stage1062's 720px
 * breakpoint and could lose the bottom controls. Reduce only this constrained
 * shape; phones and roomy portrait screens keep their existing field height.
 */
@media (min-width:600px) and (max-height:780px) and (max-aspect-ratio:4/3){
  :root{
    --trf-stage1062-field-height:220px;
  }
}