/* Interactive blocks crafted in /admin (assets/js/blocks.js): visual novel, hotspots, before/after, flip cards */
.tzb{margin:1.6em 0;width:100%;user-select:none;-webkit-user-select:none}
.tzb figcaption{font-family:"Caveat",cursive;font-size:22px;text-align:center;color:var(--soft,#5b6478);margin-top:8px}

/* Visual novel */
.vn-title{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red,#d7182a);margin-bottom:8px}
.vn-stage{position:relative;aspect-ratio:16/9;min-height:300px;border-radius:12px;overflow:hidden;background:#13224b;cursor:pointer;outline-offset:3px}
.vn-bg{position:absolute;inset:0;background:center/cover no-repeat;transition:background-image .4s}
.vn-who{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:88%;width:auto;max-width:60%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.vn-who.pop{animation:vnpop .35s ease-out}
@keyframes vnpop{from{opacity:.2;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.vn-say{--vn-c:#13224b;position:absolute;left:12px;right:12px;bottom:12px;min-height:104px;padding:14px 18px 22px;border-radius:10px;background:rgba(255,255,255,.93);border-top:3px solid var(--vn-c);box-shadow:0 12px 30px -16px rgba(0,0,0,.5);color:#13224b}
.vn-name{display:block;font-family:var(--mono,monospace);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--vn-c);margin-bottom:4px}
.vn-line{margin:0;font-size:clamp(16px,2.2vw,19px);line-height:1.45}
.vn-next{position:absolute;right:14px;bottom:6px;font-size:11px;color:var(--vn-c);animation:vnbob 1s ease-in-out infinite}
@keyframes vnbob{50%{transform:translateY(3px)}}
.vn-choices{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(19,34,75,.35);backdrop-filter:blur(2px)}
.vn-choices[hidden]{display:none}
.vn-choice{font:inherit;font-size:16px;min-width:min(340px,90%);padding:12px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.94);color:#13224b;cursor:pointer;transition:transform .15s,background .15s}
.vn-choice:hover,.vn-choice:focus-visible{transform:translateY(-2px);background:#fff;border-color:#d7182a}
.vn-end{display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;font-size:20px}

/* Hotspot picture */
.spots-wrap{position:relative;border-radius:10px;overflow:hidden}
.spots-wrap>img{display:block;width:100%;height:auto}
.spot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;background:#d7182a;color:#fff;font:600 12px/1 var(--mono,monospace);cursor:pointer;box-shadow:0 0 0 0 rgba(215,24,42,.6);animation:spotping 2s infinite}
.spot.on{background:#13224b;animation:none}
@keyframes spotping{70%{box-shadow:0 0 0 12px rgba(215,24,42,0)}100%{box-shadow:0 0 0 0 rgba(215,24,42,0)}}
.spot-card{position:absolute;width:min(300px,60%);padding:12px 14px;border-radius:10px;background:#fff;color:#13224b;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);border-left:3px solid #d7182a;font-size:15px;line-height:1.45}
.spot-card b{display:block;margin-bottom:4px}
.spot-card p{margin:0}

/* Before / after */
.cmp-wrap{--cmp:50%;position:relative;border-radius:10px;overflow:hidden;touch-action:pan-y}
.cmp-wrap img{display:block;width:100%;height:auto}
.cmp-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--cmp)) 0 0)}
.cmp-top img{width:100%;height:100%;object-fit:cover}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--cmp);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.cmp-handle::after{content:"⟷";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;color:#13224b;display:grid;place-items:center;font-size:18px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-label{position:absolute;top:10px;padding:4px 10px;border-radius:99px;background:rgba(19,34,75,.8);color:#fff;font:500 12px var(--mono,monospace);letter-spacing:.08em;pointer-events:none}
.cmp-label.l{left:10px}.cmp-label.r{right:10px}

/* Flip cards (gacha colours: 3 blue, 4 purple, 5 gold) */
.tzb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.fc{--rc:#3b82f6;font:inherit;padding:0;border:0;background:none;cursor:pointer;perspective:900px;aspect-ratio:3/4.4}
.fc.r4{--rc:#8b5cf6}.fc.r5{--rc:#e0a526}
.fc-inner{position:relative;display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fc.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--rc);background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--rc) 18%,#fff));color:#13224b;text-align:left;overflow:hidden;box-shadow:0 14px 30px -18px var(--rc)}
.fc-back{transform:rotateY(180deg);background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 85%,#13224b),#13224b);color:#fff}
.fc-back p{margin:0;font-size:14px;line-height:1.4}
.fc-star{color:var(--rc);font-size:13px;letter-spacing:2px}.fc-back .fc-star{color:#fff}
.fc-pic{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:8px}
.fc-title{font-size:15px}
.fc:hover .fc-inner{transform:translateY(-3px)}.fc.flipped:hover .fc-inner{transform:rotateY(180deg) translateY(-3px)}
@media (prefers-reduced-motion:reduce){.fc-inner,.vn-who.pop,.spot{transition:none;animation:none}}

/* Story slides (the making-of "notes" scene): cream stage, picture, navy notes box with a red shadow */
.sl-stage{position:relative;height:clamp(420px,62vw,560px);border-radius:12px;overflow:hidden;cursor:pointer;color:#13224b;font-family:var(--mono,monospace);background:radial-gradient(circle at 70% 20%,#fff 0,#f4efe6 60%);outline-offset:3px}
.sl-tag{position:absolute;top:14px;left:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.sl-tag b{color:#d7182a;margin-right:6px}
.sl-dots{position:absolute;top:16px;right:16px;display:flex;gap:6px}
.sl-dots i{width:18px;height:3px;background:rgba(19,34,75,.19)}
.sl-dots i.on{background:#d7182a}
.sl-pic{position:absolute;inset:44px 0 150px;display:flex;align-items:center;justify-content:center}
.sl-pic img{max-width:94%;max-height:100%;object-fit:contain;transition:opacity .45s,transform .45s;filter:drop-shadow(0 10px 24px rgba(19,34,75,.18))}
.sl-pic img.out{opacity:0;transform:translateY(8px)}
.sl-box{position:absolute;left:12px;right:18px;bottom:16px;height:126px;background:#13224b;color:#fff;padding:16px 16px 12px;box-shadow:6px 6px 0 #d7182a}
.sl-who{position:absolute;top:-13px;left:14px;background:#fff;color:#13224b;font-size:11px;font-weight:600;letter-spacing:.18em;padding:4px 10px;border:1px solid #13224b;text-transform:uppercase}
.sl-who.n{background:#d7182a;color:#fff;border-color:#d7182a}
.sl-txt{font-family:"Fraunces",Georgia,serif;font-size:clamp(14px,3.4vw,17px);line-height:1.45;margin-top:4px}
.sl-txt.q{font-style:italic}
.sl-nx{position:absolute;right:14px;bottom:8px;font-size:11px;letter-spacing:.14em;opacity:.7;animation:slb 1.2s infinite}
@keyframes slb{50%{opacity:.2}}
@media (max-width:520px){.sl-dots{top:34px;left:16px;right:auto}.sl-pic{top:52px}}

/* Ache's lines for a part (blocks.js "ache"): hidden marker by default, a small note with show "bubble" */
.tzb-ache{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;max-width:460px;margin:18px 0 18px auto;padding:10px 14px;border:2px solid var(--ink,#13224b);border-radius:14px 14px 4px 14px;background:#fff;box-shadow:4px 4px 0 var(--red,#d7182a);font-family:Geist,system-ui,sans-serif;transform:rotate(-.6deg)}
.tzb-ache.quiet{display:none}
.tzb-ache .ache-star{grid-row:1/3;width:26px;height:26px;background:var(--red,#d7182a);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.tzb-ache b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red,#d7182a)}
.tzb-ache .ache-line{grid-column:2;margin:0;font-family:Caveat,cursive;font-size:22px;line-height:1.15;color:var(--ink,#13224b)}
.tzb-ache .ache-more{display:none}
.tzb-ache[role=button]{cursor:pointer}
.tzb-ache[role=button]:focus-visible{outline:3px solid var(--red,#d7182a);outline-offset:3px}
.tzb-ache.pop{animation:tzb-ache-pop .25s ease}
@keyframes tzb-ache-pop{from{transform:rotate(-.6deg) scale(.96)}to{transform:rotate(-.6deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.tzb-ache.pop{animation:none}}