body{--mv:1}body.calm{--mv:0}@media(prefers-reduced-motion:reduce){body{--mv:0}}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#04050d;color:#e8f4ff;font-family:Segoe UI,Hiragino Sans,Yu Gothic UI,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none}section{pointer-events:auto}.hidden{display:none!important}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:94vh;overflow:auto;padding:26px 30px;background:#060818d6;border:1px solid rgba(53,240,255,.45);border-radius:14px;box-shadow:0 0 40px #35f0ff2e,inset 0 0 30px #9b6bff14;backdrop-filter:blur(3px);animation:panelin .24s cubic-bezier(.2,.9,.3,1)}.center{text-align:center}h1{font-size:clamp(40px,8vw,84px);letter-spacing:.08em;font-weight:900;text-shadow:0 0 18px #35f0ff,0 0 44px #ff3df2}h1 span{color:#35f0ff}h2{font-size:30px;margin-bottom:14px;text-shadow:0 0 14px #9b6bff}.sub{opacity:.85;margin:6px 0 16px}.hint{opacity:.6;font-size:13px;margin-top:12px}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}button{font:inherit;font-weight:700;color:#e8f4ff;background:#35f0ff1a;border:1px solid rgba(53,240,255,.6);padding:10px 18px;border-radius:10px;cursor:pointer;transition:transform .08s,background .15s,box-shadow .15s}button:hover{background:#35f0ff47;box-shadow:0 0 18px #35f0ff80;transform:translateY(-1px)}button:active{transform:scale(calc(1 - .04*var(--mv)));transition-duration:.04s}button.big{font-size:20px;padding:13px 30px;background:linear-gradient(90deg,#35f0ff59,#ff3df259);border-color:#fff}button.sel{border-color:#ffe14a;background:#ffe14a38;box-shadow:0 0 16px #ffe14a80}button.lock{opacity:.4;cursor:not-allowed}.wbtn{min-width:150px;font-size:14px}.wbtn small{display:block;font-weight:400;opacity:.8;font-size:11px;margin-top:3px}.records{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:12px;text-align:center}.records div{background:#ffffff0d;border-radius:8px;padding:8px 6px}.records b{display:block;font-size:20px;color:#ffe14a}.records span{font-size:12px;opacity:.75}.records .new b{color:#ff3df2;text-shadow:0 0 10px #ff3df2}ul.left{text-align:left;line-height:1.75;padding-left:20px;font-size:15px}.form{display:flex;flex-direction:column;gap:10px;text-align:left}.form label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}.form input[type=range]{flex:0 0 220px}.form output{width:44px;text-align:right;opacity:.8}.form select{font:inherit;background:#0a0e28;color:#fff;border:1px solid #35f0ff;border-radius:6px;padding:4px 8px}.chk{justify-content:flex-start!important}#levelup{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#140a3240,#02020cb3)}#levelup h2{font-size:clamp(34px,6vw,60px);letter-spacing:.2em;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}.cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:10px}.card{position:relative;width:min(250px,28vw);min-width:200px;padding:18px 16px;border-radius:14px;background:#080a1ee6;border:2px solid var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 40%,transparent);cursor:pointer;text-align:center;transform:perspective(800px) translateY(calc(var(--mv)*var(--lift,0px))) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:transform .14s ease-out,box-shadow .14s;animation:cardin .5s calc(var(--i,0)*80ms) cubic-bezier(.2,.9,.3,1) backwards,cardfloat 3.4s calc(var(--i,0)*80ms + .5s + var(--i,0)*.4s) ease-in-out infinite}.card:before{content:"";position:absolute;inset:-2px;border-radius:14px;pointer-events:none;z-index:-1;box-shadow:0 0 30px var(--c),inset 0 0 16px color-mix(in srgb,var(--c) 60%,transparent);opacity:.3;animation:cardbreath 2.2s calc(var(--i,0)*80ms + .3s + var(--i,0)*.35s) ease-in-out infinite}.card:hover,.card.focus{--lift:-8px;--sc:calc(1 + .04*var(--mv));box-shadow:0 0 50px var(--c)}.card:hover:before,.card.focus:before{animation:none;opacity:1}.card.rare{border-color:#ffe14a;background:linear-gradient(135deg,#3c2800eb,#080a1eeb 55%,#3c1432eb);box-shadow:0 0 34px #ffe14ab3,0 0 70px color-mix(in srgb,var(--c) 50%,transparent);overflow:hidden}.card.rare:before{box-shadow:0 0 40px #ffe14a,inset 0 0 26px #ffe14ab3;animation-duration:1.1s}.card.rare:after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translate(-120%);animation:rareshine 1.6s ease-in-out .5s infinite;pointer-events:none}.card.rare .nm{color:#fff1a8;text-shadow:0 0 12px #ffe14a}.card .tag{display:inline-block;background:#ffe14a;color:#1b1200;border-radius:6px;padding:0 7px;font-size:11px;font-weight:900;margin-left:6px;vertical-align:1px}@keyframes cardbreath{0%,to{opacity:.3}50%{opacity:.9}}@keyframes rareshine{0%{transform:translate(-120%)}60%,to{transform:translate(120%)}}@keyframes cardin{0%{opacity:0;translate:0 calc(var(--mv)*90px);scale:calc(1 - .35*var(--mv))}55%{opacity:1;translate:0 calc(var(--mv)*-8px);scale:calc(1 + .08*var(--mv))}to{opacity:1;translate:0 0;scale:1}}@keyframes cardfloat{0%,to{translate:0 0}50%{translate:0 calc(var(--mv)*-4px)}}@keyframes keypop{0%{opacity:0;scale:calc(1 - .8*var(--mv))}60%{opacity:.9;scale:calc(1 + .6*var(--mv))}to{opacity:.6;scale:1}}#pickfx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}.card.ghost{position:fixed;margin:0;min-width:0;transition:none;transform:none;animation:none;translate:none;scale:none;will-change:transform,opacity}.card.ghost:before{animation:none;opacity:.8}.card.ghost .key{animation:none}.card.ghost.sel{animation:gsel .2s ease-out forwards}.card.ghost.out{animation:gout .18s ease-in forwards}@keyframes gsel{0%{scale:1;filter:brightness(1)}35%{scale:calc(1 + .15*var(--mv));filter:brightness(2.3)}to{scale:calc(1 + .15*var(--mv));opacity:0;filter:brightness(1.4)}}@keyframes gout{0%{scale:1;opacity:1}to{scale:calc(1 - .25*var(--mv));opacity:0;translate:0 calc(var(--mv)*14px)}}.card .emblem{display:block;margin:0 auto -4px;filter:drop-shadow(0 0 6px var(--c))}.card .formula{font-size:12px;color:#cfe;opacity:.85;font-family:"Cambria Math",Segoe UI,serif;letter-spacing:.03em}.card .key{font-size:12px;opacity:.6;animation:keypop .3s calc(var(--i,0)*80ms + .42s) backwards}.card .nm{font-size:20px;font-weight:900;color:var(--c);margin:4px 0}.card .lv{font-size:15px;color:#ffe14a;margin-bottom:6px}.card .ds{font-size:13px;opacity:.85;line-height:1.5}.card .up{margin-top:8px;font-size:13px;color:#9fffc0}.card .evo{margin-top:6px;font-size:11px;color:#ffd07a}.card .new{display:inline-block;background:#ff3df2;color:#fff;border-radius:6px;padding:0 6px;font-size:11px;margin-left:6px}@keyframes panelin{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(1 - .06*var(--mv)))}}#levelup{animation:fadein .2s ease-out}@keyframes fadein{0%{opacity:0}}.records b.cnt{position:relative;color:transparent!important;text-shadow:none!important}.records b.cnt:after{content:attr(data-n);position:absolute;left:0;right:0;top:0;color:#ffe14a}.records .new b.cnt:after{color:#ff3df2;text-shadow:0 0 10px #ff3df2}@keyframes pop{0%{transform:scale(calc(1 + 1.2*var(--mv)));opacity:0;filter:blur(calc(8px*var(--mv)))}}@media(max-width:700px){.panel{padding:16px 14px}.cards{gap:8px}.card{min-width:0;width:30vw;padding:10px 6px}.card .ds{font-size:11px}}#flash-note{position:fixed;top:10px;left:50%;transform:translate(-50%);z-index:30;max-width:min(680px,94vw);display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;padding:10px 14px;background:#0a081ef0;border:1px solid #ffe14a;border-radius:10px;font-size:13px;line-height:1.4;text-align:center;box-shadow:0 0 24px #ffe14a40}#flash-note button{padding:5px 12px;font-size:13px}@media(max-height:520px){.panel{padding:8px 16px}h1{font-size:clamp(26px,9vh,40px)}h2{font-size:22px;margin-bottom:8px}#title .sub,#title .hint{display:none}.row{margin:6px 0;gap:8px}button{padding:7px 14px}button.big{font-size:17px;padding:9px 22px}.wbtn{min-width:104px;font-size:12px;padding:5px 8px}.wbtn small{display:none}.records{margin-top:6px;gap:6px;grid-template-columns:repeat(6,1fr)}.records div{padding:4px 2px}.records b{font-size:15px}.records span{font-size:10px}}