@font-face{font-family:Vibes;src:url(fonts/GreatVibes.ttf);font-display:block}
@font-face{font-family:Fell;src:url(fonts/IMFell.ttf);font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#4a0d10 0,#1a0606 70%);color:#f3e2b5;font-family:Fell,Georgia,serif;-webkit-user-select:none;user-select:none}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 16px);gap:18px}
.screen.on{display:flex}
.title{font-family:Vibes,'Snell Roundhand',cursive;font-weight:400;text-align:center;margin:0;font-size:3rem;line-height:.95;color:#e9c46a;text-shadow:0 2px 0 #7a5410,0 0 18px rgba(233,196,106,.45)}
.title span{font-size:4.4rem}
.seal{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d33,#7a0b0b);display:grid;place-items:center;font-size:36px;color:#f6d77a;box-shadow:0 4px 12px #0009,inset 0 0 0 4px #a01818}
form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px;text-align:center}
label{font-size:1.25rem;letter-spacing:.04em;color:#e9d6a4}
.row{display:flex;gap:10px}
input{flex:1;min-width:0;font:400 2rem Vibes,'Snell Roundhand',cursive;padding:12px 18px;border-radius:14px;border:3px solid #c9a227;background:linear-gradient(#f5e6c0,#e6cf98);color:#3b1a08;outline:none;-webkit-user-select:text;user-select:text;box-shadow:inset 0 2px 6px #7a541066}
@keyframes pulse{50%{box-shadow:0 0 0 10px #c21d1d44}}
.big{font:1.6rem Fell,Georgia,serif;letter-spacing:.06em;padding:18px 26px;min-height:68px;border-radius:40px;border:3px solid #f0d27a;color:#3b1a08;background:linear-gradient(#f7df8e,#c9a227 60%,#a4801a);box-shadow:0 6px 0 #6b5110,0 10px 20px #000a;width:100%;max-width:380px}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #6b5110}
.hide{visibility:hidden}
/* book */
.book{position:relative;width:min(94vw,440px);aspect-ratio:1.45;perspective:1400px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#5a2a12,#3a1808 60%,#5a2a12);box-shadow:0 0 0 3px #c9a227 inset,0 18px 40px #000c;transform:scale(.6) rotateX(30deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.4,.4,1),opacity .4s}
.book.open{transform:none;opacity:1}
.page,.face{position:absolute;top:12px;bottom:12px;width:calc(50% - 12px);background:linear-gradient(90deg,#e9d4a0,#f6e9c6 20%,#f3e2b5 80%,#dcc287);overflow:hidden}
.page.left,.face.back{left:12px;border-radius:6px 0 0 6px}
.page.right,.leaf{right:12px}
.page.right,.face.front{border-radius:0 6px 6px 0;background:linear-gradient(270deg,#e9d4a0,#f6e9c6 20%,#f3e2b5 80%,#dcc287)}
.leaf{position:absolute;top:12px;bottom:12px;width:calc(50% - 12px);transform-origin:left center;transform-style:preserve-3d;z-index:5}
.leaf .face{top:0;bottom:0;left:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .face.back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
.leaf.flip{transform:rotateY(-180deg);transition:transform var(--d,300ms) cubic-bezier(.45,.05,.55,.95)}
.leaf.flip .front{animation:shade var(--d,300ms) linear}
@keyframes shade{50%{filter:brightness(.7)}}
.spine{position:absolute;left:50%;top:6px;bottom:6px;width:10px;margin-left:-5px;background:linear-gradient(90deg,#0004,#000a,#0004);z-index:6;pointer-events:none}
.names{padding:8% 10%;font:400 clamp(14px,4.4vw,21px)/1.35 Vibes,'Snell Roundhand',cursive;color:#3b1a08}
.names div{border-bottom:1px solid #a07b3a55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.names .n::after{content:' ✓';font-family:Fell;color:#2d6a2d;font-size:.7em}
.names.found{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}
.names.found .hdr{font:clamp(11px,3vw,14px) Fell;letter-spacing:.15em;color:#7a1010;border:0}
.names.found .big-name{font-size:clamp(34px,11vw,58px);line-height:1.1;border:0;white-space:normal;color:#2a0e02;text-shadow:0 1px 0 #fff6}
.stamp{position:relative;font:900 clamp(56px,18vw,96px) Fell,Georgia,serif;color:#c21d1d;border:8px solid #c21d1d;border-radius:18px;padding:0 22px;transform:rotate(-12deg) scale(4);opacity:0;mix-blend-mode:normal;text-shadow:0 0 2px #c21d1d;margin-top:-40px;z-index:10;background:#f3e2b5cc}
.stamp.hit{transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;transform:rotate(-12deg) scale(1);opacity:1;box-shadow:0 0 0 4px #e9c46a,0 0 40px #e9c46a99}
.leaf{visibility:hidden}.leaf.flip{visibility:visible}
.stamp{margin-top:-10px}
#a2hs{position:fixed;z-index:60;top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:2px solid #c9a227;background:linear-gradient(#f5e6c0,#e6cf98);color:#3b1a08;font-size:1rem;line-height:1.3;box-shadow:0 6px 18px #000a}
#a2hs[hidden]{display:none}#a2hs b{font-family:Vibes,cursive;font-size:1.35rem;font-weight:400;color:#7a1010}
#a2hs .x{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid #c9a227;background:#6e0e14;color:#f6d77a;font-size:22px}
.names.found .big-name{padding:0 .3em;overflow:visible}.names.found{padding:4%}