/* The Historinhas player (kit/story.js): the episode picker, the scene dots and the end card.
   On top of kit/shell.css. Nothing to read for the child: pictures, numbers and the voice. */
.story-eps{background:rgba(8,12,30,.62);align-items:center}
.story-eps .eps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:clamp(12px,1.6vw,22px);width:min(78rem,94vw);max-height:92dvh;overflow:auto;padding:clamp(8px,1.2vw,16px)}
.ep{position:relative;display:block;border:0;border-radius:24px;overflow:hidden;background:#fff;padding:0;text-align:left;cursor:pointer;box-shadow:0 10px 26px rgba(8,12,30,.35);transition:transform .15s;touch-action:manipulation}
.ep:hover,.ep:focus-visible{transform:scale(1.03)}
.ep:active{transform:scale(.97)}
.ep img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ep .n{position:absolute;top:.6rem;left:.6rem;min-width:3.4rem;height:3.4rem;padding:0 .5rem;border-radius:999px;background:#ffd23f;color:#141a33;font:900 1.9rem/1 Nunito,system-ui,sans-serif;display:grid;place-items:center;box-shadow:0 3px 10px rgba(8,12,30,.35)}
.ep .t{display:block;padding:.7rem .9rem 1rem;color:#141a33;font:800 1.125rem/1.25 Nunito,system-ui,sans-serif}
.ep.done .n{background:#7bd88f}
.ep.next{outline:6px solid #ffd23f;outline-offset:-6px;animation:story-pulse 1.6s ease-in-out infinite}
@keyframes story-pulse{50%{transform:scale(1.035)}}
#dots{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;max-width:60vw}
#dots i{width:1rem;height:1rem;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(8,12,30,.35)}
#dots i.seen{background:rgba(255,210,63,.75)}
#dots i.on{background:#ffd23f;transform:scale(1.35)}
.story-end .btns{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.story-end .round{width:7.5rem;height:7.5rem;border-radius:50%;border:6px solid #fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px rgba(8,12,30,.35);color:#fff;font:900 2.4rem/1 Nunito,system-ui,sans-serif;touch-action:manipulation}
.story-end .round svg{width:3.4rem;height:3.4rem;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.story-end .again{background:linear-gradient(180deg,#ffb347,#f5a623)}
.story-end .list{background:linear-gradient(180deg,#8f7bff,#6a55e8)}
.story-end .nextep{background:linear-gradient(180deg,#34c46a,#1f9e50);gap:0;grid-auto-flow:column}
.story-end .nextep svg{width:2.4rem;height:2.4rem}
.story-loading{background:rgba(8,12,30,.55)}
.story-loading .spin{width:5rem;height:5rem;border-radius:50%;border:8px solid rgba(255,255,255,.3);border-top-color:#ffd23f;animation:story-spin 1s linear infinite}
@keyframes story-spin{to{transform:rotate(360deg)}}
/* top left: the scene dots, and under them back, forward and the chapter list (Daniel, 26/09/2026) */
.story-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.story-top .hud-stat,.story-top .story-nav{position:static}
.icon-btn.chapter{width:auto;grid-auto-flow:column;gap:.45rem}
.icon-btn.chapter svg{width:1.6rem;height:1.6rem}
.icon-btn.chapter b{font:900 1.25rem/1 Nunito,system-ui,sans-serif;color:#141a33}
.icon-btn.skip svg{width:58%;height:58%;fill:none;stroke:#141a33;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}