/* ============================================================
   CINEMA 3D — in-cinema HUD
   Dark cinematic, Oswald, one red accent, SVG icons only.
   ============================================================ */

/* ---------- cinema view shell ---------- */
#view-cinema {
  position: fixed;
  inset: 0;
  z-index: var(--z-cinema);
  background: #000;
  overflow: hidden;
}
#view-cinema[hidden] { display: none; }

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

.hidden-video {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

#hud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;
  font-family: var(--font);
  color: var(--text);
}
#hud > * { pointer-events: auto; }
#hud.idle #transport { opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }

#vignette {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-hud) - 5);
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

#grain {
  position: absolute;
  inset: -60px;
  z-index: calc(var(--z-hud) - 4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-18px, 12px); }
  66% { transform: translate(14px, -16px); }
  100% { transform: translate(0, 0); }
}

/* ---------- transport bar ---------- */
#transport {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(1060px, calc(100vw - 24px));
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 10px 16px 12px;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}

.tp-row { display: flex; align-items: center; gap: 10px; }
.tp-progress { margin-bottom: 8px; }
.tp-buttons { flex-wrap: wrap; row-gap: 8px; }

.tp-time {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-body);
  color: var(--text-dim);
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* range inputs */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
  --fill: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), rgba(255, 255, 255, 0.16) var(--fill));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--accent);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--accent);
}

.tp-seek { flex: 1 1 auto; min-width: 80px; }
.tp-vol { width: 96px; flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.icon-btn svg { width: 22px; height: 22px; display: block; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
.icon-btn.active, .icon-btn.showing { color: var(--accent); border-color: rgba(232, 16, 46, 0.5); }

.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tbtn svg { width: 20px; height: 20px; }
.tbtn:hover { color: var(--text); border-color: var(--hairline-strong); background: rgba(255, 255, 255, 0.05); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.12);
  color: #ffb020;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 176, 32, 0.25);
  transition: all var(--t-fast);
}
.pill svg { width: 18px; height: 18px; }
.pill.off {
  border-color: var(--hairline-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  box-shadow: none;
}

.tp-speed {
  min-height: 44px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-body);
  padding: 0 8px;
  cursor: pointer;
}

.tp-quality {
  position: absolute;
  right: 14px;
  top: -30px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-head);
  color: var(--text-dim);
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}
.tp-quality.adaptive { color: #ffb020; border-color: rgba(255, 176, 32, 0.5); }

/* ---------- panels ---------- */
.panel {
  position: absolute;
  right: 16px;
  bottom: 132px;
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: min(62vh, 560px);
  overflow-y: auto;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
  display: none;
}
.panel.open { display: block; animation: panel-in var(--t-med) var(--ease); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
}
.panel-sub {
  margin: 14px 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.ctl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.ctl-row input[type="range"] { width: 150px; flex: none; }
.ctl-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctl-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  text-transform: uppercase;
}
.ctl-hint { font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--ls-body); }

.ctl-select {
  min-height: 44px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  padding: 0 10px;
  cursor: pointer;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
.chip:hover { color: var(--text); border-color: var(--text-dim); }
.chip.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chip.ping { border-color: var(--accent); color: var(--accent); }

.btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  border-radius: 8px;
  min-height: 44px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--t-fast);
}
.btn-red { background: var(--accent); color: var(--accent-ink); }
.btn-red:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--hairline-strong); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn.wide { width: 100%; margin-top: 12px; }

/* toggle switch (mirrors landing) */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: all var(--t-fast);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: all var(--t-fast);
}
.switch input:checked + .track { background: rgba(232, 16, 46, 0.22); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(22px); background: var(--accent); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* EQ: compact vertical sliders */
.eq-row { display: flex; gap: 6px; justify-content: space-between; margin-top: 4px; }
.eq-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--ls-body);
}
.eq-cell input[type="range"].eq-v {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 22px; height: 92px;
  --fill: 50%;
}
.eq-cell input[type="range"].eq-v::-webkit-slider-runnable-track {
  width: 4px;
  background: linear-gradient(to top, var(--accent) var(--fill), rgba(255,255,255,0.16) var(--fill));
}
.eq-cell input[type="range"].eq-v::-webkit-slider-thumb { margin-left: -6px; }

/* speaker test grid */
.spk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- seat map ---------- */
.panel.seatmap {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 132px;
  width: 520px;
}
.panel.seatmap.open { animation: panel-in var(--t-med) var(--ease); }

.seatmap-screen {
  text-align: center;
  margin-bottom: 10px;
}
.seatmap-screen span {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.5em;
  color: var(--muted);
  border: 1px solid var(--hairline-strong);
  border-bottom: 3px solid rgba(232, 16, 46, 0.6);
  padding: 6px 18px 6px 24px;
  border-radius: 2px 2px 10px 10px;
}

.seatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: var(--ls-body);
}
.seatmap-legend .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: baseline;
}
.dot.less { background: #5c584f; }
.dot.good { background: #b07a2a; }
.dot.great { background: #f0e6d2; }
.dot.rec { background: transparent; border: 2px solid #2fae4e; width: 8px; height: 8px; }
.dot.sel { background: #d9a92e; }

.seatmap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  margin-bottom: 12px;
}
.seat-gap {
  min-height: 8px;
}
.seat-cell {
  aspect-ratio: 1 / 1;
  min-height: 30px;
  border-radius: 4px 4px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.seat-cell.less { background: #5c584f; }
.seat-cell.good { background: #b07a2a; }
.seat-cell.great { background: #f0e6d2; }
.seat-cell:hover { transform: scale(1.18); box-shadow: 0 0 12px rgba(255, 255, 255, 0.35); z-index: 1; }
.seat-cell.rec { outline: 2px solid #2fae4e; outline-offset: 1px; }
.seat-cell.sel { background: #d9a92e; box-shadow: 0 0 14px rgba(217, 169, 46, 0.7); }

.seatmap-readout {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  margin-bottom: 12px;
}
.sm-metrics {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-body);
  color: var(--text);
}
.sm-blurb {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ---------- seat pick hint ---------- */
#seat-hint {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 10, 10, 0.88);
  border: 1px solid rgba(217, 169, 46, 0.6);
  color: #e8c15a;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#seat-hint[hidden] { display: none; }
#seat-hint svg { width: 20px; height: 20px; }

/* ---------- pre-show leader ---------- */
#preshow-overlay {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-hud) + 10);
  display: none;
  align-items: center;
  justify-content: center;
  background: #0a0908;
  cursor: pointer;
}
#preshow-overlay.open { display: flex; }

/* in-cinema load-error card (QA bug 4): persistent, dismissible, retryable */
#cinema-error {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-hud) + 15);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 4, 3, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#cinema-error[hidden] { display: none; }
.ce-card {
  width: 400px;
  max-width: calc(100vw - 48px);
  background: rgba(14, 13, 11, 0.97);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  text-align: center;
}
.ce-card h2 {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--text);
}
.ce-card p { margin: 0 0 20px; color: var(--muted); font-size: var(--fs-sm); }
.ce-card .row { display: flex; gap: 10px; justify-content: center; }

.leader { text-align: center; color: #e8e2d4; }
.leader-brand {
  font-size: var(--fs-sm);
  letter-spacing: 0.5em;
  margin: 0 0 18px;
  color: var(--muted);
}
.leader-reel {
  position: relative;
  width: min(58vw, 340px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 3px solid #e8e2d4;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle, transparent 58%, rgba(232, 226, 212, 0.12) 59%, transparent 61%),
    radial-gradient(circle, transparent 78%, rgba(232, 226, 212, 0.12) 79%, transparent 81%);
}
.leader-cross-h, .leader-cross-v {
  position: absolute;
  background: rgba(232, 226, 212, 0.5);
}
.leader-cross-h { left: 0; right: 0; top: 50%; height: 1px; }
.leader-cross-v { top: 0; bottom: 0; left: 50%; width: 1px; }
.leader-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(232, 16, 46, 0.55), transparent 18%);
  animation: sweep 1s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.leader-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 600;
  color: #f5f2ec;
  text-shadow: 0 0 40px rgba(232, 16, 46, 0.5);
}
.leader-num.pop { animation: num-pop 0.9s var(--ease); }
@keyframes num-pop {
  0% { transform: scale(1.35); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.96); opacity: 1; }
}
.leader-foot {
  margin: 18px 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.34em;
  color: var(--muted);
}
.leader.static h1 {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-head);
  margin: 8px 0 0;
}

/* ---------- shortcuts modal ---------- */
#room-modal {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-hud) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
}
#room-modal[hidden] { display: none; }
/* inline spinner for the CREATE / JOIN buttons while the network settles */
.wt-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: wt-spin 0.7s linear infinite;
}
@keyframes wt-spin {
  to { transform: rotate(360deg); }
}
.modal-card {
  width: 380px;
  max-width: 100%;
  background: rgba(14, 14, 14, 0.97);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}
.sc-list { margin: 0; }
.sc-list > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}
.sc-list dt {
  flex: none;
  min-width: 86px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  color: var(--accent);
  text-transform: uppercase;
}
.sc-list dd { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); letter-spacing: var(--ls-body); }

/* ---------- toasts ---------- */
#toast-root {
  position: fixed;
  left: 50%;
  bottom: 132px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 40px);
}
#toast-root .toast {
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-body);
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  animation: toast-in var(--t-med) var(--ease);
  text-align: center;
}
#toast-root .toast.out { opacity: 0; transform: translateY(8px); transition: all 400ms var(--ease); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  #transport { padding: 8px 10px 10px; border-radius: 12px; }
  .tp-buttons { gap: 6px; }
  .tbtn span { display: none; }
  .tbtn { padding: 8px 10px; }
  .tp-vol { width: 72px; }
  .tp-quality { top: -28px; right: 8px; }
  .panel {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 150px;
    max-height: 52vh;
  }
  .panel.seatmap { transform: none; width: auto; }
  .seatmap-grid { gap: 4px; }
  .seat-cell { min-height: 26px; }
  .spk-grid { grid-template-columns: repeat(2, 1fr); }
  #toast-root { bottom: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
  .leader-sweep { animation: none; }
  .leader-num.pop { animation: none; }
  #transport, .panel.open, #toast-root .toast { transition: none; animation: none; }
}

