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

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

   Framework lives in server/ui/shared/layout.css.
   Slot vocabulary (play): opponents, challenges, matchmaking, game,
   leaderboard, mystats.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer responsive {

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

[data-dashboard="play"] .layout {
  grid-template-columns: 1fr;
  grid-template-areas:
    "game"
    "opponents"
    "challenges"
    "matchmaking"
    "leaderboard"
    "mystats";
}

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

@container (min-width: 640px) {
  [data-dashboard="play"] .layout {
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "opponents    game"
      "challenges   game"
      "matchmaking  game"
      "mystats      leaderboard";
  }
}

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

@container (min-width: 1024px) {
  [data-dashboard="play"] .layout {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
      "opponents    game  leaderboard"
      "challenges   game  mystats"
      "matchmaking  game  mystats";
  }
}

/* ── Ultra  ≥ 1680px ───────────────────────────────────────────────────── */

@container (min-width: 1680px) {
  [data-dashboard="play"] .layout {
    grid-template-columns: 1fr 2fr 1fr 1fr;
    grid-template-areas:
      "opponents    game  mystats  leaderboard"
      "challenges   game  mystats  leaderboard"
      "matchmaking  game  mystats  leaderboard";
  }
}

}