:root{--em:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";--cy:#22e6ff;--pk:#ff7ad9;--pu:#a58bff;--ag:#cfe3f5;--glass:rgba(18,26,66,.5)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;color:#eaf6ff;font:400 16px/1.55 Quicksand,system-ui,var(--em),sans-serif;background:radial-gradient(120% 90% at 50% 0,#10204f 0,#060a22 55%,#02030c 100%)}
canvas{position:fixed;inset:0;width:100%;height:100%}
.stage{position:fixed;inset:0;display:flex;padding:62px 16px 46px;overflow-y:auto;opacity:0;visibility:hidden;transform:scale(.95);filter:blur(10px);transition:opacity .6s,transform .6s,filter .6s,visibility .6s}
.stage.on{opacity:1;visibility:visible;transform:none;filter:none}
.wrap{margin:auto;width:100%;max-width:500px;text-align:center}
h1,h2,.mono{font-family:Orbitron,monospace,var(--em)}
h1{font-size:clamp(1.9rem,9vw,3.2rem);line-height:1.1;background:linear-gradient(90deg,var(--cy),var(--pk),var(--pu),var(--cy));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;filter:drop-shadow(0 0 14px rgba(34,230,255,.5))}
h2{font-size:clamp(1.1rem,5vw,1.5rem);color:var(--cy);text-shadow:0 0 12px var(--cy);margin-bottom:6px}
@keyframes shine{to{background-position:300% 0}}
.sub{color:var(--ag);opacity:.85;margin:10px 0 18px;font-size:.95rem}
.card{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(120,225,255,.35);border-radius:22px;padding:20px;margin:12px 0;box-shadow:0 0 26px rgba(34,230,255,.16),inset 0 0 34px rgba(255,122,217,.07);text-align:left}
.btn{font:600 .85rem Orbitron,monospace,var(--em);letter-spacing:.08em;min-height:48px;padding:0 26px;margin-top:10px;border-radius:99px;color:#fff;cursor:pointer;border:1.5px solid var(--cy);background:linear-gradient(135deg,rgba(34,230,255,.25),rgba(255,122,217,.25));box-shadow:0 0 18px rgba(34,230,255,.5);transition:transform .2s,box-shadow .2s}
.btn:hover{box-shadow:0 0 30px var(--pk);transform:translateY(-2px)}
.btn:active{transform:scale(.95)}
.btn:disabled{opacity:.35;pointer-events:none}
.btn.ghost{background:none;box-shadow:none;border-color:rgba(255,255,255,.4)}
button:focus-visible,input:focus-visible{outline:2px solid var(--pk);outline-offset:3px}
#top{background:linear-gradient(#060a22 60%,rgba(6,10,34,0));position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:max(8px,env(safe-area-inset-top)) 10px 6px}
.ib{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid rgba(120,225,255,.5);background:var(--glass);color:var(--cy);font-size:1rem;cursor:pointer;position:relative}
.ib:disabled{opacity:.25}
#dots{flex:1;display:flex;justify-content:center;gap:7px}
#dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);transition:.4s}
#dots i.d{background:var(--pu)}#dots i.on{background:var(--cy);box-shadow:0 0 10px var(--cy);transform:scale(1.4)}
#cnt{font:500 .7rem Orbitron,monospace,var(--em);color:var(--ag);white-space:nowrap}
#bgm i{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#ff5577}
#bgm.on i{background:#4dffa6;box-shadow:0 0 8px #4dffa6}
#bgm.hint{animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 20px var(--pk)}}
footer{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:.7rem;color:var(--ag);opacity:.4;pointer-events:none;z-index:5}
.orb{width:min(62vw,220px);aspect-ratio:1;margin:22px auto;border-radius:50%;cursor:pointer;border:1.5px solid rgba(255,255,255,.7);position:relative;animation:fl 5s ease-in-out infinite;transition:transform .8s,opacity .8s;background:radial-gradient(circle at 30% 24%,#fff 0 4%,rgba(255,255,255,.2) 12%,transparent 26%),radial-gradient(circle,transparent 50%,rgba(255,122,217,.4) 100%),conic-gradient(rgba(34,230,255,.45),rgba(255,122,217,.45),rgba(165,139,255,.45),rgba(207,227,245,.5),rgba(34,230,255,.45));box-shadow:0 0 50px rgba(34,230,255,.6),0 0 90px rgba(255,122,217,.3),inset 0 0 40px rgba(255,255,255,.3)}
.orb.warp{transform:scale(6);opacity:0}
@keyframes fl{50%{transform:translateY(-16px) scale(1.03)}}
input{width:100%;min-height:50px;margin:10px 0 0;padding:0 16px;border-radius:14px;border:1px solid var(--cy);background:rgba(2,6,24,.6);color:#fff;font:600 1.1rem Orbitron,monospace,var(--em);text-align:center;letter-spacing:.15em}
.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.msg{min-height:1.6em;margin-top:8px;font-weight:600}.ok{color:#4dffa6}.bad{color:var(--pk)}
.ring{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:3px solid var(--cy);box-shadow:0 0 40px var(--cy);opacity:0;pointer-events:none}
.open .ring{animation:ringx 1s ease-out}
@keyframes ringx{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(40)}}
#load{position:fixed;inset:0;z-index:50;background:#02030c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:500 .8rem Orbitron,monospace,var(--em);color:var(--cy);opacity:0;visibility:hidden;transition:.4s}
#load.on{opacity:1;visibility:visible}
#load b{display:block;width:200px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
#load b::after{content:"";display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--pk))}
#load.on b::after{animation:bar 1.2s forwards}
@keyframes bar{to{width:100%}}
.enter{animation:in .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes in{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(6px)}}
.pol{background:rgba(255,255,255,.1);padding:10px 10px 14px;border-radius:10px;transform:rotate(-2deg);position:relative;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 22px rgba(165,139,255,.4)}
.pol img{display:block;max-width:100%;max-height:50vh;width:auto;height:auto;margin:0 auto;border-radius:6px}
.pol::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(207,227,245,.4);transform:rotate(3deg)}
.pol::after,.strip::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,122,217,.18) 45%,rgba(34,230,255,.18) 55%,transparent 70%)}
.strip{display:flex;flex-direction:column;gap:8px;width:150px;margin:0 auto;padding:10px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);position:relative}
.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.ty{white-space:pre-wrap;min-height:5em;cursor:pointer}
.typing::after{content:"▍";color:var(--cy);animation:pulse 1s infinite}
.lock{text-align:center;font-size:3rem;cursor:pointer;padding:10px;user-select:none}
.flip{display:inline-block;width:30%;aspect-ratio:3/4;margin:4px 1%;perspective:600px;cursor:pointer;font-size:.8rem}
.flip div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;border-radius:12px;backface-visibility:hidden;transition:transform .6s;border:1px solid var(--cy);background:rgba(34,230,255,.12)}
.flip{position:relative}.flip div+div{transform:rotateY(180deg);background:rgba(255,122,217,.18);border-color:var(--pk)}
.flip.f div{transform:rotateY(180deg)}.flip.f div+div{transform:none}
#field{position:relative;height:min(52vh,430px);margin:6px 0}
.tb{font-family:system-ui,var(--em),sans-serif;position:absolute;border-radius:50%;cursor:pointer;font-size:1.5rem;animation:fl 5s ease-in-out infinite;transition:opacity .5s,filter .5s;transform:translate(-50%,-50%);border:1.5px solid hsla(var(--h),var(--s),82%,.85);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.9) 0 5%,transparent 20%),radial-gradient(circle,transparent 50%,hsla(var(--h),var(--s),70%,.5) 100%),conic-gradient(hsla(var(--h),var(--s),70%,.35),hsla(calc(var(--h) + 60),var(--s),75%,.35),hsla(calc(var(--h) - 50),var(--s),75%,.35),hsla(var(--h),var(--s),70%,.35));box-shadow:0 0 22px hsla(var(--h),var(--s),65%,.6),inset 0 0 16px hsla(calc(var(--h) + 40),var(--s),80%,.4)}
.tb.pop{animation:popx .35s forwards}
@keyframes popx{50%{transform:translate(-50%,-50%) scale(1.4)}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
.tb.gone{opacity:.14;filter:grayscale(1);pointer-events:none;animation:none}
.gbub{position:fixed;z-index:30;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;transition:left 1.2s cubic-bezier(.6,0,.3,1),top 1.2s cubic-bezier(.6,0,.3,1),transform 1.2s}
#modal{position:fixed;inset:0;z-index:40;display:flex;padding:16px;background:rgba(2,3,12,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:.3s}
#modal.on{opacity:1;visibility:visible}
#modal .card{margin:auto;width:100%;max-width:460px;max-height:86vh;overflow:auto;position:relative}
.x{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;background:none;color:var(--ag);font-size:1.6rem;cursor:pointer}
.fin h1{font-size:clamp(1.8rem,9vw,3.4rem);text-transform:uppercase;overflow-wrap:anywhere}
.ln{opacity:0;filter:blur(8px);margin:12px 0;font-size:1.1rem}
.go .ln{animation:rev 1.6s forwards;animation-delay:var(--d)}
@keyframes rev{to{opacity:1;filter:none}}
.fl{position:fixed;z-index:6;bottom:-30px;font-size:.8rem;color:var(--ag);padding:4px 12px;border-radius:99px;background:rgba(18,26,66,.5);animation:up 8s linear forwards;pointer-events:none}
@keyframes up{to{transform:translateY(-105vh);opacity:0}}
#cur{position:fixed;z-index:60;width:18px;height:18px;margin:-9px;border-radius:50%;pointer-events:none;border:1.5px solid var(--cy);box-shadow:0 0 14px var(--cy);display:none}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}