/* MERCIFALL — production demo shell */

:root {
  --night: #060709;
  --navy: #0d1622;
  --steel: #16282f;
  --line: #2a3740;
  --paper: #eef3e9;
  --dim: #9aa49e;
  --teal: #7fa893;
  --teal-deep: #3a6455;
  --amber: #ffcf6b;
  --amber-deep: #c47b2a;
  --danger: #e3312c;
  --green: #46c25a;
  --page-pad: clamp(16px, 4vw, 40px);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
          "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { margin: 0; background: var(--night); color-scheme: dark; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -10%, rgba(58, 100, 85, .14), transparent 40rem),
    linear-gradient(180deg, #080b10 0%, var(--night) 100%);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Page layout.
   Vertical rhythm above the canvas is whole CSS pixels only (M5): a vh-derived
   padding such as 43.2px puts the canvas top on a fraction and the compositor
   smears the pixel art. round() lands the fluid values on the pixel grid; the
   clamp() line before each is the fallback for browsers without round(). */
.demo {
  width: min(960px, calc(100% - (2 * var(--page-pad))));
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) 0 clamp(56px, 9vh, 96px);
  padding-top: round(clamp(32px, 6vh, 64px), 1px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 4vh, 44px);
  gap: round(clamp(28px, 4vh, 44px), 1px);
}
.demo-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wordmark {
  /* The sheet is 228x127; shown 1:1 every pixel stays square and the height
     stays whole (the old 260px width was a 1.14x resample, 144.8px tall). */
  width: 228px; height: 127px;
  image-rendering: crisp-edges; image-rendering: pixelated;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .55));
}
.demo-tag {
  margin: 0; color: var(--dim); text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; line-height: 18px; font-family: var(--mono);
}
#readyBadge[data-state="launching"] { color: var(--amber); }
#readyBadge[data-state="ready"] { color: var(--amber); }
#readyBadge[data-state="running"] { color: var(--teal); }
#readyBadge[data-state="error"] { color: var(--danger); }

/* Game stage */
.play-stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.screen {
  position: relative; width: max-content; max-width: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid rgba(255, 207, 107, .55); background: #000;
  box-shadow: 0 0 0 1px rgba(255, 207, 107, .06), 0 20px 60px rgba(0, 0, 0, .55);
}
/* Native fullscreen targets #playStage (site.js): the stage becomes a grid
   that centres the integer-scaled canvas on the black backdrop (R9). The
   .screen rule is the fallback for a browser that could only fullscreen the
   screen itself. */
.play-stage:fullscreen {
  display: grid; place-items: center; gap: 0; padding: 0; background: #000;
}
.play-stage:fullscreen .screen { max-width: none; border: 0; box-shadow: none; }
.play-stage:fullscreen .launch-row,
.play-stage:fullscreen .tools { display: none; }
.screen:fullscreen { width: 100%; height: 100%; max-width: none; border: 0; }
/* The page bar (and its Fullscreen button) is outside the fullscreen element,
   so the stage carries its own exit; Esc works as well. */
.fs-exit { display: none; }
.play-stage:fullscreen .fs-exit {
  display: block; position: absolute; top: 12px; right: 12px; z-index: 6; opacity: .4;
}
.play-stage:fullscreen .fs-exit:hover,
.play-stage:fullscreen .fs-exit:focus-visible { opacity: 1; }
#canvas {
  display: block; width: 480px; height: 270px; outline: none;
  touch-action: none; background: #000;
  image-rendering: crisp-edges; image-rendering: pixelated;
}
#canvas:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* Loading panel */
.load-panel {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
  background: linear-gradient(rgba(6, 7, 9, .72), rgba(6, 7, 9, .92));
}
body.is-preparing .load-panel,
body.is-delayed .load-panel,
body.is-launching .load-panel { display: flex; }
body.is-ready .load-panel,
body.is-running .load-panel,
body.is-error .load-panel,
.load-panel[hidden] { display: none; }
.load-bar {
  width: min(280px, calc(100% - 32px)); height: 6px;
  border: 1px solid var(--line); background: rgba(13, 22, 34, .85); overflow: hidden;
}
.load-bar-fill {
  width: 0%; height: 100%; background: linear-gradient(90deg, var(--teal-deep), var(--amber));
  transition: width .12s linear;
}
body.is-preparing .load-bar-fill,
body.is-delayed .load-bar-fill { animation: load-indeterminate 1.4s ease-in-out infinite; }
body.is-launching .load-bar-fill { animation: load-indeterminate 0.9s ease-in-out infinite; width: 100%; }
body.is-loading .load-bar-fill { animation: none; }
.load-label {
  margin: 0; max-width: 28ch; color: var(--dim);
  text-transform: uppercase; letter-spacing: .1em; font-size: 10px;
}
body.is-delayed .load-label { color: var(--amber); }

