[hidden]{display:none!important}
.viewport-probe{position:fixed;top:0;left:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}
.playbook-main{--playbook-outer-frame:clamp(8px,1.4vw,12px);--playbook-outer-radius:clamp(18px,3vw,28px);width:min(100% - 2*var(--side),702px);gap:22px}
.playbook-main>*{min-width:0}
.playbook-nav{display:flex;justify-content:flex-start;align-items:center;gap:16px;width:var(--book-width,100%);margin-inline:auto}
.playbook-main.nav-side{position:relative}
.playbook-main.nav-side .playbook-nav{position:absolute;top:var(--nav-top,0);right:calc(50% + var(--book-width) / 2 + var(--playbook-outer-frame) + 16px);width:auto;margin:0}
.nav-control{display:grid;justify-items:center;align-items:center;gap:6px}
.playbook-nav .knop-tekst{color:white;white-space:nowrap}
.icon-button{position:relative;display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border:0;padding:0;cursor:pointer;background:transparent;text-decoration:none!important;-webkit-tap-highlight-color:transparent;transition:transform .2s,opacity .2s}
.icon-button img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.back-button svg{display:block;width:100%;height:100%;fill:white}
.book-section{width:var(--book-width,100%);margin-inline:auto}
.book-frame{width:calc(100% + var(--playbook-outer-frame) + var(--playbook-outer-frame));margin-inline:calc(0px - var(--playbook-outer-frame));padding:var(--playbook-outer-frame);border-radius:var(--playbook-outer-radius);background:white;box-shadow:0 10px 28px -6px rgb(0 0 0 / .16)}
.book-page{position:relative;width:100%;aspect-ratio:595.3/737;border-radius:clamp(10px,2vw,18px);background:white;overflow:hidden;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.page-art{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.stickers-on-page{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden;pointer-events:none}
.book-page.loading .page-art,.book-page.loading .stickers-on-page{visibility:hidden}
.book-loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;padding:30px;border-radius:inherit;text-align:center;background:white;color:var(--turquoise)}
.book-loading button{border:0;font:inherit;background:var(--yellow);border-radius:30px;padding:12px 24px;margin-top:20px;cursor:pointer}
.placed-sticker{pointer-events:auto;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;outline:none}
.placed-sticker image{pointer-events:none;user-select:none;-webkit-user-drag:none}
.sticker-target{fill:transparent;pointer-events:all}
.sticker-selection{display:none;stroke:var(--blue);stroke-width:5;opacity:.45;pointer-events:none;vector-effect:non-scaling-stroke}
.placed-sticker.selected .sticker-selection{display:block}
.placed-sticker.dragging{cursor:grabbing;opacity:.8}
.page-controls{display:grid;grid-template-columns:repeat(3,var(--reader-button,64px));justify-content:center;align-items:start;gap:clamp(12px,3vw,28px);margin-top:25px}
.page-controls>.knop-blok{display:grid;grid-template-rows:var(--reader-button,64px) auto;justify-items:center;align-items:center;gap:6px}
.page-controls>.knop-blok>button{display:grid;place-items:center;box-sizing:border-box;width:var(--reader-button,64px);height:var(--reader-button,64px);padding:0;margin:0;line-height:1}
.round-button{position:relative;width:var(--reader-button,64px);height:var(--reader-button,64px);border:0;border-radius:50%;background:var(--yellow);cursor:pointer;box-shadow:0 10px 28px -6px rgb(0 0 0 / .22);-webkit-tap-highlight-color:transparent}
.sticker-jump-button{display:block;width:var(--reader-button,64px);height:var(--reader-button,64px);border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sticker-jump-button img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:brightness(0) invert(1)}
.sticker-control .knop-tekst{color:white}
.round-button::before{content:'';position:absolute;top:50%;left:50%;border-top:13px solid transparent;border-bottom:13px solid transparent}
.previous::before{border-right:18px solid black;transform:translate(-62%,-50%)}
.next::before{border-left:18px solid black;transform:translate(-38%,-50%)}
.round-button:disabled{opacity:.25;pointer-events:none;box-shadow:none}
.sticker-section{width:var(--sheet-width,100%);min-height:calc(100vh - 24px);min-height:calc(100svh - 24px);margin:8px auto 0}
.sticker-hint{color:white;font-size:19px;margin:20px 0 0;text-align:center}
.sheet-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:12px;margin:0 0 20px}
.sheet-tab{--sheet-tab-frame:clamp(3px,.4vw,5px);--sheet-art-gap:clamp(7px,1vw,12px);position:relative;display:grid;place-items:center;box-sizing:border-box;aspect-ratio:1;border:var(--sheet-tab-frame) solid white;border-radius:clamp(8px,1.6vw,14px);padding:0;line-height:0;background:var(--turquoise);cursor:pointer;overflow:hidden;outline:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.sheet-tab img{display:block;align-self:center;justify-self:center;width:calc(100% - var(--sheet-art-gap) - var(--sheet-art-gap));height:calc(100% - var(--sheet-art-gap) - var(--sheet-art-gap));clip-path:inset(1.7% round clamp(3px,.5vw,7px));object-fit:contain;pointer-events:none}
.sheet-tab[aria-selected=true]{border-color:var(--blue)}
.sheet-tab:focus-visible{box-shadow:0 0 0 3px white,0 0 0 6px var(--blue)}
.sticker-sheet{width:100%;aspect-ratio:1;position:relative;isolation:isolate;border:0;border-radius:var(--playbook-outer-radius);background:white;box-shadow:0 10px 28px -6px rgb(0 0 0 / .16);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.sticker-sheet>svg{display:block;width:100%;height:100%;overflow:visible}
.sticker-source{cursor:pointer;touch-action:none;transition:opacity .15s}
.sticker-source .sticker-hit{cursor:inherit}
.sticker-source.used{opacity:.05;cursor:default;pointer-events:none}
.sticker-source:focus-visible{outline:none;filter:drop-shadow(0 0 3px white)}
.sticker-hit{fill:transparent;pointer-events:all}
.sticker-ghost{position:fixed;z-index:30;pointer-events:none;opacity:.85;transform:translate(-50%,-50%);object-fit:contain}
.reset-controls{width:100%;margin:50px auto 0;display:flex;justify-content:center}
.new-book-button{display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;height:44px;padding:0 22px;white-space:nowrap;border:0;border-radius:22px;background:var(--red);color:white;font:700 13px/1 'Futura Bold BT',sans-serif;box-shadow:0 3px 10px rgb(0 0 0 / .16);cursor:pointer;transition:transform .2s ease,opacity .2s ease;-webkit-tap-highlight-color:transparent}
.new-book-button:disabled{opacity:.5;cursor:default}
.new-book-button:active:not(:disabled){transform:scale(.96)}
@media(hover:hover){.new-book-button:hover:not(:disabled){transform:scale(1.08);opacity:.85}}
@media(hover:hover){.icon-button:hover{transform:scale(1.1);opacity:.85}.sheet-tab:hover{opacity:.85}}
@media(max-width:440px){.playbook-nav{gap:12px}.icon-button{flex-basis:48px;width:48px;height:48px}.sheet-tabs{gap:8px}.page-controls{gap:16px}.sticker-hint{font-size:18px}}
@media(max-height:480px){.playbook-main{padding-top:10px;gap:12px}.playbook-nav{gap:12px}.icon-button{flex-basis:36px;width:36px;height:36px}.book-section{--reader-button:44px}.page-controls{margin-top:25px;gap:14px}.knop-tekst{font-size:12px}.previous::before,.next::before{border-top-width:10px;border-bottom-width:10px}.previous::before{border-right-width:14px}.next::before{border-left-width:14px}}
@media(pointer:coarse){.fullscreen-control{display:none!important}}
@media(display-mode:fullscreen){.playbook-main{padding-top:18px}}
/* Match the back arrow and label on maken.php exactly in portrait. */
@media(orientation:portrait){
 .playbook-main{padding-top:var(--gap)}
 .back-control{width:66px;margin-right:-4px;justify-items:stretch}
 .back-control .back-button{width:66px;height:59px}
 .back-control .knop-tekst{width:42px;margin:0 10px 0 auto;text-align:right}
}
/* Short landscape screens: use the full height for the book and sticker sheet. */
.playbook-main.reader-landscape{--rail-width:126px;--sheet-thumbs:56px;width:min(100% - 2*var(--side),1000px);grid-template-columns:var(--content-width,minmax(0,1fr)) var(--rail-width);column-gap:20px;row-gap:28px;justify-content:center;align-items:start;padding-top:10px}
.reader-landscape .reader-sidebar{position:sticky;top:10px;grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;gap:10px;width:var(--rail-width)}
.reader-landscape .playbook-nav{width:auto;margin:0;justify-content:center}
.reader-landscape .fullscreen-control{display:none!important}
.reader-landscape .icon-button{width:36px;height:36px;flex-basis:36px}
.reader-landscape .nav-control{gap:3px}
.reader-landscape .knop-tekst{font-size:12px}
.reader-landscape .book-section{grid-column:1;grid-row:1;margin:0;justify-self:end}
.reader-landscape .page-controls{--reader-button:clamp(24px,11vh,44px);--reader-button:clamp(24px,11svh,44px);grid-template-columns:var(--reader-button);gap:8px;margin:0}
.reader-landscape .page-controls>.knop-blok{gap:3px}
.reader-landscape .reset-controls{grid-column:2;grid-row:3;width:100%;margin:38px 0 0}
.reader-landscape .sticker-section{grid-column:1;grid-row:2;justify-self:end;display:grid;grid-template-columns:var(--sheet-thumbs) var(--sheet-width);gap:20px;width:calc(var(--sheet-width) + var(--sheet-thumbs) + 20px);min-height:calc(100vh - 22px);min-height:calc(100svh - 22px);margin:0;align-content:start}
.reader-landscape .sheet-tabs{grid-column:1;grid-row:1;grid-template-columns:1fr;gap:8px;margin:0;align-self:start}
.reader-landscape .sticker-sheet{grid-column:2;grid-row:1}
.reader-landscape .sticker-hint{grid-column:2;grid-row:2;margin:0;font-size:16px;line-height:20px}