/* Shared play-shell helpers for HiDPI + safe area (additive).
   html.play-frame is the projector — do not pad the document. Safe-area
   on the html/body is owned by sk-play-stage.css (padding: 0). */
html:not(.play-frame) .play-frame,
html:not(.play-frame) .play-root {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.play-escape {
  min-height: 44px;
}

/* Phase 0 thumb map — Begin / Again / Stay on a hashed stage.
   Floor only; arcade pages that already ship 58px keep it. */
html.play-frame :where(#go, #retry, .msg button, .overlay button) {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

/*  The sound switch (sk-audio.js).
 *
 *  It mounts itself into whichever bar a stage has, and the two bars are not
 *  the same bar: the eight larger pictures carry `.play-escape .pe-right`,
 *  the six short ones carry `.top`. This file is the only stylesheet on all
 *  fourteen — sk-phase2.css is on the larger eight and sk-arcade.css on the
 *  shorter six — so a switch styled anywhere else would ship as a raw browser
 *  button on half the workshop.
 *
 *  Cut to the pattern sk-phase2.css already uses for the projector and
 *  accompaniment switches, because it lands in that row beside them and a
 *  third control in a different costume is worse than no control at all. */
.sk-audio-btn {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  background: none;
  border: 1px solid var(--sk-p2-soot, #4A4136);
  border-radius: 2px;
  color: var(--sk-p2-soot-2, #8A7F6D);
  font-family: var(--sk-p2-mono, "Space Mono", ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  /*  Blockified as a flex item, a <button> resolves width:auto to
   *  fill-available in Chrome and claims the whole row. Size it to its label,
   *  the same way the sibling switches have to. */
  width: max-content;
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sk-audio-btn[aria-pressed="true"] {
  color: var(--sk-p2-sepia, #C9A876);
  border-color: var(--sk-p2-sepia, #C9A876);
}
.sk-audio-btn:focus-visible {
  outline: 2px solid var(--sk-p2-stock, #EDE3D0);
  outline-offset: 2px;
}

/*  In the short pictures' title bar the row is 10px monospace on #16120F and
 *  the score sits hard right, so the switch takes that bar's colours instead
 *  of phase two's. `.top .t` already carries `flex: 1` and does all the
 *  pushing, so the switch adds no margin of its own. */
.top .sk-audio-btn {
  color: var(--sk-sepia);
  border-color: var(--sk-rule);
}
.top .sk-audio-btn[aria-pressed="true"] {
  color: var(--sk-stock);
  border-color: var(--sk-sepia);
}
.top .sk-audio-btn:focus-visible {
  outline: 2px solid var(--sk-sepia);
  outline-offset: -2px;
}