/* ── Novara Audio — "die Bühne" ────────────────────────────────────────────
   The learner's own avatar is the player. Everything on this screen exists to
   light it: the ring is its progress, the floor is its stage, and the glow
   breathes with the actual audio. The avatar art is rendered on a dark violet
   backdrop with a cyan rim light, so the screen is built from the same palette
   — the figure belongs here rather than sitting on top of a page.
   ───────────────────────────────────────────────────────────────────────── */
.nv-pod{
  --amp:0;                     /* 0..1, written every frame from the analyser */
  --acc:var(--nv-cyan);
  position:fixed;inset:0;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 70% at 50% 18%, color-mix(in srgb,var(--nv-bg-3) 92%,var(--nv-violet)) 0%, transparent 62%),
    radial-gradient(90% 55% at 50% 100%, color-mix(in srgb,#000 55%,var(--nv-bg-3)) 0%, transparent 70%),
    var(--nv-bg);
  overflow:hidden;
}
.nv-pod::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 55% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%)}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.nv-pod-top{position:relative;z-index:3;display:flex;align-items:center;gap:.6rem;
  padding:calc(.65rem + env(safe-area-inset-top,0px)) .9rem .35rem}
.nv-pod-back{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:var(--nv-r-pill);
  background:var(--nv-glass);border:1px solid var(--nv-line);color:var(--nv-ink);
  display:grid;place-items:center;font-size:1.1rem;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.nv-pod-back:active{transform:scale(.94)}
.nv-pod-kicker{font:600 .7rem/1 var(--nv-font-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--nv-faint)}
.nv-pod-kicker b{color:var(--acc);font-weight:700}

/* ── the stage ───────────────────────────────────────────────────────────── */
.nv-pod-stage{position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:grid;place-items:center;padding:0 1rem}
.nv-pod-ring{position:relative;display:grid;place-items:center;
  width:min(84vw,330px);aspect-ratio:1}
.nv-pod-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);
  overflow:visible}
.nv-pod-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:3}
.nv-pod-prog{fill:none;stroke:url(#nvPodGrad);stroke-width:3.5;stroke-linecap:round;
  transition:stroke-dashoffset .25s linear;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--acc) 55%,transparent))}
.nv-pod-tick{stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round}

/* the halo breathes with the audio, the figure never moves */
.nv-pod-halo{position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,
    color-mix(in srgb,var(--nv-violet) calc(22% + 30%*var(--amp)),transparent) 0%,
    transparent 68%);
  opacity:calc(.5 + .5*var(--amp));
  transform:scale(calc(1 + .045*var(--amp)));
  will-change:opacity,transform;backface-visibility:hidden}
.nv-pod-fig{position:relative;z-index:2;width:88%;display:grid;place-items:center}
.nv-pod-fig .nv-fig{height:auto;width:100%}
/* The avatar art carries its own dark backdrop. Left square it reads as a
   pasted sticker, so it is feathered into a circle — the figure then stands in
   a pool of light rather than in a box, and its backdrop melts into the stage. */
.nv-pod-fig img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(circle at 50% 47%, #000 56%, rgba(0,0,0,.55) 68%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 47%, #000 56%, rgba(0,0,0,.55) 68%, transparent 78%);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))
         drop-shadow(0 0 16px color-mix(in srgb,var(--acc) 34%,transparent))}
/* the floor light under the figure */
.nv-pod-floor{position:absolute;z-index:1;bottom:5%;left:50%;translate:-50% 0;
  width:62%;height:12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb,var(--acc) 62%,transparent) 0%, transparent 72%);
  filter:blur(6px);opacity:calc(.45 + .55*var(--amp));
  transform:scaleX(calc(1 + .09*var(--amp)));
  will-change:opacity,transform;backface-visibility:hidden}

