/* ============================================================
   Suppress the legacy harlowe-audio side panel — its volume +
   mute UI is replaced by the .narr-mute button below.
   ============================================================ */
div#audio-controls { display: none !important; }

/* Hide Harlowe's built-in undo/redo sidebar (↶↷ arrows).
   The narration bar provides equivalent passage controls and
   the sidebar overlaps the cover image on the title splash. */
tw-sidebar { display: none !important; }

/* ============================================================
   Narration mode UI — floating control strip
   ============================================================ */
.narr-bar {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Georgia, "Times New Roman", serif;
}

.narr-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 23, 31, 0.85);
  color: #d4ccc0;
  border: 1px solid rgba(230, 182, 110, 0.4);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 22px -8px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(0,0,0,0.5);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.narr-toggle:hover {
  border-color: rgba(230, 182, 110, 0.8);
  background: rgba(28, 32, 41, 0.95);
  transform: translateY(-1px);
}
.narr-toggle__icon { font-size: 1.15rem; }
.narr-toggle--on {
  background: rgba(230, 182, 110, 0.18);
  border-color: rgba(230, 182, 110, 0.9);
  color: #f5dba0;
  box-shadow:
    0 8px 24px -6px rgba(230,182,110,0.4),
    inset 0 0 0 1px rgba(230, 182, 110, 0.3);
}
/* Browser blocked autoplay — pulse the toggle so the user notices
   they need to click anywhere to unblock narration. The status text
   says "Click anywhere to start narration." but it's small + hidden
   on mobile, so the toggle pulse is the visible signal. */
.narr-toggle--needs-gesture {
  animation: narr-needs-gesture 1.2s ease-in-out infinite;
}
@keyframes narr-needs-gesture {
  0%, 100% { box-shadow: 0 8px 24px -6px rgba(230,182,110,0.4), inset 0 0 0 1px rgba(230, 182, 110, 0.3); }
  50%      { box-shadow: 0 8px 30px -4px rgba(230,182,110,0.85), inset 0 0 0 2px rgba(230, 182, 110, 0.9); }
}
.narr-toggle--on .narr-toggle__icon {
  animation: narr-icon-pulse 2.6s ease-in-out infinite;
}
@keyframes narr-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.narr-mute {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 23, 31, 0.85);
  color: #d4ccc0;
  border: 1px solid rgba(230, 182, 110, 0.3);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 22px -8px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(0,0,0,0.5);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.narr-mute:hover {
  border-color: rgba(230, 182, 110, 0.7);
  background: rgba(28, 32, 41, 0.95);
  transform: translateY(-1px);
}
.narr-mute__icon { font-size: 1.05rem; line-height: 1; }
.narr-mute--on {
  color: #b76060;
  border-color: rgba(204, 85, 68, 0.7);
  background: rgba(204, 85, 68, 0.12);
}

.narr-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 23, 31, 0.85);
  border: 1px solid rgba(230, 182, 110, 0.3);
  border-radius: 999px;
  padding: 4px 12px 4px 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 22px -8px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(0,0,0,0.5);
}
.narr-controls[hidden] { display: none; }

.narr-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #d4ccc0;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.narr-btn:hover {
  background: rgba(230, 182, 110, 0.15);
  color: #f5dba0;
}

.narr-status {
  font-size: 0.85rem;
  color: #8a8f9c;
  margin-left: 6px;
  font-style: italic;
  min-width: 50px;
}

/* Reserve room at the bottom of the story so the floating .narr-bar
   doesn't sit on top of the choice links. The toggle pill is ~38px
   tall + 18px from the viewport bottom + shadow + breathing room.
   !important is required because Harlowe injects its own
   `tw-story { padding: 5% }` rule at runtime with the same specificity,
   and appears later in the cascade — so it would otherwise win. */
tw-story {
  padding-bottom: 96px !important;
}

@media (max-width: 640px) {
  .narr-bar { bottom: 10px; left: 10px; }
  .narr-toggle__label { display: none; }
  .narr-status { display: none; }
  tw-story { padding-bottom: 72px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .narr-toggle--on .narr-toggle__icon { animation: none; }
}