/* Night ink, rice-paper text, jade for "alive" state, cinnabar only for the seal. */
:root{
  --ink:#172033; --ink2:#1F2A40; --ink3:#28344E; --line:#34425F;
  --paper:#EAE3D2; --mist:#9EA8BC; --jade:#6CC4A8; --jade-deep:#3E8F79; --cinnabar:#D2452E;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
.seal,.ep-title,.j-pct,.ep-n{font-variant-numeric:lining-nums tabular-nums}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:16px;line-height:1.5;background:var(--ink);color:var(--paper);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,.bar:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:10px}
svg{display:block;fill:currentColor}
.app{max-width:640px;margin:0 auto;padding:12px 16px calc(120px + env(safe-area-inset-bottom))}

/* ---- book switcher ---- */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 18px}
.book{text-align:left;padding:9px 11px 8px;border-radius:14px;background:var(--ink2);border:1px solid transparent;color:var(--mist);min-width:0}
.book b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:.86rem;line-height:1.3;color:var(--paper)}
.book small{display:block;font-size:.72rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book.on{border-color:var(--jade);background:var(--ink3)}
.book.on small{color:var(--jade)}

/* ---- stage: the episode being heard ---- */
.stage{background:var(--ink2);border-radius:24px;padding:20px 18px 18px}
.stage-head{display:flex;gap:16px;align-items:center}
.seal{
  flex:none;width:86px;height:86px;border-radius:9px;display:grid;place-items:center;
  background:
    radial-gradient(circle at 22% 78%,rgba(23,32,51,.28) 0 3px,transparent 4px),
    radial-gradient(circle at 81% 18%,rgba(23,32,51,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 64% 88%,rgba(23,32,51,.18) 0 5px,transparent 6px),
    var(--cinnabar);
  box-shadow:inset 0 0 0 4px var(--cinnabar),inset 0 0 0 6px rgba(234,227,210,.82);
  transform:rotate(-4deg);color:var(--paper);
  font-family:var(--serif);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.5px;
}
.seal.long{font-size:33px}
.seal.stamp{animation:stamp .45s cubic-bezier(.2,.9,.3,1.15)}
@keyframes stamp{0%{transform:rotate(-4deg) scale(1.4);opacity:0}55%{opacity:1}100%{transform:rotate(-4deg) scale(1)}}
.stage-meta{min-width:0}
.book-name{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.15;color:var(--mist)}
.ep-title{font-family:var(--serif);font-weight:700;font-size:2.1rem;line-height:1.05;margin:2px 0 4px}
.eta{font-size:.84rem;color:var(--jade);min-height:1.3em}
.eta.err{color:#F09A86}

.seek{margin:22px 0 4px}
.bar{--p:0%;position:relative;height:28px;cursor:pointer;touch-action:pan-y}
.bar::before{content:"";position:absolute;left:0;right:0;top:12px;height:5px;border-radius:5px;background:var(--line)}
.bar .fill{position:absolute;left:0;top:12px;height:5px;width:var(--p);border-radius:5px;background:var(--jade)}
.bar .knob{position:absolute;top:14.5px;left:var(--p);width:18px;height:18px;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(108,196,168,.25)}
.times{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--mist);font-variant-numeric:tabular-nums}
.buf{display:none;align-items:center;gap:6px}
.buf.on{display:inline-flex}
.buf .sp{width:11px;height:11px;border:2px solid var(--line);border-top-color:var(--jade);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.ctrls{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 18px}
.ctl{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--paper)}
.ctl:active,.mini .ctl:active{background:var(--ink3)}
.ctl svg{width:26px;height:26px}
.ctl.sm svg{width:22px;height:22px}
.play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--jade);color:var(--ink)}
.play:active{transform:scale(.95)}
.play svg{width:32px;height:32px}
.play .i-pause,.play.on .i-play{display:none}
.play.on .i-pause{display:block}

