.magic-scene{--box-size:108px;--depth:calc(var(--box-size)/2);position:relative;width:240px;height:220px;perspective:650px;isolation:isolate;flex-shrink:0;pointer-events:none}.magic-float{position:absolute;left:50%;top:43%;width:var(--box-size);height:var(--box-size);margin:calc(var(--box-size)/-2);transform-style:preserve-3d;animation:magic-hover 6.5s ease-in-out infinite}.magic-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-35deg) rotateZ(2deg);animation:magic-turn 16s ease-in-out infinite}.magic-face{position:absolute;inset:0;transform:var(--face);backface-visibility:hidden;border:2px solid #090c1c;border-radius:7px;background:radial-gradient(circle at 50% 50%,#6852c632,transparent 70%),linear-gradient(135deg,#242336e8,#080c1de8 60%,#1a1e3be8);box-shadow:inset 0 0 0 1px #a3a9ff8c,inset 0 0 25px #343ac25e,0 0 4px #6670fa55;overflow:hidden;transform-style:preserve-3d}.magic-face-front{--face:translateZ(var(--depth))}.magic-face-back{--face:rotateY(180deg) translateZ(var(--depth))}.magic-face-right{--face:rotateY(90deg) translateZ(var(--depth))}.magic-face-left{--face:rotateY(-90deg) translateZ(var(--depth))}.magic-face-top{--face:rotateX(90deg) translateZ(var(--depth))}.magic-face-bottom{--face:rotateX(-90deg) translateZ(var(--depth))}.magic-face svg{display:block;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.magic-frame{stroke:#b5b0f1;opacity:.6}.magic-crack{stroke:#6dd6ef;filter:drop-shadow(0 0 3px #52a4ff);animation:magic-rune 4s ease-in-out infinite}.magic-cat-rune{stroke:#c8a8f9;filter:drop-shadow(0 0 4px #9660ff);stroke-width:1.9}.magic-eyes{stroke:#f8b4d7;stroke-width:2.6;filter:drop-shadow(0 0 4px #fd76b6)}.magic-paw{stroke:#d4b4fb;display:none}.magic-face-right .magic-cat-rune,.magic-face-right .magic-eyes,.magic-face-left .magic-cat-rune,.magic-face-left .magic-eyes{display:none}.magic-face-right .magic-paw,.magic-face-left .magic-paw{display:block}.magic-face-top svg{transform:rotate(45deg) scale(.8)}.magic-face-top{background:radial-gradient(circle,#7162d755,#14192de8 68%)}.magic-heart{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,#e0d8ff,#8a7aff 20%,#5665f8 50%,transparent 72%);box-shadow:0 0 18px 8px #675ff46b;transform:translateZ(4px);animation:magic-core 3.2s ease-in-out infinite}.magic-aura{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 45%,#5662e72b,transparent 62%);animation:magic-core 4s ease-in-out infinite}.magic-orbit{position:absolute;left:17%;right:17%;bottom:17px;height:28px;border:1px solid #b5a2e5a6;border-radius:50%;box-shadow:0 0 17px #6658e365,inset 0 0 13px #5d83e747;transform:rotate(-6deg);animation:magic-ring 5s ease-in-out infinite}.magic-orbit:after{content:'';position:absolute;inset:7px 22px;border:1px dashed #bb95de77;border-radius:50%}.magic-particles{position:absolute;inset:0;overflow:hidden}.magic-particles i{position:absolute;width:3px;height:3px;left:calc(17% + var(--spark)*13%);top:calc(20% + var(--spark)*11%);background:#b8aaff;border-radius:50%;box-shadow:0 0 7px #b5a4ff;animation:magic-spark calc(3s + var(--spark)*.3s) ease-in-out infinite;animation-delay:calc(var(--spark)*-.6s)}.magic-particles i:nth-child(3n){background:#f2a3cf;box-shadow:0 0 6px #fa9bcf}.magic-touch{position:absolute;inset:0;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:25px;pointer-events:auto!important;cursor:pointer;touch-action:manipulation}.magic-touch:hover{filter:none!important}.magic-touch:active{transform:none!important}.magic-touch:focus-visible{outline:2px dashed #b5a6e8;outline-offset:-10px}.magic-scene.is-awake .magic-cube{animation:magic-wake 1.2s ease-in-out}.magic-scene.is-awake .magic-face{box-shadow:inset 0 0 0 2px #c7baff,inset 0 0 28px #7656f56b,0 0 10px #9589ed8c}.magic-scene.is-awake .magic-aura{background:radial-gradient(ellipse at 50% 45%,#a175ee4d,transparent 65%)}.magic-board-light{display:none;position:absolute;inset:20% 23%;grid-template-columns:repeat(3,1fr);gap:3px;transform:rotateX(20deg) rotateZ(-8deg);transform-style:preserve-3d}.magic-board-light i{display:block;border:1px solid #171a32;background:#c7beed;border-radius:5px;box-shadow:0 0 12px #9095ed66}.magic-board-light i:nth-child(3n){background:#edacd1}.magic-board-light i:nth-child(3n + 1){background:#a3d4e6}.magic-board-light i:nth-child(4n){background:#eee2b0}.magic-mini{--box-size:42px;width:90px;height:95px;perspective:350px}.magic-mini .magic-face{border-width:1px;border-radius:3px}.magic-mini .magic-orbit{bottom:3px;height:12px}.magic-mini .magic-orbit:after{inset:3px 8px}.magic-mini .magic-particles i{width:2px;height:2px}.magic-intro{--box-size:96px;width:220px;height:200px}.magic-result{--box-size:57px;width:105px;height:115px}.magic-badge{--box-size:25px;width:46px;height:48px}.magic-badge .magic-orbit,.magic-badge .magic-particles,.magic-badge .magic-heart{display:none}.magic-badge .magic-face{border-width:1px;border-radius:2px}.magic-badge .magic-float{animation:none}.magic-badge .magic-face svg{stroke-width:3px}.magic-scene[data-magic-state=charged] .magic-crack{animation-duration:2.6s}.magic-scene[data-magic-state=charged] .magic-aura{background:radial-gradient(ellipse at 50% 45%,#8874f77d,transparent 65%)}.magic-scene[data-magic-state=charged] .magic-cube{animation-duration:8s}.magic-scene[data-magic-state=quiet] .magic-face{box-shadow:inset 0 0 0 1px #8d83b4}.magic-scene[data-magic-state=win] .magic-crack{stroke:#f8d796}.magic-scene[data-magic-state=win] .magic-eyes{stroke:#ffc3df}.magic-opening{--box-size:118px;width:300px;height:285px;margin:10px auto 0}.magic-scene[data-magic-state=opening] .magic-float{animation:none}.magic-scene[data-magic-state=opening] .magic-cube{animation:magic-unseal 1.8s ease-in-out both;animation-delay:var(--magic-open-delay)}.magic-scene[data-magic-state=opening] .magic-face{animation:magic-face-release 1.8s ease-in-out both;animation-delay:var(--magic-open-delay)}.magic-scene[data-magic-state=opening] .magic-heart{animation:magic-core-release 1.8s ease-out both;animation-delay:var(--magic-open-delay)}.magic-scene[data-magic-state=opening] .magic-board-light{display:grid}.magic-scene[data-magic-state=opening] .magic-board-light i{animation:magic-tile-release 1.8s ease-out both;animation-delay:calc(var(--magic-open-delay) + var(--tile)*.015s)}.magic-opening-panel{overflow:hidden}.magic-opening-panel .sim-muted{margin-bottom:0}.sim-versus.with-magic-box{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr)}.sim-shared-box{display:flex;align-items:center;flex-direction:column;justify-content:center}.sim-shared-box small{font-size:9px;color:#c5afdb}.sim-result-magic{position:relative;width:210px;height:160px;margin:0 auto}.sim-result-magic>.sim-mascot{width:135px;height:150px;position:absolute;left:0;top:5px}.sim-result-magic>.magic-result{position:absolute;right:0;top:35px}.sim-opening-note{font-size:12px;color:#ecd1b2;line-height:1.8}.sim-opening-count{font-size:32px;font-weight:900;line-height:1.5;color:#e6c8fc;min-height:50px}.sim-magic-badge{display:flex;align-items:center;gap:6px;font-size:10px;color:#b5a0c4}.sim-magic-badge .magic-badge{margin:-6px 0}.dark-cat-scene.has-magic-box{height:255px}.dark-cat-scene.has-magic-box>.magic-hall{position:absolute;left:0;top:0;z-index:1}.dark-cat-scene.has-magic-box>.game-cat{position:absolute;right:-5px;bottom:6px;width:115px!important;height:125px!important;z-index:3}.dark-cat-scene.has-magic-box .arm-left{animation:magic-cat-tap 6s ease-in-out infinite;transform-origin:122px 221px}.dark-cat-scene.has-magic-box .dark-cat-note{bottom:-12px}.sim-intro .magic-intro{margin:0 auto 10px 0}.sim-intro.has-magic-box{padding-right:0}.sim-magic-caption{font-size:10px;letter-spacing:1px;color:#bca4ce}.sim-clock-note.sim-review-note{color:#baa6c7}
@keyframes magic-hover{0%,100%{translate:0 0}50%{translate:0 -4px}}@keyframes magic-turn{0%,100%{transform:rotateX(-22deg) rotateY(-35deg) rotateZ(2deg)}50%{transform:rotateX(-19deg) rotateY(-24deg) rotateZ(.5deg)}}@keyframes magic-core{0%,100%{opacity:.45;scale:.96}50%{opacity:.72;scale:1.025}}@keyframes magic-rune{0%,100%{opacity:.38}50%{opacity:.68}}@keyframes magic-ring{0%,100%{opacity:.35;scale:.9}50%{opacity:.8;scale:1.04}}@keyframes magic-spark{0%,100%{opacity:0;translate:0 8px}50%{opacity:.85;translate:0 -12px}}@keyframes magic-wake{0%,100%{transform:rotateX(-22deg) rotateY(-35deg)}25%{transform:rotateX(-21deg) rotateY(-29deg) rotateZ(-1deg)}55%{transform:rotateX(-23deg) rotateY(-40deg) rotateZ(1.5deg)}75%{transform:rotateX(-21deg) rotateY(-32deg)}}@keyframes magic-unseal{0%{transform:rotateX(-22deg) rotateY(-35deg);scale:1}25%{transform:rotateX(-18deg) rotateY(65deg);scale:1.08}55%{transform:rotateX(-12deg) rotateY(125deg);scale:1.14}100%{transform:rotateX(0) rotateY(180deg);scale:.8}}@keyframes magic-face-release{0%,30%{transform:var(--face);opacity:1}65%{transform:var(--face) translateZ(90px) rotateZ(12deg);opacity:.6}100%{transform:var(--face) translateZ(145px) rotateZ(25deg);opacity:0}}@keyframes magic-core-release{0%,30%{opacity:.8;scale:1}60%{opacity:1;scale:2}100%{opacity:0;scale:3}}@keyframes magic-tile-release{0%,40%{opacity:0;scale:.1;translate:0 20px}78%,100%{opacity:1;scale:1;translate:0 0}}@keyframes magic-cat-tap{0%,35%,65%,100%{transform:none}44%,56%{transform:rotate(56deg) translate(2px,-2px)}50%{transform:rotate(62deg) translate(2px,-2px)}}
@media(max-width:800px){.dark-cat-scene.has-magic-box{width:210px}.dark-cat-scene.has-magic-box>.magic-hall{--box-size:96px;width:210px}.dark-cat-scene.has-magic-box>.game-cat{width:100px!important;height:110px!important}}
@media(max-width:600px){.dark-cat-scene.has-magic-box{width:145px;height:200px}.dark-cat-scene.has-magic-box>.magic-hall{--box-size:75px;width:145px;height:165px;top:0}.dark-cat-scene.has-magic-box>.game-cat{width:78px!important;height:84px!important;right:0;bottom:3px}.dark-cat-scene.has-magic-box .dark-cat-note{font-size:8px;bottom:-10px}.magic-hall .magic-orbit{bottom:13px;left:12%;right:12%;height:18px}.sim-intro.has-magic-box{padding-right:115px;min-height:160px}.sim-intro .magic-intro{--box-size:64px;position:absolute;right:-5px;top:0;width:125px;height:145px}.sim-versus.with-magic-box{grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)}.sim-versus.with-magic-box .sim-avatar{max-width:100%;width:85px;height:95px}.sim-shared-box .magic-mini{width:76px;--box-size:39px}.magic-opening{--box-size:95px;width:250px;max-width:100%;height:245px}.magic-opening-panel{padding-left:12px;padding-right:12px}.magic-opening-panel h1{font-size:22px}.sim-opening-note{font-size:11px}.sim-opening-count{font-size:28px}.sim-result-magic{width:185px;height:150px}.sim-result-magic>.sim-mascot{width:120px;height:140px}.sim-result-magic>.magic-result{--box-size:50px;width:90px;height:105px;top:35px}.sim-magic-badge{font-size:9px}.sim-intro .sim-magic-caption{font-size:9px;line-height:1.8}}
@media(max-width:350px){.dark-cat-scene.has-magic-box{width:124px;height:190px}.dark-cat-scene.has-magic-box>.magic-hall{--box-size:65px;width:124px;height:155px}.dark-cat-scene.has-magic-box>.game-cat{width:70px!important;height:78px!important}.sim-intro.has-magic-box{padding-right:100px}.sim-intro .magic-intro{--box-size:57px;width:110px;height:140px}.sim-versus.with-magic-box{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr)}.sim-shared-box .magic-mini{width:62px;--box-size:32px;height:86px}.sim-versus.with-magic-box .sim-avatar{height:80px}.sim-shared-box small{font-size:8px}.magic-opening{--box-size:80px;width:220px;height:225px}}
@media(prefers-reduced-motion:reduce){.magic-scene *{animation:none!important}.magic-float{translate:none}.magic-cube{transform:rotateX(-22deg) rotateY(-35deg)}.magic-scene[data-magic-state=opening] .magic-cube{opacity:.3}.magic-scene[data-magic-state=opening] .magic-board-light{display:grid}.magic-scene[data-magic-state=opening] .magic-board-light i{opacity:1}.dark-cat-scene.has-magic-box .arm-left{animation:none!important}}

