.potion-acquisition{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff8db;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;cursor:default;outline:none}
.potion-acquisition::backdrop{background:#08111bea;backdrop-filter:blur(6px);animation:acquisition-darken .35s ease-out both}
.potion-acquisition[data-ready=true]{cursor:pointer}
.acquisition-content{width:min(700px,100%);min-height:100%;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 24px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.acquisition-heading{color:#f2d78c;font-size:clamp(12px,1.8dvh,18px);letter-spacing:.35em;font-weight:700;animation:acquisition-reveal .4s .25s both}
.acquisition-art{position:relative;isolation:isolate;display:grid;place-items:center;width:clamp(130px,26dvh,260px);height:clamp(120px,23dvh,230px);flex:none}
.acquisition-rays{position:absolute;inset:-30%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffdc8b70 0deg 9deg,transparent 9deg 25deg);mask-image:radial-gradient(circle,#000 2%,#0009 30%,transparent 70%);animation:acquisition-ray-enter .5s .4s both,acquisition-rotate 16s linear infinite}
.acquisition-glow{position:absolute;inset:-5%;border-radius:50%;background:radial-gradient(circle,#fff4b795,#e6b34b30 35%,transparent 70%);animation:acquisition-ray-enter .5s .4s both,acquisition-glow 2.3s 1s ease-in-out infinite alternate}
.acquisition-bottle{position:relative;z-index:1;width:62%;height:88%;filter:drop-shadow(0 0 18px #ffe9a780);animation:acquisition-bottle .6s .35s cubic-bezier(.16,1.4,.3,1) both}
.acquisition-bottle>.crop-icon{width:100%;height:100%;object-fit:contain}
.acquisition-spark{position:absolute;left:calc(50% + sin(var(--i)*2.39996)*47%);top:calc(50% + cos(var(--i)*2.39996)*45%);width:4px;height:4px;border-radius:50%;background:#ffdf8f;box-shadow:0 0 12px #ffde88;opacity:0;animation:acquisition-spark 2.5s calc(.4s + var(--i)*.12s) infinite}
.acquisition-reveal{animation:acquisition-reveal .45s var(--delay) cubic-bezier(.22,1,.36,1) both}
.potion-acquisition h2{margin:0;color:#ffe8a6;font-size:clamp(26px,4.1dvh,40px);font-weight:900;line-height:1.2;text-shadow:0 2px 16px #e6b13b60}
.potion-acquisition .acquisition-description{max-width:580px;margin:0;color:#e4dfcb;font-size:clamp(13px,1.9dvh,17px);line-height:1.65;white-space:normal}
.acquisition-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;margin-top:5px;text-align:left}
.acquisition-fact{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:10px 14px;border:1px solid #f7d88d35;border-radius:12px;background:linear-gradient(115deg,#fff5bd0e,#fff5bd04);font-size:clamp(12px,1.7dvh,16px);line-height:1.45}
.acquisition-fact>span{display:flex;align-items:center;gap:7px;color:#cccbbb;white-space:nowrap}
.acquisition-fact strong{font-weight:800;font-variant-numeric:tabular-nums;color:#fff1bb;text-align:right}
.acquisition-fact i{display:block;width:7px;height:7px;flex:none;border-radius:50%;background:#dfc78d;box-shadow:0 0 8px #dfc78d50}
.acquisition-fact[data-kind=damage] i{background:#ed7772}.acquisition-fact[data-kind=maintain] i{background:#77b9ed}.acquisition-fact[data-kind=improve] i{background:#82d5a5}.acquisition-fact[data-kind=breakthrough] i{background:#f6ce68}
.acquisition-fact[data-kind=level]{grid-column:1/-1;justify-content:center}
.acquisition-fact[data-kind=mutation],.acquisition-fact[data-kind=special]{grid-column:1/-1}
.acquisition-fact[data-kind=special] strong{max-width:76%;white-space:normal}
.potion-acquisition .acquisition-hint{min-height:22px;margin:7px 0 0;font-size:13px;line-height:1.5;color:#c9c3a8;white-space:normal}
.potion-acquisition[data-ready=true] .acquisition-hint{animation:acquisition-hint .35s both}
@keyframes acquisition-darken{from{background:#08111b00;backdrop-filter:blur(0)}to{background:#08111bea;backdrop-filter:blur(6px)}}
@keyframes acquisition-bottle{from{opacity:0;transform:translateY(35px) scale(.2) rotate(-12deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes acquisition-reveal{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes acquisition-ray-enter{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes acquisition-rotate{to{rotate:360deg}}
@keyframes acquisition-glow{from{opacity:.5;scale:.92}to{opacity:1;scale:1.12}}
@keyframes acquisition-spark{0%,100%{opacity:0;transform:translateY(15px) scale(.3)}35%{opacity:1}80%{opacity:0;transform:translateY(-26px) scale(1)}}
@keyframes acquisition-hint{from{opacity:0}to{opacity:1}}
@media(max-width:480px){.acquisition-content{padding-left:18px;padding-right:18px;gap:10px}.acquisition-fact{gap:8px;padding:9px 10px}.acquisition-facts{gap:7px}.acquisition-fact>span{gap:5px}.acquisition-fact[data-kind=special] strong{max-width:70%}}
@media(max-height:550px){.acquisition-content{width:min(700px,100%);gap:5px;padding:10px 24px}.acquisition-heading{font-size:11px}.acquisition-art{width:110px;height:78px}.potion-acquisition h2{font-size:23px}.potion-acquisition .acquisition-description{font-size:12px;line-height:1.4}.acquisition-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:2px}.acquisition-fact{padding:5px 8px;gap:6px;font-size:11px;border-radius:8px}.acquisition-fact[data-kind=level]{grid-column:1/-1;justify-content:center}.acquisition-fact[data-kind=mutation],.acquisition-fact[data-kind=special]{grid-column:span 2}.potion-acquisition .acquisition-hint{margin:2px 0 0;font-size:11px;min-height:17px}}
.potion-acquisition[data-reduced=true]::backdrop,.potion-acquisition[data-reduced=true] .acquisition-heading,.potion-acquisition[data-reduced=true] .acquisition-bottle{animation:none}
.potion-acquisition[data-reduced=true] .acquisition-rays,.potion-acquisition[data-reduced=true] .acquisition-glow,.potion-acquisition[data-reduced=true] .acquisition-spark{animation:none}
.potion-acquisition[data-reduced=true] .acquisition-reveal{animation-name:acquisition-hint;animation-duration:.1s}
