:root {
  --hue: 142;
  --phosphor: hsl(var(--hue), 85%, 58%);
  --phosphor-bright: hsl(var(--hue), 90%, 72%);
  --phosphor-dim: hsl(var(--hue), 55%, 36%);
  --phosphor-faint: hsla(var(--hue), 80%, 50%, 0.14);
  --bg: #050705;
  --panel: #0a0d0a;
  --edge: hsla(var(--hue), 40%, 40%, 0.35);
  --text: hsl(var(--hue), 30%, 72%);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

body {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Interface layer: sits over the picture and is bent by the same barrel
   filter, so the controls and text ride the tube face with everything else.
   It ignores the pointer so drags reach the canvas; controls opt back in. */
#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#ui > * { pointer-events: auto; }
#hint { pointer-events: none; }

#filters { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- toolbar ---------- */

#toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  min-height: 46px;
  padding: 8px 14px;
  background: linear-gradient(#0c100c, #070a07);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 hsla(var(--hue), 60%, 45%, 0.12), 0 6px 18px rgba(0, 0, 0, 0.6);
  z-index: 10;
  user-select: none;
}

.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group.right { margin-left: auto; }

.brand { gap: 8px; margin-right: 4px; }
.brand-name {
  letter-spacing: 0.3em;
  font-size: 12px;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor-faint);
}
.brand-sub { font-size: 9px; color: var(--phosphor-dim); letter-spacing: 0.24em; }
.logo-dot {
  width: 7px; height: 7px;
  background: var(--phosphor);
  box-shadow: 0 0 8px var(--phosphor);
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

.btn {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.btn:hover {
  background: var(--phosphor);
  border-color: var(--phosphor);
  color: #040704;
}
.btn.primary { border-color: var(--phosphor-dim); color: var(--phosphor); }
/* On hover the button fills with phosphor, so its label has to flip to dark
   to stay readable — same as the plain buttons do. */
.btn.primary:hover { background: var(--phosphor); border-color: var(--phosphor); color: #040704; }
.btn.primary.live { color: #ff8f6b; border-color: #6b3a2c; }
.btn.primary.live:hover { background: #ff8f6b; border-color: #ff8f6b; color: #040704; }

.select {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 0;
}
.select:hover { border-color: var(--phosphor); color: var(--phosphor); }
.select option { background: #0a0d0a; color: var(--text); }

#level-meter {
  width: 66px; height: 8px;
  border: 1px solid var(--edge);
  overflow: hidden;
  background: #060906;
}
#level-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    var(--phosphor) 0 3px,
    transparent 3px 5px
  );
  box-shadow: 0 0 6px var(--phosphor);
  transition: width 0.06s linear;
}

/* ---------- settings panel ---------- */

#settings {
  position: absolute;
  top: 52px;
  right: 0;
  width: 244px;
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(6, 10, 6, 0.93);
  border-left: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
  z-index: 9;
  transition: transform 0.16s steps(3), opacity 0.16s steps(3);
}
#settings.hidden {
  transform: translateX(14px);
  opacity: 0;
  pointer-events: none;
}

.panel-title {
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--phosphor);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--edge);
}
.panel-title + .setting { margin-top: 2px; }
#settings .panel-title ~ .panel-title { margin-top: 8px; }
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.btn.tiny {
  font-size: 8px;
  letter-spacing: 0.14em;
  padding: 3px 6px;
}

.panel-note {
  font-size: 8.5px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #566356;
  margin: -4px 0 2px;
}

.btn.tiny.on {
  color: var(--phosphor);
  border-color: var(--phosphor-dim);
  text-shadow: 0 0 6px var(--phosphor-faint);
}

/* Per-parameter reset, parked at the row's top right. Sits nearly invisible
   while the parameter is on auto, and lights up once it's been pinned. */
.reset-badge {
  position: absolute;
  top: -3px;
  right: 0;
  background: transparent;
  border: 1px solid transparent;
  color: #3a423a;
  font: inherit;
  font-size: 7.5px;
  letter-spacing: 0.14em;
  padding: 1px 4px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, opacity 0.12s;
  opacity: 0.5;
}
.setting:hover .reset-badge { opacity: 1; border-color: var(--edge); }
.reset-badge:hover { color: var(--phosphor); border-color: var(--phosphor-dim); }
.reset-badge.on {
  opacity: 1;
  color: var(--phosphor);
  border-color: var(--phosphor-dim);
  text-shadow: 0 0 6px var(--phosphor-faint);
}