/* ── titles ──────────────────────────────────────────────────────────────── */
.nv-pod-meta{position:relative;z-index:3;text-align:center;padding:0 1.25rem .35rem}
.nv-pod-title{font:800 clamp(1.25rem,5.4vw,1.6rem)/1.18 var(--nv-font-display);
  margin:0 0 .3rem;text-wrap:balance;
  background:var(--nv-grad-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.nv-pod-now{font:500 .86rem/1.35 var(--nv-font-body);color:var(--nv-muted);
  min-height:2.4em;display:flex;align-items:center;justify-content:center;gap:.45rem}
.nv-pod-now .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:0 0 6px;
  box-shadow:0 0 8px var(--acc);opacity:calc(.4 + .6*var(--amp));will-change:opacity}

/* ── transport ───────────────────────────────────────────────────────────── */
.nv-pod-ctl{position:relative;z-index:3;padding:0 1.1rem calc(.7rem + env(safe-area-inset-bottom,0px))}
.nv-pod-bar{position:relative;height:26px;display:flex;align-items:center;cursor:pointer;
  touch-action:none}
.nv-pod-rail{position:absolute;left:0;right:0;height:5px;border-radius:var(--nv-r-pill);
  background:rgba(255,255,255,.09);overflow:hidden}
.nv-pod-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:var(--nv-r-pill);
  background:var(--nv-grad-h)}
.nv-pod-marks{position:absolute;left:0;right:0;height:5px;pointer-events:none}
.nv-pod-marks i{position:absolute;top:0;width:2px;height:5px;background:rgba(10,14,28,.85)}
.nv-pod-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  background:#fff;translate:-50% -50%;box-shadow:0 2px 10px rgba(0,0,0,.6),0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent);
  pointer-events:none}
.nv-pod-time{display:flex;justify-content:space-between;
  font:600 .72rem/1 var(--nv-font-body);color:var(--nv-faint);
  font-variant-numeric:tabular-nums;margin-top:.15rem}
.nv-pod-row{display:flex;align-items:center;justify-content:center;gap:1.15rem;margin-top:.5rem}
.nv-pod-btn{border:0;background:none;color:var(--nv-ink);cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
  font:600 .62rem/1 var(--nv-font-body);gap:.15rem;opacity:.86}
.nv-pod-btn:active{transform:scale(.9)}
.nv-pod-btn svg{width:26px;height:26px;fill:currentColor}
.nv-pod-play{width:68px;height:68px;border-radius:50%;border:0;cursor:pointer;
  background:var(--nv-grad);display:grid;place-items:center;color:#06121f;
  box-shadow:0 10px 26px color-mix(in srgb,var(--nv-violet) 45%,transparent),
             0 0 22px color-mix(in srgb,var(--acc) 45%,transparent);
  -webkit-tap-highlight-color:transparent}
.nv-pod-play:active{transform:scale(.95)}
.nv-pod-play svg{width:30px;height:30px;fill:currentColor}
.nv-pod-rate{position:absolute;right:1.1rem;bottom:calc(1.55rem + env(safe-area-inset-bottom,0px));
  font:700 .72rem/1 var(--nv-font-body);color:var(--nv-muted);background:var(--nv-glass);
  border:1px solid var(--nv-line);border-radius:var(--nv-r-pill);padding:.4rem .6rem;cursor:pointer;
  font-variant-numeric:tabular-nums}

/* ── section list (a sheet that slides up) ───────────────────────────────── */
.nv-pod-list{position:absolute;inset:auto 0 0;z-index:5;max-height:78%;
  background:color-mix(in srgb,var(--nv-bg-2) 92%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--nv-line);border-radius:26px 26px 0 0;
  padding:.5rem .9rem calc(1rem + env(safe-area-inset-bottom,0px));
  transform:translateY(101%);transition:transform .32s cubic-bezier(.32,.72,0,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.nv-pod-list[data-open="1"]{transform:translateY(0)}
.nv-pod-grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);
  margin:.35rem auto .7rem}
.nv-pod-sec{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--nv-r-tile);padding:.62rem .55rem;cursor:pointer;
  color:var(--nv-ink);-webkit-tap-highlight-color:transparent}
.nv-pod-sec[aria-current="true"]{background:var(--nv-glass);
  box-shadow:inset 3px 0 0 0 var(--acc)}
.nv-pod-sec .n{font:700 .74rem/1 var(--nv-font-body);color:var(--nv-faint);width:1.3rem;
  font-variant-numeric:tabular-nums}
.nv-pod-sec[aria-current="true"] .n{color:var(--acc)}
.nv-pod-sec .t{flex:1;font:600 .86rem/1.3 var(--nv-font-body)}
.nv-pod-sec .d{font:500 .74rem/1 var(--nv-font-body);color:var(--nv-faint);
  font-variant-numeric:tabular-nums}
