/* ═══════════════════════════════════════════════════════
   ARENA MOUNT SCAFFOLDING
   arena.css ships no page-shell — it was built inside a phone-frame
   prototype (.stage/.device), which we drop entirely on integration.
   This provides the structural ancestors arena.css's own rules assume
   already exist. Nothing here overrides arena.css's rules; it only
   supplies missing positioning context.
═══════════════════════════════════════════════════════ */

/* Cap Arena's home-tab content to the width it was actually designed at.
   The delivered arena.css has no desktop breakpoints (phone-first,
   ~428px) — stretching it full-width would break card/grid spacing tuned
   for a narrow column. Centered on desktop instead. A true desktop-native
   Arena layout (wide grid, centered modals) is future design work. */
#arena-home { max-width: 460px; margin: 0 auto; }

/* Full-screen takeovers: ceremony / scout log / reveal / draft / resolved.
   arena.css's .screen{position:absolute;inset:0} needs a positioned,
   viewport-sized ancestor — this is it. Hidden by default; arena.js
   toggles .active when any .screen carries .on.

   Background: in the original phone-frame prototype, .device supplied the
   opaque background every .screen sat on (.screen itself has none — arena
   .cerem adds a decorative gradient on TOP of it, not instead of it).
   Dropping .device without this would leave takeovers transparent, with
   the app's sidebar/topbar showing through underneath. */
.arena-screens-shell {
  position: fixed; inset: 0; z-index: 600;
  display: none;
  background: var(--bg); /* custom properties inherit through the DOM regardless of @scope — this resolves fine outside .arena-scope */
}
.arena-screens-shell.active { display: block; }

/* Sheets (bet / peek / create duel) + Arena's own toast stack. Stays
   mounted at all times so a sheet can open from the home tab without the
   screens-shell being active. pointer-events:none while empty so an
   empty position:fixed;inset:0 layer never blocks clicks on whatever's
   underneath; arena.css's .overlay (rendered inside once a sheet opens)
   gets pointer-events back explicitly the moment it exists. */
.arena-sheet-shell {
  position: fixed; inset: 0; z-index: 610;
  pointer-events: none;
}
.arena-sheet-shell .overlay { pointer-events: auto; }