/*  sk-play-stage.css — the Projectionist's play-stage chrome.
 *
 *  /workshop/<slug>/ is the card (you read).
 *  /workshop/<slug>/play/ is the stage (you sit).
 *
 *  This sheet is the house-wide half of that rule. It does not size a canvas
 *  or touch an engine. It takes the website off the projector so the picture,
 *  the HUD, the pads and the result card keep the viewport.
 *
 *  Loaded on every /play/ route. Presentation only.
 */

html.play-frame .sk-nav,
html.play-frame .sk-nav--play-hide,
html.play-frame nav.house-nav,
html.play-frame .sk-game-nav,
html.play-frame .workshop-crumb,
html.play-frame .film-hop,
html.play-frame .play-escape,
html.play-frame .play-top,
html.play-frame .sk-contract-subfoot,
html.play-frame .sk-contract-footer,
html.play-frame .sk-foot-nav,
html.play-frame .sk-added-foot,
html.play-frame body > footer,
html.play-frame .play-legal,
html.play-frame .sk-help-out,
html.play-frame .ia-cards,
html.play-frame .ia-grid,
html.play-frame .ia-sub,
html.play-frame .sprockets,
html.play-frame .ia-skip {
  display: none !important;
}

/* Arcade score bars keep the title and the score. The Overview / Workshop
   pair that used to sit in the same row is a hop, not a control. */
html.play-frame .top > a {
  display: none !important;
}

/* Duplicate "← Title · Play · Film" strips. Live chips inside them stay. */
html.play-frame .play-bar > a,
html.play-frame #fw-play-bar > a {
  display: none !important;
}

/* ----------------------------------------------------------- house menu */
/*  The only chrome on a stage: Resume, Restart, this film's card, Picture
 *  House. Info / How to play / Full view no longer sit on the projector. */
html.sk-play-stage .sk-game-app-controls,
html.sk-play-stage .sk-play-stage-info,
html.sk-play-stage .sk-play-info,
html.play-frame .sk-game-app-controls,
html.play-frame .sk-help-scrim,
html.play-frame #skPlayHelp,
html.sk-play-stage .sk-help-scrim {
  display: none !important;
}

.sk-house-menu {
  position: fixed;
  z-index: var(--sk-z-house, 2147483000);
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}

.sk-house-menu-toggle {
  pointer-events: auto;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(201, 168, 118, .65);
  background: rgba(20, 17, 15, .88);
  color: #EDE3D0;
  font: 400 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

.sk-house-menu-toggle:hover,
.sk-house-menu-toggle:focus-visible {
  color: #FFF6E4;
  border-color: rgba(201, 168, 118, .95);
}

.sk-house-menu-toggle:focus-visible,
.sk-house-menu-panel button:focus-visible,
.sk-house-menu-panel a:focus-visible {
  outline: 2px solid #C9A876;
  outline-offset: 2px;
}

.sk-house-menu-backdrop {
  display: none;
}

.sk-house-menu.is-open .sk-house-menu-backdrop {
  display: block;
  pointer-events: auto;
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, .55);
}

