/* ===== Toybox Bible v2 "inside the story" shell. Grandstander 800 only; paper everywhere. Builds on fs.css (fs-menu, fs-sheet, fs-sw, fs-opt, fs-q, ransom, fs-cele). ===== */
html.v2 #tabs{display:none!important}
html.v2 body::after{display:none}
html.v2 #app{max-width:none;padding:0}
html.v2,html.v2 body{background:#0f2a44}
html.v2 #app>.view .disp{color:#FFFAEE}
html.v2-on,html.v2-on body{overflow:hidden;overscroll-behavior:none}
html.v2 .toast{font-family:Grandstander,system-ui,sans-serif;font-weight:800;font-size:19px;bottom:calc(96px + env(safe-area-inset-bottom));background:#173F63;box-shadow:3px 4px 0 #D9A86A,0 10px 20px -8px rgba(0,0,0,.5)}

.v2s{position:fixed;inset:0;z-index:40;background:#0f2a44;overflow:hidden;color:#173F63;
  font-family:Grandstander,system-ui,sans-serif;font-weight:800;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
.v2s *{-webkit-tap-highlight-color:transparent}
.v2s button,.v2s input,.v2s a{font-family:Grandstander,system-ui,sans-serif;font-weight:800}
.v2f{position:absolute;inset:0;margin:auto;overflow:hidden;background:#173F63}
@media (min-aspect-ratio:11/16){.v2f{border-radius:18px;height:calc(100% - 24px);width:min(100%,calc((100dvh - 24px)*9/16));box-shadow:0 0 34px rgba(0,0,0,.4)}}
.v2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;animation:v2Fade .5s ease both}
@keyframes v2Fade{from{opacity:0}to{opacity:1}}
.v2-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(10,25,45,.28),transparent 15%,transparent 78%,rgba(10,25,45,.32))}

/* motion */
.pop-up{animation:v2Up .55s cubic-bezier(.2,1.4,.4,1) both;transform-origin:50% 100%}
@keyframes v2Up{0%{transform:perspective(700px) rotateX(-80deg);opacity:0}60%{opacity:1}100%{transform:none}}
.pop-down{animation:v2Down .6s cubic-bezier(.2,1.4,.4,1) both;transform-origin:50% 0}
@keyframes v2Down{0%{transform:perspective(700px) rotateX(80deg);opacity:0}60%{opacity:1}100%{transform:none}}
.pop-q{animation:v2Q .4s cubic-bezier(.2,1.6,.4,1) both}
@keyframes v2Q{0%{transform:rotate(var(--r,0deg)) scale(.7);opacity:0}100%{transform:rotate(var(--r,0deg));opacity:1}}
.v2s .pop-in{animation:v2In .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes v2In{0%{scale:.6;opacity:0}100%{scale:1;opacity:1}}

/* round paper discs (same look as the reader's menu button) */
.v2-disc{position:absolute;z-index:30;left:14px;top:calc(12px + var(--sat));width:54px;height:54px;border-radius:50%;background:#FFFAEE var(--grain);color:#173F63;
  display:grid;place-items:center;box-shadow:3px 4px 0 #D9A86A,0 8px 14px rgba(10,25,45,.35);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .15s,opacity .2s;border:0;padding:0}
.v2-disc::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed rgba(23,63,99,.22);pointer-events:none}
.v2-disc svg{width:26px;height:26px}
.v2-disc:active{transform:scale(.9) rotate(-4deg)}
.v2-disc.sm{position:relative;left:auto;top:auto;width:48px;height:48px;flex:none}
.v2-disc.sm svg{width:22px;height:22px}
.v2-disc.off{opacity:.5}
.v2-ui{z-index:25}
.v2s.menu-open .fs-mb{opacity:0}

/* titles */
.v2-title{display:flex;flex-direction:column;align-items:center;gap:10px;padding:calc(20px + var(--sat)) 58px 6px;text-align:center}
.v2s .v2-title .ransom b,.v2s .gm-card .ransom b,.v2s .rd-end .ransom b,.v2s .rd-allread .ransom b{font-size:calc(clamp(24px,8vw,40px) * var(--s,1))}
.v2s .ransom{gap:8px 12px}
.v2-sub{margin:0;font-size:19px;line-height:1.15;color:#173F63;background:rgba(255,250,238,.93);padding:6px 16px;border-radius:20px;box-shadow:2px 3px 0 rgba(23,63,99,.3)}
.v2-note{margin:20px auto;text-align:center;font-size:19px;color:#173F63;background:rgba(255,250,238,.93);padding:10px 16px;border-radius:16px;max-width:330px}
.v2-q{margin:0;font-size:20px;text-align:center;line-height:1.2}
.v2-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:calc(40px + var(--sab))}
.v2-col{max-width:560px;margin:0 auto;padding:0 16px 30px}

/* torn paper surfaces: a cream top sheet + a coloured layer peeking out underneath */
.v2-chip,.v2-big,.v2-btn,.rd-card,.ph-card,.tv-set,.gm-card,.ms-card,.wh-mys,.mt-score{position:relative;isolation:isolate}
.v2-chip::before,.v2-big::before,.v2-btn::before,.rd-card::before,.ph-card::before,.tv-set::before,.gm-card::before,.ms-card::before,.wh-mys::before{
  content:"";position:absolute;inset:0;z-index:-2;background:var(--under,#F3C64B) var(--grain);clip-path:var(--torn2);transform:translate(5px,6px) rotate(var(--tilt2,2deg))}
.v2-chip::after,.v2-big::after,.v2-btn::after,.rd-card::after,.ph-card::after,.tv-set::after,.gm-card::after,.ms-card::after,.wh-mys::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--top,#FFFAEE) var(--grain);clip-path:var(--torn)}

/* ================= HOME ================= */
.hm-top{position:absolute;left:0;right:0;top:calc(16px + var(--sat));display:flex;justify-content:center;z-index:5;pointer-events:none}
.hm-logo{filter:drop-shadow(0 6px 8px rgba(10,25,45,.35))}
.hm-emblem{width:min(74vw,400px,calc(36vh * 1.31));height:auto;filter:drop-shadow(0 8px 12px rgba(10,25,45,.35));animation:hmBob 5s ease-in-out 1s infinite;-webkit-user-drag:none}
@keyframes hmBob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-5px) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.hm-emblem{animation:none}}
.v2s .hm-logo .ransom b{font-size:calc(clamp(19px,5.6vw,26px) * var(--s,1));padding:5px 6px 2px}
.v2s .hm-logo .ransom{gap:6px 10px}
.hm-bot{position:absolute;left:0;right:0;bottom:calc(18px + var(--sab));display:flex;flex-direction:column;align-items:center;gap:20px;z-index:5;padding:0 10px}
.hm-row{display:flex;gap:10px;justify-content:center;align-items:stretch;width:100%;max-width:420px}
.v2-chip{flex:1 1 0;max-width:132px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 13px;text-decoration:none;color:#173F63;
  font-size:clamp(16px,4.6vw,19px);line-height:1.05;text-align:center;transform:rotate(var(--tilt,-1deg));touch-action:manipulation;
  filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 8px 10px rgba(10,25,45,.35));transition:transform .15s}
.v2-chip:active{transform:rotate(var(--tilt,-1deg)) translateY(3px) scale(.96)}
.v2-chip .ci{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.v2-chip .ci svg{width:38px;height:38px}
.v2-chip .ci.th{overflow:hidden;background:#BCD3D4;box-shadow:0 0 0 3px #FFFAEE,0 0 0 5px #8AB5CC}
.v2-chip .ci.th img{width:100%;height:100%;object-fit:cover}
.v2-big{display:inline-flex;align-items:center;gap:14px;padding:18px 30px 18px 18px;color:#173F63;text-decoration:none;border:0;background:none;cursor:pointer;
  font-size:clamp(28px,8.2vw,36px);line-height:1;transform:rotate(-1.5deg);touch-action:manipulation;--under:#F3C64B;
  filter:drop-shadow(0 2px 0 rgba(43,36,32,.3)) drop-shadow(0 10px 14px rgba(0,0,0,.4));animation:v2Breathe 2.6s ease-in-out .8s infinite}
.v2-big .bi{width:54px;height:54px;border-radius:50%;background:#C2463B;color:#FFFAEE;display:grid;place-items:center;flex:none}
.v2-big .bi svg{width:32px;height:32px}
.v2-big:active{animation:none;transform:rotate(-1.5deg) translateY(3px) scale(.97)}
.v2-big.pop-up{animation:v2Up .6s cubic-bezier(.2,1.4,.4,1) both,v2Breathe 2.6s ease-in-out .9s infinite}
@keyframes v2Breathe{0%,100%{scale:1}50%{scale:1.045}}
.v2-big.go{padding:18px 54px;font-size:40px;--under:#E9877A}

/* paper buttons */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px 13px;border:0;background:none;cursor:pointer;color:#173F63;text-decoration:none;
  font-size:22px;line-height:1.05;white-space:nowrap;--top:#F3C64B;--under:#E9877A;transform:rotate(-1deg);touch-action:manipulation;
  filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 6px 8px rgba(10,25,45,.3));transition:transform .12s}
.v2-btn:active{transform:rotate(-1deg) translateY(3px) scale(.97)}
.v2-btn svg{width:24px;height:24px;flex:none}
.v2-btn.alt{--top:#FFFAEE;--under:#8AB5CC;transform:rotate(1deg)}
.v2-btn.red{--top:#E9877A;--under:#C2463B}
.v2-btn.sm{font-size:19px;padding:11px 16px 10px}
.v2-btn.sm svg{width:20px;height:20px}

/* ================= READ THE BIBLE ================= */
.v2-read .v2-title{padding-bottom:14px}
.rd-path{display:flex;flex-direction:column;gap:14px;padding:0 4px}
.rd-card{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;padding:11px 14px 12px 11px;margin-right:9%;text-decoration:none;color:#173F63;
  transform:rotate(var(--tilt));touch-action:manipulation;filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.22)) drop-shadow(0 7px 8px rgba(10,25,45,.32));transition:transform .15s}
.rd-card.r{margin-right:0;margin-left:9%}
.rd-card:active{transform:rotate(var(--tilt)) translateY(3px) scale(.98)}
.rd-th{display:block;width:118px;aspect-ratio:2/1;border-radius:7px;overflow:hidden;background:#BCD3D4;box-shadow:inset 0 0 0 2px rgba(23,63,99,.08)}
.rd-th img{width:100%;height:100%;object-fit:cover}
.rd-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.rd-tx b{font-size:clamp(18px,5.2vw,21px);line-height:1.08;font-weight:800}
.rd-tx small{font-size:15px;line-height:1.1;color:#07556A}
.rd-n{position:absolute;left:-7px;top:-9px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:#173F63;color:#FFFAEE;font-size:15px;line-height:31px;text-align:center;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
.rd-done{position:absolute;right:-6px;top:-9px;width:32px;height:32px;border-radius:50%;background:#07556A;color:#FFFAEE;display:grid;place-items:center;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
.rd-done svg{width:20px;height:20px}
.rd-new{position:absolute;right:-8px;bottom:-8px;background:#C2463B var(--grain);color:#FFFAEE;font-size:16px;padding:4px 12px 3px;transform:rotate(-6deg);
  clip-path:polygon(0 8%,6% 0,40% 6%,72% 0,100% 5%,98% 52%,100% 96%,62% 100%,30% 94%,4% 100%,1% 50%)}
.rd-done+.rd-new,.rd-new+.rd-done{right:auto}
.rd-extra{display:flex;align-items:center;gap:10px;align-self:center;padding:8px 16px 8px 8px;background:#FFFAEE var(--grain);color:#173F63;text-decoration:none;font-size:17px;border-radius:14px;
  box-shadow:3px 4px 0 #CFBEDA,0 8px 12px rgba(10,25,45,.3);transform:rotate(1.5deg)}
.rd-extra img{width:46px;height:46px;border-radius:8px;object-fit:cover}
.rd-end{display:flex;justify-content:center;margin:34px 0 10px;filter:drop-shadow(0 6px 8px rgba(10,25,45,.35))}
.rd-mini{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:linear-gradient(var(--s1),var(--s2))}
.rd-mini i{position:absolute;display:block}
.rd-mini .sun{width:24%;aspect-ratio:1;border-radius:50%;background:#F3C64B;top:14%;left:var(--sx);box-shadow:0 0 0 4px rgba(243,198,75,.3)}
.rd-mini .moon{width:20%;aspect-ratio:1;border-radius:50%;background:#FFFAEE;top:14%;left:var(--sx);box-shadow:inset -7px -2px 0 #F3C64B}
.rd-mini .hl{border-radius:50% 50% 0 0;box-shadow:0 -2px 0 rgba(0,0,0,.08)}
.rd-mini .hl.a{left:-20%;right:20%;height:62%;bottom:-32%;background:var(--h1)}
.rd-mini .hl.b{left:35%;right:-35%;height:56%;bottom:-30%;background:var(--h2)}

/* ================= PLAY HUB ================= */
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;padding:14px 6px 0}
.ph-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 18px;text-decoration:none;color:#173F63;text-align:center;
  transform:rotate(var(--tilt));touch-action:manipulation;filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 9px 10px rgba(10,25,45,.35));transition:transform .15s}
.ph-card:active{transform:rotate(var(--tilt)) translateY(3px) scale(.97)}
.ph-ic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.ph-ic svg{width:54px;height:54px}
.ph-card b{font-size:clamp(20px,5.8vw,24px);line-height:1.05}
.ph-card small{font-size:15px;line-height:1.15;color:#07556A}

/* ================= GAMES (shared) ================= */
.gm-label{position:absolute;left:0;right:0;top:calc(16px + var(--sat));z-index:6;display:flex;justify-content:center;pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.28))}
.gm-label span{display:block;background:#C2463B var(--grain);color:#FFFAEE;font-size:21px;line-height:1.1;letter-spacing:.02em;padding:8px 20px 7px;clip-path:var(--torn);transform:rotate(-2deg)}
.gm-col{position:absolute;left:0;right:0;top:calc(64px + var(--sat));bottom:calc(84px + var(--sab));display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 18px 8px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.gm-col>:first-child{margin-top:auto}.gm-col>:last-child{margin-bottom:auto}
.gm-card{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,400px);padding:26px 20px 24px;text-align:center;
  filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 10px 14px rgba(10,25,45,.35))}
.gm-p{margin:0;font-size:21px;line-height:1.2}
.gm-p.sm{font-size:18px;color:#07556A}
.gm-levels{display:flex;flex-direction:column;gap:12px;width:100%;max-width:330px;margin-top:4px}
.gm-levels .fs-opt small{display:block;font-size:16px;margin-top:3px;opacity:.85}
.gm-big{margin:0;font-size:68px;line-height:1;color:#C2463B}
.gm-big small{font-size:24px;color:#173F63}
.gm-big.huge{font-size:110px}
.gm-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.gm-dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.gm-dots i{width:15px;height:15px;border-radius:50%;background:rgba(255,250,238,.9);box-shadow:0 0 0 2px rgba(23,63,99,.45),0 2px 0 2px rgba(10,25,45,.25);transition:transform .2s,background .2s}
.gm-dots i.ok{background:#A9BE9B}.gm-dots i.no{background:#E9877A}.gm-dots i.cur{background:#F3C64B;transform:scale(1.3)}
.gm-dots.small i{width:13px;height:13px}
.gm-from{margin:0;font-size:16px;line-height:1.1;color:#07556A;background:rgba(255,250,238,.93);padding:5px 14px;border-radius:16px;max-width:100%;text-align:center}
.v2s .gm-q{border:0;cursor:pointer;color:#173F63;display:block;position:relative;padding-right:46px;touch-action:manipulation}
.gm-say{position:absolute;right:12px;top:50%;width:28px;height:28px;margin-top:-14px;color:#07556A;opacity:.8}
.gm-say svg{width:100%;height:100%}
.v2s .fs-opts{max-width:400px}
.v2s .fs-opt{cursor:pointer;width:100%}
.v2s .fs-opt.ok{animation:v2Wiggle .5s}
.v2s .fs-opt.no{animation:v2Shake .4s}
@keyframes v2Wiggle{25%{transform:rotate(-3deg) scale(1.04)}75%{transform:rotate(3deg) scale(1.04)}}
@keyframes v2Shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.gm-done{display:flex;justify-content:center}
.cele-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lb-wrap{z-index:50}
/* matching: end-of-board buttons float centered over a dimmed board instead of falling below the fold */
.mt-done{position:fixed;inset:0;z-index:30;align-items:center;align-content:center;background:rgba(10,25,45,.5);border-radius:0;margin:0}
.v2-stars{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center}
.v2-stars i{width:28px;height:28px;background:rgba(23,63,99,.18);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.v2-stars i.on{background:#F3C64B;animation:v2Star .5s cubic-bezier(.2,1.8,.4,1) var(--d,0ms) both}
@keyframes v2Star{0%{scale:.2;rotate:-40deg}100%{scale:1;rotate:0deg}}
.mt-info .v2-stars i,.gm-col>.v2-stars i{background:rgba(255,250,238,.55)}
.mt-info .v2-stars i.on{background:#F3C64B}

/* matching */
.mt-info{display:flex;justify-content:center;filter:drop-shadow(0 2px 0 rgba(10,25,45,.35))}
.mt-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;width:100%;max-width:520px;flex:none;justify-content:center}
.mt-card{aspect-ratio:3/4;min-width:0;min-height:0;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer;perspective:800px;transform:rotate(var(--r));touch-action:manipulation}
.mt-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.mt-card.flip .mt-in,.mt-card.done .mt-in{transform:rotateY(180deg)}
.mt-back,.mt-front{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:3px 4px 0 rgba(10,25,45,.35)}
.mt-back{background:#173F63 var(--grain);border:3px solid #F3C64B}
.mt-back svg{width:62%}
.mt-front{background:#FFFAEE var(--grain);transform:rotateY(180deg);border:3px solid #FFFAEE}
.mt-front img{width:84%;height:84%;object-fit:contain;pointer-events:none}
.mt-front.photo img{width:100%;height:100%;object-fit:cover}
.mt-card.done .mt-front{border-color:#A9BE9B;box-shadow:0 0 0 3px #A9BE9B,3px 4px 0 rgba(10,25,45,.35)}
.mt-card.done{animation:v2Wiggle .5s}

/* lightning */
.lt-bolt{display:block;width:84px;height:84px;animation:v2Zap 1.2s ease-in-out infinite}
.lt-bolt svg{width:100%;height:100%}
@keyframes v2Zap{0%,100%{rotate:-6deg;scale:1}50%{rotate:6deg;scale:1.1}}
.lt-hud{display:flex;align-items:center;gap:12px;width:100%;max-width:420px}
.lt-fuse{flex:1;height:26px;background:rgba(255,250,238,.9);clip-path:var(--torn);position:relative;overflow:hidden}
.lt-fuse i{position:absolute;inset:4px;background:linear-gradient(90deg,#C2463B,#E9877A 60%,#F3C64B);transform-origin:0 50%;border-radius:4px}
.lt-fuse.hot i{animation:v2Hot .5s ease-in-out infinite alternate}
@keyframes v2Hot{to{filter:brightness(1.35)}}
.lt-score{flex:none;min-width:70px;height:70px;padding:0 10px;border-radius:35px;background:#F3C64B var(--grain);color:#173F63;font-size:40px;line-height:72px;text-align:center;box-shadow:3px 4px 0 #C2463B,0 8px 12px rgba(10,25,45,.35)}
.lt-score.bump{animation:v2Bump .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes v2Bump{0%{scale:1.45}100%{scale:1}}

/* who am I */
.wh-top{display:flex;gap:14px;align-items:flex-start;width:100%;max-width:440px}
.wh-mys{flex:none;width:96px;height:118px;display:grid;place-items:center;--under:#CFBEDA;--tilt2:-3deg;transform:rotate(-2deg);
  filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 8px 10px rgba(10,25,45,.35))}
.wh-mys span{font-size:74px;line-height:1;color:#C2463B;animation:v2Zap 2.4s ease-in-out infinite}
.wh-mys img{width:86%;height:86%;object-fit:contain;animation:v2Q .5s cubic-bezier(.2,1.6,.4,1) both}
.wh-mys img.wh-photo{width:84%;height:84%;object-fit:cover;border-radius:8px}
.wh-mys .rd-mini{width:84%;height:84%;border-radius:8px}
.wh-clues{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.wh-clue{position:relative;display:block;width:100%;border:0;cursor:pointer;text-align:left;color:#173F63;background:var(--bg) var(--grain);font-size:clamp(17px,4.8vw,20px);line-height:1.15;
  padding:10px 12px 10px 42px;transform:rotate(var(--r));filter:drop-shadow(3px 4px 0 rgba(23,63,99,.35));touch-action:manipulation;
  clip-path:polygon(0 3%,10% 0,40% 3%,70% 0,100% 2%,99% 50%,100% 97%,60% 100%,30% 97%,0 100%,1% 50%)}
.wh-clue .n{position:absolute;left:9px;top:9px;width:26px;height:26px;border-radius:50%;background:#C2463B;color:#fff;font-size:16px;line-height:27px;text-align:center}
.wh-res{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.wh-say{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:24px;line-height:1.1;background:#FFFAEE var(--grain);padding:10px 20px;clip-path:var(--torn);text-align:center}
.wh-say .v2-stars i{width:22px;height:22px}

/* trivia sets */
.tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:12px 6px 0}
.tv-set{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:108px;padding:16px 10px;text-decoration:none;color:#173F63;text-align:center;
  transform:rotate(var(--tilt));touch-action:manipulation;filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 8px 9px rgba(10,25,45,.32));transition:transform .15s}
.tv-set:active{transform:rotate(var(--tilt)) translateY(3px) scale(.97)}
.tv-set b{font-size:clamp(18px,5.2vw,22px);line-height:1.05}
.tv-set small{font-size:15px;color:#07556A}
.tv-set .v2-stars i{width:18px;height:18px}

/* ================= MAKE A SCENE ================= */
.v2-studio .v2f{background:#173F63}
.sd-stage{position:absolute;inset:0;overflow:hidden;touch-action:none}
.sd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.sd-items{position:absolute;inset:0}
.sd-it{position:absolute;touch-action:none;cursor:grab}
.sd-in{display:block;transition:transform .14s;filter:drop-shadow(0 3px 2px rgba(10,25,45,.35)) drop-shadow(0 8px 8px rgba(10,25,45,.2))}
.sd-in img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.sd-it.sel .sd-in{outline:3px dashed rgba(255,250,238,.95);outline-offset:5px;border-radius:6px}
.sd-it.lift{cursor:grabbing}
.sd-it.lift .sd-in{transform:scale(1.1);filter:drop-shadow(0 16px 12px rgba(10,25,45,.4))}
.sd-it.pp .sd-in{animation:sdPop .34s cubic-bezier(.2,1.8,.4,1)}
@keyframes sdPop{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.sd-top{position:absolute;left:10px;right:10px;top:calc(10px + var(--sat));z-index:30;display:flex;align-items:center;gap:8px}
.sd-name{flex:1;min-width:0;display:flex;align-items:center;gap:6px;justify-content:center;border:0;cursor:pointer;color:#173F63;font-size:19px;line-height:1;padding:12px 12px 11px;
  background:#FFFAEE var(--grain);clip-path:var(--torn);touch-action:manipulation}
.sd-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.sd-name svg{width:18px;height:18px;flex:none;color:#07556A}
.sd-save{flex:none;border:0;cursor:pointer;color:#173F63;font-size:20px;line-height:1;padding:13px 16px 12px;background:#F3C64B var(--grain);clip-path:var(--torn);touch-action:manipulation;transform:rotate(-2deg)}
.sd-save:active,.sd-name:active{translate:0 2px}
.sd-side{position:absolute;left:10px;top:calc(72px + var(--sat));z-index:30;display:flex;flex-direction:column;gap:10px}
.sd-tools{position:absolute;right:10px;top:calc(74px + var(--sat));z-index:30;display:flex;flex-direction:column;gap:9px;animation:v2In .3s cubic-bezier(.2,1.6,.4,1) both}
.sd-tools[hidden]{display:none}
.sd-tools button{width:50px;height:50px;border-radius:50%;border:0;padding:0;background:#FFFAEE var(--grain);color:#173F63;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;
  box-shadow:3px 4px 0 #D9A86A,0 8px 12px rgba(10,25,45,.3)}
.sd-tools button svg{width:24px;height:24px}
.sd-tools button:active{transform:scale(.9)}
.sd-tools .del{background-color:#E9877A;color:#FFFAEE;box-shadow:3px 4px 0 #C2463B,0 8px 12px rgba(10,25,45,.3)}
.sd-trash{position:absolute;left:50%;top:calc(76px + var(--sat));z-index:29;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:#E9877A var(--grain);color:#FFFAEE;
  display:grid;place-items:center;box-shadow:3px 4px 0 #C2463B,0 8px 14px rgba(10,25,45,.35);opacity:0;transform:scale(.5);transition:transform .2s cubic-bezier(.2,1.6,.4,1),opacity .2s,background .15s;pointer-events:none}
.sd-trash svg{width:32px;height:32px}
.v2-studio.dragging .sd-trash{opacity:1;transform:scale(1)}
.sd-trash.hot{background-color:#C2463B;transform:scale(1.25)!important}
.v2-studio.dragging .sd-tray,.v2-studio.dragging .sd-tools{opacity:.35;transition:opacity .2s}
.sd-hint{position:absolute;left:50%;top:44%;z-index:10;transform:translate(-50%,-50%) rotate(-2deg);white-space:nowrap;font-size:21px;color:#173F63;background:#FFFAEE var(--grain);padding:9px 18px;border-radius:18px;
  box-shadow:3px 4px 0 #A9BE9B;pointer-events:none;transition:opacity .4s;animation:v2Hint 2.4s ease-in-out infinite}
.sd-hint.gone{opacity:0;animation:none}
@keyframes v2Hint{0%,100%{translate:0 0}50%{translate:0 -6px}}
.sd-tray{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--sab));z-index:30;background:#FFFAEE var(--grain);border-radius:20px;padding:8px 8px 8px;
  box-shadow:3px 4px 0 #D9A86A,0 10px 22px rgba(10,25,45,.4);transition:opacity .2s}
.sd-tabs{display:flex;gap:5px;align-items:center}
.sd-tabs [data-tab]{flex:1 1 auto;border:0;cursor:pointer;color:#173F63;background:#F6EAD7 var(--grain);font-size:clamp(14px,4vw,17px);line-height:1;padding:10px 4px 9px;border-radius:12px;touch-action:manipulation;
  box-shadow:0 3px 0 #D9C3A0;transition:transform .15s}
.sd-tabs [data-tab].on{background-color:#173F63;color:#FFFAEE;box-shadow:0 3px 0 #0b2238;transform:rotate(-2deg) translateY(-2px)}
.sd-fold{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:#F6EAD7;color:#173F63;display:grid;place-items:center;cursor:pointer;transition:transform .2s}
.sd-fold svg{width:20px;height:20px}
.sd-tray.fold .sd-fold{transform:rotate(180deg)}
.sd-tray.fold .sd-strip{display:none}
.sd-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;padding:10px 4px 4px;touch-action:pan-x;scrollbar-width:none;min-height:98px;align-items:center}
.sd-strip::-webkit-scrollbar{display:none}
.sd-stk{flex:none;width:80px;height:80px;border:0;border-radius:16px;padding:6px;background:rgba(23,63,99,.06);cursor:grab;transform:rotate(var(--r));touch-action:pan-x;transition:transform .15s}
.sd-stk:active{transform:rotate(var(--r)) scale(1.1)}
.sd-stk img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 1px rgba(10,25,45,.3))}
.sd-strip.sd-bgs{min-height:112px}
.sd-bgt{flex:none;width:54px;height:96px;border:3px solid #FFFAEE;border-radius:9px;padding:0;overflow:hidden;background:#BCD3D4;cursor:pointer;transform:rotate(var(--r));touch-action:pan-x;
  box-shadow:2px 3px 0 rgba(23,63,99,.3);transition:transform .15s}
.sd-bgt img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.sd-bgt.on{border-color:#F3C64B;transform:rotate(0) scale(1.08);box-shadow:0 0 0 3px #C2463B}
.sd-empty{margin:0 auto;font-size:18px;color:#07556A;text-align:center}
.v2-sheet{align-items:flex-start;padding-top:calc(80px + var(--sat))}
.v2-in{width:100%;border:0;border-radius:0;font-size:24px;line-height:1.1;color:#173F63;text-align:center;padding:14px 14px 13px;background:#F6EAD7 var(--grain);clip-path:var(--torn);
  -webkit-user-select:text;user-select:text;outline:none}
.v2-in:focus{background-color:#FFF4D6}

/* my scenes */
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:12px 6px 0;align-items:stretch}
.ms-card{display:flex;flex-direction:column;gap:7px;padding:9px 9px 10px;color:#173F63;transform:rotate(var(--tilt));--under:#A9BE9B;
  filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 8px 10px rgba(10,25,45,.32))}
.ms-card a{display:block;text-decoration:none}
.ms-prev{position:relative;display:block;width:100%;max-height:300px;overflow:hidden;border-radius:7px;background:#173F63}
.ms-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ms-it{position:absolute;display:block}
.ms-it img{display:block;width:100%;height:auto}
.ms-name{font-size:18px;line-height:1.1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-act{display:flex;gap:10px;justify-content:center}
.ms-act button{width:44px;height:44px;border-radius:50%;border:0;padding:0;background:#F6EAD7;color:#173F63;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #D9C3A0}
.ms-act button svg{width:21px;height:21px}
.ms-act [data-del]{background:#E9877A;color:#FFFAEE;box-shadow:0 3px 0 #C2463B}
.ms-new{border:0;cursor:pointer;align-items:center;justify-content:center;min-height:210px;--under:#F3C64B;font-size:21px}
.ms-plus{width:70px;height:70px;border-radius:50%;background:#A9BE9B;color:#FFFAEE;display:grid;place-items:center}
.ms-plus svg{width:40px;height:40px}

/* ================= classic reader, dressed for v2 (stories not converted to the full-screen book yet) ================= */
html.v2 .reader{background:#173F63 var(--v2-reader-bg) center/cover no-repeat}
html.v2 .reader::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,42,68,.62),rgba(15,42,68,.38) 30%,rgba(15,42,68,.5));pointer-events:none}
html.v2 .reader>*{position:relative}
html.v2 .reader .ibtn{border-radius:50%;box-shadow:3px 4px 0 #D9A86A,0 8px 14px rgba(10,25,45,.35)}
html.v2 .reader .rbar h2{text-shadow:0 2px 0 rgba(10,25,45,.6)}
html.v2 .reader .spread{border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,.25),0 24px 40px -14px rgba(0,0,0,.7)}
html.v2 .reader .btn{font-family:Grandstander;border-radius:4px;clip-path:polygon(0 6%,30% 0,70% 5%,100% 0,99% 50%,100% 96%,60% 100%,25% 95%,0 100%,1% 50%);box-shadow:none;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.3))}
html.v2 .reader .panel{border-radius:4px}
@media (prefers-reduced-motion:reduce){.v2-big,.v2-big.pop-up,.lt-bolt,.wh-mys span,.sd-hint{animation:none}}

/* ---- Read the Bible: calm paper backdrop (art was too busy to read over) ---- */
.v2-read .v2f{background:#F6EAD7 var(--grain)}
.v2-read .rd-end{filter:drop-shadow(0 3px 0 rgba(23,63,99,.25))}
.rd-sub{margin:-4px 0 10px;text-align:center;font-size:18px;line-height:1.15;color:#07556A}
.rd-sub[hidden]{display:none}
.rd-search{position:relative;display:flex;align-items:center;background:#FFFAEE var(--grain);border-radius:16px;box-shadow:inset 0 0 0 2px rgba(23,63,99,.18),2px 3px 0 rgba(23,63,99,.3);transform:rotate(-.5deg)}
.rd-mag{position:absolute;left:13px;width:22px;height:22px;color:#07556A;pointer-events:none}
.rd-mag svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
.rd-search input{flex:1;min-width:0;border:0;background:none;outline:0;font:800 18px/1 Grandstander,system-ui;color:#173F63;padding:14px 44px 13px 44px;-webkit-appearance:none;appearance:none}
.rd-search input::placeholder{color:#7d8f9a;opacity:1}
.rd-search input::-webkit-search-cancel-button{display:none}
.rd-search:focus-within{box-shadow:inset 0 0 0 3px #F3C64B,2px 3px 0 rgba(23,63,99,.3)}
.rd-x{position:absolute;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:#E9877A;color:#FFFAEE;font:800 22px/1 Grandstander,system-ui;cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.rd-x[hidden]{display:none}
.rd-none{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 18px;margin:10px auto;background:#FFFAEE var(--grain);border-radius:16px;color:#173F63;box-shadow:2px 3px 0 rgba(23,63,99,.3);text-align:center}
.rd-none b{font-size:22px}.rd-none span{font-size:16px;color:#07556A}

/* ---- matching stopwatch + leaderboards ---- */
.mt-info{align-items:center;gap:12px;flex-wrap:wrap}
.mt-clock{font:800 20px/1 Grandstander,system-ui;color:#173F63;background:#FFFAEE var(--grain);padding:7px 13px 6px;border-radius:14px;box-shadow:2px 3px 0 rgba(10,25,45,.35);transform:rotate(-1.5deg);font-variant-numeric:tabular-nums;min-width:86px;text-align:center}
.mt-clock[hidden]{display:none}
.gm-done{gap:12px;flex-wrap:wrap}
.lb-open{margin-top:6px}
.lb-wrap{align-items:center;z-index:45}
.lb-sheet{width:min(100%,430px);gap:10px}
.lb-tabs{display:flex;gap:8px;width:100%;justify-content:center}
.lb-tabs button{flex:1;border:0;cursor:pointer;font:800 17px/1 Grandstander,system-ui;color:#2B2420;background:var(--bg) var(--grain);padding:10px 6px 9px;border-radius:12px;box-shadow:2px 3px 0 rgba(10,25,45,.3);opacity:.6;transition:transform .15s,opacity .15s}
.lb-tabs button[aria-pressed=true]{opacity:1;transform:translateY(-2px) rotate(-1deg);box-shadow:3px 5px 0 rgba(10,25,45,.35)}
.lb-tabs.two button{font-size:16px}
.lb-list{list-style:none;margin:2px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px;min-height:120px}
.lb-list li{display:grid;grid-template-columns:30px 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;background:#F6EAD7;border-radius:10px;padding:8px 11px 7px;font:800 16px/1.15 Grandstander,system-ui;color:#2B2420}
.lb-list li:nth-child(odd){transform:rotate(-.4deg)}.lb-list li:nth-child(even){transform:rotate(.4deg)}
.lb-list li b{grid-row:1/3;font-size:20px;color:#07556A;text-align:center}
.lb-list li:nth-child(1) b{color:#D9A86A}
.lb-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-who em{font-style:normal;color:#C2463B}
.lb-flag{font-size:20px;margin-right:6px;vertical-align:-2px}
.lb-t{font-size:19px;color:#173F63;font-variant-numeric:tabular-nums;text-align:right}
.lb-list li small{grid-column:2/4;font-size:13px;opacity:.7}
.lb-list li.me{background:#F3C64B}
.lb-list li.lb-empty{display:block;text-align:center;opacity:.8;padding:20px 12px;transform:none}

/* ===== Read the Bible v16: progress header, streak flame, section rings, story path, badges ===== */
.rd-tile,.rd-next,.rd-sec{position:relative;isolation:isolate}
.rd-tile::before,.rd-next::before,.rd-sec::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--under,#F3C64B) var(--grain);clip-path:var(--torn2);transform:translate(5px,6px) rotate(var(--tilt2,2deg))}
.rd-tile::after,.rd-next::after,.rd-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--top,#FFFAEE) var(--grain);clip-path:var(--torn)}
.v2-read .v2-title{padding-bottom:8px}
.rd-bdg{left:auto;right:14px;box-shadow:3px 4px 0 #8AB5CC,0 8px 14px rgba(10,25,45,.35)}
.rd-bdg .bd-med{width:40px;height:auto;margin-top:6px}
.rd-bdg-n{position:absolute;right:-6px;top:-6px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:#C2463B;color:#FFFAEE;font-size:15px;line-height:27px;text-align:center;box-shadow:2px 2px 0 rgba(0,0,0,.2)}
.rd-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;margin:4px 10px 22px 4px}
.rd-tile{border:0;background:none;cursor:pointer;color:#173F63;text-align:left;padding:14px 14px 15px;display:flex;flex-direction:column;gap:3px;min-width:0;
  transform:rotate(var(--tilt));filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.22)) drop-shadow(0 7px 8px rgba(10,25,45,.25));touch-action:manipulation;transition:transform .15s}
button.rd-tile:active{transform:rotate(var(--tilt)) translateY(3px) scale(.97)}
.rd-count{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:16px 16px 18px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-count:active{transform:rotate(var(--tilt)) translateY(3px) scale(.98)}
.rd-num{display:flex;align-items:baseline;gap:8px;line-height:1}
.rd-num b{font-size:clamp(46px,14vw,58px);color:#C2463B;letter-spacing:-.02em}
.rd-num i{font-style:normal;font-size:22px;color:#07556A}
.rd-num.sm b{font-size:34px;color:#173F63}.rd-num.sm i{font-size:17px}
.rd-lab{font-size:18px;line-height:1.05;color:#173F63}
.rd-meter{grid-column:1/2;display:block;height:20px;margin-top:9px;background:#EADBC2 var(--grain);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 0 rgba(43,36,32,.12)}
.rd-meter i{display:block;height:100%;border-radius:10px;background:repeating-linear-gradient(-45deg,#F3C64B 0 10px,#EDB93A 10px 20px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),2px 0 0 #D9A86A;transition:width 1s cubic-bezier(.2,1.2,.4,1)}
.rd-goal{grid-column:2;grid-row:1/4;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;color:#C2463B;font-size:16px}
.rd-goal .bd-med{width:74px;height:auto}
.rd-goal small{font-size:16px;line-height:1;margin-top:2px;background:#FFFAEE;padding:2px 6px;border-radius:8px;transform:rotate(-3deg)}
.rd-goal.won .bd-med{width:84px;animation:bdWob 3s ease-in-out infinite}
.rd-fire,.rd-bdgs{align-items:flex-start}
.rd-flame{display:flex;align-items:center;gap:4px;line-height:1;height:50px}
.rd-flame svg{width:46px;height:46px;flex:none;transform-origin:50% 90%}
.rd-fire.lit .rd-flame svg{animation:flick 1.6s ease-in-out infinite}
.rd-flame.wig svg{animation:wig .5s ease-in-out}
.rd-flame b{font-size:40px;color:#173F63}
.rd-fire:not(.lit) .rd-flame b{color:#8C7656}
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08,1.12) rotate(2deg)}}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.2)}75%{transform:rotate(12deg) scale(1.2)}}
.rd-week{display:grid;grid-template-columns:repeat(7,minmax(0,21px));gap:3px;margin-top:7px;width:100%}
.rd-week i{font-style:normal;width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(9px,2.7vw,12px);line-height:1;color:#5E4E3C;background:#F1E4CE;box-shadow:inset 0 0 0 1.5px rgba(185,164,134,.7)}
.rd-week i.on{background:#E9877A;color:#FFFAEE;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.rd-week i.now{box-shadow:inset 0 0 0 2px #173F63}
.rd-today{position:absolute;right:-6px;top:-10px;background:#C2463B var(--grain);color:#FFFAEE;font-size:14px;padding:4px 9px 3px;transform:rotate(5deg);clip-path:polygon(0 8%,6% 0,40% 6%,72% 0,100% 5%,98% 52%,100% 96%,62% 100%,30% 94%,4% 100%,1% 50%);animation:v2Breathe 2s ease-in-out infinite}
.rd-medrow{display:flex;height:50px;align-items:center;margin-left:-4px}
.rd-medrow .bd-med{width:44px;height:auto;flex:none}
.rd-medrow .bd-med+.bd-med{margin-left:-14px}
.rd-medrow .bd-med:nth-child(1){transform:rotate(-8deg);z-index:3}.rd-medrow .bd-med:nth-child(2){transform:rotate(6deg)}.rd-medrow .bd-med:nth-child(3){transform:rotate(-3deg)}
/* up next */
.rd-next{display:grid;grid-template-columns:38% 1fr auto;align-items:center;gap:10px 14px;margin:0 12px 22px 6px;padding:14px 14px 14px 14px;color:#173F63;text-decoration:none;--top:#FFFAEE;
  transform:rotate(-.8deg);filter:drop-shadow(0 2px 0 rgba(43,36,32,.25)) drop-shadow(0 9px 10px rgba(10,25,45,.28));touch-action:manipulation;transition:transform .15s}
.rd-next:active{transform:rotate(-.8deg) translateY(3px) scale(.98)}
.rd-next-tag{position:absolute;left:12px;top:-14px;background:#C2463B var(--grain);color:#FFFAEE;font-size:17px;padding:5px 12px 4px;transform:rotate(-4deg);
  clip-path:polygon(0 8%,6% 0,40% 6%,72% 0,100% 5%,98% 52%,100% 96%,62% 100%,30% 94%,4% 100%,1% 50%);z-index:2}
.rd-next-th{display:block;aspect-ratio:2/1;border-radius:9px;overflow:hidden;background:#BCD3D4}
.rd-next-th img{width:100%;height:100%;object-fit:cover}
.rd-next-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.rd-next-tx b{font-size:clamp(20px,5.8vw,24px);line-height:1.05}
.rd-next-tx small{font-size:15px;color:#07556A}
.rd-play{width:52px;height:52px;border-radius:50%;background:#E9877A;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),2px 3px 0 #173F63;animation:v2Breathe 2.2s ease-in-out infinite}
.rd-play svg{width:26px;height:26px;fill:#FFFAEE;margin-left:3px}
.rd-allread{display:flex;justify-content:center;margin:0 0 22px;filter:drop-shadow(0 3px 0 rgba(23,63,99,.25))}
/* section rings: tap to jump along the path */
.rd-map{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;margin:0 -16px 16px;padding:6px 18px 10px;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x pan-y}
.rd-map::-webkit-scrollbar{display:none}
.rd-mapb{flex:none;width:92px;border:0;background:none;cursor:pointer;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:3px;color:#173F63;scroll-snap-align:start;touch-action:manipulation;transform:rotate(var(--r));transition:transform .15s}
.rd-mapb:active{transform:rotate(var(--r)) scale(.92)}
.rd-ringw{position:relative;display:block;width:78px;height:78px;flex:none}
.rd-ring{position:absolute;inset:0;width:100%;height:100%}
.rd-ringi{position:absolute;inset:11px;border-radius:50%;overflow:hidden;background:var(--c);box-shadow:0 0 0 3px #FFFAEE,0 3px 0 3px rgba(43,36,32,.15)}
.rd-ringi img{width:100%;height:100%;object-fit:cover}
.rd-ringok{position:absolute;right:-2px;top:-2px;width:28px;height:28px;border-radius:50%;background:#F3C64B;color:#173F63;display:grid;place-items:center;box-shadow:2px 2px 0 #173F63;transform:rotate(10deg)}
.rd-ringok svg{width:18px;height:18px}
.rd-mapn{font-size:15px;line-height:1.02;text-align:center;min-height:31px;display:flex;align-items:center}
.rd-mapb small{font-size:13px;color:#07556A;background:#FFFAEE;border-radius:8px;padding:1px 7px}
.rd-mapb.done small{background:#F3C64B;color:#173F63}
.v2-read .rd-search{margin:0 4px 18px}
/* the winding path */
.rd-path{gap:0;padding:0 2px}
.rd-sec{display:flex;align-items:center;gap:12px;margin:26px 8px 18px;padding:12px 16px 12px 12px;color:#173F63;--top:var(--c);--under:#FFFAEE;transform:rotate(var(--r));
  filter:drop-shadow(0 2px 0 rgba(43,36,32,.25)) drop-shadow(0 7px 8px rgba(10,25,45,.22));scroll-margin-top:20px}
.rd-sec:first-child{margin-top:6px}
button.rd-sec{width:calc(100% - 16px);border:0;background:none;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;margin:0 8px 18px}
button.rd-sec:active{transform:rotate(var(--r)) scale(.98)}
.rd-sec-chev{flex:none;width:38px;height:38px;border-radius:50%;background:#FFFAEE;display:grid;place-items:center;box-shadow:0 2px 0 rgba(43,36,32,.25);transition:transform .25s ease}
.rd-sec-chev svg{width:22px;height:22px;fill:none;stroke:#173F63;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rd-sec.open .rd-sec-chev{transform:rotate(180deg)}
.rd-sec.open{margin-bottom:18px}
.rd-trail[hidden]{display:none}
.rd-trail{margin-bottom:22px}
.rd-sec .rd-ringw{width:70px;height:70px}
.rd-sec .rd-ring circle:first-child{stroke:rgba(255,250,238,.6)}
.rd-sec .rd-ringi{inset:10px}
.rd-sec-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rd-sec-tx b{font-size:clamp(25px,7.4vw,30px);line-height:1}
.rd-sec-tx small{font-size:17px;color:#173F63;opacity:.85}
.rd-sec-med{width:56px;height:auto;flex:none;margin:-10px -6px -12px 0;animation:bdWob 3s ease-in-out infinite}
.rd-trail{position:relative;display:flex;flex-direction:column;gap:16px;padding:4px 0}
.rd-trail::before{content:"";position:absolute;left:50%;top:-18px;bottom:-24px;width:0;border-left:5px dotted rgba(201,167,124,.75);z-index:-1}
.rd-searching .rd-path{gap:16px}
/* story cards: read ones get a gold layer + a sticker */
.rd-card.done,.rd-card.next{padding-right:36px}
.rd-card.done .rd-n{background:#07556A}
.rd-stk{position:absolute;right:-11px;top:-13px;width:40px;height:40px;border-radius:50%;background:#F3C64B var(--grain);color:#173F63;display:grid;place-items:center;
  box-shadow:0 0 0 3px #FFFAEE,2px 4px 0 3px rgba(43,36,32,.22);transform:rotate(var(--r,8deg))}
.rd-stk svg{width:26px;height:26px}
.rd-card.next{animation:v2Breathe 2.4s ease-in-out infinite}
.rd-card.next .rd-new{bottom:auto;top:-12px;right:-8px}
.rd-searching .rd-card.next{animation:none}
@media (prefers-reduced-motion:reduce){.rd-card.next,.rd-play,.rd-today,.rd-fire.lit .rd-flame svg,.rd-goal.won .bd-med,.rd-sec-med{animation:none}}
/* paper medallions */
.bd-med{display:block;overflow:visible;filter:drop-shadow(1px 2px 0 rgba(43,36,32,.25))}
.bd-med.off{filter:grayscale(1) opacity(.45)}
@keyframes bdWob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
/* badge sheet */
.bd-wrap{position:absolute;z-index:46;align-items:center}
/* the torn-paper backing is a ::before on .fs-sheet, so the sheet itself must not scroll (the paper would scroll away); scroll an inner layer instead */
.bd-sheet{width:min(100%,430px);gap:4px;padding-bottom:10px;max-height:calc(100% - 20px);overflow:visible}
.fs-sc{width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 2px 10px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
.bd-sheet .fs-done{flex:none}
.fs-sheet.has-sc{overflow:visible;max-height:calc(100% - 20px)}.fs-sheet.has-sc>.fs-done{flex:none}
.bd-count{margin:-2px 0 4px;font-size:18px;color:#173F63}.bd-count b{font-size:30px;color:#C2463B}
.bd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;width:100%}
.bd-cell{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:#173F63;transform:rotate(var(--r))}
.bd-cell .bd-med{width:74px;height:auto}
.bd-cell b{font-size:16px;line-height:1.05}
.bd-cell small{font-size:13.5px;line-height:1.1;color:#07556A;font-family:Grandstander,system-ui}
.bd-cell.off b{color:#3f5566}
.bd-cell small.ok{color:#8C7656}
.bd-prog{display:block;width:70%;height:7px;border-radius:4px;background:#EADBC2;overflow:hidden;margin-top:2px}
.bd-prog i{display:block;height:100%;background:#07556A;border-radius:4px}
.bd-lock{margin-top:12px}
/* sections sheet ("3 of 158") */
.sx-list{display:flex;flex-direction:column;gap:10px;width:100%;padding:2px 4px}
.sx-row{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:0;cursor:pointer;text-align:left;color:#173F63;background:#F6EAD7 var(--grain);padding:8px 12px 8px 8px;
  transform:rotate(var(--r));clip-path:polygon(0 6%,30% 0,70% 5%,100% 0,99% 50%,100% 96%,60% 100%,25% 95%,0 100%,1% 50%);filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--c) 75%,#173F63));touch-action:manipulation}
.sx-row:active{transform:rotate(var(--r)) translateY(2px) scale(.98)}
.sx-row .rd-ringw{flex:none;width:58px;height:58px}
.sx-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sx-tx b{font:800 19px/1.05 Grandstander,system-ui}
.sx-tx small{font:700 14.5px/1 Grandstander,system-ui;color:#07556A}
.sx-row.done .sx-tx small{color:#8C7656}
.sx-bar{width:100%;margin-top:3px}.sx-row.done .sx-bar i{background:#F3C64B}
.sx-go svg{width:22px;height:22px;fill:none;stroke:#C2463B;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bd-empty{margin:4px 0 6px;font-size:18px;text-align:center}
/* new badge pop-up (works over any screen, both readers too) */
.bd-pop{position:fixed;inset:0;z-index:92;display:grid;place-items:center;padding:16px;background:rgba(10,25,45,0);transition:background .3s;font-family:Grandstander,system-ui,sans-serif;font-weight:800}
.bd-pop.go{background:rgba(10,25,45,.55)}
.bd-pop-card{position:relative;isolation:isolate;width:min(100%,340px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 20px 22px;color:#173F63;text-align:center;
  transform:scale(.5) rotate(-8deg);opacity:0;transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.bd-pop.go .bd-pop-card{transform:rotate(-1.5deg);opacity:1}
.bd-pop-card::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFFAEE var(--grain);clip-path:var(--torn)}
.bd-pop-card::after{content:"";position:absolute;inset:0;z-index:-2;background:#F3C64B var(--grain);clip-path:var(--torn2);transform:translate(7px,8px) rotate(2deg)}
.bd-pop-h{margin:0;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#C2463B}
.bd-med.big{width:150px;height:auto;margin:2px 0}
.bd-pop.go .bd-med.big{animation:bdIn .9s cubic-bezier(.2,1.5,.4,1) both,bdWob 3s ease-in-out 1s infinite}
@keyframes bdIn{0%{transform:scale(.2) rotate(-200deg)}100%{transform:scale(1) rotate(0)}}
.bd-pop-n{font-size:30px;line-height:1.05}
.bd-pop-s{font-size:17px;line-height:1.15;color:#07556A}
.bd-pop-more{display:flex;gap:4px;justify-content:center;margin-top:6px}
.bd-pop-more .bd-med{width:46px;height:auto}
.bd-pop .v2-btn{margin-top:10px;font-size:24px;padding:14px 40px 13px}
@media (prefers-reduced-motion:reduce){.bd-pop.go .bd-med.big{animation:none}}
.bd-pop button{font-family:Grandstander,system-ui,sans-serif;font-weight:800}
.rd-next:first-of-type{margin-top:6px}
.v2-read .v2-col>.rd-next+.rd-stats{margin-top:4px}