:root{--board:#23201d;--paper:#fbf4e4;--ink:#3a2e27;--ink-2:#5a4a3c;--accent:#b8532f;--seal:#b23a2a;--display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;--pen:"Zen Kurenaido","Yomogi",cursive;--brush:"Yomogi","Zen Kurenaido",cursive;--body:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--board);overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{position:fixed;inset:0;display:grid;place-items:center}.phw{position:relative;width:390px;height:845px;transform-origin:center center}.ph{position:absolute;left:0;top:0;width:390px;height:845px;overflow:hidden;background:#111;user-select:none;-webkit-user-select:none;font-size:16px;line-height:1.5;color:var(--ink)}.ph canvas{position:absolute;inset:0;width:390px;height:845px;display:block}.ph .fx{pointer-events:none}.ph .ui{position:absolute;inset:0}.hidden{display:none!important}.hs{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;cursor:pointer}.hs .ring{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,244,214,.95);box-shadow:0 0 #ffd6788c,0 0 20px #ffdc9680;animation:pulse 2.2s ease-out infinite}.hs .lbl{position:absolute;font-family:var(--pen);font-size:21px;line-height:1;color:#3b2f28;white-space:nowrap;text-shadow:0 0 8px rgba(255,248,230,1),0 0 3px #fff8e6,0 0 3px #fff8e6}.hs.b .lbl{top:58px;left:50%;transform:translate(-50%)}.hs.t .lbl{bottom:58px;left:50%;transform:translate(-50%)}.hs.r .lbl{left:62px;top:50%;transform:translateY(-50%)}.hs.l .lbl{right:62px;top:50%;transform:translateY(-50%)}.hs.danger .ring{border-color:#ffcdaff2;box-shadow:0 0 #e66e4680,0 0 20px #f08c5a8c}.hs.disabled{pointer-events:none;opacity:.4}@keyframes pulse{0%{box-shadow:0 0 #ffd6788c,0 0 20px #ffdc9680}to{box-shadow:0 0 0 24px #ffd67800,0 0 20px #ffdc9680}}@media(prefers-reduced-motion:reduce){.hs .ring,.tapme{animation:none}}.nar{position:absolute;font-family:var(--display);font-size:16px;line-height:1.85;color:var(--ink);text-shadow:0 0 12px rgba(255,248,232,1),0 0 4px rgba(255,248,232,1),0 0 4px rgba(255,248,232,1)}.strip{position:absolute;left:0;right:0;bottom:0;height:200px;padding:30px 28px 0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.85;clip-path:polygon(0 16px,6% 7px,12% 18px,19% 5px,27% 14px,34% 3px,42% 16px,50% 7px,58% 18px,66% 4px,74% 15px,82% 6px,90% 17px,96% 7px,100% 13px,100% 100%,0 100%);box-shadow:0 -8px 24px #3c281426}.stats{position:absolute;left:28px;right:28px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--pen);font-size:19px;color:#3b2f28;text-shadow:0 0 8px rgba(255,248,230,1),0 0 3px #fff8e6}.stats span{display:flex;align-items:center;gap:6px;white-space:nowrap}.stats i{display:inline-flex;gap:3px}.stats i b{width:9px;height:9px;border-radius:50% 45% 55% 50%;background:var(--accent);display:inline-block}.stats i b.off{background:transparent;border:1.5px solid var(--accent);opacity:.6}.clock{position:absolute;left:28px;top:56px;font-family:var(--pen);color:#3b2f28;text-shadow:0 0 8px rgba(255,248,230,1),0 0 3px #fff8e6;line-height:1}.clock b{font-weight:400;font-size:30px;display:block}.clock small{display:block;font-size:15px;opacity:.8;margin-top:6px}.soul{position:absolute;right:28px;top:56px;font-family:var(--pen);font-size:17px;color:#3b2f28;text-shadow:0 0 8px rgba(255,248,230,1),0 0 3px #fff8e6;text-align:right;line-height:1.3}.logo{position:absolute;left:0;right:0;text-align:center}.logo.brush{top:112px;font-family:var(--brush);font-size:60px;line-height:1.08;letter-spacing:.02em;background:linear-gradient(120deg,#5b3d2e,#b8532f 45%,#3f3330);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}.logo.brush .l2{font-size:44px;letter-spacing:.06em}.logo.brush small{display:block;font-family:var(--pen);font-size:18px;margin-top:10px;letter-spacing:.28em;-webkit-text-fill-color:#6d5a4b;color:#6d5a4b}.seal{position:absolute;width:56px;height:56px;border:3px solid var(--seal);border-radius:6px;color:var(--seal);font-family:var(--display);font-weight:700;font-size:18px;line-height:1;display:grid;place-items:center;letter-spacing:.1em;opacity:.85;mix-blend-mode:multiply}.tapme{position:absolute;left:0;right:0;bottom:64px;text-align:center;font-family:var(--pen);font-size:20px;color:var(--ink-2);animation:blink 2.4s ease-in-out infinite;padding:0 24px}@keyframes blink{50%{opacity:.35}}.result{position:absolute;left:24px;right:24px;bottom:44px;text-align:center;font-family:var(--display);font-size:16px;color:var(--ink);text-shadow:0 0 8px rgba(255,248,232,1),0 0 3px #fff8e6;line-height:1.4}.result b{display:block;font-family:var(--brush);font-size:36px;color:var(--accent);margin-top:2px;font-weight:400}.corner{position:absolute;font-family:var(--pen);font-size:18px;color:var(--ink-2);text-shadow:0 0 8px rgba(255,248,230,1),0 0 3px #fff8e6;cursor:pointer;padding:8px}.corner.tl{left:20px;top:46px}.corner.tr{right:20px;top:46px}.card-text{position:absolute;left:28px;right:28px;top:300px;text-align:center;color:var(--ink);text-shadow:0 0 12px rgba(255,248,232,1),0 0 4px rgba(255,248,232,1)}.card-text .big{font-family:var(--brush);font-size:40px;line-height:1.3;color:#2f261f}.card-text .line{font-family:var(--display);font-size:16px;line-height:1.9;margin-top:14px}.card-text .pen{font-family:var(--pen);font-size:19px;margin-top:10px;color:var(--ink-2)}.epi{position:absolute;left:0;right:0;text-align:center;color:var(--ink)}.epi .sp{font-family:var(--pen);font-size:19px;letter-spacing:.1em;opacity:.8}.epi .big{font-family:var(--brush);font-size:60px;line-height:1.15;color:#2f261f}.epi .line{font-family:var(--display);font-size:15px;line-height:1.9}.epi .cause{font-family:var(--pen);font-size:28px;color:var(--accent);margin-top:8px}.epi .q{font-family:var(--pen);font-size:22px;margin-top:8px}.epi .rank{display:inline-block;margin-top:14px;font-family:var(--pen);font-size:18px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:3px 16px}.epi .soulgain{font-family:var(--pen);font-size:17px;color:var(--accent);margin-top:10px}.death{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);text-align:center;color:var(--ink)}.death .q{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.6}.death .c{font-family:var(--pen);font-size:21px;margin-top:14px}.ink-link{position:absolute;font-family:var(--brush);font-size:24px;color:var(--accent);text-shadow:0 0 8px rgba(255,248,232,1),0 0 3px #fff8e6;cursor:pointer;line-height:1.2;text-align:center;padding:6px 10px}.ink-link.ghost{color:var(--ink-2);font-size:20px;font-family:var(--pen)}.ink-link u{text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}.book{position:absolute;inset:70px 24px 120px;perspective:1400px}.page{position:absolute;inset:0;background:var(--paper);box-shadow:0 10px 24px #28190a40;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1)}.page.flipped{transform:rotateY(-180deg)}.page .face{position:absolute;inset:0;backface-visibility:hidden;padding:20px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}.page .face.back{transform:rotateY(180deg);background:#f1e6cf}.page .pic{flex:1;position:relative;overflow:hidden;border-radius:3px}.page .pic canvas{position:absolute;inset:0;width:100%;height:100%}.page .cap{font-family:var(--display);font-size:15px;line-height:1.85;min-height:56px}.page .cap.cur{color:var(--accent)}.page .no{font-family:var(--pen);font-size:17px;opacity:.6;display:flex;justify-content:space-between}.page .cover{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}.page .cover .t{font-family:var(--brush);font-size:34px;color:#2f261f}.narbar{position:absolute;left:30px;right:30px;bottom:58px;display:flex;align-items:center;gap:12px;font-family:var(--pen);font-size:18px;color:#3b2f28}.narbar .play{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fbf1df;display:grid;place-items:center;font-size:16px;box-shadow:0 4px 10px #0003;flex:none;cursor:pointer}.narbar .ink{flex:1;height:6px;position:relative}.narbar .ink i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#3a2e27,#b8532f);border-radius:3px 60% 60% 3px}.narbar .ink i.run{transition:width 6s linear}.shelf{position:absolute;inset:110px 24px 40px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}.spine{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--paper);box-shadow:0 6px 16px #28190a33;cursor:pointer;transform:rotate(-.4deg)}.spine:nth-child(2n){transform:rotate(.5deg)}.spine .t{font-family:var(--brush);font-size:22px;color:#2f261f}.spine .s{font-family:var(--pen);font-size:15px;color:var(--ink-2)}.spine .c{margin-left:auto;font-family:var(--pen);font-size:15px;color:var(--accent);white-space:nowrap}.urlbar{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--pen);font-size:14px;color:var(--ink-2)}.toast{position:absolute;left:30px;right:30px;top:108px;background:#3a2e27;color:#fbf1df;font-family:var(--pen);font-size:17px;padding:10px 14px;border-radius:12px;text-align:center}.cta{position:absolute;left:30px;right:30px;bottom:40px;text-align:center}.cta .btn{display:block;font-family:var(--brush);font-size:22px;color:#fbf1df;background:var(--accent);padding:14px 10px 12px;border-radius:999px;box-shadow:0 8px 20px #b8532f59;line-height:1.1;cursor:pointer}.cta .btn.ghost{background:transparent;color:#3b2f28;border:2px solid #3b2f28;box-shadow:none;font-size:21px;margin-top:12px;padding:9px}.cta .sub{font-family:var(--pen);font-size:16px;color:var(--ink-2);margin-top:10px}.cta .stores{display:flex;gap:8px;justify-content:center;margin-top:12px;font-size:12px;color:#3b2f28;font-family:var(--body)}.cta .stores span{border:1px solid #3b2f28;border-radius:6px;padding:4px 12px;background:#fff9;cursor:pointer}.claim{position:absolute;left:28px;right:28px;top:50%;transform:translateY(-50%);text-align:center;color:var(--ink)}.claim .t{font-family:var(--brush);font-size:34px;color:#2f261f}.claim .h{font-family:var(--display);font-size:15px;line-height:1.8;margin-top:10px}.claim input{margin-top:16px;width:200px;font-family:var(--pen);font-size:28px;text-align:center;letter-spacing:.3em;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);outline:none;text-transform:lowercase}.langs{position:absolute;left:0;right:0;bottom:120px;display:flex;justify-content:center;gap:28px;font-family:var(--pen);font-size:20px;color:var(--ink-2)}.langs span{cursor:pointer;padding:6px}.langs span.on{color:var(--accent);border-bottom:2px solid var(--accent)}