.sk-house-menu-panel {
  pointer-events: auto;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(16.5rem, calc(100vw - 16px));
  max-width: min(16.5rem, calc(100vw - 16px));
  max-height: calc(100dvh - 72px);
  overflow: auto;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #4A4136;
  background: #14110F;
  color: #EDE3D0;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Closed wins last. Climb leftover sat THE HOUSE overlay after Restart
   because display:flex on the panel outlived [hidden] / the class drop. */
.sk-house-menu-panel[hidden],
.sk-house-menu-panel[aria-hidden="true"],
.sk-house-menu:not(.is-open) .sk-house-menu-panel,
html:not(.sk-house-menu-open) .sk-house-menu-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sk-house-menu-k {
  margin: 0 0 4px;
  font: 400 10px/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C9A876;
}

.sk-house-menu-panel button,
.sk-house-menu-panel a {
  appearance: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #4A4136;
  background: transparent;
  color: #EDE3D0;
  font: 400 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.sk-house-menu-panel button:hover,
.sk-house-menu-panel a:hover {
  border-color: #C9A876;
  color: #FFF6E4;
}

.sk-house-menu-panel [data-sk-house="resume"] {
  background: #7A8B54;
  border-color: #7A8B54;
  color: #14110F;
  font-weight: 700;
}

.sk-house-menu-panel [data-sk-house="resume"]:hover {
  background: #8a9c60;
  color: #14110F;
}

/* Climb objective / medal-slate are notes. They live on the film card.
   Live Time and Room stay — they are the run. Medal and daily-best chips
   are the card's filing. House menu owns Restart. */
html.play-frame[data-sk-game-slug="climb"] .sk-obj-strip,
html.play-frame[data-sk-game-slug="climb"] #skClimbObj,
html.play-frame[data-sk-game-slug="climb"] .gr-obj,
html.play-frame[data-sk-game-slug="climb"] .medal-slate,
html.play-frame[data-sk-game-slug="climb"] .hud [data-climb-hud="medal"],
html.play-frame[data-sk-game-slug="climb"] .hud [data-climb-hud="best"],
html.play-frame[data-sk-game-slug="climb"] .climb-restart-fab,
html.play-frame[data-sk-game-slug="alleycat"] #skAlleyChap,
html.play-frame[data-sk-game-slug="alleycat"] .sk-obj-strip,
html.play-frame .sk-play-result {
  display: none !important;
}

/* mobile-responsive.css / sk-play-parity.css pad .play-frame on phones.
   A stage is the viewport — leftover sit copied this on every film. */
html.play-frame.sk-play-stage,
html.play-frame.sk-play-stage body,
html.play-frame.sk-game-app-active,
html.play-frame.sk-game-app-active body {
  padding: 0 !important;
}

/* ----------------------------------------------------------- WRAPPER sit
 *  House-wide leftover lessons. Page coats stay for film-specific HUD
 *  selectors; this is the floor every /play/ sits on. 390 / 844×390 /
 *  1280 must not grow a page scroll. House chip stays 8px + 44px.
 *  Session tip and arcade title bars sit past the chip. Result / Again
 *  overlays sit under House (2147483000), over Access (99990).
 *  One hop off the projector is House → This film. */
html.play-frame.sk-play-stage {
  --sk-house-clear-x: 68px;
  --sk-house-inset-x: max(4.75rem, var(--sk-house-clear-x));
  --sk-house-inset-y: calc(env(safe-area-inset-top, 0px) + 56px);
  /* Stickers read these. --sepia is published only when empty (JS),
     so Climb's house-gold HUD is not restyled to cream. */
  --ink: #14110F;
  --ink-2: #1b1712;
  --stock: #EDE3D0;
  --fisik: #7A8B54;
  --soot: #4A4136;

  /* --------------------------------------------------------- *
   *  PLAY FRAME CONTRACT — master-game Phase 0
   *
   *  One house; /workshop/<slug>/play/ is a room inside it.
   *  Clear z-order, lowest to highest:
   *    picture → playfield → HUD → result → House
   *  House never sits under HUD. Access is chrome, not a result.
   *  Standby holds the picture under House so Resume is always
   *  reachable. Tokens are the contract; leftover page coats
   *  may inset boxes, they must not invert this stack.
   *
   *  Object language (later phases — not drawn here):
   *    ledge, hatch, furniture-prop, moving-platform, nest,
   *    wall-lip. Collectibles / house-progress ledger are
   *    NOT this phase.
   * --------------------------------------------------------- */
  --sk-z-picture: 1;
  --sk-z-playfield: 20;
  --sk-z-hud: 40;
  --sk-z-toast: 80;
  --sk-z-access: 99990;
  --sk-z-result: 100000;
  --sk-z-standby: 999999;
  --sk-z-house: 2147483000;
}

html.play-frame.sk-play-stage,
html.play-frame.sk-play-stage body,
html.play-frame.sk-play-stage body.play-shell,
html.play-frame.sk-play-stage body.play-frame {
  overflow: hidden !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  max-height: 100% !important;
  max-height: 100dvh !important;
  overscroll-behavior: none;
  color: var(--stock, #EDE3D0);
  background-color: var(--ink, #14110F);
  --ink: #14110F;
  --ink-2: #1b1712;
  --stock: #EDE3D0;
  --fisik: #7A8B54;
}

/* Session tip is top-centre and paints through House on a 390 sit.
   Park it past the chip. Leftover coats keep film-specific HUD boxes. */
html.play-frame.sk-play-stage #skTipStrip {
  left: var(--sk-house-inset-x);
  right: max(.55rem, env(safe-area-inset-right, 0px));
  top: max(var(--sk-house-inset-y), var(--sk-sk2a-h, 0px));
  transform: none;
  max-width: none;
  width: auto;
  box-sizing: border-box;
  z-index: var(--sk-z-toast);
}

/* Toasts shared the same top-centre well as the tip and painted
   through House / SK-2A / the room title. Same park: past the chip,
   under the mode bar, over the picture. */
html.play-frame.sk-play-stage #skToasts {
  left: var(--sk-house-inset-x);
  right: max(.55rem, env(safe-area-inset-right, 0px));
  transform: none;
  width: auto;
  max-width: none;
  align-items: flex-start;
  box-sizing: border-box;
  top: calc(max(var(--sk-house-inset-y), var(--sk-sk2a-h, 0px)) + 0.35rem);
  z-index: var(--sk-z-toast);
}

/* SK-2A kicker / note are ledes. On a 390 sit they wrap the mode
   verbs into a 90px stack and the tip paints through Challenge.
   Three thumb verbs only. */
@media (max-width: 430px) {
  html.play-frame.sk-play-stage .sk2a-controls .sk2a-kicker,
  html.play-frame.sk-play-stage .sk2a-controls .sk2a-note {
    display: none;
  }
}

/* Arcade title bars share a left:0 top strip. Indent past House. */
html.play-frame.sk-play-stage .top {
  padding-left: var(--sk-house-inset-x);
  max-width: 100%;
  box-sizing: border-box;
}

/* Result / Again / Stay sit under House, over Access. Restart stays
   on /play/. Nest / last chapter / Done still eject via SKPlayStage. */
html.play-frame.sk-play-stage .sk-play-result,
html.play-frame.sk-play-stage .overlay,
html.play-frame.sk-play-stage #overlay,
html.play-frame.sk-play-stage #goodnight,
html.play-frame.sk-play-stage #end-card,
html.play-frame.sk-play-stage #fw-end-card,
html.play-frame.sk-play-stage .msg {
  z-index: var(--sk-z-result, 100000);
  box-sizing: border-box;
  max-width: 100%;
}

/* Enforce the play-frame stack on house-owned layers. Film CSS may
   still own pad layout; it must not put House under HUD. */
html.play-frame.sk-play-stage canvas {
  z-index: var(--sk-z-picture);
}
html.play-frame.sk-play-stage .padbar,
html.play-frame.sk-play-stage .pad,
html.play-frame.sk-play-stage #pad,
html.play-frame.sk-play-stage #grVirtualPad {
  z-index: var(--sk-z-playfield);
}
html.play-frame.sk-play-stage .hud,
html.play-frame.sk-play-stage #hud,
html.play-frame.sk-play-stage .sk2a-controls,
html.play-frame.sk-play-stage .top {
  z-index: var(--sk-z-hud);
}
html.play-frame.sk-play-stage .sk-a11y-btn,
html.play-frame.sk-play-stage #skAccessBtn {
  z-index: var(--sk-z-access);
}
html.play-frame.sk-play-stage .sk-standby {
  z-index: var(--sk-z-standby);
}
html.play-frame.sk-play-stage .sk-house-menu {
  z-index: var(--sk-z-house);
}

