@font-face {
  font-family: "CandaraLocal";
  src: url("assets/fonts/Candara.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #3896ac;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.76);
  --panel: rgba(255, 255, 255, 0.14);
  --panel-strong: rgba(255, 255, 255, 0.24);
  --line: rgba(255, 255, 255, 0.28);
  --font-scale: 1;
  --content-width: 95;
  --text-align: left;
  --shadow-color: rgba(0, 0, 0, 0.12);
  --reading-size: calc(min(3.8vw, 5.4vh) * var(--font-scale));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: CandaraLocal, Candara, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

body.ui-hidden { cursor: none; }

button, select, input, audio { font: inherit; }

.app {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.09), transparent 34rem),
    var(--bg);
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: max(0.85rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2rem) 0.75rem;
  opacity: 0.96;
  background: linear-gradient(rgba(32, 129, 149, 0.9), rgba(32, 129, 149, 0.58) 68%, transparent);
  transition: opacity 320ms ease, transform 320ms ease;
  z-index: 5;
}

.title {
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  line-height: 1.15;
  font-weight: 600;
}

.subtitle-label {
  color: var(--muted);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  margin-top: 0.15rem;
}

.toolbar,
.quick-controls,
.option-row,
.audio-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.toolbar { flex-wrap: wrap; justify-content: flex-end; }

.select-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.95rem;
}

select,
.pill-button,
.round-button,
.transport-button,
.icon-button,
.text-button {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--panel);
  border-radius: 999px;
  min-height: 42px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

select,
.pill-button,
.round-button,
.icon-button,
.text-button { padding: 0.58rem 0.88rem; }

button { cursor: pointer; }
button:hover, select:hover { background: var(--panel-strong); }
button:active { transform: translateY(1px); }
select { color-scheme: dark; }

.options-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: clamp(1rem, 3vw, 2rem);
  width: min(560px, calc(100vw - 2rem));
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 1.2rem;
  background: rgba(34, 130, 149, 0.82);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.option-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(140px, 2fr) 4ch;
  gap: 0.8rem;
  color: var(--muted);
}

.option-row output { color: var(--text); text-align: right; }
.option-row-select select { width: 100%; }
.text-button { justify-self: end; background: rgba(255, 255, 255, 0.10); }

.stage {
  position: relative;
  min-height: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(0.75rem, 2.5vw, 2rem);
  overflow: hidden;
}

.focus-text {
  width: min(calc(var(--content-width) * 1vw), calc(100vw - clamp(1rem, 3vw, 3rem)));
  text-align: var(--text-align);
  white-space: pre-line;
  font-size: clamp(1.35rem, var(--reading-size), 9rem);
  line-height: 1.11;
  letter-spacing: 0.004em;
  text-wrap: pretty;
  overflow-wrap: break-word;
  transition: opacity 380ms ease, transform 380ms ease;
  text-shadow:
    0 0 0.45em var(--shadow-color),
    0 0.035em 0.08em var(--shadow-color);
}

.focus-text.is-changing {
  opacity: 0;
  transform: translateY(0.2rem);
}

.scroll-text {
  width: min(calc(var(--content-width) * 1vw), calc(100vw - clamp(1rem, 3vw, 3rem)));
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 42vh 0;
  mask-image: linear-gradient(transparent 0%, #000 14%, #000 86%, transparent 100%);
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

.scroll-text::-webkit-scrollbar { width: 10px; }
.scroll-text::-webkit-scrollbar-track { background: transparent; }
.scroll-text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.34);
  border-radius: 999px;
}

.cue-line {
  white-space: pre-line;
  text-align: var(--text-align);
  font-size: clamp(1.35rem, var(--reading-size), 9rem);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.48);
  padding: 0.75rem clamp(0.25rem, 1vw, 1rem);
  border-radius: 0;
  transition: color 260ms ease, transform 260ms ease, opacity 260ms ease, text-shadow 260ms ease;
  text-shadow: 0 0 0.38em var(--shadow-color);
}

.cue-line.active {
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-weight: 400;
  transform: none;
  opacity: 1;
  text-shadow:
    0 0 0.45em var(--shadow-color),
    0 0.035em 0.08em var(--shadow-color);
}

.cue-line.past { color: rgba(255, 255, 255, 0.38); }

.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem clamp(1rem, 3vw, 2rem) max(1rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.08));
  transition: opacity 320ms ease, transform 320ms ease;
  z-index: 5;
}

body.ui-hidden .topbar {
  opacity: 0;
  transform: translateY(calc(-100% - env(safe-area-inset-top) - 1rem));
  pointer-events: none;
}

body.ui-hidden .controls {
  opacity: 0;
  transform: translateY(calc(100% + env(safe-area-inset-bottom) + 1rem));
  pointer-events: none;
}

.audio-card {
  min-width: 0;
  width: 100%;
  min-height: 58px;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 50px rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.transport-button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.92);
  color: #1d778c;
  border-color: rgba(255, 255, 255, 0.65);
}

.transport-button:hover { background: #fff; }

.icon-button {
  min-width: 58px;
  padding-inline: 0.75rem;
  background: rgba(255, 255, 255, 0.10);
}

.time-label {
  flex: 0 0 auto;
  min-width: 4.6ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
}

.progress-slider {
  flex: 1 1 auto;
  min-width: 80px;
}

.volume-slider { width: clamp(72px, 9vw, 130px); }

input[type="range"] {
  accent-color: white;
  cursor: pointer;
}

.progress-slider,
.volume-slider,
.option-row input[type="range"] {
  height: 6px;
}

.quick-controls {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.4rem;
}

.round-button {
  min-width: 44px;
  height: 44px;
  padding-inline: 0.75rem;
}

[data-mode="scroll"] .focus-text { display: none; }
[data-mode="scroll"] .scroll-text { display: block; }
[data-mode="focus"] .scroll-text { display: none; }

@media (max-width: 900px) {
  :root {
    --reading-size: calc(min(6.3vw, 4.8vh) * var(--font-scale));
  }
  body { overflow: hidden; }
  .app { min-height: 100dvh; }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    background: linear-gradient(rgba(32, 129, 149, 0.94), rgba(32, 129, 149, 0.72) 76%, transparent);
    padding-bottom: 2.25rem;
  }
  .toolbar { justify-content: flex-start; width: 100%; }
  .stage { padding-inline: 0.75rem; }
  .controls {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .audio-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    border-radius: 1.1rem;
  }
  .transport-button { grid-column: 1; grid-row: 1; }
  .quick-controls { grid-column: 2; grid-row: 1; justify-self: start; }
  #muteButton { grid-column: 3; grid-row: 1; justify-self: end; }
  .volume-slider { grid-column: 4; grid-row: 1; width: clamp(72px, 18vw, 100px); }
  .time-label:first-of-type { grid-column: 1; grid-row: 2; }
  .progress-slider { grid-column: 2 / 4; grid-row: 2; min-width: 0; width: 100%; }
  .time-label:last-of-type { grid-column: 4; grid-row: 2; }
  .options-panel {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
  .option-row {
    grid-template-columns: 1fr 3.5rem;
  }
  .option-row input { grid-column: 1 / -1; order: 3; }
}

@media (display-mode: fullscreen) {
  .topbar { opacity: 0.18; transition: opacity 240ms ease; }
  .topbar:hover, .topbar:focus-within { opacity: 1; }
}