/*  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;
}

/* The 32×20 sprite stays square. The picture row is whatever the stack
   leaves, and that row is wider than 32:20, so stretching the grid made
   the cells wide. Letterbox it, centred, inside .screen. A 42dvh floor
   used to push the picture through the caption when the root font grew;
   the screen is the box, and the grid is contained in it. */
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel,
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .screen {
  min-height: 0 !important;
}
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .screen {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  container-type: size !important;
}
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pixels {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  aspect-ratio: 32 / 20 !important;
  width: min(100cqw, calc(100cqh * 32 / 20)) !important;
  height: min(100cqh, calc(100cqw * 20 / 32)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: repeat(32, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(20, minmax(0, 1fr)) !important;
}
/* The caption and the gauges stay in the column unless a wide sit
   promotes .booth to the side panel. */
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth {
  display: contents;
}

/* Nursery landscape. The pocket used to cap at 420px, so this block
   full-bleeds the shell. Caption, gauges, pad and foot are one grid
   column under the picture: each row is as tall as its content, so a
   taller care pad or a larger root font cannot slide one band over
   another. Fixed bottom offsets (44 / 88 / 120) assumed a short pad
   and did overlap. injectSitCoat() repeats this column; keep the two
   copies in step. The picture row is the space that remains, and the
   cat is drawn in that grid. */
@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;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto !important;
    align-content: stretch !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip {
    grid-row: 1;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
    grid-row: 2;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav {
    grid-row: 3;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel {
    grid-row: 4;
    position: relative !important;
    inset: auto !important;
    z-index: 0;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .screen {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    container-type: size !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pixels {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: 32 / 20 !important;
    width: min(100cqw, calc(100cqh * 32 / 20)) !important;
    height: min(100cqh, calc(100cqw * 20 / 32)) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-columns: repeat(32, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(20, minmax(0, 1fr)) !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,
  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"] #pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-column: 1;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle {
    grid-row: 5;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    grid-row: 6;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #pad {
    grid-row: 7;
    z-index: var(--sk-z-playfield, 20);
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    grid-row: 8;
  }
  /* Past the sprocket edge and the safe area, so REST / WEIGHT are not
     cut off and the care keys stay inside the visual viewport. */
  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"] #pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    padding-left: max(22px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(22px, env(safe-area-inset-right, 0px)) !important;
  }
  /* Readouts. A care key underneath must still receive the click. */
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    pointer-events: none !important;
    z-index: 2;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauge span {
    width: auto;
    min-width: max-content;
    flex: none;
  }
}

/* A short landscape sit still uses the same column, packed so the
   picture stays tall enough to read. Gauges share one row. The care
   keys and the foot share the last row. Buttons keep a 44px floor.
   Nothing is taken out of flow — a fixed foot used to cover Roll camera. */
@media (orientation: landscape) and (max-height: 520px) {
  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 {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
    /* The session tip sits on the reel tabs. 20px drops the column
       below it. */
    padding: 20px 0 0 !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,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    grid-column: 1 / -1 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip {
    padding: 2px 8px 1px 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brand small {
    margin-top: 0;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav {
    margin-bottom: 2px !important;
    /* The right sprocket is 11px wide and 6px off the edge. */
    padding-right: max(28px, calc(22px + env(safe-area-inset-right, 0px))) !important;
    box-sizing: border-box;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav button {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel {
    padding: 2px !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle {
    margin: 1px 0 !important;
    padding: 1px !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle .card {
    min-height: 0 !important;
    padding: 2px 8px !important;
    line-height: 1.2;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 8px !important;
    margin: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauge span {
    letter-spacing: .08em;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .seg {
    height: 6px;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #pad {
    grid-row: 7 !important;
    grid-column: 1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 6px 2px max(22px, env(safe-area-inset-left, 0px)) !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    grid-row: 7 !important;
    grid-column: 2 !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    /* The right sprocket is .shell::after: 11px wide, 6px off the edge.
       28px keeps the last letter clear of that strip. */
    padding: 2px max(28px, calc(22px + env(safe-area-inset-right, 0px))) 2px 8px !important;
  }
}

/* Wide landscape. The viewport is wider than a 32:20 picture once the
   pad has taken its row, so that spare width is the projection booth.
   27/20 (just past 4:3) is the cut, so 1280×900 and 1440×1000 join the
   booth and 1024×768 stays full-width. The side is four rows — title,
   tabs, readouts, foot — and the picture spans them, so the foot cannot
   cover a gauge. The booth sizes its caption and the six gauges to the
   row it is given, so a short zoomed viewport cannot push HEALTH into
   the foot. injectSitCoat() repeats this. */
@media (orientation: landscape) and (min-height: 521px) and (min-aspect-ratio: 27/20) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] {
    --sk-booth-chrome: 56px;
    --sk-booth-side: max(156px, calc(100vw - (100dvh - var(--sk-booth-chrome)) * 32 / 20));
  }
  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 {
    --sk-booth-chrome: 56px;
    --sk-booth-side: max(156px, calc(100vw - (100dvh - var(--sk-booth-chrome)) * 32 / 20));
    grid-template-columns: minmax(0, calc((100dvh - var(--sk-booth-chrome)) * 32 / 20)) minmax(156px, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  }
  /* The wall above the cat is empty of the sprite, so the title can sit
     on it. The pad stays in flow, under the grid, so it cannot cover her. */
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip {
    position: absolute !important;
    top: 6px !important;
    right: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: 4;
    width: auto !important;
    margin-right: 0 !important;
    pointer-events: none;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch;
    align-self: start;
    z-index: 4;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 6px 28px 4px 10px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
    background: #100c09;
    border-left: 1px solid rgba(176, 141, 79, .45);
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .brand,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .meta {
    min-width: 0;
    max-width: 100%;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .sk-projector-switch {
    width: 100%;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    white-space: normal !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel {
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    padding: 0 !important;
  }
  /* The side panels are opaque, and they used to cover the top of the
     right sprocket. The strip stays above them. It does not take clicks. */
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .shell::before,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .shell::after {
    z-index: 6;
    pointer-events: none;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth {
    display: grid !important;
    /* The caption row is as tall as the message. The gauges take
       whatever is left and may shrink; the words are never clipped. */
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 6px;
    grid-column: 2 !important;
    grid-row: 3 !important;
    position: relative;
    z-index: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 6px 28px 6px 10px;
    box-sizing: border-box;
    background: #100c09;
    border-left: 1px solid rgba(176, 141, 79, .45);
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start;
    z-index: 3;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 28px 6px 8px;
    box-sizing: border-box;
    background: #100c09;
    border-left: 1px solid rgba(176, 141, 79, .45);
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth .intertitle {
    max-height: none;
    min-height: 0;
    overflow: visible;
    align-self: start;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth .intertitle .card {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    padding: 4px 6px !important;
    line-height: 1.35;
    display: block;
    -webkit-line-clamp: unset;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth .gauges {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    align-content: stretch;
    align-items: center;
    gap: 0 !important;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth .gauge {
    min-height: 0;
    min-width: 0;
    gap: 4px;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .booth .seg {
    height: 6px;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #pad {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 10px 4px max(22px, env(safe-area-inset-left, 0px)) !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    grid-column: 2 !important;
    grid-row: 4 !important;
    align-self: stretch !important;
    z-index: 1;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    width: auto !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    background: #100c09;
    border-left: 1px solid rgba(176, 141, 79, .45);
    padding: 4px max(28px, calc(22px + env(safe-area-inset-right, 0px))) 4px 12px !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot button {
    min-height: 44px !important;
    min-width: 44px !important;
    max-width: 100%;
    padding: 6px 8px !important;
    white-space: normal;
  }
}
/* A short wide sit (125% on a 16:10 window) leaves a 156px column, and
   a long caption then runs out of booth. Give that column enough width
   to wrap the message and still leave the gauges a row each. Taller
   sits keep the 156px minimum, so the cat stays the size it is there. */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 680px) and (min-aspect-ratio: 27/20) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"],
  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 {
    --sk-booth-side: max(240px, calc(100vw - (100dvh - var(--sk-booth-chrome)) * 32 / 20));
  }
  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 {
    grid-template-columns: minmax(0, calc((100dvh - var(--sk-booth-chrome)) * 32 / 20)) minmax(240px, 1fr) !important;
  }
  /* Wordmark and the projector switch share the row, so the booth
     keeps enough height for a long caption and the six gauges. */
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 6px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .brand {
    flex: 1 1 90px;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .meta {
    flex: 1 1 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .sk-projector-switch {
    min-height: 44px !important;
    width: auto;
  }
}
/* 1440×900 at 125% is 1152×720: taller than the query above, still a
   156px column, and exactly 8:5. 1280×713 is taller than 8:5, so it
   keeps its cell. */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 760px) and (min-aspect-ratio: 27/20) and (max-aspect-ratio: 8/5) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"],
  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 {
    --sk-booth-side: max(240px, calc(100vw - (100dvh - var(--sk-booth-chrome)) * 32 / 20));
  }
  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 {
    grid-template-columns: minmax(0, calc((100dvh - var(--sk-booth-chrome)) * 32 / 20)) minmax(240px, 1fr) !important;
  }
}

/* Landscape fill made the state strip full-bleed, and the page coat
   then set margin-left:0 so an absolute `left` could be the inset.
   The bands are in flow now, so the margin is the inset. The selector
   matches the page coat (it is the one that was winning). */
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"][data-sk-app-family="nursery"] #state-strip,
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"][data-sk-app-family="nursery"] .brandrow {
  margin-left: var(--sk-house-inset-x) !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - var(--sk-house-inset-x)) !important;
  box-sizing: border-box;
}
/* The brand row is click-through so it can sit on the picture. The
   projector switch is the control in that row, and it has to take the click. */
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow .sk-projector-switch,
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow button,
html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow a {
  pointer-events: auto !important;
}
/* The booth sits past House, so the wordmark does not take the left
   inset there. This follows the rule above and matches its specificity. */
@media (orientation: landscape) and (min-height: 521px) and (min-aspect-ratio: 27/20) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"][data-sk-app-family="nursery"] .brandrow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  /* The tip is parked past House and used to run into the booth tabs.
     Stop it at the side column. Access sits on the picture's lower
     corner, left of that column, so it cannot cover a tab. */
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #skTipStrip {
    right: calc(var(--sk-booth-side, 156px) + 8px) !important;
    overflow: hidden;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .sk-a11y-btn {
    right: calc(var(--sk-booth-side, 156px) + 12px) !important;
  }
}

/* A viewport narrower than 3:2 (1024×768) has no spare width beside a
   full-height picture. The title and the reel tabs sit on the wall
   above the cat, and the readouts stay one short stack under the grid
   so the cells can use the whole width. */
@media (orientation: landscape) and (min-height: 521px) and (not (min-aspect-ratio: 27/20)) {
  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 {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #state-strip {
    position: absolute !important;
    top: 6px !important;
    right: auto !important;
    bottom: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    z-index: 4;
    pointer-events: none;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .brandrow {
    position: absolute !important;
    top: 4px !important;
    right: max(22px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    z-index: 4;
    width: auto !important;
    max-width: min(280px, 34vw) !important;
    margin: 0 !important;
    pointer-events: none;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav {
    position: absolute !important;
    top: 92px !important;
    left: var(--sk-house-inset-x) !important;
    right: max(22px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    z-index: 4;
    width: auto !important;
    margin: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .intertitle {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 2px max(22px, env(safe-area-inset-right, 0px)) 2px max(22px, env(safe-area-inset-left, 0px)) !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .gauges {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 8px !important;
    margin: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .pad,
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] #pad {
    grid-column: 1 !important;
    grid-row: 4 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .foot {
    grid-column: 2 !important;
    grid-row: 4 !important;
    align-self: center !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
    padding: 2px max(28px, calc(22px + env(safe-area-inset-right, 0px))) 2px 8px !important;
  }
}
/* A short 4:3 (1024×768 at 125%) stacks the tabs on the picture.
   The ears sit just under that row, so the frame starts below it.
   1024×768 itself is tall enough that the ears already clear the tabs,
   and this query does not fire there. */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 700px) and (not (min-aspect-ratio: 27/20)) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .bezel {
    padding-top: 16px !important;
  }
}
@media (orientation: portrait) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"] .nav {
    padding-right: max(28px, calc(22px + env(safe-area-inset-right, 0px))) !important;
    box-sizing: border-box;
  }
}
@media (orientation: landscape) and (min-height: 521px) and (not (min-aspect-ratio: 27/20)) {
  html.play-frame.sk-play-stage[data-sk-game-slug="nursery"][data-sk-app-family="nursery"] .brandrow {
    position: absolute !important;
    top: 4px !important;
    left: auto !important;
    right: max(22px, env(safe-area-inset-right, 0px)) !important;
    margin-left: 0 !important;
    max-width: min(280px, 34vw) !important;
  }
}

/* ----------------------------------------------------------- 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;
}