@media (min-width: 900px) and (min-height: 640px) {
  html.play-frame.sk-play-stage {
    --sk-house-clear-x: 72px;
  }
}

/* Keys legend is how-to. How-to lives on the film card. */
html.play-frame.sk-play-stage #skKeyLegend {
  display: none !important;
}

/* Alley: SK-2A stays. One start verb — Press start. Play fullscreen and
   Play in the page are a second door. BEST HELD SIDEWAYS is a rotate lede. */
html.play-frame.sk-play-stage[data-sk-game-slug="alleycat"] [data-ac-play-full],
html.play-frame.sk-play-stage[data-sk-game-slug="alleycat"] #ac-start [data-ac-start].touch-only,
html.play-frame.sk-play-stage[data-sk-game-slug="alleycat"] #ac-start p.touch-only,
html.play-frame.sk-play-stage[data-sk-game-slug="alleycat"] #ac-start p.mouse-only {
  display: none !important;
}
html.play-frame.sk-play-stage[data-sk-game-slug="alleycat"] #ac-start [data-ac-start].mouse-only,
html.play-frame.sk-play-stage[data-sk-game-slug="alleycat"] .game-shell.saw-touch #ac-start [data-ac-start].mouse-only {
  display: inline-flex !important;
}

/* Nursery leftover caps the pocket at 420px and keeps pixels at 32/20 in
   flow under brand/nav/gauges/pads — 816×181 at 844×390. Picture fills;
   pads and the other in-flow coats overlay. */
