*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }

:root {
  --letterbox: #0b1430;
  --ink: #f4f1e8;
  --accent: #f2b632;
  --accent-ink: #1a1405;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--letterbox);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

/* --u is one logical pixel; the layout sets it, the stage box and the bleed around it. */
#stage {
  --u: 1px;
  --bleed-t: 0px;
  --bleed-r: 0px;
  --bleed-b: 0px;
  --bleed-l: 0px;
  /* Inset that grows a stage-sized box to the whole viewport. */
  --bleed-inset: calc(-1 * var(--bleed-t)) calc(-1 * var(--bleed-r)) calc(-1 * var(--bleed-b)) calc(-1 * var(--bleed-l));
  /* How far edge-anchored bands may move into the bleed without going under system UI. */
  --lift: max(0px, calc(var(--bleed-t) - env(safe-area-inset-top, 0px)));
  --drop: max(0px, calc(var(--bleed-b) - env(safe-area-inset-bottom, 0px)));
  /* 48 dp is a device minimum, so it cannot shrink with the stage. */
  --tap: max(48px, calc(var(--u) * 96));
  --gap: max(8px, calc(var(--u) * 16));
  position: absolute;
  font-size: calc(var(--u) * 32);
  line-height: 1.25;
  touch-action: none;
  contain: layout;
}

/* Scene art stays registered to the stage, so pins and the ring floor line up with what is drawn over it;
   the bars show the art mirrored at the stage edge, which continues it without a seam, fading out. */
.bp-art {
  --shade: rgba(6, 10, 30, 0.62);
  position: absolute;
  inset: var(--bleed-t) var(--bleed-r) var(--bleed-b) var(--bleed-l);
  background: var(--art) center / cover no-repeat;
  pointer-events: none;
}
.bp-art::before, .bp-art::after {
  content: "";
  position: absolute;
  display: none;
  background-image: linear-gradient(var(--fade-dir), transparent 0, var(--shade) var(--fade-len)), var(--art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-bleed="y"] .bp-art::before, [data-bleed="y"] .bp-art::after,
[data-bleed="x"] .bp-art::before, [data-bleed="x"] .bp-art::after { display: block; }
/* A pixel of overlap hides the subpixel seam. */
[data-bleed="y"] .bp-art::before { left: 0; right: 0; bottom: calc(100% - 1px); height: 100%; transform: scaleY(-1); --fade-dir: to bottom; --fade-len: var(--bleed-t); }
[data-bleed="y"] .bp-art::after { left: 0; right: 0; top: calc(100% - 1px); height: 100%; transform: scaleY(-1); --fade-dir: to top; --fade-len: var(--bleed-b); }
[data-bleed="x"] .bp-art::before { top: 0; bottom: 0; right: calc(100% - 1px); width: 100%; transform: scaleX(-1); --fade-dir: to right; --fade-len: var(--bleed-l); }
[data-bleed="x"] .bp-art::after { top: 0; bottom: 0; left: calc(100% - 1px); width: 100%; transform: scaleX(-1); --fade-dir: to left; --fade-len: var(--bleed-r); }

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: calc(var(--u) * 48);
  text-align: center;
}

.scene h1 { font-size: 2.2em; line-height: 1.1; }
.scene h2 { font-size: 1.4em; }
.scene .row { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; }

button {
  font: inherit;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: calc(var(--u) * 16);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 1em;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible { outline: calc(var(--u) * 4) solid var(--ink); outline-offset: calc(var(--u) * 4); }
button:active { transform: translateY(calc(var(--u) * 2)); }

/* Outside the stage, so it stays put across scenes; the bottom-left corner is free on every scene. */
.bp-sound {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 10;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(11, 20, 48, 0.72);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.bp-sound svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bp-sound .bp-sound-body { fill: currentColor; }
.bp-sound .bp-sound-off, .bp-sound.is-off .bp-sound-on { display: none; }
.bp-sound.is-off .bp-sound-off { display: inline; }
.bp-sound.is-off { color: var(--ink); border-color: rgba(244, 241, 232, 0.6); }
.bp-sound:active { transform: scale(0.94); }