/* ═══════════════════════════════════════════════════════════════════════════
   Battle AIrena — Projection Dashboard Composition

   Four `@container` bands per T66 Phase G Design v3.0 §4.3. This file is
   the SOLE surface for projection layout. Devtools workflow: edit a
   `grid-template-areas` string live, paste back here.

   Framework lives in server/ui/shared/layout.css.
   Slot vocabulary: brand, status, controls, tournament, game, standings,
   matches, schedule, movelog.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer responsive {

/* ── Per-panel folding thresholds (read by layout.js at init) ──────────── */

[data-dashboard="projection"] [data-slot="movelog"]   { --visible-count: 10; }
[data-dashboard="projection"] [data-slot="standings"] { --visible-count: 24; }
[data-dashboard="projection"] [data-slot="matches"]   { --visible-count: 10; }

/* ── Narrow  < 640px ───────────────────────────────────────────────────── */

[data-dashboard="projection"] .layout {
  grid-template-columns: 1fr;
  grid-template-areas:
    "tournament"
    "game"
    "standings"
    "schedule"
    "matches"
    "movelog";
}

/* ── Medium  640–1023px ────────────────────────────────────────────────── */

@container (min-width: 640px) {
  [data-dashboard="projection"] .layout {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "game     tournament"
      "game     standings"
      "movelog  standings"
      "schedule matches";
  }
}

/* ── Wide  1024–1679px ─────────────────────────────────────────────────── */

@container (min-width: 1024px) {
  [data-dashboard="projection"] .layout {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "game    tournament standings"
      "game    matches    standings"
      "movelog schedule   schedule";
  }
}

/* ── Ultra  ≥ 1680px ───────────────────────────────────────────────────── */
/* Placeholder — tune visually on ultra-wide hardware. Starts from Wide. */

@container (min-width: 1680px) {
  [data-dashboard="projection"] .layout {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-areas:
      "game    tournament standings schedule"
      "game    matches    standings schedule"
      "movelog movelog    movelog   movelog";
  }
}

/* ── Tournament panel inner ────────────────────────────────────────────── */

[data-dashboard="projection"] .tournament-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
}

}