@media (orientation: landscape) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #sk-main,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .shell {
    position: relative !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .screen,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pixels {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    box-sizing: border-box;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    position: absolute !important;
    left: 0;
    right: 0;
    z-index: 80;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
    left: var(--sk-house-inset-x);
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip { top: 0; }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow { top: 2.15rem; }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav { top: 4.5rem; }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot { bottom: 0; }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pad {
    bottom: max(2.75rem, calc(44px + env(safe-area-inset-bottom, 0px)));
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    bottom: max(5.25rem, calc(88px + env(safe-area-inset-bottom, 0px)));
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle {
    bottom: max(7.25rem, calc(120px + env(safe-area-inset-bottom, 0px)));
  }
}

/* Landscape fill makes the state strip full-bleed; leftover only parks
   it past House under 440px. Use the WRAPPER inset on every sit. */
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip,
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
  margin-left: var(--sk-house-inset-x) !important;
  width: auto !important;
  max-width: calc(100% - var(--sk-house-inset-x)) !important;
  box-sizing: border-box;
}

/* ----------------------------------------------------------- result card */
/*  Stolen from Operator's #end-card: house type, sepia stock, one result and
 *  the controls that act on it. No hops. */
.sk-play-result[hidden] { display: none !important; }

.sk-play-result {
  position: absolute;
  inset: 0;
  z-index: var(--sk-z-result, 100000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 17, 15, .92);
  text-align: center;
}

.sk-play-result-card {
  width: min(26rem, 100%);
  color: #EDE3D0;
}

.sk-play-result-kicker {
  margin: 0 0 .6rem;
  font: 400 10px/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C9A876;
}

.sk-play-result-card h2 {
  margin: 0 0 .5rem;
  font: 600 clamp(1.6rem, 6vw, 2.4rem)/1.05 Fraunces, Georgia, serif;
  color: #EDE3D0;
}

.sk-play-result-stat {
  margin: 0 auto 1.2rem;
  max-width: 28ch;
  font: 300 1rem/1.55 Spectral, Georgia, serif;
  color: #cfc5b0;
}

.sk-play-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.sk-play-result-actions button {
  appearance: none;
  border: 1px solid #C9A876;
  background: #7A8B54;
  color: #14110F;
  min-height: 44px;
  padding: .7rem 1.1rem;
  font: 700 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.sk-play-result-actions button:hover,
.sk-play-result-actions button:focus-visible {
  background: #8a9c60;
}

.sk-play-result-actions button:focus-visible {
  outline: 2px solid #C9A876;
  outline-offset: 3px;
}