/* ==================== EMBED MODE (YouTube / Vimeo) ====================
   The official player iframe, tracked onto the 3D screen's projection
   every frame. The auditorium stays live around it. pointer-events:none
   keeps our transport in charge — the tap fallback is the only click
   target, shown when autoplay-with-sound is blocked. */
#embed-screen {
  position: absolute;
  z-index: 205; /* above the canvas, below the HUD (210) */
  pointer-events: none;
  overflow: hidden;
  border-radius: 6px;
  opacity: 0;
  visibility: visible;
  transition: opacity 0.9s ease;
  /* the glowing screen in a dark room */
  box-shadow:
    0 0 60px rgba(255, 240, 220, 0.14),
    0 0 140px rgba(232, 16, 46, 0.07);
}
#embed-screen.live { opacity: 1; }
#embed-screen .embed-mount,
#embed-screen .embed-mount iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
/* embedding-disabled / private video: a projection-booth notice card,
   styled like the house — never a black screen stare */
.embed-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #1a0d10 0%, #060606 70%);
  text-align: center;
  padding: 24px;
}
.eb-kicker {
  font-family: var(--font-cond, 'Oswald', sans-serif);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red, #e8102e);
}
.eb-msg {
  font-family: var(--font-cond, 'Oswald', sans-serif);
  font-size: clamp(16px, 2.4vw, 26px);
  letter-spacing: 0.04em;
  color: #f2ede6;
  max-width: 34ch;
  line-height: 1.5;
}
/* autoplay fallback: the one real button in embed mode */
#embed-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid rgba(232, 16, 46, 0.65);
  border-radius: 999px;
  background: rgba(10, 4, 6, 0.82);
  color: #f5f0ea;
  font-family: var(--font-cond, 'Oswald', sans-serif);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#embed-tap[hidden] { display: none; }
#embed-tap svg { color: var(--red, #e8102e); }
#embed-tap:hover { border-color: var(--red, #e8102e); }

@media (prefers-reduced-motion: reduce) {
  #embed-screen { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Cheer button + confetti canvas                                       */
/* ------------------------------------------------------------------ */
.pill.cheer-pill {
  border-color: rgba(255, 93, 126, 0.55);
  background: rgba(255, 93, 126, 0.12);
  color: #ff7d9c;
  box-shadow: 0 0 18px rgba(255, 93, 126, 0.25);
}
.pill.cheer-pill:hover {
  border-color: #ff5d7e;
  color: #ff9db4;
  box-shadow: 0 0 26px rgba(255, 93, 126, 0.45);
}
.pill.cheer-pill:active { transform: scale(0.96); }

#cheer-canvas {
  position: fixed;
  inset: 0;
  z-index: 205; /* above the 3D canvas, below the HUD (210) */
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Surround unfold chain (audio panel)                                  */
/* ------------------------------------------------------------------ */
.unfold {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 6px 10px;
  overflow-x: auto;
}
.uf-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.uf-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--hairline-strong);
  background: var(--bg-3);
  transition: all var(--t-fast);
}
.uf-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-head);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.uf-node.active .uf-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 14px rgba(232, 16, 46, 0.8);
  animation: uf-pulse 0.9s ease-in-out infinite;
}
.uf-node.active .uf-label { color: var(--text); }
@keyframes uf-pulse {
  50% { box-shadow: 0 0 22px rgba(232, 16, 46, 1); transform: scale(1.15); }
}
.uf-link { flex: 1 1 24px; min-width: 18px; height: 14px; }
.uf-link svg { width: 100%; height: 100%; display: block; }
.uf-link line {
  stroke: var(--hairline-strong);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  animation: uf-flow 0.9s linear infinite;
}
@keyframes uf-flow {
  to { stroke-dashoffset: -10; }
}
@media (prefers-reduced-motion: reduce) {
  .uf-link line { animation: none; }
  .uf-node.active .uf-dot { animation: none; }
}