.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{text-align:left;padding:9px 12px;border-radius:14px;background:var(--ink3);min-width:0}
.opt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt-k{font-size:.72rem;color:var(--mist)}
.opt-v{font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.opt.on .opt-v{color:var(--jade)}

/* ---- journey through the whole book ---- */
.journey{padding:22px 4px 6px}
.j-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.j-ep{font-weight:600}
.j-pct{font-family:var(--serif);font-weight:700;font-size:1.6rem;line-height:1;color:var(--jade)}
.j-bar{height:4px;border-radius:4px;background:var(--line);margin:10px 0 10px;overflow:hidden}
.j-bar i{display:block;height:100%;width:0;background:var(--jade-deep)}
.j-note,.j-today{font-size:.86rem;color:var(--mist)}
.realm{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
.ladder{display:flex;gap:4px}
.ladder i{width:14px;height:4px;border-radius:2px;background:var(--line)}
.ladder i.lit{background:var(--jade)}
.realm-name{font-family:var(--serif);font-weight:700;font-size:1.15rem}
.realm-k{font-size:.78rem;color:var(--mist)}

/* ---- library ---- */
.library{margin-top:26px}
.lib-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.lib-head h2{font-family:var(--serif);font-weight:700;font-size:1.5rem;margin-right:auto;white-space:nowrap}
.now-chip{padding:7px 12px;border-radius:999px;background:var(--ink3);color:var(--jade);font-weight:600;font-size:.84rem;white-space:nowrap}
.find{width:96px;flex:0 1 auto;background:var(--ink2);border:1px solid var(--line);border-radius:999px;color:var(--paper);font:inherit;font-size:.9rem;padding:7px 13px}
.find::placeholder{color:var(--mist)}
.find:focus{outline:none;border-color:var(--jade)}
.ranges{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px 2px}
.ranges::-webkit-scrollbar{display:none}
.rg{--d:0%;flex:none;position:relative;padding:7px 12px 9px;border-radius:10px;background:var(--ink2);color:var(--mist);font-size:.84rem;font-weight:500;font-variant-numeric:tabular-nums;overflow:hidden}
.rg::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--d);background:var(--jade-deep)}
.rg.on{background:var(--ink3);color:var(--paper)}
.rg.here::before{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--jade)}
ul.eps{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.ep{--p:0%;position:relative;width:100%;padding:9px 4px 10px;border-radius:12px;background:var(--ink2);text-align:center;overflow:hidden}
.ep::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--p);background:var(--jade-deep)}
.ep-n{display:block;font-family:var(--serif);font-weight:700;font-size:1.35rem;line-height:1.05}
.ep-s{display:block;font-size:.68rem;color:var(--mist);margin-top:2px;white-space:nowrap}
.ep.done{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.ep.done .ep-n{color:var(--mist)}
.ep.on{background:var(--ink3);box-shadow:inset 0 0 0 2px var(--jade)}
.ep.on .ep-s{color:var(--jade)}
.empty{border:1px dashed var(--line);border-radius:16px;padding:26px 18px;text-align:center;color:var(--mist)}
.empty b{display:block;color:var(--paper);margin-bottom:4px}
.reload{margin-top:12px;padding:8px 16px;border-radius:999px;background:var(--jade);color:var(--ink);font-weight:600}

footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--mist)}
footer a{color:var(--mist)}
.vol{display:flex;align-items:center;gap:8px;flex:1 1 180px}
.vol input{flex:1;accent-color:var(--jade)}

/* ---- mini player: pinned while the main controls are off-screen ---- */
.mini{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(31,42,64,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);transition:transform .2s ease;visibility:hidden}
.mini.on{transform:none;visibility:visible}
.mini .mbar{height:3px;background:var(--line)}
.mini .mbar i{display:block;height:100%;width:0;background:var(--jade)}
.mini .mrow{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:8px 12px}
.mini .minfo{flex:1;min-width:0;text-align:left;padding:4px 4px;border-radius:10px}
.mini .mt{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .ms{color:var(--mist);font-size:.74rem;font-variant-numeric:tabular-nums}
.mini .ctl{width:44px;height:44px;flex:none}
.mini .play{width:52px;height:52px;flex:none}
.mini .play svg{width:24px;height:24px}

/* ---- bottom sheet for speed / sleep ---- */
.sheet-bg{position:fixed;inset:0;z-index:30;background:rgba(10,14,24,.55);opacity:0;transition:opacity .18s}
.sheet-bg.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;max-width:640px;margin:0 auto;background:var(--ink2);
  border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .2s ease}
.sheet.on{transform:none}
.sheet h3{font-family:var(--serif);font-weight:700;font-size:1.45rem;margin:0 4px 12px}
.sheet-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.sopt{padding:13px 8px;border-radius:14px;background:var(--ink3);font-weight:600;font-variant-numeric:tabular-nums}
.sopt.on{background:var(--jade);color:var(--ink)}
.sheet-note{font-size:.84rem;color:var(--mist);margin:12px 4px 0}

/* ---- playback log (#log) ---- */
.logbox{background:var(--ink2);border-radius:16px;padding:12px;margin-top:22px}
.loghead{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.loghead b{margin-right:auto}
.loghead button{padding:6px 12px;border-radius:999px;background:var(--ink3);font-size:.82rem;font-weight:600}
.logbox pre{font-size:.72rem;line-height:1.45;color:var(--mist);white-space:pre-wrap;word-break:break-word;max-height:50vh;overflow:auto}

@media (min-width:560px){ .stage{padding:26px 26px 22px} .seal{width:100px;height:100px;font-size:46px} .seal.long{font-size:38px} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }