/* ambisonic-player.css — inherits the site palette; override here, not in JS. */

.ambi {
  --ambi-grid:   #4a4a4a;
  --ambi-ring:   #8f8f8f;
  --ambi-text:   var(--text, #c9c9c9);
  --ambi-bright: var(--text-bright, #f2f2f2);
  --ambi-dim:    var(--text-dim, #6e6e6e);
  --ambi-line:   var(--line, #232323);

  position: relative;
  aspect-ratio: var(--ambi-aspect, 16 / 9);
  background: var(--bg, #000);
  border: 1px solid var(--ambi-line);
  overflow: hidden;
  font-family: var(--font, ui-monospace, Menlo, monospace);
  color: var(--ambi-text);
  user-select: none;
}
.ambi:focus-visible { outline: 1px solid var(--ambi-dim); outline-offset: 2px; }

.ambi__canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ambi__canvas.is-dragging { cursor: grabbing; }

/* ---- overlays ---- */
.ambi__hud {
  position: absolute; top: 0.75rem; z-index: 2; pointer-events: none;
  font-size: var(--step--1, 0.7rem); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ambi-dim);
}
.ambi__hud--tl { left: 0.85rem; }
.ambi__hud--tr { right: 0.85rem; font-variant-numeric: tabular-nums; }
.ambi__hud--tr span { color: var(--ambi-text); }

/* ---- the "listen" veil ---- */
.ambi__veil {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; background: color-mix(in srgb, var(--bg, #000) 72%, transparent);
  text-align: center; padding: 1rem;
}
.ambi.is-started .ambi__veil { display: none; }

.ambi__begin {
  font: inherit; font-size: var(--step-0, 0.82rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ambi-bright); background: transparent;
  border: 1px solid var(--ambi-dim); padding: 0.85rem 2.2rem; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ambi__begin:hover:not(:disabled) { border-color: var(--ambi-bright); }
.ambi__begin:disabled { color: var(--ambi-dim); border-color: var(--ambi-line); cursor: default; }

.ambi__note {
  margin: 0; font-size: var(--step--1, 0.7rem); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ambi-dim); line-height: 1.9;
}
.ambi__err { color: #b85c5c; }

/* ---- transport ---- */
.ambi__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg, #000) 88%, transparent), transparent);
  opacity: 0; transition: opacity 0.25s;
}
.ambi.is-started .ambi__bar { opacity: 1; }
.ambi:hover .ambi__bar, .ambi:focus-within .ambi__bar { opacity: 1; }

.ambi__bar button {
  font: inherit; font-size: var(--step--1, 0.7rem);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ambi-text); background: transparent;
  border: 1px solid var(--ambi-line); padding: 0.4rem 0.7rem; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.ambi__bar button:hover { color: var(--ambi-bright); border-color: var(--ambi-dim); }
.ambi__play { min-width: 4.4rem; }

.ambi__scrub { position: relative; flex: 1; height: 1px; background: var(--ambi-line); cursor: pointer; }
.ambi__scrub i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ambi-text); display: block; }
.ambi__scrub::after { content: ''; position: absolute; inset: -10px 0; }

.ambi__time {
  font-size: var(--step--1, 0.7rem); color: var(--ambi-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- full screen ---- */
.ambi:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border: 0; }
.ambi:fullscreen .ambi__bar { padding: 1.4rem 1.6rem; }

@media (max-width: 640px) {
  .ambi__time { display: none; }
  .ambi__hud { font-size: 0.62rem; }
}