/*  sk-play-chrome-fix.css — one bar over the picture.
 *
 *  Every play page already ships a hand-tuned `html.play-frame` block that
 *  turns the document into a fixed-viewport flex column and sizes its own
 *  stage. That work was written but never switched on, because nothing added
 *  the play-frame class — which is why phones ended up with the site nav, a
 *  crumb, a duplicate sticky bar, the film-hop row and a footer all stacked
 *  above a postage-stamp stage.
 *
 *  sk-play-chrome-fix.js adds the class. This sheet only handles the parts no
 *  page covers on its own, and deliberately does NOT set body layout: each
 *  page's own play-frame block owns that, and a generic rule here would fight
 *  it (the selectors differ per stage — #app, #game-wrap, .shell, .stage-wrap).
 */

/* House chrome never belongs under a stage. Info is the one hop, owned by
   Game Mode — the old Overview/Workshop escape row is gone. */
html.play-frame .sk-nav--play-hide,
html.play-frame nav.sk-nav,
html.play-frame nav.house-nav,
.sk-nav--play-hide[hidden],
html.play-frame .play-escape,
html.play-frame .film-hop {
  display: none !important;
}

/* WRAPPER sit — lock the page before leftover coats parse. A stage
   that can grow a page scroll is a website, not a projector.
   mobile-responsive.css used to pad html.play-frame at 390; house-ia
   rails belong on the hub, never under a picture. */
html.play-frame,
html.play-frame body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.play-frame .ia-cards,
html.play-frame .ia-grid,
html.play-frame .ia-sub,
html.play-frame .sprockets,
html.play-frame .ia-skip,
html.play-frame #skKeyLegend {
  display: none !important;
}

/*  Operator and Long Road each carry a second strip whose back-link and
 *  "Play · Film" label repeat the escape row, but which also holds something
 *  live — the camera toggle on one, the mile read-out on the other. So the
 *  duplicated link goes and the strip stays: removing the row outright would
 *  take the camera control with it. */
html.play-frame .play-bar > a {
  display: none !important;
}

/*  The nursery's state read-out, merged down from the sticky bar it used to
 *  share the top of the screen with. */
