:root { color-scheme: dark; }

/* The UA stylesheet's [hidden] { display: none } loses the cascade to any
   author `display` rule, and #hud, #countdown and #tap-zones all set one. So
   every el.hidden = true in app.js was silently doing nothing: the countdown's
   60%-black scrim sat over the stage permanently, dimming the very text this
   app exists to keep legible. Author-origin and !important so it always wins. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app {
  --inset-left: 12%;
  --inset-right: 12%;
  --inset-top: 8%;
  --inset-bottom: 8%;
  --font-size: 48px;
  --line-height: 1.5;
  --font-weight: 400;
  --mirror: scaleX(1) scaleY(1);
  --reading-line: 40%;
  --scroll: 0px;
  --fg: #fff;
  --bg: #000;
  --accent: #ffb300;

  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--fg);
}

#app[data-theme="amber-on-black"] { --fg: #ffb300; --bg: #000; }
#app[data-theme="black-on-white"] { --fg: #000; --bg: #fff; --accent: #c05000; }

#stage-wrap { position: absolute; inset: 0; }

/* The stage carries both the insets and the mirror transform. Mirroring the
   padded box (rather than only the glyphs inside it) is deliberate: through a
   beam splitter the operator sees the reflection, so "left inset" then means
   left as they see it, which is where they are looking while adjusting it. */
#stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: var(--mirror);
}

/* The insets define a clipping window, not just padding. Padding would push
   the first line down but let scrolled text run straight through the excluded
   strip and out to the screen edge — which is the bug this app exists to fix. */
#reading-box {
  position: absolute;
  top: var(--inset-top);
  right: var(--inset-right);
  bottom: var(--inset-bottom);
  left: var(--inset-left);
  overflow: hidden;
}

#track { transform: translate3d(0, calc(-1 * var(--scroll)), 0); will-change: transform; }

#script {
  margin: 0;
  font-family: inherit;
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  white-space: pre-wrap;
  /* Never let a long word escape the reading area — that is the whole point. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

#app[data-font="grotesque"] #script { font-family: "Helvetica Neue", Arial, sans-serif; }
#app[data-font="serif"] #script { font-family: Georgia, "Times New Roman", serif; }

#guides {
  position: absolute;
  top: var(--inset-top);
  right: var(--inset-right);
  bottom: var(--inset-bottom);
  left: var(--inset-left);
  border: 1px dashed var(--accent);
  pointer-events: none;
  display: none;
}
#app[data-guides="on"] #guides { display: block; }

#reading-line {
  position: absolute;
  left: var(--inset-left);
  right: var(--inset-right);
  top: var(--reading-line);
  border-top: 2px solid var(--accent);
  opacity: 0.7;
  pointer-events: none;
  display: none;
}
#app[data-reading-line="on"] #reading-line { display: block; }

#countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: min(40vw, 40vh);
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.6);
}

#tap-zones { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 3fr 1fr; }
.zone { background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zone:active { background: rgba(255, 179, 0, 0.12); }

#panel-toggle {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  z-index: 3;
  width: 48px;
  height: 48px;
  font-size: 22px;
  background: rgba(128, 128, 128, 0.25);
  color: var(--fg);
  border: 0;
  cursor: pointer;
}

#hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
#hud-progress { flex: 1; height: 6px; }

#panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: min(420px, 92vw);
  padding: 12px;
  overflow-y: auto;
  background: #141414;
  color: #eee;
  border-left: 1px solid #333;
  transform: translateX(0);
  transition: transform 0.18s ease;
}
#app[data-panel="closed"] #panel { transform: translateX(105%); }

.panel-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { flex: 1; padding: 8px; background: #222; color: #ccc; border: 0; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--accent); color: #000; }

#panel label { display: block; margin: 12px 0; font-size: 14px; }
#panel input[type="range"] { width: 100%; }
#panel input[type="text"], #panel textarea, #panel select { width: 100%; padding: 8px; background: #1e1e1e; color: #eee; border: 1px solid #444; font: inherit; }
#panel button { padding: 10px 14px; background: #2a2a2a; color: #eee; border: 1px solid #444; cursor: pointer; }
#panel .row { display: flex; gap: 8px; margin-top: 8px; }
#start-run { width: 100%; margin-top: 16px; background: var(--accent); color: #000; font-weight: 700; }
.hint { font-size: 13px; color: #999; }
#app:not([data-linked="off"]) .unlinked-only { display: none; }

#app[data-mode="run"] #panel-toggle { opacity: 0.25; }
#app[data-mode="run"][data-panel="open"] #panel-toggle { opacity: 1; }
.script-row { display: block; width: 100%; margin-bottom: 4px; text-align: left; font-size: 14px; }
.script-row[aria-current="true"] { border-color: var(--accent); color: var(--accent); }

#app[data-mode="run"] #panel { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5); }
#app[data-mode="edit"] #stop-run { display: none; }
#app[data-mode="run"] #start-run { display: none; }
#stop-run { width: 100%; margin-top: 16px; background: #3a1414; color: #ffb4a8; border-color: #6a2a2a; font-weight: 700; }

.keymap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.keymap-name { flex: 1; }
.keymap-bindings { color: var(--accent); font-size: 12px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }