/* Continuum 2026 — v2 responsive layer.
   Injected at build time into the v2 bundle only; v1 is untouched.
   Every console shares the same skeleton (#app > header + main > section.tab > .card + nav),
   so these rules apply across all six. */

/* ---------------------------------------------------------------
   Wide screens (laptops, widescreen tablets in landscape):
   flow the active tab's cards into columns instead of one stretched
   full-width ribbon. More visible at once = less scrolling mid-game.
   --------------------------------------------------------------- */
@media (min-width: 1100px) {
  main > section.tab.active {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 14px;
    align-items: start;
  }
  main > section.tab.active > .card { margin-bottom: 0 !important; }
}

@media (min-width: 1700px) {
  main > section.tab.active {
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  }
}

/* Escape hatch: any card that needs the full width (wide trackers, prop
   galleries) can opt out by adding class="v2-wide" in a later pass. */
main > section.tab.active > .card.v2-wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------
   Portrait / narrow: single column is correct — just make the
   bottom tab targets comfortable for thumbs.
   --------------------------------------------------------------- */
@media (orientation: portrait) {
  nav button { min-height: 64px; }
}

/* Very short landscape (laptop at 768px tall etc.): trim chrome so more
   content fits between header and tab bar. */
@media (orientation: landscape) and (max-height: 800px) {
  main { padding: 10px !important; }
  main > section.tab.active { gap: 10px; }
  .card { padding: 11px !important; }
}

/* ---------------------------------------------------------------
   Fullscreen toggle button (injected into each console header).
   Uses the Fullscreen API — the whole screen without F11, and the
   in-app navigation stays usable.
   --------------------------------------------------------------- */
.v2-fs {
  background: none;
  border: 1px solid rgba(255, 255, 255, .18);
  color: inherit;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  flex: 0 0 auto;
}
.v2-fs:active { opacity: .7; }

/* Never print the button on the handout/character sheet pages. */
@media print { .v2-fs { display: none !important; } }