.nv-pod-open{position:absolute;left:1.1rem;bottom:calc(1.55rem + env(safe-area-inset-bottom,0px));
  font:700 .72rem/1 var(--nv-font-body);color:var(--nv-muted);background:var(--nv-glass);
  border:1px solid var(--nv-line);border-radius:var(--nv-r-pill);padding:.4rem .6rem;cursor:pointer}
.nv-pod-scrim{position:absolute;inset:0;z-index:4;background:rgba(4,6,14,.5);opacity:0;
  pointer-events:none;transition:opacity .3s}
.nv-pod-scrim[data-open="1"]{opacity:1;pointer-events:auto}

/* ── the reward line: this episode feeds the avatar ──────────────────────── */
.nv-pod-reward{position:relative;z-index:3;margin:.1rem 1.1rem .35rem;
  display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  background:var(--nv-glass);border:1px solid var(--nv-line);border-radius:var(--nv-r-tile)}
.nv-pod-reward .nv-fig,.nv-pod-reward .nv-face{flex:0 0 auto}
.nv-pod-reward p{margin:0;font:500 .76rem/1.35 var(--nv-font-body);color:var(--nv-muted)}
.nv-pod-reward b{color:var(--nv-ink);font-weight:700}

@media (max-height:700px){
  .nv-pod-ring{width:min(56vw,215px)}
  .nv-pod-play{width:60px;height:60px}
  .nv-pod-reward{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nv-pod{--amp:0 !important}
  .nv-pod-halo,.nv-pod-floor,.nv-pod-prog,.nv-pod-play{transition:none}
  .nv-pod-list{transition:none}
}

/* ── the entry card that lives on a chapter page ─────────────────────────── */
.nv-podcard{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  background:linear-gradient(120deg,color-mix(in srgb,var(--nv-violet) 16%,transparent),
                                    color-mix(in srgb,var(--nv-cyan) 10%,transparent)),var(--nv-glass);
  border:1px solid color-mix(in srgb,var(--nv-violet) 32%,var(--nv-line));
  border-radius:var(--nv-r-card);padding:.85rem .95rem;cursor:pointer;color:var(--nv-ink);
  margin:1rem 0;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.nv-podcard:active{transform:scale(.99)}
.nv-podcard .ic{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  background:var(--nv-grad);color:#06121f;box-shadow:0 6px 18px color-mix(in srgb,var(--nv-violet) 45%,transparent)}
.nv-podcard .ic svg{width:22px;height:22px;fill:currentColor}
.nv-podcard .tx{flex:1;min-width:0}
.nv-podcard .tx strong{display:block;font:800 .98rem/1.2 var(--nv-font-display);margin-bottom:.12rem}
.nv-podcard .tx span{display:block;font:500 .76rem/1.3 var(--nv-font-body);color:var(--nv-muted)}
.nv-podcard .av{flex:0 0 auto;margin-left:.1rem}

/* ── locked ───────────────────────────────────────────────────────────────
   The avatar still stands on the stage and the episode is still named. What
   is missing is the transport — so the screen reads as something withheld,
   not something broken, and the only control is the one that opens it. */
.nv-pod-ring.is-locked .nv-pod-fig img{ filter:grayscale(.55) brightness(.62) }
.nv-pod-ring.is-locked::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px dashed color-mix(in srgb,var(--nv-muted) 45%,transparent);
}
.nv-pod-lock{
  position:relative;z-index:3;text-align:center;
  padding:0 1.5rem calc(1.4rem + env(safe-area-inset-bottom,0px));
}
.nv-pod-lock p{
  margin:0 0 .85rem;font:500 .9rem/1.45 var(--nv-font-body);color:var(--nv-muted);
  max-width:24rem;margin-inline:auto;text-wrap:balance;
}
.nv-pod-unlock{
  border:0;border-radius:var(--nv-r-pill);cursor:pointer;
  background:var(--nv-grad);color:#06121f;
  font:800 .95rem/1 var(--nv-font-display);padding:.95rem 1.7rem;
  box-shadow:0 10px 26px color-mix(in srgb,var(--nv-violet) 45%,transparent);
  -webkit-tap-highlight-color:transparent;
}
.nv-pod-unlock:active{ transform:scale(.97) }
.nv-podcard.is-locked{ opacity:.9 }
.nv-podcard.is-locked .ic{
  background:var(--nv-glass);border:1px solid var(--nv-line);color:var(--nv-muted);box-shadow:none;
}