.nudge {
  position: absolute; z-index: 5; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 20px); margin: 0; padding: 6px 10px;
  color: var(--amber); background: rgba(6, 7, 9, .92); border: 1px solid var(--amber-deep); font-size: 10px;
}
.nudge[hidden] { display: none; }
.rotate-prompt { display: none; }

/* Launch row */
.launch-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.launch-row[hidden] { display: none; }
.btn-boot {
  min-width: 220px; min-height: 52px; padding: 0 28px; cursor: pointer;
  border: 1px solid var(--amber); color: #17120a; background: var(--amber);
  box-shadow: 6px 6px 0 rgba(196, 123, 42, .16);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-family: var(--mono);
  font-size: 12px;
  transition: color .18s, background .18s, transform .18s, box-shadow .18s, opacity .18s;
}
body.is-preparing .btn-boot,
body.is-delayed .btn-boot,
body.is-loading .btn-boot { opacity: 0; pointer-events: none; visibility: hidden; }
body.is-ready .btn-boot { opacity: 1; visibility: visible; }
body.is-running .btn-boot { display: none; }
.boot-status { margin: 0; color: var(--dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.btn-boot:hover:not(:disabled) { background: #ffe09a; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(196, 123, 42, .2); }
.btn-boot:disabled { cursor: default; color: #81745c; background: #29271f; border-color: #4b4435; box-shadow: none; transform: none; }
.boot-status { margin: 0; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; min-height: 0; font-family: var(--mono); }
.boot-status[hidden] { display: none; }
.touch-note { margin: 0; color: var(--dim); font-size: 11px; max-width: 42ch; line-height: 1.5; }

/* Tools */
.tools { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.minibtn {
  min-height: 36px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line); color: var(--paper); background: rgba(13, 22, 34, .72);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-family: var(--mono);
}
.minibtn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.minibtn:disabled { opacity: .36; cursor: default; }
.pad-status { display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font-size: 11px; font-family: var(--mono); }
.pad-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #39404c; }
.pad-status[data-state="live"] { color: var(--green); }
.pad-status[data-state="live"] .pad-dot { background: var(--green); box-shadow: 0 0 7px var(--green); }
.pad-status[data-state="unsupported"] .pad-dot { background: var(--danger); }

/* Running: the header collapses into a slim 48px bar hosting the wordmark and
   the game tools (site.js moves .tools in here on boot), so the canvas gets
   every pixel below it (C3). Heights and gaps are whole pixels: bar 48 + gap
   16 + border 1 puts the canvas top at exactly 65px with the bar at the
   viewport top (M5). */
body.is-running .demo { padding-top: 0; gap: 16px; }
body.is-running .demo-head {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
  width: 100%; height: 48px; flex: none; text-align: left;
}
body.is-running .wordmark { width: 72px; height: 40px; filter: none; image-rendering: auto; }
body.is-running .demo-tag { display: none; }
body.is-running .tools {
  width: auto; margin-left: auto; min-width: 0;
  flex-wrap: nowrap; justify-content: flex-end; gap: 8px;
}
body.is-running .tools .minibtn { min-height: 30px; flex: none; }
body.is-running .pad-status { width: auto; min-width: 0; flex: 0 1 auto; }
body.is-running #padText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-running .play-stage { gap: 0; }
/* R5: the canvas may be wider than the 960px column. Flex centring overflows
   it symmetrically, and site.js sizes it against the real viewport width. */
body.is-running .screen { max-width: none; }

/* Controls */
.controls {
  width: 100%;
  margin-top: clamp(12px, 2vh, 24px);
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid rgba(127, 168, 147, .22);
}
.controls-title {
  margin: 0; color: var(--paper); text-transform: uppercase;
  letter-spacing: .14em; font-size: 13px; font-weight: 800; font-family: var(--mono);
}
.controls-lede {
  margin: 10px 0 0; color: var(--dim); font-size: 13px; letter-spacing: .02em; max-width: 52ch;
}
.controls-panel { padding: clamp(24px, 3vh, 36px) 0 0; }
#controlsRoot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
}
.ctl-group {
  min-width: 0;
  padding: 20px 18px 22px;
  border: 1px solid rgba(42, 55, 64, .55);
  border-radius: 2px;
  background: rgba(13, 22, 34, .42);
}
.ctl-group-title {
  margin: 0 0 16px; padding-bottom: 12px;
  color: var(--amber); text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; font-family: var(--mono); font-weight: 800;
  border-bottom: 1px solid rgba(255, 207, 107, .18);
}
.ctl-header {
  display: grid;
  grid-template-columns: minmax(96px, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px 16px;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(42, 55, 64, .55);
}
.ctl-header-spacer { display: block; }
.ctl-header-col {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 700;
}
.ctl-row {
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(96px, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px 16px;
  border-bottom: 1px solid rgba(42, 55, 64, .38);
}
.ctl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ctl-label { min-width: 0; font-size: 13px; line-height: 1.5; padding-top: 2px; }
.ctl-note { display: block; margin-top: 6px; color: var(--dim); font-size: 11px; line-height: 1.45; }
.ctl-cell {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.ctl-cell-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ctl-or, .ctl-unbound {
  color: #65716b; font-size: 9px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .06em; padding: 0 2px;
}
kbd, .key, .pad {
  width: max-content; max-width: 100%;
  padding: 4px 9px; border: 1px solid var(--line); border-bottom-width: 2px;
  color: var(--paper); background: #151d28; font: 11px/1.45 var(--mono); white-space: nowrap;
}
.pad { color: var(--dim); background: #101720; border-bottom-width: 1px; }
.ctl-row[data-combo] .pad { background: transparent; border-style: dashed; }
.pad.is-live { color: #0b0e13; background: var(--amber); border-color: var(--amber); }

.foot {
  min-height: 56px; padding: 16px var(--page-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(127, 168, 147, .16); color: var(--dim);
  text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-family: var(--mono);
}
.audio-tag[data-state="running"] { color: var(--teal); }
.audio-tag[data-state="blocked"] { color: #e07a5f; cursor: pointer; text-decoration: underline; }
.audio-tag[data-state="checking"] { color: var(--amber); }

/* Touch controls — SOR4-style bottom deck (touch.js) */
.touch { display: none; }
body.is-running .touch {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  justify-content: flex-end; pointer-events: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .42) 100%);
}
.touch > * { pointer-events: auto; touch-action: none; }

.t-deck {
  display: grid;
  grid-template-columns: minmax(96px, 24vw) 1fr minmax(132px, 32vw);
  align-items: end;
  gap: 4px;
  width: 100%;
  padding: 0 4px 4px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  min-height: 0;
  /* No max-height: the action arc is 168px tall, and a 34% cap on a 390px
     phone (132px) pushed the utility chips 35px below the viewport edge. */
}

/* D-pad — warm red disc like SOR4 */
.t-dpad {
  position: relative;
  width: min(132px, 26vw);
  height: min(132px, 26vw);
  margin-left: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 120, 90, .35), rgba(180, 45, 40, .55) 55%, rgba(40, 12, 14, .75));
  border: 2px solid rgba(255, 120, 90, .55);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45), inset 0 0 12px rgba(255, 100, 80, .12);
}
.t-dpad.is-down { border-color: rgba(255, 200, 140, .85); }
.t-dpad-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28%; height: 28%; border-radius: 50%;
  background: rgba(12, 8, 10, .55); border: 1px solid rgba(255, 255, 255, .08);
}
.t-wedge {
  position: absolute; pointer-events: none;
  color: rgba(255, 230, 210, .55);
  transition: color .08s, filter .08s;
}
.t-wedge.is-on { color: #fff; filter: drop-shadow(0 0 6px rgba(255, 200, 120, .9)); }
.t-wedge-up {
  top: 8%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 14px solid currentColor;
}
.t-wedge-down {
  bottom: 8%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 14px solid currentColor;
}
.t-wedge-left {
  left: 8%; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-right: 14px solid currentColor;
}
.t-wedge-right {
  right: 8%; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-left: 14px solid currentColor;
}

/* Utility chips — bottom center */
.t-bar {
  display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center;
  gap: 5px; padding-bottom: 8px; align-self: end;
}
.t-chip {
  margin: 0; padding: 5px 8px; min-height: 32px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(14, 18, 26, .72); color: var(--dim);
  font: 600 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.t-chip-start, .t-chip-pause { color: var(--paper); border-color: rgba(255, 207, 107, .35); }
.t-chip-herb-g { color: var(--green); }
.t-chip-herb-b { color: #7fb0d8; }
.t-chip.is-down { color: #0b0e13; background: var(--amber); border-color: var(--amber); }

/* Action arc — bottom-right */
.t-acts {
  position: relative;
  width: min(196px, 36vw);
  height: min(168px, 34vw);
  margin-left: auto; margin-right: 2px;
}
.t-action {
  position: absolute; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(14, 18, 26, .52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .4), inset 0 0 10px rgba(255, 255, 255, .04);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  color: var(--paper);
}
.t-glyph { font-size: 18px; line-height: 1; pointer-events: none; }
.t-tag {
  margin-top: 2px; font: 700 8px/1 var(--mono); letter-spacing: .08em;
  opacity: .85; pointer-events: none;
}
.t-fire-hint {
  /* Right-aligned to the FIRE button, which hugs the right edge: a centred
     hint ran ~45px off screen. */
  position: absolute; bottom: -14px; right: 0;
  white-space: nowrap; font: 600 7px/1 var(--mono); letter-spacing: .04em;
  color: rgba(255, 200, 140, .75); pointer-events: none;
}

.t-action-atk {
  right: 0; bottom: 0; width: 62px; height: 62px;
  border-color: rgba(90, 170, 230, .55);
  background: radial-gradient(circle at 30% 25%, rgba(100, 180, 240, .45), rgba(20, 50, 80, .75));
}
.t-action-jmp {
  right: 66px; bottom: 6px; width: 50px; height: 50px;
  border-color: rgba(240, 170, 70, .5);
  background: radial-gradient(circle at 30% 25%, rgba(240, 180, 80, .4), rgba(60, 40, 10, .72));
}
.t-action-spc {
  right: 118px; bottom: 22px; width: 44px; height: 44px;
  border-color: rgba(240, 170, 70, .45);
  background: radial-gradient(circle at 30% 25%, rgba(220, 140, 60, .38), rgba(50, 30, 8, .7));
}
.t-action-fire {
  right: 4px; bottom: 72px; width: 58px; height: 58px;
  border-color: rgba(255, 110, 70, .6);
  background: radial-gradient(circle at 30% 25%, rgba(255, 120, 70, .48), rgba(70, 20, 10, .78));
}
.t-action-rld {
  right: 68px; bottom: 78px; width: 40px; height: 40px;
  border-color: rgba(160, 170, 180, .35);
  background: radial-gradient(circle at 30% 25%, rgba(120, 130, 145, .35), rgba(25, 28, 34, .78));
  font-size: 14px;
}
.t-action-rld .t-glyph { font-size: 16px; }

.t-action.is-down {
  transform: scale(.94);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5), inset 0 0 14px rgba(255, 255, 255, .12);
}
.t-action-atk.is-down { background: radial-gradient(circle at 30% 25%, rgba(140, 210, 255, .7), rgba(30, 70, 110, .9)); }
.t-action-fire.is-down { background: radial-gradient(circle at 30% 25%, rgba(255, 160, 100, .75), rgba(90, 30, 10, .92)); }
.t-action-fire.is-aiming {
  border-color: var(--amber);
  box-shadow: 0 0 16px rgba(255, 207, 107, .55), inset 0 0 12px rgba(255, 207, 107, .25);
}
.t-action-fire.is-aiming .t-fire-hint { color: var(--amber); }

@media (pointer: coarse) {
  .t-deck { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .t-dpad { width: min(132px, 24vw); height: min(132px, 24vw); }
  .t-acts { width: min(196px, 34vw); height: min(168px, 32vw); }
  .t-action-atk { width: 64px; height: 64px; }
  .t-action-jmp { width: 50px; height: 50px; right: 68px; }
  .t-action-spc { width: 44px; height: 44px; right: 118px; }
  .t-action-fire { width: 58px; height: 58px; bottom: 70px; }
  .t-action-rld { width: 40px; height: 40px; right: 66px; bottom: 76px; }
  .t-chip { min-height: 32px; padding: 5px 8px; font-size: 9px; }
}

/* Mobile theatre — fills the viewport when native fullscreen is unavailable (iOS Safari). */
body.is-mobile.is-theatre {
  overflow: hidden;
  min-height: 100dvh;
}
body.is-mobile.is-running {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
/* The bar's tools stay reachable (fixed, top-right, below) while the rest of
   the header collapses to nothing. */
body.is-mobile.is-theatre .demo-head { height: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; }
body.is-mobile.is-theatre .demo-head .wordmark,
body.is-mobile.is-theatre .demo-head .demo-tag,
body.is-mobile.is-theatre .controls,
body.is-mobile.is-theatre .foot {
  display: none;
}
body.is-mobile.is-theatre .demo {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  gap: 0;
}
body.is-mobile.is-theatre .play-stage {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  gap: 0;
  display: grid;
  place-items: center;
  background: #000;
}
/* The screen keeps the whole viewport so the touch deck (touch.js mounts it
   in here) spans edge to edge; the canvas is centred inside it (R9). */
body.is-mobile.is-theatre .screen {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
}
body.is-mobile.is-theatre .tools {
  position: fixed;
  top: max(6px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  z-index: 400;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  margin: 0;
  width: auto;
  opacity: .55;
  pointer-events: auto;
}
body.is-mobile.is-theatre .tools .minibtn {
  padding: 4px 8px;
  font-size: 9px;
  min-height: 28px;
}
body.is-mobile.is-theatre .tools .pad-status,
body.is-mobile.is-theatre .tools #padToggle {
  display: none;
}

/* Responsive */
@media (max-width: 720px) {
  #controlsRoot { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .demo { width: calc(100% - 32px); }
  .tools { gap: 8px; }
  .pad-status { width: 100%; justify-content: center; }
  .ctl-group { padding: 16px 14px 18px; }
  .ctl-header { display: none; }
  .ctl-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ctl-cell { justify-content: flex-start; }
  .foot { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) and (orientation: portrait) and (any-pointer: coarse) {
  body.is-running .rotate-prompt {
    position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
    color: var(--paper); background: rgba(6, 7, 9, .94);
  }
  .rotate-prompt strong { color: var(--amber); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
  .rotate-prompt span { color: var(--dim); font-size: 10px; }
}

@keyframes load-indeterminate {
  0% { width: 8%; margin-left: 0; }
  50% { width: 42%; margin-left: 30%; }
  100% { width: 8%; margin-left: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}