/* Brikki's boekjes. Bouwt voort op home.css. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.boekjes-main{gap:var(--between)}
.boekjes-main>*{min-width:0}
[hidden]{display:none!important}

/* Bovenbalk: links terug naar alle boekjes, rechts het blauwe huisje */
.boekjes-nav{display:flex;justify-content:flex-end;align-items:center;gap:16px;min-height:58px}
.home-link{position:relative;display:block;width:62px;height:58px;-webkit-tap-highlight-color:transparent}
.home-icon{position:absolute;right:6px;bottom:3px;width:42px;height:34px;background:var(--blue);transition:transform .2s ease}
.home-icon::before{content:'';position:absolute;left:-7px;top:-22px;border-right:28px solid transparent;border-bottom:24px solid var(--blue);border-left:28px solid transparent}
.home-link:hover .home-icon{transform:scale(1.06)}
.to-list{position:relative;margin-right:auto;width:52px;height:52px;border:0;border-radius:50%;background:var(--white);cursor:pointer;box-shadow:0 10px 28px -6px rgb(0 0 0 / .16);transition:transform .2s ease}
.to-list span,.to-list span::before,.to-list span::after{position:absolute;width:10px;height:10px;background:var(--blue)}
.to-list span{left:14px;top:14px;box-shadow:14px 0 var(--blue),0 14px var(--blue),14px 14px var(--blue)}
.to-list:hover{transform:scale(1.06)}

/* Overzicht: boekjes onder elkaar */
.shelf{display:grid;gap:var(--between)}
.shelf .block>h1{margin-bottom:30px}
.shelf-list{display:grid;gap:var(--between)}
.book{display:block;width:100%;padding:30px var(--pad);border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.book h2{margin-bottom:30px}
.book .cover{display:block;overflow:hidden;background:var(--turquoise)}
.book .cover img{width:100%;height:auto;transition:transform .35s ease}
.book:hover .cover img{transform:scale(1.03)}
.book .count{margin-top:clamp(18px,2.4vw,26px)}

/* Lezen: één bladzijde tegelijk */
.reader{padding:30px var(--pad)}
.page-btn{display:block;width:100%;padding:0;border:0;background:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent}
.page-btn img{width:100%;height:auto;aspect-ratio:1;animation:page-in .35s ease}
.page-btn[disabled]{cursor:default}
.controls{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:10px}
.round-btn{position:relative;flex:0 0 auto;width:64px;height:64px;border:0;border-radius:50%;cursor:pointer;box-shadow:0 10px 28px -6px rgb(0 0 0 / .28);transition:opacity .2s ease,transform .2s ease;-webkit-tap-highlight-color:transparent}
.round-btn:hover{transform:scale(1.08)}
.round-btn:active{transform:scale(.96)}
.round-btn[disabled]{opacity:.25;pointer-events:none;box-shadow:none}
.prev,.next{background:var(--yellow)}
.prev::before,.next::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent}
.prev::before{border-right:18px solid var(--black);transform:translate(-62%,-50%)}
.next::before{border-left:18px solid var(--black);transform:translate(-38%,-50%)}
/* Luisterknop: een luidspreker van een blokje en een driehoek */
.listen{background:var(--blue)}
.listen span{position:absolute;left:19px;top:25px;width:10px;height:14px;background:var(--white)}
.listen span::after{content:'';position:absolute;left:4px;top:-9px;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:18px solid var(--white)}
.listen span::before{content:'';position:absolute;left:28px;top:-2px;width:8px;height:18px;border-radius:0 18px 18px 0;background:var(--white);opacity:0}
.listen.playing span::before{animation:sound .8s ease-in-out infinite alternate}
.listen[hidden]{display:block!important;visibility:hidden}

@keyframes page-in{from{opacity:.4}to{opacity:1}}
@keyframes sound{from{opacity:0}to{opacity:1}}
@media (hover:none){.home-link:hover .home-icon,.to-list:hover,.round-btn:hover,.book:hover .cover img{transform:none}}
@media (prefers-reduced-motion:reduce){.page-btn img,.listen.playing span::before{animation:none}.listen.playing span::before{opacity:1}}

/* Luisterknop: icoon uit images/audio.svg */
.listen{background:url(img/icoon-audio.svg) center/100% 100% no-repeat}
.listen span{display:none}