/* TriFront Web Stage1064: stable field stacks, single-card centering and taller wide field. */

:root{
  --trf-stage1064-wide-card-w:62px;
  --trf-stage1064-wide-card-h:93px;
  --trf-stage1064-wide-overlap:-22px;
}

/*
 * recentCard used to change margin from 2px to 0 while its glow was active.
 * Keep the same outer geometry before, during and after that highlight.
 */
#main .rowTop > .card.recentCard,
#main .rowBottom > .card.recentCard{
  margin:2px !important;
}

/*
 * Preserve the existing one-cell card width but let the item span the complete
 * grid so its original-sized card is optically centered on every aspect ratio.
 */
#main .rowTop > .card:only-child,
#main .rowBottom > .card:only-child{
  grid-column:1 / -1 !important;
  width:calc(50% - 3px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-self:center !important;
}

/* One card never owns a scrollbar. JavaScript classes are the compatibility path. */
#main .rowTop:empty,
#main .rowBottom:empty,
#main .rowTop.trf-stage1064-single,
#main .rowBottom.trf-stage1064-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;
  }

  #main .rowTop:has(> .card:nth-child(2)),
  #main .rowBottom:has(> .card:nth-child(2)){
    scrollbar-gutter:stable !important;
  }
}

#main .rowTop.trf-stage1064-multiple,
#main .rowBottom.trf-stage1064-multiple{
  scrollbar-gutter:stable !important;
}

/*
 * Wide landscape only: replace auto-fit grid reflow with one deterministic,
 * wrapping stack. A later DOM card advances 40px and overlaps the previous
 * card by 22px. The same margins apply while recentCard is present.
 */
@media (min-width:760px) and (min-height:600px) and (min-aspect-ratio:4/3){
  #main .rowTop,
  #main .rowBottom{
    display:flex !important;
    flex-flow:row wrap !important;
    justify-content:center !important;
    align-items:flex-start !important;
    align-content:flex-start !important;
    gap:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  #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-stage1064-wide-card-w) !important;
    width:var(--trf-stage1064-wide-card-w) !important;
    min-width:var(--trf-stage1064-wide-card-w) !important;
    max-width:var(--trf-stage1064-wide-card-w) !important;
    height:var(--trf-stage1064-wide-card-h) !important;
    min-height:var(--trf-stage1064-wide-card-h) !important;
    max-height:var(--trf-stage1064-wide-card-h) !important;
    aspect-ratio:auto !important;
    margin:2px 0 2px var(--trf-stage1064-wide-overlap) !important;
    grid-column:auto !important;
  }

  #main .rowTop > .card:first-child,
  #main .rowBottom > .card:first-child,
  #main .rowTop > .card.recentCard:first-child,
  #main .rowBottom > .card.recentCard:first-child{
    margin-left:0 !important;
  }

  #main .rowTop > .card:only-child,
  #main .rowBottom > .card:only-child,
  #main .rowTop > .card.recentCard:only-child,
  #main .rowBottom > .card.recentCard:only-child{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Use part of the wide desktop's lower dead space for the battlefield. */
@media (min-width:760px) and (min-height:721px) and (min-aspect-ratio:4/3){
  :root{
    --trf-stage1062-field-height:280px;
  }
}

/* Shorter landscape desktops get a smaller, safe increase from 230px. */
@media (min-width:760px) and (min-height:600px) and (max-height:720px) and (min-aspect-ratio:4/3){
  :root{
    --trf-stage1062-field-height:250px;
  }
}