/* ===========================================================================
   Infin8 Arcade - game information band

   The row of cards under the stage (status, progress, leaderboard, guide,
   follow) reads as ONE section: a single full-bleed graphic from the game's
   own art sits behind every card under a dark scrim, and the cards are glass
   panels on a balanced grid. The graphic is set per page with
   an inline `--info-art` custom property (the game's cover art) on the
   `.side-column`, so this file never names a game. `.info-art` adds the
   graphic and glass cards only (a page with its own card layout, e.g.
   IceFishin, keeps it); `.info-band` also applies the balanced grid.

   Contrast: the scrim is >= 84% near-black at every point and each card adds
   its own translucent panel, so muted text stays above WCAG AA 4.5:1.
   The play stage, HUD and canvas are not touched here.
   =========================================================================== */
.side-column.info-art {
  position: relative;
  isolation: isolate;
  gap: 14px;
  padding: clamp(14px, 2vw, 22px);
  background: #070910;
}
.side-column.info-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  grid-auto-flow: row dense;
  align-items: stretch;
}
/* Wide screens use a fixed track count so every row is filled edge to edge:
   `--band-cols` (default 4) is set on the aside when a page's cards add up to
   a different number of tracks. A long guide is `.info-full` and closes the
   band as one full-width row instead of leaving a ragged second row. */
@media (min-width: 1100px) {
  .side-column.info-band { grid-template-columns: repeat(var(--band-cols, 4), minmax(0, 1fr)); }
}
.side-column.info-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 9, 16, 0.84), rgba(7, 9, 16, 0.93)),
    var(--info-art, none) center / cover no-repeat;
  pointer-events: none;
}
.side-column.info-art > .side-card {
  min-width: 0;
  height: 100%;
  border: 1px solid rgba(172, 184, 211, 0.16);
  border-radius: 18px;
  background: rgba(11, 15, 26, 0.78);
  backdrop-filter: blur(10px);
  overflow-wrap: anywhere;
}
/* The long "how to play" card takes two tracks and flows its list into two
   columns, so it no longer runs far below its neighbours. */
.side-column.info-band > .info-wide { grid-column: span 2; }
.side-column.info-band > .info-wide ul { columns: 2 16rem; column-gap: 26px; }
.side-column.info-band > .info-wide li { break-inside: avoid; margin-bottom: 6px; }
.side-column.info-band > .info-full { grid-column: 1 / -1; order: 99; }
.side-column.info-band > .info-full ul { columns: 3 18rem; column-gap: 28px; }
.side-column.info-band > .info-full li { break-inside: avoid; margin-bottom: 6px; }
@media (max-width: 760px) {
  .side-column.info-band { grid-template-columns: 1fr; }
  .side-column.info-band > .info-wide, .side-column.info-band > .info-full { grid-column: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  .side-column.info-art > .side-card { backdrop-filter: none; background: #0b0f1a; }
}

/* Art-only mode (`.info-art` without `.info-band`): the page owns its card
   geometry, so the band keeps the shell's 1px hairline gaps and square cells
   (IceFishin's weighted flex rows depend on them) and only gains the graphic
   and the glass cells. */
.side-column.info-art:not(.info-band) { gap: 1px; padding: 0; }
.side-column.info-art:not(.info-band) > .side-card { height: auto; border: 0; border-radius: 0; }