.dark-rank-mark.has-magic-rank{width:112px;height:110px;margin:18px auto 10px}.dark-rank-mark.has-magic-rank .magic-scene{--box-size:58px;width:100%;height:100%}
.magic-cat-face{transform-origin:50px 52px;animation:magic-cat-living 14s ease-in-out infinite}.magic-expression{opacity:0;animation-duration:14s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.magic-expression-calm{opacity:1;animation-name:magic-expression-calm}.magic-expression-curious{animation-name:magic-expression-curious}.magic-expression-happy{animation-name:magic-expression-happy}.magic-cat-eyes{stroke:#e3c5f6;stroke-width:2;filter:drop-shadow(0 0 2px #ae9bd9);opacity:.65}.magic-mouth{stroke:#d6b1e5;stroke-width:2;filter:drop-shadow(0 0 1.5px #b18dcc);opacity:.5}.magic-cat-eye-open{transform-origin:50px 52px;animation:magic-cat-blink 6.8s ease-in-out infinite}.magic-expression-curious .magic-cat-eyes{stroke:#c9e8ff;opacity:.9;filter:drop-shadow(0 0 3px #8eb8ed)}.magic-expression-curious .magic-mouth{stroke:#e0c2ff;opacity:.72;filter:drop-shadow(0 0 2.5px #ba97e5)}.magic-expression-happy .magic-cat-eyes{stroke:#ffdaeb;opacity:1;filter:drop-shadow(0 0 4px #eda6cd)}.magic-expression-happy .magic-mouth{stroke:#ffd0e5;opacity:1;filter:drop-shadow(0 0 3.5px #e996c3)}.magic-face-top .magic-paw,.magic-face-bottom .magic-paw{display:block}
.magic-scene[data-magic-state=charged] .magic-expression,.magic-scene[data-magic-state=opening] .magic-expression,.magic-scene[data-magic-state=win] .magic-expression,.magic-scene[data-magic-state=quiet] .magic-expression,.magic-scene.is-awake .magic-expression{animation:none;opacity:0}.magic-scene[data-magic-state=charged] .magic-expression-curious,.magic-scene[data-magic-state=opening] .magic-expression-curious,.magic-scene[data-magic-state=win] .magic-expression-happy,.magic-scene[data-magic-state=quiet] .magic-expression-calm,.magic-scene.is-awake .magic-expression-happy{opacity:1}.magic-scene[data-magic-state=quiet] .magic-cat-face{opacity:.6}.magic-scene.is-awake .magic-cat-face{opacity:1}.magic-scene.is-awake .magic-expression-calm,.magic-scene.is-awake .magic-expression-curious{opacity:0}.magic-scene[data-magic-state=opening] .magic-expression-curious .magic-cat-eyes{stroke:#e8d9ff;opacity:1}.magic-scene[data-magic-state=opening] .magic-expression-curious .magic-mouth{opacity:.9}
@keyframes magic-cat-living{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(-.4px,-.6px) rotate(-1.2deg)}53%{transform:translate(.6px,-.8px) rotate(1deg)}78%{transform:translate(0,-.4px) rotate(-.6deg)}}
@keyframes magic-cat-blink{0%,24%,29%,73%,78%,100%{transform:scaleY(1)}26%,76%{transform:scaleY(.08)}}
@keyframes magic-expression-calm{0%,37%,100%{opacity:1}43%,92%{opacity:0}97%{opacity:1}}
@keyframes magic-expression-curious{0%,37%,69%,100%{opacity:0}44%,63%{opacity:1}}
@keyframes magic-expression-happy{0%,63%,97%,100%{opacity:0}71%,90%{opacity:1}}
@media(prefers-reduced-motion:reduce){.magic-cat-face,.magic-expression,.magic-cat-eye-open{animation:none!important}.magic-expression-calm{opacity:1}.magic-expression-curious,.magic-expression-happy{opacity:0}}
