/*
  Pulse — DJ Visualiser · Styles
  Layout: main visual canvas fills the screen; control panel is a vertical
  sidebar on the right that can hide. The popup window uses the exact same
  sidebar layout via html.controls-only override.
  Reference: Sakr (@sakrmusic) — dark, austere AV aesthetic.
*/

:root {
  --bg:           #000;
  --bg-panel:     rgba(8, 8, 10, 0.94);
  --bg-block:     rgba(255, 255, 255, 0.025);
  --fg:           #e8e8ec;
  --fg-dim:       #707278;
  --border:       rgba(255, 255, 255, 0.07);
  --border-hi:    rgba(255, 255, 255, 0.14);
  --accent:       #ff2da0;
  --accent-dim:   rgba(255, 45, 160, 0.18);
  --cyan:         #00d4ff;
  --green:        #39ff85;
  --warn:         #ffaa33;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --panel-w:      340px;
}

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

html, body {
  height: 100%;
  background: #000;
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Menlo", monospace;
  font-size: 11px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

/* ── Layout: stage fills viewport; panel sits on top of it on the right ── */
.stage-wrap {
  position: fixed;
  inset: 0;
  background: #000;
  transition: right 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  right: var(--panel-w);
}
canvas#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
body.panel-hidden .stage-wrap { right: 0; }

/* ── HUD ───────────────────────────────────────────────────────────────── */
.hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
.hud-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge {
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1;
}
.badge-mono  { color: var(--cyan); }
.badge-green { color: var(--green); }
.badge-dim   { color: var(--fg-dim); }
#badge-midi.warn { color: var(--warn); }
.badge-mode  { color: var(--accent); border-color: var(--accent); opacity: 0; transition: opacity 0.15s; }
.badge-mode.visible { opacity: 1; }
.badge-bar   { color: var(--cyan); font-variant-numeric: tabular-nums; }
.badge-perf  { color: var(--warn); opacity: 0; }
.badge-perf.visible { opacity: 1; }
.badge-cue   { color: #ff7733; border-color: #ff7733; opacity: 0; transition: opacity 0.1s; }
.badge-cue.visible { opacity: 1; }
.badge-auto  { color: var(--fg-dim); border-color: var(--border); }
.badge-auto.active {
  color: #fff; background: var(--accent); border-color: var(--accent);
  animation: auto-glow 1.4s ease-in-out infinite alternate;
}
@keyframes auto-glow {
  from { box-shadow: 0 0 0 0 rgba(255,45,160,0.6); }
  to   { box-shadow: 0 0 18px 4px rgba(255,45,160,0.45); }
}

#beat-ring {
  position: absolute;
  top: 18px; left: -24px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
#beat-ring.pulse {
  animation: beat-pulse 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes beat-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  40%  { opacity: 0.6; transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(3.0); }
}

/* ── Splash ────────────────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(30, 6, 45, 0.7), rgba(0,0,0,0.97));
  backdrop-filter: blur(12px);
}
.splash.hidden { display: none; }
.splash-card {
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  text-align: center;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.splash-card h1 {
  font-size: 48px;
  letter-spacing: 0.28em;
  font-weight: 700;
  margin: 0 0 6px;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 60%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.splash-card .tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.splash-card .hint {
  font-size: 12px;
  margin: 0 0 24px;
  color: var(--fg);
  opacity: 0.7;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}
.splash-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn {
  appearance: none;
  border: 1px solid var(--border-hi);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.btn:hover  { background: rgba(255,255,255,0.09); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #ff55b4; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn.ghost:hover { color: var(--fg); }
.footnote {
  margin-top: 20px; font-size: 10px; color: var(--fg-dim);
  line-height: 1.6; font-family: system-ui, -apple-system, sans-serif;
}

/* ── Vertical sidebar panel ────────────────────────────────────────────── */
.panel {
  position: fixed;
  top: 0; right: 0;
  width: var(--panel-w);
  height: 100vh;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-hi);
  z-index: 10;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel.hidden { transform: translateX(100%); pointer-events: none; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-header h2 {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  flex: 1;
}
.panel-header .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.panel-header button {
  background: transparent;
  color: var(--fg-dim);
  border: none;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}
.panel-header button:hover { background: rgba(255,255,255,0.07); color: var(--fg); }

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.panel-scroll::-webkit-scrollbar       { width: 4px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Block — a labelled group ──────────────────────────────────────────── */
.block {
  background: var(--bg-block);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.block-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 6px;
  font-weight: 600;
}
.block-label .sep { color: var(--fg-dim); opacity: 0.6; padding: 0 3px; }
.block-label .val { color: var(--fg); float: right; }
.block summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}
.block summary::-webkit-details-marker { display: none; }
.block summary .block-label::after {
  content: "▾";
  float: right;
  color: var(--fg-dim);
  font-size: 9px;
  margin-left: 6px;
}
.block[open] summary .block-label::after { content: "▴"; }

/* ── Rows / sub labels ─────────────────────────────────────────────────── */
.row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.row.seg-row { gap: 3px; }
.sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 6px 0 3px;
  font-weight: 600;
}
.sub .val { color: var(--fg); }
.sub-hint {
  font-size: 10px;
  color: var(--fg-dim);
  margin: 2px 0 4px;
  line-height: 1.4;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Slider rows ──────────────────────────────────────────────────────── */
.row-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 4px 0 2px;
  font-weight: 600;
}
.row-slider .val { color: var(--fg); font-variant-numeric: tabular-nums; }

input[type="range"] {
  width: 100%;
  appearance: none;
  background: transparent;
  height: 18px;
  margin: 0 0 4px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  background: var(--fg);
  border-radius: 50%;
  margin-top: -4.5px;
  cursor: pointer;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.seg {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.seg:hover { background: rgba(255,255,255,0.10); }
.seg.active { background: var(--accent-dim); border-color: var(--accent); color: var(--fg); }
.seg.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg.primary:hover { background: #ff55b4; }

.mode-row .seg[data-mode-btn="drop"].active      { background: #c81f3f; border-color: #c81f3f; color: #fff; }
.mode-row .seg[data-mode-btn="build"].active     { background: #d68a00; border-color: #d68a00; color: #fff; }
.mode-row .seg[data-mode-btn="breakdown"].active { background: #2d6cdf; border-color: #2d6cdf; color: #fff; }
#btn-lock-bpm.active { background: var(--cyan); border-color: var(--cyan); color: #000; }

.big-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-hi);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.big-btn:hover  { background: rgba(255,255,255,0.08); }
.big-btn:active { transform: scale(0.98); }
.big-btn-label { flex: 1; text-align: left; }
.autovj-dot, .rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-dim);
  flex-shrink: 0;
}
.autovj-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 18px rgba(255,45,160,0.45);
}
.autovj-btn.active .autovj-dot { background: #fff; animation: rec-blink 0.9s steps(2) infinite; }
.rec-btn.active {
  background: #c81f3f; border-color: #c81f3f; color: #fff;
  box-shadow: 0 0 18px rgba(200,31,63,0.45);
}
.rec-btn.active .rec-dot { background: #fff; animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
.autovj-hint, .rec-time {
  font-size: 9px;
  font-weight: 600;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 2px 5px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.cue-btn { background: rgba(255,119,51,0.1); border-color: rgba(255,119,51,0.4); color: #ffa770; }
.cue-btn:hover, .cue-btn:active { background: rgba(255,119,51,0.3); color: #fff; }

.deck-focus-row .seg.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── PIP frame ───────────────────────────────────────────────────────── */
.pip-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.panel-pip-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.pip-label {
  position: absolute;
  top: 4px; left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* ── BPM readout ──────────────────────────────────────────────────────── */
.bpm-readout {
  display: block;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ── Select / text input / file audio ─────────────────────────────────── */
.select-full, .text-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  width: 100%;
}
.select-full:focus, .text-input:focus { outline: none; border-color: var(--accent); }

/* Native audio element constrained to its block width */
.file-audio-player {
  width: 100%;
  max-width: 100%;
  display: block;
  margin-top: 6px;
  height: 32px;
  border-radius: var(--radius-sm);
}

/* ── Toggle rows ──────────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--fg);
  cursor: pointer;
  margin: 3px 0;
}
.toggle-row input { accent-color: var(--accent); }

/* ── Scene grid (2 columns × 10 rows = 20 scenes) ─────────────────────── */
.scene-grid-wrap { position: relative; }
.scene-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.scene-btn {
  position: relative;
  background: rgba(0,0,0,0.5);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 6px;
  min-height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
  transition: border-color 0.12s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  overflow: hidden;
}
.scene-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  border-radius: var(--radius-sm);
}
.scene-btn > * { position: relative; z-index: 1; }
.scene-btn .n {
  display: block;
  font-size: 8px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.12em;
  margin-bottom: 1px;
}
.scene-btn.active { border-color: var(--accent); box-shadow: 0 0 10px rgba(255,45,160,0.4); }
.scene-btn:hover  { border-color: var(--border-hi); }

/* Custom (user-uploaded) scenes get a thin cyan outline so they're visually
   distinct from the built-ins, plus a USR badge and × remove button. */
.scene-btn-custom { border-color: rgba(0, 255, 200, 0.45); }
.scene-btn-custom.active { border-color: var(--accent); }
.scene-custom-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  background: rgba(0, 220, 180, 0.85);
  color: #001a14;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
}
.scene-remove-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 3;
  width: 16px;
  height: 16px;
  padding: 0;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 80, 80, 0.55);
  color: rgba(255, 130, 130, 0.95);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.scene-btn-custom:hover .scene-remove-btn { opacity: 1; }
.scene-remove-btn:hover {
  background: rgba(255, 50, 50, 0.85);
  color: white;
}

/* Upload row sits directly under the scene grid. */
.custom-scene-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.custom-scene-row > #custom-scene-upload-btn { flex: 1; }
.custom-scene-row > #custom-scene-help-btn   { flex: 0 0 28px; }
.custom-scene-status {
  margin-top: 4px;
  min-height: 12px;
  font-size: 9.5px;
}
.custom-scene-status[data-kind="error"] { color: #ff7070; }
.custom-scene-status[data-kind="ok"]    { color: #5fffd0; }

/* ── EQ row ───────────────────────────────────────────────────────────── */
.eq-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.eq-cell { text-align: center; }
.eq-cell .sub { justify-content: center; margin: 2px 0; }
.eq-cell .val { display: block; text-align: center; color: var(--cyan); font-size: 9px; font-variant-numeric: tabular-nums; }
.eq-cell input[type="range"] {
  /* Vertical orientation feels right for EQ but cross-browser support is iffy;
     keep horizontal but tighter. */
  height: 16px;
}

/* ── Preset list ──────────────────────────────────────────────────────── */
.preset-list { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
.preset-row { display: flex; gap: 4px; align-items: center; }
.preset-load { flex: 1; text-align: left; }
.preset-del {
  width: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.preset-del:hover { background: #c81f3f; color: #fff; border-color: #c81f3f; }

/* ── MIDI mapping ─────────────────────────────────────────────────────── */
#midi-targets {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}
.midi-group {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 3px;
  margin-top: 3px;
}
.midi-group:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.midi-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
  font-size: 10px;
}
.midi-row.learning .midi-binding {
  color: var(--accent);
  font-weight: 700;
  animation: blink 0.8s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }
.midi-name { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.midi-binding {
  color: var(--cyan);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  min-width: 44px;
  text-align: right;
}
.midi-learn, .midi-clear {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}
.midi-learn:hover { background: var(--accent-dim); border-color: var(--accent); }
.midi-clear:hover { background: rgba(255,255,255,0.12); }

/* ── Shortcuts ────────────────────────────────────────────────────────── */
.shortcuts-block .kbd-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  font-size: 9.5px;
  color: var(--fg-dim);
  margin-top: 4px;
}
kbd {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 9px;
  font-family: ui-monospace, monospace;
  color: var(--fg);
}

/* ── Typography overlay (canvas overlay, not a panel control) ─────────── */
.type-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  --split: 2px;
  --type-scale: 1;
}
.type-overlay.hidden { display: none; }
.type-slot {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: "Helvetica Neue", "Arial Black", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  --type-size: 64px;
  font-size: var(--type-size);
  color: transparent;
  text-transform: uppercase;
  mix-blend-mode: screen;
  transform: scale(var(--type-scale));
  padding: 0 24px;
}
.type-slot.empty { display: none; }
.type-slot.pos-top    { top: 56px; }
.type-slot.pos-center { top: 50%; transform: translateY(-50%) scale(var(--type-scale)); }
.type-slot.pos-bottom { bottom: 56px; }
.type-text { display: inline-block; position: absolute; left: 0; right: 0; padding: 0 24px; }
.type-text[data-layer="bg"] { position: relative; color: rgba(255,255,255,0.93); }
.type-text[data-layer="r"]  { color: #ff1f5e; transform: translateX(calc(var(--split) * -1)); mix-blend-mode: screen; }
.type-text[data-layer="g"]  { color: #00ffaf; transform: translateX(0); mix-blend-mode: screen; }
.type-text[data-layer="b"]  { color: #2d8cff; transform: translateX(var(--split)); mix-blend-mode: screen; }
@keyframes typeGlitchKick {
  0%   { transform: translateX(0); filter: blur(0); }
  15%  { transform: translateX(calc(var(--split) * 4)); }
  30%  { transform: translateX(calc(var(--split) * -3)); }
  60%  { transform: translateX(calc(var(--split) * 1.5)); }
  100% { transform: translateX(0); }
}
.type-slot.glitch .type-text[data-layer="r"],
.type-slot.glitch .type-text[data-layer="b"] {
  animation: typeGlitchKick 280ms cubic-bezier(0.2, 0.9, 0.4, 1);
}

/* ── Panel show button ────────────────────────────────────────────────── */
.panel-show {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9;
  background: rgba(0,0,0,0.65);
  border: 1px solid var(--border-hi);
  color: var(--fg);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: none;
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}
body.panel-hidden .panel-show { display: flex; }
.panel-show:hover { background: rgba(255,255,255,0.10); }

/* ── Controls-only popup mode — same vertical sidebar look ──────────────
   The popup window has no canvas or HUD; the panel fills the whole viewport
   using the SAME visual layout as the main sidebar. */
html.controls-only body { background: var(--bg-panel); }
html.controls-only .stage-wrap,
html.controls-only #splash,
html.controls-only #type-overlay,
html.controls-only .panel-show { display: none !important; }
html.controls-only .panel {
  position: static;
  width: 100%;
  height: 100vh;
  border-left: none;
  transform: none !important;
}
html.controls-only #panel-popout,
html.controls-only #panel-hide { display: none !important; }

/* ── Narrow viewports ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --panel-w: 100vw; }
  .stage-wrap { right: 0; }
}