.setting { display: flex; flex-direction: column; gap: 5px; position: relative; }
.setting label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--phosphor-dim);
}
.setting.checkbox { flex-direction: row; align-items: center; justify-content: space-between; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--edge);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px; height: 14px;
  border-radius: 0;
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor);
  cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--phosphor); cursor: pointer; }

/* ---------- stage / crt ---------- */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bezel {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #070a07 0%, #040604 70%, #010201 100%);
  overflow: hidden;
  animation: flicker 5s steps(1) infinite;
}
/* Mains-hum brightness wobble, the kind a CRT never quite settles out of. */
@keyframes flicker {
  0%, 42%, 47%, 61%, 65%, 100% { opacity: 1; }
  44% { opacity: 0.94; }
  63% { opacity: 0.965; }
}

#scope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
#scope.grabbing { cursor: grabbing; }

/* ---------- whole-screen CRT glass ---------- */
/* Fixed and above everything, so the toolbar and settings panel sit behind
   the same scanlines, scratches and vignette as the picture does. */
#crt-dark, #crt-light, #scanbar {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
#crt-dark {
  z-index: 200;
  mix-blend-mode: multiply;   /* scanlines + vignette darken */
}
#crt-light {
  z-index: 201;
  mix-blend-mode: screen;     /* scratches + dust catch light */
}

/* Slow bright band rolling down the tube. */
#scanbar {
  z-index: 202;
  height: 22vh;
  inset: auto 0 auto 0;
  background: linear-gradient(
    hsla(var(--hue), 70%, 60%, 0),
    hsla(var(--hue), 70%, 60%, 0.03),
    hsla(var(--hue), 70%, 60%, 0)
  );
  animation: roll 7.5s linear infinite;
}
@keyframes roll {
  from { transform: translateY(-30vh); }
  to { transform: translateY(100vh); }
}
#scanbar.off { display: none; }

#hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8vh;
  gap: 6px;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.4s;
}
#hint.hidden { opacity: 0; }
#hint p {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--phosphor-dim);
  text-shadow: 0 0 10px var(--phosphor-faint);
}
#hint strong { color: var(--phosphor); font-weight: normal; }

.caret {
  display: inline-block;
  margin-left: 2px;
  color: var(--phosphor);
  animation: blink 1s steps(1) infinite;
}

/* ---------- status bar ---------- */

#statusbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 22px;
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--phosphor-dim);
  background: linear-gradient(rgba(4, 7, 4, 0), rgba(4, 7, 4, 0.85) 55%);
  pointer-events: none;
  z-index: 5;
}
#statusbar b { font-weight: normal; color: var(--phosphor); letter-spacing: 0.05em; }
/* Pushes the shape + FPS pair to the right end of the bar. */
#statusbar .push { margin-left: auto; }
#st-fps { opacity: 0.65; }
#st-mode { color: var(--phosphor); }
#st-beat { color: var(--phosphor); text-shadow: 0 0 8px var(--phosphor-faint); }

/* ---------- access modal ---------- */

#modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 5, 3, 0.8);
  z-index: 20;
  transition: opacity 0.2s steps(3);
}
#modal.hidden { opacity: 0; pointer-events: none; }

.modal-box {
  width: min(460px, calc(100% - 40px));
  padding: 0 0 20px;
  background: #070a07;
  border: 1px solid var(--phosphor-dim);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 50px var(--phosphor-faint),
    inset 0 0 40px rgba(0, 0, 0, 0.8);
}
.modal-head {
  padding: 9px 18px;
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #040704;
  background: var(--phosphor);
}
.modal-box p {
  padding: 0 18px;
  font-size: 10.5px;
  line-height: 2;
  letter-spacing: 0.12em;
  color: var(--text);
}
.modal-line { color: var(--phosphor); margin: 4px 0; }
.modal-box p + p { margin-top: 10px; }

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 18px 0;
}
.modal-actions .btn { padding: 9px 14px; }

.modal-box p.modal-note {
  margin-top: 18px;
  padding-top: 14px;
  font-size: 9px;
  line-height: 1.9;
  color: var(--phosphor-dim);
  border-top: 1px solid var(--edge);
}