.item-modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;visibility:hidden;background:#fdf4ffd9;justify-content:center;align-items:center;padding:1rem;transition:all .3s ease-out;display:flex;position:fixed;inset:0}.item-modal-backdrop.visible{opacity:1;visibility:visible}.modal-particles{pointer-events:none;position:absolute;inset:0;overflow:hidden}.modal-particle{opacity:0;border-radius:50%;width:8px;height:8px;animation:linear infinite particleFloat;position:absolute;bottom:-20px}.modal-particle:first-child{background:var(--dreamy-pink)}.modal-particle:nth-child(2){background:var(--dreamy-purple)}.modal-particle:nth-child(3){background:var(--dreamy-yellow)}.modal-particle:nth-child(4){background:var(--dreamy-blue)}.modal-particle:nth-child(5){background:var(--dreamy-mint)}.modal-particle:nth-child(6){background:var(--dreamy-pink-deep)}.modal-particle:nth-child(7){background:var(--dreamy-purple-deep)}.modal-particle:nth-child(8){background:var(--dreamy-yellow-deep)}.modal-particle:nth-child(9){background:var(--dreamy-blue-deep)}.modal-particle:nth-child(10){background:var(--dreamy-mint-deep)}.modal-particle:nth-child(11){background:var(--dreamy-pink)}.modal-particle:nth-child(12){background:var(--dreamy-purple)}@keyframes particleFloat{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.9}90%{opacity:.9}to{opacity:0;transform:translateY(-100vh)rotate(360deg)}}.item-modal-card{opacity:0;background:#fff;border:4px solid #fff;border-radius:2rem;width:100%;max-width:420px;max-height:90vh;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;transform:scale(.85)translateY(30px);box-shadow:0 8px 40px #c084fc40,0 25px 60px #00000026,0 0 0 1px #c084fc1a}.item-modal-card.visible{opacity:1;transform:scale(1)translateY(0)}.modal-drag-handle{z-index:5;padding:.5rem;display:none;position:absolute;top:.5rem;left:50%;transform:translate(-50%)}.drag-handle-bar{background:#0003;border-radius:2px;width:40px;height:4px;display:block}@media screen and (max-width:767px){.modal-drag-handle{display:block}}.modal-close-btn{z-index:10;background:linear-gradient(135deg,white 0%,var(--dreamy-pink)100%);width:40px;height:40px;color:var(--dreamy-text);cursor:pointer;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:1rem;right:1rem;box-shadow:0 4px 15px #f472b64d}.modal-close-btn:hover{transform:scale(1.1)rotate(90deg);box-shadow:0 6px 20px #f472b666}.modal-image-wrapper{aspect-ratio:1;background:linear-gradient(135deg,var(--dreamy-purple)0%,var(--dreamy-pink)50%,var(--dreamy-yellow)100%);width:100%;position:relative;overflow:hidden}.modal-image-glow{background:radial-gradient(circle,#fff6 0%,#0000 70%);animation:3s ease-in-out infinite imageGlow;position:absolute;inset:0}@keyframes imageGlow{0%,to{opacity:.4}50%{opacity:.8}}.modal-image{object-fit:contain;opacity:0;width:100%;height:100%;padding:2rem;animation:.5s cubic-bezier(.34,1.56,.64,1) .1s forwards imagePopIn;position:absolute;inset:0;transform:scale(.7)rotate(-5deg)}@keyframes imagePopIn{to{opacity:1;transform:scale(1)rotate(0)}}.modal-content{background:linear-gradient(180deg,white 0%,var(--dreamy-bg-start)100%);padding:1.5rem}.modal-title{font-family:var(--font-zcool-kuaile),system-ui,sans-serif;text-align:center;color:var(--dreamy-text);opacity:0;margin-bottom:1rem;font-size:2.25rem;font-weight:600;animation:.5s cubic-bezier(.34,1.56,.64,1) .2s forwards titleBounce;transform:translateY(15px)}@keyframes titleBounce{to{opacity:1;transform:translateY(0)}}.modal-description{color:#6b21a8;text-align:center;opacity:0;margin-bottom:1rem;font-size:1.125rem;line-height:1.8;animation:.4s ease-out .3s forwards contentFade}@keyframes contentFade{to{opacity:1}}.modal-funfact{background:linear-gradient(135deg,var(--dreamy-yellow)0%,var(--dreamy-pink)100%);opacity:0;border:2px solid #fff;border-radius:1.25rem;margin-bottom:1.5rem;padding:1.25rem;animation:.5s cubic-bezier(.34,1.56,.64,1) .4s forwards funfactSlide;transform:translate(-15px)rotate(-1deg);box-shadow:0 4px 15px #fbbf2433}@keyframes funfactSlide{to{opacity:1;transform:translate(0)rotate(0)}}.funfact-header{color:var(--dreamy-text);align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:flex}.funfact-text{color:#7c2d12;font-size:1rem;line-height:1.7}.modal-audio{opacity:0;margin-bottom:1rem;animation:.4s ease-out .45s forwards contentFade}.modal-audio-btn{cursor:pointer;background:linear-gradient(135deg,var(--dreamy-blue)0%,var(--dreamy-mint)100%);color:#fff;width:100%;font-family:var(--font-zcool-kuaile),system-ui,sans-serif;border:3px solid #fff;border-radius:9999px;justify-content:center;align-items:center;gap:.6rem;padding:.9rem 1.25rem;font-size:1.125rem;font-weight:600;transition:all .25s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 4px 18px #3b82f640,inset 0 2px #ffffff40}.modal-audio-btn:hover:not(:disabled){transform:translateY(-2px)scale(1.02);box-shadow:0 8px 26px #10b98147,inset 0 2px #ffffff59}.modal-audio-btn:active:not(:disabled){transform:translateY(0)scale(.98)}.modal-audio-btn.playing{background:linear-gradient(135deg,var(--dreamy-pink-deep)0%,var(--dreamy-purple-deep)100%);box-shadow:0 4px 18px #c084fc59,inset 0 2px #ffffff40}.modal-audio-btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none;background:linear-gradient(135deg,#94a3b8e6 0%,#cbd5e1e6 100%)}.modal-audio-error{text-align:center;color:#dc2626;margin-top:.5rem;font-size:.85rem;font-weight:600}.modal-confirm-btn{background:linear-gradient(135deg,var(--dreamy-purple-deep)0%,var(--dreamy-pink-deep)100%);cursor:pointer;opacity:0;border:3px solid #fff;border-radius:9999px;width:100%;padding:1rem 2rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);animation:.4s ease-out .5s forwards btnAppear;position:relative;overflow:hidden;transform:translateY(15px);box-shadow:0 4px 20px #c084fc66,inset 0 2px #ffffff4d}@keyframes btnAppear{to{opacity:1;transform:translateY(0)}}.modal-confirm-btn:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 8px 30px #c084fc80,inset 0 2px #fff6}.modal-confirm-btn:active{transform:translateY(0)scale(.98)}.btn-text{z-index:1;font-family:var(--font-zcool-kuaile),system-ui,sans-serif;color:#fff;text-shadow:0 2px 4px #0003;font-size:1.375rem;font-weight:600;position:relative}.btn-sparkle{background:linear-gradient(90deg,#0000,#fff6,#0000);width:150%;height:100%;animation:2s ease-in-out infinite sparkleShine;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes sparkleShine{0%{transform:translate(-200%,-50%)skew(-20deg)}50%{transform:translate(100%,-50%)skew(-20deg)}to{transform:translate(-200%,-50%)skew(-20deg)}}
.scene-viewer{z-index:10;justify-content:center;align-items:center;padding:4.5rem 1rem 3.5rem;display:flex;position:absolute;inset:0}.scene-image{object-fit:contain;opacity:0;border:4px solid #fff;border-radius:1.5rem;max-width:100%;max-height:100%;animation:.8s cubic-bezier(.34,1.56,.64,1) forwards imageReveal;box-shadow:0 8px 40px #c084fc33,0 25px 60px #00000026}@keyframes imageReveal{0%{opacity:0;transform:scale(.9)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}.hotspot{cursor:pointer;background:0 0;border:none;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1);position:absolute}.hotspot:hover{transform:scale(1.05)}.hotspot:active,.hotspot.hotspot-touch{transform:scale(.95)}.hotspot.hotspot-active{transform:scale(1.08)}.hotspot-glow{pointer-events:none;opacity:0;transition:opacity .3s;position:absolute;inset:-6px}.hotspot:hover .hotspot-glow,.hotspot.hotspot-touch .hotspot-glow{opacity:1}.hotspot-glow-rect{background:linear-gradient(135deg,#fbbf2426 0%,#f472b626 100%);border:3px solid #fbbf2499;border-radius:16px;box-shadow:0 0 20px #fbbf2466,0 0 40px #f472b633,inset 0 0 20px #fbbf241a}.hotspot-glow-circle{background:linear-gradient(135deg,#fbbf2426 0%,#c084fc26 100%);border:3px solid #fbbf2499;border-radius:50%;box-shadow:0 0 25px #fbbf2466,0 0 50px #c084fc33,inset 0 0 25px #fbbf241a}.hotspot-glow-svg{pointer-events:none;opacity:0;width:calc(100% + 20px);height:calc(100% + 20px);transition:opacity .3s;position:absolute;inset:-10px}.hotspot:hover .hotspot-glow-svg,.hotspot.hotspot-touch .hotspot-glow-svg{opacity:1}.hotspot-polygon{fill:#fbbf2426;stroke:#fbbf24b3;stroke-width:3px}.hotspot-beacon{pointer-events:none;width:40px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.beacon-core{background:linear-gradient(135deg,var(--dreamy-yellow-deep)0%,var(--dreamy-pink-deep)100%);border:2px solid #fff;border-radius:50%;width:16px;height:16px;animation:2s ease-in-out infinite beaconPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #fbbf2499,0 0 24px #f472b666,0 2px 8px #0003}@keyframes beaconPulse{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.15)}}.beacon-ring{opacity:0;border:2px solid #fbbf2499;border-radius:50%;animation:2.5s ease-out infinite ringExpand;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.beacon-ring-1{width:18px;height:18px;animation-delay:0s}.beacon-ring-2{border-color:#f472b680;width:18px;height:18px;animation-delay:.8s}.beacon-ring-3{border-color:#c084fc80;width:18px;height:18px;animation-delay:1.6s}@keyframes ringExpand{0%{opacity:.7;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(3.5)}}.hotspot-ripple{background:linear-gradient(135deg,var(--dreamy-yellow-deep)0%,var(--dreamy-pink-deep)100%);opacity:.7;pointer-events:none;border-radius:50%;width:24px;height:24px;margin-top:-12px;margin-left:-12px;animation:.6s ease-out forwards rippleExpand;position:absolute}@keyframes rippleExpand{0%{opacity:.7;transform:scale(0)}to{opacity:0;transform:scale(5)}}.hotspot.hotspot-hint .hotspot-glow,.hotspot.hotspot-hint .hotspot-glow-svg{opacity:.6;animation:2s ease-in-out infinite hintPulse}@keyframes hintPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.hotspot.hotspot-explored .hotspot-beacon,.hotspot.hotspot-explored .beacon-ring{display:none}.hotspot-explored-badge{background:linear-gradient(135deg,var(--dreamy-mint-deep)0%,var(--dreamy-blue-deep)100%);color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;animation:.3s cubic-bezier(.34,1.56,.64,1) badgePopIn;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 12px #34d39980}@keyframes badgePopIn{0%{opacity:0;transform:translate(-50%,-50%)scale(0)rotate(-180deg)}to{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}}
