@font-face{font-family:'Yatra One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/yatra-one.woff2') format('woff2'),url('../fonts/yatra-one.ttf') format('truetype')}
:root{--blue:#1948ac;--navy:#143576;--pale:#f0f7fc;--ink:#19386c;--muted:#526987}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;color:var(--ink);font-family:'Yatra One','Trebuchet MS',sans-serif;line-height:1.65;background:white}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ffcc57;outline-offset:5px}.preview{background:#102c64;color:#dce9ff;text-align:center;font-size:11px;padding:5px 20px;letter-spacing:.05em}header{display:flex;align-items:center;gap:32px;background:var(--blue);color:white;padding:19px 5%;border-bottom:1px solid #ffffff24}.brand{font-weight:800;font-size:23px;letter-spacing:-.7px;white-space:nowrap}nav{display:flex;gap:27px;margin-left:auto;font-size:13px;font-weight:bold}nav a:hover{opacity:.7}.headright{display:flex;align-items:center;gap:3px}.lang{border:1px solid #ffffff60;background:none;color:white;padding:5px 9px;font-size:11px;font-weight:bold}.lang.active{background:white;color:var(--blue)}.login{border:0;background:none;color:white;font-size:12px;margin-left:16px}.hero{background:var(--blue);color:white;position:relative;padding:60px 0 75px}.hero:after{content:'';position:absolute;bottom:0;left:0;right:0;height:13px;background:repeating-linear-gradient(90deg,white 0 28px,transparent 28px 56px)}.herowrap{max-width:1240px;margin:auto;padding:0 5%;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.eyebrow{display:block;font-weight:800;font-size:11px;letter-spacing:.14em;margin:0 0 15px}.hero .eyebrow{color:#c6dfff}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(38px,4.9vw,65px);line-height:1.06;letter-spacing:-2px;margin-bottom:25px}h2{font-size:clamp(29px,3vw,42px);line-height:1.18;letter-spacing:-1px;margin-bottom:20px}h3{font-size:21px;line-height:1.3;letter-spacing:-.4px;margin-bottom:12px}.lead{font-size:16px;color:#e4edff;max-width:460px;line-height:1.8}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}.button{display:inline-flex;justify-content:center;align-items:center;padding:13px 21px;border-radius:50px;border:1px solid transparent;font-size:12px;font-weight:800;line-height:1.4;transition:transform .15s}.button:hover{transform:translateY(-2px)}.white{background:white;color:var(--blue)}.outline{border-color:#ffffff9c;color:white}.blue{background:var(--blue);color:white}.micro{font-size:11px;color:#c4d7fa;margin:20px 0 0}.heroart{position:relative}.heroart img{width:100%;display:block;border-radius:28px;aspect-ratio:1.05;object-fit:cover;object-position:78% center;border:5px solid #ffffff20}.artnote{position:absolute;bottom:20px;left:-15px;right:15px;padding:11px 16px;background:white;color:var(--navy);border-radius:8px;box-shadow:0 5px 25px #0b285525;font-size:12px;font-weight:bold;transform:none;text-align:center}.section{max-width:1240px;margin:auto;padding:75px 5%}.sectiontitle{text-align:center;margin-bottom:38px}.sectiontitle p{max-width:630px;margin:auto;color:var(--muted)}.meet{padding-top:70px}.characters{display:grid;grid-template-columns:1fr 1fr;gap:24px}.characters article{display:flex;gap:22px;align-items:center}.characters img{width:42%;border-radius:50% 50% 40% 40%;background:var(--pale)}.characters p{font-size:13px;margin:0;color:var(--muted)}.tag{font-size:10px;letter-spacing:.09em;font-weight:800;color:var(--blue);display:block;margin-bottom:9px}.characters h3{font-size:29px}.episodes{padding-top:35px}.watchgrid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.watchcard,.firstepisode{border:1px solid #dfeaf5;border-radius:20px;overflow:hidden;background:var(--pale)}.watchcard video{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#c4dfe8;display:block}.watchcard>div,.firstepisode>div:not(.firstart){padding:25px}.watchgrid p{font-size:13px;color:var(--muted);margin-bottom:0}.firstart{position:relative}.firstart img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.pill{display:inline-block;border-radius:30px;background:#e7f0fc;color:var(--blue);padding:5px 11px;font-size:10px;font-weight:bold}.firstart .pill{position:absolute;bottom:15px;left:20px;background:white}.storylist{margin-top:30px;display:grid;gap:0}.storylist article{border-bottom:1px solid #dfe6f1;padding:22px 8px;display:flex;align-items:center;gap:25px}.storylist article>span{font-size:28px;color:#93adce;font-weight:bold}.storylist h3{font-size:17px;margin:4px 0}.storylist small{font-size:9px;letter-spacing:.08em;color:var(--muted);font-weight:bold}.storylist b{margin-left:auto;color:var(--blue);font-size:25px}.parents{background:var(--pale)}.parents .sectiontitle{text-align:left}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.benefits article>span{font-size:12px;font-weight:bold;color:#7895bd;display:block;margin-bottom:20px}.benefits h3{font-size:19px}.benefits p{font-size:14px;color:var(--muted);margin:0}.offersection{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:90px}.offercopy p{color:var(--muted);font-size:15px}.offerfoot{font-size:12px!important;margin-top:25px}.pricecard{border:1px solid #d5e4f4;padding:35px;border-radius:24px;box-shadow:0 12px 40px #173f7910}.pricecard h3{margin-top:20px;font-size:25px}.price{font-size:54px;font-weight:800;letter-spacing:-2px;line-height:1.1}.pricecard p{font-size:12px;color:var(--muted);margin-top:9px}.pricecard ul{list-style:none;padding:18px 0;margin:0;border-top:1px solid #e0eaf5}.pricecard li{font-size:13px;margin-bottom:10px;display:flex;gap:10px}.pricecard li:before{content:'✓';color:var(--blue);font-weight:bold}.pricecard .button{width:100%}.pricecard small{display:block;text-align:center;font-size:10px;color:var(--muted);margin-top:12px}.school{padding-top:30px;padding-bottom:50px;display:flex;align-items:center;gap:30px;border-top:1px solid #e1eaf4}.school h2{font-size:30px}.school p{max-width:720px;color:var(--muted);font-size:14px}.schoolicon{font-size:100px;color:#bdd8ed;margin-left:auto}.newsletter{background:var(--blue);color:white;text-align:center;position:relative}.newsletter:before{content:'';display:block;height:12px;background:repeating-linear-gradient(90deg,white 0 28px,transparent 28px 56px)}.newsletter .section{max-width:720px;padding-top:60px;padding-bottom:60px}.newsletter .eyebrow{color:#c6dfff}.newsletter p{color:#dbe8ff;font-size:15px}.newsletter small{display:block;font-size:10px;max-width:440px;margin:18px auto 0;color:#cadcff}footer{background:#123473;color:#e5efff;display:flex;gap:25px;align-items:center;padding:30px 5%;font-size:10px}footer .brand{font-size:20px}footer p{margin:0}footer>span{margin-left:auto}footer button{border:0;background:none;color:inherit;text-decoration:underline;font-size:10px}dialog{border:0;border-radius:24px;padding:42px;max-width:460px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 25px 100px #1027524a}dialog::backdrop{background:#0e24499c;backdrop-filter:blur(5px)}dialog h2{font-size:28px}dialog p{font-size:15px;color:var(--muted)}.close{position:absolute;right:17px;top:10px;border:0;background:none;color:var(--muted);font-size:28px}.closebutton{margin-top:8px}@media(min-width:1450px){header,footer{padding-left:calc((100vw - 1120px)/2);padding-right:calc((100vw - 1120px)/2)}}@media(max-width:900px){header{gap:15px}nav{gap:15px;font-size:11px}.brand{font-size:20px}.login{display:none}.herowrap{gap:25px}.hero{padding-top:40px}.heroart img{aspect-ratio:.85}.hero .button{padding:12px 15px;font-size:11px}.characters article{gap:15px}.characters img{width:37%}.tag{font-size:9px}.offersection{gap:40px}.benefits{gap:25px}footer p{display:none}}@media(max-width:620px){html{scroll-padding-top:20px}header{flex-wrap:wrap;padding:15px 6%;gap:12px}.brand{font-size:21px}.headright{margin-left:auto}nav{order:3;width:100%;justify-content:space-between;border-top:1px solid #ffffff2e;padding-top:12px;margin:0}.preview{font-size:9px}.hero{padding-top:30px;padding-bottom:40px}.herowrap{display:flex;flex-direction:column;padding:0 6%;gap:30px}.herocopy{width:100%}h1{font-size:43px;letter-spacing:-1.5px}h2{font-size:31px}.lead{font-size:14px}.heroart{width:100%}.heroart img{aspect-ratio:1.3;object-position:75% center;border-radius:20px}.artnote{font-size:10px;left:12px;right:12px;bottom:12px}.section{padding:48px 6%}.eyebrow{font-size:9px;letter-spacing:.1em}.sectiontitle{margin-bottom:28px}.sectiontitle p{font-size:13px}.characters{grid-template-columns:1fr;gap:30px}.characters img{width:36%}.characters p{font-size:12px}.characters h3{font-size:25px}.watchgrid{grid-template-columns:1fr;gap:22px}.episodes{padding-top:10px}.watchcard video,.firstart img{aspect-ratio:16/10}.storylist article{gap:15px;padding:18px 0}.storylist h3{font-size:14px}.storylist article>span{font-size:24px}.storylist small{font-size:8px}.benefits{grid-template-columns:1fr;gap:25px}.benefits article>span{margin-bottom:7px}.benefits h3{margin-bottom:8px}.benefits p{font-size:13px}.offersection{grid-template-columns:1fr;gap:20px}.offercopy p{font-size:14px}.pricecard{padding:28px}.school{padding-top:30px;padding-bottom:30px}.schoolicon{display:none}.school h2{font-size:26px}.newsletter .section{padding:45px 6%}.newsletter p{font-size:13px}footer{flex-wrap:wrap;gap:12px;padding:25px 6%}footer .brand{width:100%}footer>span{margin:0}footer button{margin-left:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.firstepisode video{display:block;width:100%;aspect-ratio:16/9;background:#102c64;object-fit:contain}.episode-tools{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 12px}.coloring-link{border-color:#b3c7e1;color:var(--navy);background:white}.firstepisode small{color:var(--muted);font-size:11px}#quiz-dialog{max-width:560px;max-height:90dvh;overflow:auto}#quiz-answers{display:grid;gap:10px;margin:20px 0}.quiz-answer{border:2px solid #d8e5f3;background:#f0f7fc;color:var(--ink);border-radius:14px;padding:14px;text-align:left;line-height:1.4}.quiz-answer:hover:not(:disabled){border-color:var(--blue)}.quiz-answer:disabled{opacity:1;color:var(--ink);cursor:default}.quiz-answer.correct{border-color:#237a48;background:#effaf2}.quiz-answer.wrong{border-color:#b6533d;background:#fff2ed}#quiz-feedback{min-height:52px;font-size:15px}.quiz-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;color:var(--ink)}#quiz-next[hidden]{display:none}@media(max-width:620px){#quiz-dialog{padding:32px 23px}.episode-tools .button{width:100%}}

.more-episodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:32px}.episode-card{border:1px solid #dfe6f1;border-radius:18px;overflow:hidden;background:white}.episode-card video{display:block;width:100%;aspect-ratio:16/9;background:#101726}.episode-copy{padding:24px}.episode-copy h3{margin:10px 0 0;font-size:22px;line-height:1.35}@media(max-width:700px){.more-episodes{grid-template-columns:1fr}.episode-copy{padding:20px}.episode-copy h3{font-size:20px}}
/* Picture answers for the animal quiz */
#quiz-dialog{max-width:670px}#quiz-dialog h2{font-size:26px}#quiz-answers{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quiz-answer{text-align:center;padding:8px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}.quiz-answer img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px}.quiz-answer span{font-weight:bold;font-size:14px;padding:0 2px 5px}.quiz-answer.correct:after{content:'✓';position:absolute;right:14px;top:14px;background:#237a48;color:white;width:27px;height:27px;border-radius:50%;font-weight:bold}.quiz-guide{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin:10px 0 20px}.quiz-guide img{border-radius:50%;object-fit:cover}.quiz-mushika{display:block;margin:auto;border-radius:50%;object-fit:cover}.quiz-mushika[hidden]{display:none}@media(max-width:440px){#quiz-dialog{padding:32px 16px}#quiz-dialog h2{font-size:22px}#quiz-answers{gap:7px}.quiz-answer{padding:5px;gap:7px}.quiz-answer span{font-size:12px}}

#quiz-next{font-size:28px;min-width:76px;min-height:56px;padding:8px 23px}.quiz-answer{padding:6px}.quiz-answer img{aspect-ratio:1;min-width:0}.quiz-answer.correct:after{font-size:20px;line-height:27px}

.quiz-speech{position:relative;max-width:380px;margin:8px auto 18px}#quiz-speaker{display:block;width:100%;max-height:210px;aspect-ratio:16/9;object-fit:contain;background:#143576;border-radius:15px}#quiz-speaker[hidden],#quiz-replay[hidden],#quiz-voice-note[hidden]{display:none}#quiz-replay{position:absolute;right:8px;top:8px;border:2px solid white;background:#fff;color:var(--blue);border-radius:50%;width:48px;height:48px;font-size:24px;box-shadow:0 3px 14px #17357533}#quiz-replay.needs-tap{outline:4px solid #ffcc57}#quiz-voice-note{font-size:12px;text-align:center;margin-bottom:12px}#quiz-dialog h2{font-size:23px;margin-bottom:12px}#quiz-feedback{min-height:0}#quiz-dialog .quiz-guide{margin:4px 0 12px}#quiz-dialog .quiz-mushika{display:none}@media(max-height:740px){#quiz-speaker{max-height:145px}#quiz-dialog{padding-top:30px;padding-bottom:25px}.quiz-speech{max-width:260px;margin-bottom:10px}#quiz-dialog h2{font-size:20px}#quiz-answers{margin:12px 0}}

#quiz-speaker.square-clip{aspect-ratio:1;max-width:220px;margin:auto;background:#c6e2ec}@media(max-height:740px){#quiz-speaker.square-clip{max-width:145px}}

.episode-coming{aspect-ratio:16/9;background:#e7f1fb;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}.episode-coming>span:first-child{font-size:48px;color:#94b2d2;font-weight:bold}.episode-coming .pill{background:white}
/* Keep the caption evenly inset inside the character image. */
.heroart .artnote{left:18px;right:18px;bottom:18px;max-width:calc(100% - 36px);padding:12px 16px;line-height:1.5;transform:none;text-wrap:balance;overflow-wrap:break-word}@media(max-width:620px){.heroart .artnote{left:12px;right:12px;bottom:12px;max-width:calc(100% - 24px);padding:10px 12px;font-size:11px}}

#episode2-quiz{border:0;border-radius:24px;padding:32px;max-width:700px;width:calc(100% - 32px);max-height:90vh;overflow:auto;color:var(--ink,#183f63)}#episode2-quiz::backdrop{background:#102c49b8}.ep-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ep-answers img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}.ep-replay{border:0;border-radius:50%;background:#e8f4fb;font-size:28px;padding:12px;cursor:pointer}.ep-feedback{min-height:3em}#episode2-quiz .quiz-close{float:right}#episode2-quiz h2{font-size:clamp(21px,4vw,30px);margin:18px 0}#aflevering-2 .episode-tools{flex-wrap:wrap}#aflevering-2 small{display:block;margin-top:12px}@media(max-width:500px){#episode2-quiz{padding:20px}.ep-answers{gap:7px}}

#episode2-quiz [hidden]{display:none!important}

#episode2-quiz .ep-video{display:block;width:100%;max-height:30vh;object-fit:contain;background:#d5ebfa;border-radius:16px;margin:12px 0}#episode2-quiz .ep-replay{font-size:22px;padding:8px 12px}#episode2-quiz .ep-audio-note{font-size:12px}

/* ===== Echte website: spelers, slot, account, winkel, nieuwsbrief ===== */
[hidden]{display:none!important}
.player{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#102c64;overflow:hidden}
.player>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.playbtn{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(180deg,#10265200 45%,#10265266);display:flex;align-items:center;justify-content:center;color:var(--blue);padding:0}
.playbtn .circle{width:74px;height:74px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 30px #0b285540;transition:transform .15s;padding-left:5px}
.playbtn:hover .circle{transform:scale(1.07)}
.player.locked .circle{padding-left:0;font-size:24px}
.lockbadge{position:absolute;left:14px;bottom:14px;background:white;color:var(--blue);border-radius:30px;padding:5px 12px;font-size:10px;font-weight:800;letter-spacing:.05em;pointer-events:none}
.player:not(.locked) .lockbadge{display:none}
.player.unlocked .lockbadge{display:none}
.player .loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:13px;background:#102c64cc}
.watchcard .player{aspect-ratio:16/10}
.episode-tools .button[aria-disabled="true"]{opacity:.55}
.toolsnote{display:block;font-size:11px;color:var(--muted)}
/* account */
.login{display:inline-flex;align-items:center;gap:6px}
.accountbox p{margin-bottom:6px}
.accountbox .email{font-size:14px;color:var(--ink);word-break:break-all}
.accountbox .status{display:inline-block;margin:10px 0 18px;border-radius:30px;padding:5px 12px;font-size:11px;font-weight:800;background:#e7f0fc;color:var(--blue)}
.accountbox .status.ok{background:#effaf2;color:#237a48}
.dialogactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.dialogactions .button{flex:1 1 auto}
.linkbutton{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:12px;padding:6px 0}
.owned{display:none}
body.has-access .owned{display:flex}
body.has-access .notowned{display:none!important}
.pricecard .owned{flex-direction:column;gap:10px;align-items:stretch}
.pricecard .owned .status{text-align:center;color:#237a48;font-size:13px;font-weight:800}
/* winkel */
.shop{border-top:1px solid #e1eaf4}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,340px));justify-content:center;gap:24px}
.product{border:1px solid #dfe6f1;border-radius:18px;overflow:hidden;background:white;display:flex;flex-direction:column}
.product img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--pale);display:block}
.product div{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.product h3{font-size:18px;margin:0}
.product p{font-size:13px;color:var(--muted);margin:0}
.product .productprice{font-size:22px;font-weight:800;color:var(--ink);margin-top:auto;padding-top:8px}
.product .button{margin-top:8px}
.shopnote{text-align:center;font-size:11px;color:var(--muted);margin-top:22px}
/* nieuwsbrief */
.signup{display:flex;gap:8px;max-width:460px;margin:22px auto 0;flex-wrap:wrap;justify-content:center}
.signup input[type=email]{flex:1 1 220px;border:0;border-radius:50px;padding:13px 20px;font:inherit;font-size:13px;color:var(--ink)}
.signup .consent{flex-basis:100%;font-size:10px;color:#cadcff;display:flex;gap:8px;align-items:flex-start;text-align:left;justify-content:center}
.hp{position:absolute!important;left:-5000px!important}
/* melding na betaling */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#123473;color:white;padding:14px 22px;border-radius:14px;box-shadow:0 10px 40px #0b285560;font-size:13px;z-index:20;max-width:calc(100% - 32px);text-align:center}
.toast[hidden]{display:none}
/* privacypagina */
.legal{max-width:760px;margin:auto;padding:60px 6%}
.legal h1{font-size:clamp(32px,4vw,46px);letter-spacing:-1px}
.legal h2{font-size:22px;margin:34px 0 10px;letter-spacing:-.3px}
.legal p,.legal li{font-size:14px;color:var(--muted);font-family:'Trebuchet MS',sans-serif;line-height:1.75}
.legal table{border-collapse:collapse;width:100%;font-size:13px;font-family:'Trebuchet MS',sans-serif;color:var(--muted)}
.legal th,.legal td{border-bottom:1px solid #e0eaf5;padding:9px 8px;text-align:left;vertical-align:top}
.legal th{color:var(--ink)}
.todo{background:#fff3c4;color:#6b5100;padding:0 4px;border-radius:4px}
@media(max-width:900px){.login{display:inline-flex}}
@media(max-width:620px){.shopgrid{grid-template-columns:minmax(0,1fr)}.playbtn .circle{width:60px;height:60px;font-size:22px}.legal table{font-size:12px}}
/* Intro los in het midden, daaronder de afleveringen in twee kolommen */
.watchgrid{grid-template-columns:minmax(0,660px);justify-content:center}
.more-episodes .firstepisode{border-radius:18px}
.more-episodes .firstepisode>div:not(.player){padding:24px}
.more-episodes .firstepisode h3{margin:10px 0 8px;font-size:22px;line-height:1.35}
.more-episodes .firstepisode p{font-size:13px;color:var(--muted);margin-bottom:0}
@media(max-width:700px){.more-episodes .firstepisode>div:not(.player){padding:20px}.more-episodes .firstepisode h3{font-size:20px}}