body.fb{background:var(--navy);color:var(--cream);min-height:100vh}
.fbtop .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.fbtop .back{color:var(--cream);text-decoration:none;font-weight:600;font-size:15px}
.fbmain{max-width:1180px;margin:0 auto;padding:6px 20px 60px;display:flex;flex-direction:column;align-items:center;gap:18px}
.fbhead{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.fbhead h1{font-size:clamp(30px,4.6vw,52px);color:#fff}
.fbhead p{color:rgba(244,238,225,.9);max-width:560px}
.modes{display:inline-flex;background:rgba(244,238,225,.1);border-radius:999px;padding:4px;margin-top:4px}
.modes button{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;color:#F4EEE1}
.modes button.on{background:var(--gold);color:var(--navy)}
/* tafel */
.table{width:100%;border-radius:22px;padding:clamp(18px,4vw,48px) clamp(8px,3vw,40px);background:linear-gradient(165deg,#7a5639 0%,#5a3d27 55%,#432c1c 100%);position:relative;overflow:hidden;box-shadow:inset 0 0 80px rgba(0,0,0,.35)}
.table:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(97deg,rgba(0,0,0,.07) 0 2px,transparent 2px 7px,rgba(255,255,255,.03) 7px 8px,transparent 8px 13px);pointer-events:none}
.stage{position:relative;width:min(100%,980px);margin:0 auto;transition:transform .8s cubic-bezier(.3,.1,.2,1)}
.stage.closed-front{transform:translateX(-25%)}
.stage.closed-back{transform:translateX(25%)}
.book{position:relative;width:100%;aspect-ratio:2100/1480;perspective:3200px;cursor:pointer;user-select:none;-webkit-user-select:none}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.35,.1,.25,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#F4EEE1}
.face svg{display:block;width:100%;height:100%}
.face.back{transform:rotateY(180deg)}
.face.front{border-radius:0 6px 6px 0;box-shadow:6px 8px 18px rgba(0,0,0,.35)}
.face.back{border-radius:6px 0 0 6px;box-shadow:-6px 8px 18px rgba(0,0,0,.35)}
.face .sh{position:absolute;top:0;bottom:0;width:14%;pointer-events:none}
.face.front .sh{left:0;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0))}
.face.back .sh{right:0;background:linear-gradient(270deg,rgba(0,0,0,.22),rgba(0,0,0,0))}
.leaf.cover .face{background:#13233F}
.leaf.cover .face.front{border-radius:3px 12px 12px 3px}
.leaf.cover .face.front .sh{width:5%;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.book.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateY(0)}30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}
.thump{transform-box:fill-box;transform-origin:center;animation:thump .45s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes thump{0%{transform:scale(1.7);opacity:0}55%{transform:scale(.95);opacity:1}100%{transform:scale(1);opacity:1}}
/* bediening */
.ctrl{display:flex;align-items:center;gap:16px;width:min(100%,640px)}
.ctrl .nav{all:unset;cursor:pointer;width:52px;height:52px;border-radius:50%;background:var(--cream);color:var(--navy);font-size:30px;line-height:50px;text-align:center;flex:none}
.ctrl .nav:disabled{opacity:.35;cursor:default}
.ctrl .mid{flex:1;display:flex;flex-direction:column;gap:8px;text-align:center}
.lbl{font-weight:600;font-size:15px;color:#fff}
.track{height:4px;background:rgba(244,238,225,.2);border-radius:99px;overflow:hidden}
.track i{display:block;height:100%;background:var(--gold);transition:width .6s}
.ctrl2{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.stampit{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-weight:700;padding:13px 22px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.stampit:before{content:"";width:16px;height:18px;background:radial-gradient(circle at 50% 30%,#fff 0 4px,transparent 4.5px),linear-gradient(#fff,#fff) center 12px/12px 4px no-repeat;opacity:.95}
.stampit:disabled{opacity:.4;cursor:default}
.jumps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.jumps button{all:unset;cursor:pointer;border:1.5px solid rgba(244,238,225,.4);color:#F4EEE1;border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600}
.fbnote{color:rgba(244,238,225,.88);font-size:14px;text-align:center}
.fbcta{margin-top:4px}
@media (max-width:820px){
 .fbmain{padding:0 10px 40px;gap:14px}
 .table{border-radius:16px;padding:22px 6px}
 .ctrl .nav{width:46px;height:46px;line-height:44px}
 .lbl{font-size:14px}
}