.hl-alchemy-motion{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px 16px;overflow-y:auto;overscroll-behavior:contain;background:rgba(240,238,233,.94);backdrop-filter:blur(14px);color:#3D3835;font-family:'Noto Sans TC',sans-serif;isolation:isolate}
html[lang^="zh-CN"] .hl-alchemy-motion,html[lang="zh-Hans"] .hl-alchemy-motion{font-family:'Noto Sans SC',sans-serif}
.hl-am-panel{position:relative;box-sizing:border-box;width:min(100%,560px);max-height:calc(100dvh - 48px);overflow:auto;padding:38px 24px 28px;text-align:center;border:1px solid rgba(160,90,107,.22);border-radius:28px;background:linear-gradient(145deg,#fff 25%,#F0EEE9);box-shadow:0 18px 64px rgba(160,90,107,.16)}
.hl-am-eyebrow{margin:0 0 12px;color:#A05A6B;font-size:.76rem;font-weight:600;letter-spacing:.22em}
.hl-am-panel h2{margin:0;font-size:clamp(1.35rem,4.7vw,1.8rem);font-weight:600;line-height:1.6;letter-spacing:.035em;color:#3D3835}
.hl-am-scene{position:relative;width:300px;height:300px;max-width:100%;margin:12px auto 0;contain:layout;perspective:700px}
.hl-am-halo,.hl-am-ring,.hl-am-core,.hl-am-sources,.hl-am-revealed{position:absolute;inset:0;margin:auto;pointer-events:none}
.hl-am-halo{width:90%;height:90%;border-radius:50%;background:radial-gradient(circle,rgba(255,204,204,.65),rgba(0,123,127,.09) 48%,transparent 70%);animation:hlAmBreathe 3s ease-in-out infinite}
.hl-am-ring{width:184px;height:184px;border:1px solid rgba(160,90,107,.24);border-top-color:#A05A6B;border-radius:50%;transform:rotateX(54deg);animation:hlAmOrbit 5s linear infinite}
.hl-am-ring.ring-two{width:234px;height:234px;border-color:rgba(0,123,127,.2);border-right-color:#007B7F;transform:rotateX(64deg) rotateY(26deg);animation-direction:reverse;animation-duration:7s}
.hl-am-ring.ring-three{width:142px;height:142px;border-color:rgba(232,138,44,.25);border-bottom-color:#E88A2C;animation-duration:4s}
.hl-am-core{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,#fff 12%,rgba(255,204,204,.85) 42%,rgba(0,123,127,.1) 66%,transparent 72%);filter:drop-shadow(0 6px 20px rgba(160,90,107,.22));animation:hlAmBreathe 2.8s ease-in-out infinite}
.hl-am-material{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px;display:grid;place-items:center;background:rgba(255,255,255,.82);border:1px solid rgba(160,90,107,.22);border-radius:18px;box-shadow:0 6px 22px rgba(160,90,107,.13);transform:translate(var(--am-x),var(--am-y));animation:hlAmGather 650ms ease-out both;animation-delay:var(--am-delay)}
.hl-am-art{display:grid;place-items:center;width:100%;height:100%;font-size:.76rem;line-height:1.45;overflow:hidden;border-radius:inherit}
.hl-am-art img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.hl-am-material .hl-am-art{width:46px;height:46px}
.hl-am-beam{position:absolute;left:50%;top:50%;width:1px;height:84px;transform-origin:50% 0;background:linear-gradient(#E88A2C,rgba(160,90,107,0));opacity:0;transform:rotate(var(--am-angle)) translateY(46px)}
[data-phase="fuse"] .hl-am-material{animation:hlAmFuse 1.4s cubic-bezier(.5,0,.3,1) var(--am-delay) both}
[data-phase="fuse"] .hl-am-beam{animation:hlAmFlow 2.2s ease-in-out var(--am-delay) infinite}
.hl-am-revealed{width:164px;height:164px;display:none;filter:drop-shadow(0 10px 24px rgba(160,90,107,.2))}
[data-phase="confirmed"] .hl-am-sources,[data-phase="confirmed"] .hl-am-core{display:none}
[data-phase="confirmed"] .hl-am-revealed{display:block;animation:hlAmReveal .9s cubic-bezier(.2,.7,.3,1) both}
[data-phase="confirmed"] .hl-am-halo{background:radial-gradient(circle,rgba(255,204,204,.65),rgba(232,138,44,.12) 48%,transparent 70%)}
[data-phase="confirmed"] .hl-am-beam{animation:hlAmBloom 1.2s ease-out var(--am-delay) both}
[data-phase="error"] .hl-am-scene{height:140px;opacity:.55}
[data-phase="error"] .hl-am-sources,[data-phase="error"] .hl-am-beam{display:none}
[data-phase="error"] .hl-am-ring,[data-phase="error"] .hl-am-core,[data-phase="error"] .hl-am-halo{animation:none}
[data-phase="error"] .hl-am-ring{width:110px;height:110px}
.hl-am-status{min-height:1.8em;max-width:30em;margin:4px auto 10px;font-size:.9rem;line-height:1.8;color:#3D3835}
.hl-am-outcome:empty{display:none}
.hl-am-rarity{margin:0;color:#007B7F;font-size:.76rem;font-weight:600;letter-spacing:.14em;line-height:1.7}
.hl-am-reward-name{margin:4px 0 18px;color:#3D3835;font-size:1.4rem;font-weight:600;line-height:1.6}
.hl-am-button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;min-width:160px;max-width:100%;padding:12px 24px;border-radius:12px;border:1px solid #007B7F;background:#007B7F;color:#fff;font:600 .88rem 'Noto Sans TC',sans-serif;cursor:pointer;touch-action:manipulation}
.hl-am-button:disabled{background:#F0EEE9;color:#3D3835;border-color:rgba(160,90,107,.28);cursor:wait}
.hl-am-button{font-family:inherit}
.hl-am-button:focus-visible{outline:3px solid #A05A6B;outline-offset:4px}
.hl-am-receipt{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;padding:18px;background:#F0EEE9;border:1px solid rgba(160,90,107,.22);border-radius:16px;text-align:left;color:#3D3835}
.hl-am-receipt>.hl-am-art{flex:0 0 72px;width:72px;height:72px}
.hl-am-receipt-name{margin:5px 0 0;font-size:1rem;font-weight:600}
.hl-room-collection{margin:24px 16px;padding:24px 0;border-top:1px solid rgba(160,90,107,.25);color:#3D3835}
.hl-room-collection h2{margin:0 0 8px;font-size:1.1rem;color:#3D3835}
.hl-room-collection>p{margin:0 0 16px;font-size:.8rem;line-height:1.8;color:#3D3835}
.hl-room-collection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hl-room-collection-item{padding:18px 16px;border:1px solid rgba(160,90,107,.22);border-radius:14px;background:#fff;min-width:0}
.hl-room-collection-item strong{display:block;font-size:.9rem;font-weight:600;overflow-wrap:anywhere}
.hl-room-collection-item span{display:block;margin-top:8px;color:#007B7F;font-size:.78rem}
@keyframes hlAmGather{from{opacity:0;transform:translate(calc(var(--am-x)*1.12),calc(var(--am-y)*1.12)) scale(.75)}to{opacity:1;transform:translate(var(--am-x),var(--am-y)) scale(1)}}
@keyframes hlAmFuse{0%{transform:translate(var(--am-x),var(--am-y)) scale(1);opacity:1}65%{opacity:.9}100%{transform:translate(0,0) scale(.12);opacity:0}}
@keyframes hlAmOrbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes hlAmBreathe{0%,100%{scale:.93;opacity:.7}50%{scale:1.08;opacity:1}}
@keyframes hlAmFlow{0%,100%{opacity:0;transform:rotate(var(--am-angle)) translateY(98px) scaleY(.3)}50%{opacity:.55;transform:rotate(var(--am-angle)) translateY(36px) scaleY(.65)}}
@keyframes hlAmReveal{from{opacity:0;transform:translateY(14px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hlAmBloom{0%{opacity:0;transform:rotate(var(--am-angle)) translateY(32px) scaleY(.15)}35%{opacity:.65}100%{opacity:0;transform:rotate(var(--am-angle)) translateY(120px) scaleY(.25)}}
.hl-am-reduced *, .hl-am-reduced *::before,.hl-am-reduced *::after{animation:none!important;transition:none!important}
.hl-am-reduced .hl-am-beam{display:none}
.hl-am-neutral .hl-am-revealed,.hl-am-neutral .hl-am-beam{display:none}
.hl-am-neutral .hl-am-ring,.hl-am-neutral .hl-am-halo{animation:none}
.hl-am-reduced[data-phase="fuse"] .hl-am-material{transform:translate(var(--am-x),var(--am-y));opacity:1}
@media(prefers-reduced-motion:reduce){.hl-alchemy-motion *{animation:none!important;transition:none!important}.hl-am-beam{display:none}}
@media(max-width:380px){.hl-am-panel{padding:24px 12px 20px}.hl-am-scene{scale:.88;margin-top:-5px;margin-bottom:-20px}.hl-room-collection{margin-inline:8px}.hl-room-collection-item{padding:14px 10px}}
@media(max-height:640px){.hl-am-panel{padding-top:20px}.hl-am-scene{height:230px;scale:.8;margin-top:-15px;margin-bottom:-24px}}