.sk-state-strip {
  flex: 0 0 auto;
  padding: .4rem .9rem;
  font-family: 'Space Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a7f6d;
  border-bottom: 1px solid #4A4136;
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  align-items: center;
  background: #14110F;
}
.sk-state-strip .sk-state-live { color: #C9A876; margin-left: auto; }

/*  The full footer under a stage pushes the gauges off screen. The privacy and
 *  terms wording still reaches visitors on the film page one tap away. */
html.play-frame footer,
html.play-frame .sk-added-foot,
html.play-frame .stamp,
html.play-frame .sk-foot-nav,
html.play-frame .site-foot {
  display: none !important;
}

/*  Access rides bottom-right on a stage.
 *
 *  sk-a11y.js drops the button into `.play-escape .pe-right` with `.in-row`
 *  when it finds an escape row, which put it in the top bar on exactly the
 *  pages this pack is collapsing. Pull it back out to a floating control —
 *  `.in-row` sets `position:static`, so that is the property to beat.
 *  Note the real class is .sk-a11y-btn (#skAccessBtn), not .sk-a11y-fab.
 *
 *  Every stage that ships a thumb pad docks it along the same bottom edge, so
 *  a flat 14px offset parked Access on top of the right-hand pad key — a real
 *  control covering another real control. sk-play-chrome-fix.js measures
 *  whatever pad the stage owns and publishes it as --sk-pad-room, and the
 *  max() below lifts Access clear of it. Where there is no pad the variable is
 *  0 and the safe-area inset still applies, exactly as before. Nothing is
 *  moved or re-parented: each game keeps the pad it shipped with.
 *
 *  --sk-right-room is the same idea for the other shape a stage's controls
 *  take: not a bar across the foot of the picture but a column of round and
 *  pill keys stacked up the right-hand edge, which is what the village at
 *  /workshop/build/play/ carries. A pad measurement says nothing about that
 *  column, so Access read 0 and landed on the bottom key of it. The script
 *  measures how far up the right edge the stage's own controls reach and the
 *  max() takes whichever is taller.
 */
html.play-frame .sk-a11y-btn,
html.play-frame .sk-a11y-btn.in-row {
  position: fixed !important;
  right: calc(14px + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(14px + max(var(--sk-pad-room, 0px), var(--sk-right-room, 0px), env(safe-area-inset-bottom, 0px))) !important;
  top: auto !important;
  left: auto !important;
  z-index: var(--sk-z-access, 99990) !important;
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.6rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  background: rgba(27, 23, 18, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
html.play-frame .sk-a11y-panel {
  position: fixed !important;
  right: calc(14px + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(66px + max(var(--sk-pad-room, 0px), var(--sk-right-room, 0px), env(safe-area-inset-bottom, 0px))) !important;
  top: auto !important;
  z-index: calc(var(--sk-z-access, 99990) + 1) !important;
}

/*  ---------------------------------------------------------------------------
 *  The right-hand thumb column.
 *
 *  A stage that is played with two thumbs has one corner for walking and one
 *  for doing, and the doing corner has to be a stack with air between its keys
 *  or the wrong one answers. The village at /workshop/build/play/ authored its
 *  keys one at a time instead: the pink Talk/Child ring at bottom 28, the Look
 *  key at bottom 55 and the D-Pad toggle at bottom 18 all took the same 12px
 *  right edge, so on a phone the ring covered both pills and a thumb aimed at
 *  Look opened the pad instead — or nothing, because the ring was on top.
 *
 *  The ladder below gives that corner one rung per control, bottom-up: the big
 *  round action key on the floor, Look above it, the pad toggle and mute above
 *  that. Nothing is re-parented and no key changes size — only the offset each
 *  one sits at, computed from a single set of variables so the rungs cannot
 *  drift back into each other. --sk-thumb-col is the height of the whole
 *  column, which the panels that used to sit inside it are lifted clear of.
 * ------------------------------------------------------------------------- */
html.play-frame {
  --sk-thumb-edge: max(12px, env(safe-area-inset-right, 0px));
  --sk-thumb-floor: max(14px, env(safe-area-inset-bottom, 0px));
  --sk-thumb-gap: 12px;
  --sk-thumb-act: 72px;   /* the round action key */
  --sk-thumb-pill: 38px;  /* Look, D-Pad, mute */
  --sk-thumb-col: calc(
    var(--sk-thumb-floor) + var(--sk-thumb-act)
    + (var(--sk-thumb-pill) * 2) + (var(--sk-thumb-gap) * 3)
  );
  /*  The column plus the Access chip that the script parks directly above it —
   *  a 40px control on its own 14px floor, with air either side. Anything the
   *  stage docks in this corner that is not a key clears this rather than the
   *  column alone, or it comes up half under the chip. */
  --sk-thumb-clear: calc(var(--sk-thumb-col) + 62px);
}

/*  A short screen — a phone held sideways — cannot spare 200px of stage for a
 *  column, so the rungs and the ring come down a size. The ladder is the same;
 *  only the numbers feeding it change. */
@media (max-height: 560px) {
  html.play-frame {
    --sk-thumb-gap: 8px;
    --sk-thumb-act: 58px;
    --sk-thumb-pill: 34px;
  }
}

/*  The village's own keys. Addressed by id because they are its own: no other
 *  stage in the workshop carries #action-btn, #look-btn or #ctrl-btn, so these
 *  rules are inert everywhere else and every other stage keeps the corner it
 *  shipped with. */
html.play-frame #action-btn {
  right: var(--sk-thumb-edge) !important;
  bottom: var(--sk-thumb-floor) !important;
  width: var(--sk-thumb-act) !important;
  height: var(--sk-thumb-act) !important;
  z-index: 26 !important;
}
html.play-frame #look-btn {
  right: var(--sk-thumb-edge) !important;
  bottom: calc(var(--sk-thumb-floor) + var(--sk-thumb-act) + var(--sk-thumb-gap)) !important;
}
html.play-frame #ctrl-btn {
  right: var(--sk-thumb-edge) !important;
  bottom: calc(
    var(--sk-thumb-floor) + var(--sk-thumb-act)
    + var(--sk-thumb-pill) + (var(--sk-thumb-gap) * 2)
  ) !important;
}
/*  Mute shares the top rung with the pad toggle rather than adding a fourth:
 *  it is the one key on the column nobody reaches for mid-step, and a rung of
 *  its own would push the column into the gauges. The offset is measured
 *  against the toggle's longer label — it reads "D-Pad" while the stick is up
 *  and "Joystick" while the pad is, and a gap cut to the shorter one would
 *  close the moment a thumb switched. */
html.play-frame #mute-btn {
  right: calc(var(--sk-thumb-edge) + 96px) !important;
  bottom: calc(
    var(--sk-thumb-floor) + var(--sk-thumb-act)
    + var(--sk-thumb-pill) + (var(--sk-thumb-gap) * 2)
  ) !important;
}
/*  Both pills get a real thumb target. The stage authored them at 6px of
 *  padding, which reads as a 28px-tall key — under the 40px every other
 *  control on the site is held to. */
html.play-frame #look-btn,
html.play-frame #ctrl-btn,
html.play-frame #mute-btn {
  min-height: var(--sk-thumb-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 26 !important;
}

/*  What the column used to sit under. The minimap was docked at bottom 150 and
 *  the dialogue plate at 160, both of them inside the corner the keys now
 *  occupy — so each is lifted clear of the column and of the Access chip above
 *  it. They keep their 10px order relative to one another. */
html.play-frame #minimap {
  bottom: var(--sk-thumb-clear) !important;
}
html.play-frame #dialogue {
  bottom: calc(var(--sk-thumb-clear) + 10px) !important;
  max-height: calc(100% - var(--sk-thumb-clear) - 90px);
  overflow-y: auto;
}

/*  A phone held sideways has no room to put a talking plate above a column and
 *  the chip above that — stacked, they run off the top of the picture. So on a
 *  short screen the plate takes the corner instead and the keys sit behind it,
 *  which costs nothing: nobody reaches for Talk or the pad while a villager is
 *  mid-sentence, and the plate closes on the answer. It still clears the Access
 *  chip, which is the one control that draws above it. */
@media (max-height: 560px) {
  html.play-frame #dialogue {
    bottom: var(--sk-thumb-floor) !important;
    max-height: calc(100% - 24px);
  }
}

/*  The walking corner is left alone beyond one thing: the pad the D-Pad toggle
 *  opens was authored 7px above the joystick ring, which is inside a thumb's
 *  own width. It gets the same gap as the right-hand column, measured off the
 *  ring the stage docks at 18px rather than off the floor, so that the two
 *  never meet and the joystick itself does not move. */
html.play-frame #dpad {
  bottom: calc(18px + 120px + var(--sk-thumb-gap)) !important;
}