/* Soundtrack popup — square 2px-bordered card, bottom-right, with a
   minimized circular play/pause variant. */

:root {
  --soundtrack-bg: #0e0e0e;
  --soundtrack-border: #ffffff;
  --soundtrack-text: #ffffff;
  --soundtrack-text-muted: #9e9e9e;
  --soundtrack-text-dim: #4a4a4a;
  --soundtrack-button-bg: #ffffff;
  --soundtrack-button-fg: #000000;
  --soundtrack-button-hover: #9e9e9e;
  --soundtrack-font: 'Titillium Web', system-ui, sans-serif;
}

.soundtrack {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 150;
  width: 300px;
  background: var(--soundtrack-bg);
  border: 2px solid var(--soundtrack-border);
  padding: 1.25rem;
  color: var(--soundtrack-text);
  font-family: var(--soundtrack-font);
  opacity: 0; transform: translateY(12px);
  transition: opacity 320ms ease, transform 320ms ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.soundtrack--in { opacity: 1; transform: translateY(0); }

.soundtrack__close {
  position: absolute; top: 0.5rem; right: 0.625rem;
  background: transparent; border: none;
  color: var(--soundtrack-text-dim); font-size: 1.25rem; line-height: 1;
  padding: 0.25rem 0.375rem; cursor: pointer;
  font-family: var(--soundtrack-font);
}
.soundtrack__close:hover { color: var(--soundtrack-text); }

.soundtrack__msg {
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--soundtrack-text-muted);
  margin: 0 0 1rem; padding-right: 1rem;
}

.soundtrack__cta {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--soundtrack-button-bg);
  color: var(--soundtrack-button-fg);
  border: none; padding: 0.625rem 1rem 0.625rem 0.625rem;
  font-family: var(--soundtrack-font); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; width: 100%;
  transition: background 140ms ease;
  text-decoration: none;
}
.soundtrack__cta:hover { background: var(--soundtrack-button-hover); }

.soundtrack__icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--soundtrack-button-fg);
  border-radius: 9999px;
}
.soundtrack__play {
  width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--soundtrack-button-fg);
  margin-left: 2px;
}
.soundtrack__pause { display: flex; gap: 2px; }
.soundtrack__pause i {
  width: 3px; height: 9px;
  background: var(--soundtrack-button-fg); display: block;
}
.soundtrack__label { flex: 1; text-align: left; }

.soundtrack-mini {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 150;
  width: 52px; height: 52px; border-radius: 9999px;
  background: var(--soundtrack-button-bg);
  color: var(--soundtrack-button-fg);
  border: 2px solid var(--soundtrack-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; transform: translateY(12px) scale(0.9);
  transition: opacity 320ms ease, transform 320ms ease, background 140ms ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.soundtrack-mini--in { opacity: 1; transform: translateY(0) scale(1); }
.soundtrack-mini:hover { background: var(--soundtrack-button-hover); }
.soundtrack-mini .soundtrack__icon { width: auto; height: auto; border: none; }
.soundtrack-mini .soundtrack__play { border-width: 7px 0 7px 11px; }
.soundtrack-mini .soundtrack__pause { gap: 3px; }
.soundtrack-mini .soundtrack__pause i { width: 4px; height: 13px; }

.soundtrack--ended { bottom: 6.25rem; }
.soundtrack--ended .soundtrack__cta { text-decoration: none; justify-content: space-between; }
.soundtrack--ended .soundtrack__cta svg { width: 14px; height: 14px; }