/*
 * Framework slot positioning only. Visual rules come byte-for-byte from the
 * linked upstream css/base.css and the active theme-*.css.
 *
 * Game-neutral markers (set by project factories on their Framework host or root):
 *   data-kit-app      — any mounted element that opts the shell into the upstream .app grid
 *                        (top bar, HUD, a full-screen home/lobby screen);
 *   data-kit-topbar   — host of a top-bar HUD (slot topBar.center);
 *   data-kit-hud      — host of an in-screen HUD sharing the screen slot with a Canvas;
 *   data-kit-screen   — root of a full-screen kit screen mounted into the screen slot;
 *   data-kit-flow     — root of a popup/window that supplies its own .modal shell;
 *   data-kit-flow-top — confirmation that must sit above an open window.
 * Derived from the reference integration on SDK 2.0.13. Re-verify in the browser
 * for every new game: DOM presence is not visual acceptance.
 *
 * Bridge blocks at the end of the file ([hud], [home]) are layout-only rules for a kit SCREEN template
 * (upstream `.app` with topbar / stage / bottom zone) mounted inside the screen slot: the Framework shell is
 * the `.app` grid, so the template root stands in for `.app` and gets the same rows. They never change
 * colours, sizes or kit classes (UI Kit rule; Gridora D13 "kit layout 1:1, theme = variables only").
 * Rules keyed by a marker value (e.g. [data-kit-screen="home"]) are game-specific examples — keep,
 * rename or delete them per game. Game theme CSS (themes/<id>/css/<id>-kit-ext.css) loads BEFORE this file:
 * an ext rule on a host selector of equal specificity loses — prefix it with .ai-shell:has([data-kit-app]).
 */

/* Exact upstream .app rules applied to the Framework shell. */
.ai-shell:has([data-kit-app]) {
  position: fixed; inset: 0;
  width: 100%; height: 100dvh;
  max-width: var(--app-max-w, 40rem); margin: 0 auto;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--c-bg) var(--bg-image, none) center / cover no-repeat;
  isolation: isolate;
}
.ai-shell:has([data-kit-app]) > [data-slot]:empty { display: none; }
.ai-shell:has([data-kit-app]) > [data-slot="topBar.center"] { position: relative; grid-row: 1; width: 100%; z-index: 3; }
.ai-shell:has([data-kit-app]) > [data-slot="bottomBar.center"] { position: relative; grid-row: 3; width: 100%; z-index: 2; }
.ai-shell:has([data-kit-app]) > [data-slot="overlay"],
.ai-shell:has([data-kit-app]) > [data-slot="system"] { position: absolute; inset: 0; pointer-events: none; }
.ai-shell:has([data-kit-app]) [data-slot="overlay"] > .ui-custom { position: absolute; inset: 0; pointer-events: auto; }
[data-kit-topbar] { width: 100%; }

/* Screen slot: route scene underneath, HUD row on top, Canvas below the HUD. */
.ai-shell:has([data-kit-app]) > [data-slot="screen"] {
  position: relative;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.ai-shell:has([data-kit-app]) [data-slot="screen"] > [data-host="route"] { position: absolute; inset: 0; z-index: 0; }
.ai-shell:has([data-kit-app]) [data-slot="screen"] .game-kit-scene { z-index: 0; pointer-events: none; }

.ai-shell:has([data-kit-app]) [data-slot="screen"] > .ui-custom[data-kit-hud],
.ai-shell:has([data-kit-app]) [data-slot="screen"] > .ui-custom:has([data-kit-hud]) {
  position: relative; grid-row: 1; z-index: 2; width: 100%; min-height: 0; overflow: visible;
}
[data-kit-hud] .stage { width: 100%; height: 100%; }

.ai-shell:has([data-kit-app]) [data-slot="screen"] > .ui-custom:has(canvas) {
  position: relative; grid-row: 2; z-index: 1; width: 100%; min-height: 0; overflow: hidden;
}
.ai-shell:has([data-kit-app]) [data-slot="screen"] > .ui-custom:has(canvas) > canvas { max-width: 100%; }

/* Full-screen kit screen (home, lobby, map) fills the screen slot above the route scene. */
.ai-shell:has([data-kit-app]) [data-slot="screen"] > .ui-custom:has([data-kit-screen]) {
  position: absolute; inset: 0; z-index: 1;
}
.ai-shell:has([data-kit-app]) [data-kit-screen] { width: 100%; height: 100%; }

/* Original base.css desktop .app rule, targeted to the SDK-owned app host. */
@media (min-width: 700px) {
  .ai-shell:has([data-kit-app]) { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 0 80px rgba(0,0,0,.18); }
}

/* Kit flows supply the complete modal shell. The SDK popup/window host stays the
   lifecycle owner and contributes no second visible wrapper. */
.ui-popup:has([data-kit-flow]) { display: contents; }
.ui-popup:has([data-kit-flow]) > .ui-popup-close { display: none; }
[data-window^="kit."]:has([data-kit-flow]) { display: contents; }

/* Framework hosts are siblings; confirmations must sit above their owning window. */
/* position:relative collapsed the host to 0 height, so the absolute .modal of a top flow was laid
   out at the top edge (found on Gridora ResetProgress / confirm). The host now spans the overlay. */
.ai-shell [data-host="popup"]:has([data-kit-flow-top]) { position: absolute; inset: 0; z-index: 2000; }

/* [hud] In-screen HUD built from a kit screen template (Gridora: endless-run / hud-progress), layout only.
   The HUD root stands in for the kit .app: its .topbar and its .stage sit in screen-slot row 1 (the stage here is
   the HUD block, auto height); the Canvas host fills the rest of the stage in row 2, above the kit bottom spacer.
   hud-progress places the combo pill in an absolute .stage__center (inline padding-top:7rem); inside the row-1
   stage that box is kept in flow and stacked over the first stage child (the progress row) in one grid cell, so
   the HUD block ends under the pill exactly where the kit draws it and the Canvas starts below it. */
[data-kit-hud] > .stage { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
[data-kit-hud] > .stage > :first-child,
[data-kit-hud] > .stage > .stage__center { grid-area: 1 / 1; }
[data-kit-hud] > .stage > .stage__center { position: relative; }

/* [home] scr.home (game.home) — the upstream lobby .app zones inside the full-screen screen host: header.topbar
   (auto) / main.stage (1fr) / the bottom zone of the upstream nav.bottombar, whose tabs are Product and not
   rendered (D7/D13: the zone keeps the bar's size — safe-area + 0.5rem + --bottombar-h — the stage is not
   re-flowed). Layout only: same rows as upstream .app, so topbar, stage and stage__center match the lobby. */
.ai-shell:has([data-kit-app]) [data-kit-screen="home"] {
  display: grid;
  grid-template-rows: auto 1fr calc(var(--sab) + 0.5rem + var(--bottombar-h));
}