:root{
  --pink:#ff3da8;--pink-soft:#ff86c7;--line:rgba(255,88,177,.5);
  --panel:rgba(20,0,23,.86);--sky-top:#090012;--sky-bottom:#26002f;
  --glow:0 0 30px rgba(255,61,168,.24)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",sans-serif;color:#fff;background:linear-gradient(var(--sky-top),var(--sky-bottom));overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}
html[data-phase=morning]{--sky-top:#71365e;--sky-bottom:#ffc1d9}
html[data-phase=day]{--sky-top:#4e6fc7;--sky-bottom:#ffb7d4}
html[data-phase=sunset]{--sky-top:#5b154e;--sky-bottom:#ff896f}
.living-sky{position:fixed;inset:0;z-index:-5;overflow:hidden;background:linear-gradient(var(--sky-top),var(--sky-bottom));transition:2s}
.sky-stars{position:absolute;inset:0}.sky-stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 8px #fff;animation:twinkle 2s infinite alternate}
.sun,.moon{position:absolute;right:10%;top:13%;width:100px;height:100px;border-radius:50%}.sun{background:#ffd773;box-shadow:0 0 60px #ffd773}.moon{background:#fff0ff;box-shadow:0 0 50px #fff0ff}
html[data-phase=night] .sun,html:not([data-phase=night]) .moon{opacity:0}
.cloud{position:absolute;width:220px;height:60px;border-radius:99px;background:#ffffff33;animation:drift 36s linear infinite}.cloud-one{top:20%;left:-240px}.cloud-two{top:55%;left:-340px;animation-duration:48s}.cloud-three{top:36%;left:-440px;animation-duration:62s}
.shooting-star{position:absolute;top:18%;left:70%;width:150px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(-28deg);animation:shoot 9s infinite}
.floating-world,.ambient-life{position:fixed;inset:0;pointer-events:none;overflow:hidden}.floating-world span{position:absolute;bottom:-3rem;opacity:.25;animation:floatUp linear infinite}
.ambient-life span{position:absolute;animation:ambientDrift linear infinite;opacity:.65}
.gate-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:#09000b;transition:1s}.gate-screen.opened{opacity:0;visibility:hidden}
.gate-copy{z-index:3;text-align:center}.gate-copy h1{font-family:"Playfair Display",serif;font-size:clamp(3.4rem,10vw,8rem);margin:.3rem}.gate-copy>span{display:block;font-size:5rem;color:#ff58b0}
.gate-copy button{margin:1.5rem;padding:1rem 2rem;border:1px solid #ff78c1;border-radius:999px;background:linear-gradient(135deg,#ff2e9c,#8f00ff);color:#fff;font-weight:800;cursor:pointer}
.gate{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#150013,#3c0030);transition:1.8s}.gate-left{left:0}.gate-right{right:0}.gate-screen.opening .gate-left{transform:translateX(-100%)}.gate-screen.opening .gate-right{transform:translateX(100%)}
.sv-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1rem 3vw;background:#060007dd;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.sv-brand{font-family:"Sacramento",cursive;font-size:2.25rem}.sv-brand span{color:var(--pink)}.sv-header nav{display:flex;gap:.8rem;align-items:center;font-weight:800;font-size:.75rem;flex-wrap:wrap;justify-content:flex-end}.sv-menu-button{display:none}
.sv-hero{min-height:90vh;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:3rem;padding:6rem 5vw}.sv-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.22em;color:#ff86c7}
.sv-hero h1,.sv-panel h2,.secret-ending h2,.story-mode-card h2{font-family:"Playfair Display",serif;font-size:clamp(3.2rem,7vw,7rem);line-height:.95;margin:.3rem 0}
.sv-hero em,.sv-panel em,.story-mode-card em{font-family:"Sacramento",cursive;color:#ff71bd;font-weight:400}.sv-lede{font-size:1.3rem;line-height:1.7;color:#f6ddea}
.sv-actions,.modal-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.sv-button{display:inline-flex;justify-content:center;align-items:center;padding:.95rem 1.4rem;border-radius:999px;border:1px solid var(--line);font-weight:800;color:#fff;cursor:pointer}.primary{background:linear-gradient(135deg,#ff2e9c,#a100ff)}.secondary{background:#ffffff0d}
.world-status{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:2rem}.world-status div{padding:1rem;border:1px solid #ff65b85a;border-radius:16px;background:#0c000f85}.world-status small,.world-status strong{display:block}
.living-orbit{position:relative;min-height:500px;display:grid;place-items:center}.orbit-world{width:min(100%,500px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#ff279d40,transparent 60%);animation:breathe 5s ease-in-out infinite}
.orbit-world strong{font-family:"Playfair Display",serif;font-size:4rem}.orbit-heart{position:absolute;font-size:8rem;color:#ff66b8;opacity:.35}.jahntella-message{position:absolute;right:0;bottom:7%;display:flex;gap:.75rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:18px;background:#0c000fe0;transition:.35s}.jahntella-message.pop{transform:translateY(-10px) scale(1.03);box-shadow:var(--glow)}
.sound-toggle{position:absolute;left:0;bottom:7%;padding:.75rem 1rem;border:1px solid var(--line);border-radius:999px;background:#0c000fe0;color:#fff;font-weight:800;cursor:pointer}
.sv-panel{margin:0 3vw 3rem;padding:4rem;border:1px solid var(--line);border-radius:28px;background:var(--panel);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.22)}.sv-section-heading{max-width:850px}.sv-section-heading h2{font-size:clamp(3rem,6vw,5rem)}
.living-map{position:relative;min-height:760px;margin-top:2.5rem;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(circle at 75% 26%,#ff4cac38,transparent 22%),radial-gradient(circle at 23% 72%,#6f53ff38,transparent 22%),linear-gradient(160deg,#1b0020,#09000d)}
.living-map::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#ffffff18 1px,transparent 1.5px);background-size:34px 34px;opacity:.35}
.map-river{position:absolute;left:45%;top:-10%;width:120px;height:120%;background:linear-gradient(90deg,#7c5cff44,#6bdcff55,#7c5cff44);transform:rotate(9deg);filter:blur(1px)}
.map-road{position:absolute;height:14px;border-radius:99px;background:#ffb6d744;box-shadow:0 0 16px #ff6bb444}.road-one{width:75%;left:10%;top:48%;transform:rotate(-12deg)}.road-two{width:65%;left:20%;top:54%;transform:rotate(24deg)}
.world-location{position:absolute;z-index:2;min-width:180px;padding:1rem;border:1px solid var(--line);border-radius:20px;background:#0c000fe8;color:#fff;text-align:left;cursor:pointer;box-shadow:0 10px 35px rgba(0,0,0,.3);transition:.25s}.world-location:hover{transform:translateY(-7px) scale(1.03);box-shadow:var(--glow)}.world-location span{font-size:2rem}.world-location strong,.world-location small{display:block}
.location-cafe{left:7%;top:18%}.location-studio{right:8%;top:14%}.location-donut{left:12%;bottom:15%}.location-lake{right:10%;bottom:18%}.location-heart{left:40%;top:43%}.location-castle{left:42%;top:7%}.location-house{right:3%;top:46%}.location-stage{left:42%;bottom:6%}.locked-location{opacity:.42;cursor:default}
.map-butterfly,.map-cat,.map-balloon{position:absolute;z-index:3;filter:drop-shadow(0 0 8px #fff8)}.butterfly-one{left:29%;top:25%;animation:butterfly 5s ease-in-out infinite}.butterfly-two{right:27%;bottom:27%;animation:butterfly 6s ease-in-out infinite reverse}.map-cat{left:24%;bottom:8%;font-size:2rem}.balloon-one{right:18%;top:30%;animation:balloon 6s ease-in-out infinite}.balloon-two{left:17%;top:49%;animation:balloon 7s ease-in-out infinite reverse}
.daily-gift-panel,.diary-panel,.rank-panel{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.gift-box-wrap{text-align:center}.gift-box{position:relative;width:190px;height:190px;border:0;background:none;cursor:pointer}.gift-body,.gift-lid{position:absolute;left:15%;width:70%;background:linear-gradient(135deg,#ff3da8,#8e22ff);border:2px solid #ffadd7}.gift-body{top:38%;height:55%}.gift-lid{top:25%;height:20%;z-index:2}.gift-ribbon{position:absolute;left:44%;top:22%;width:12%;height:72%;z-index:3;background:#ffd8ec}.gift-box b{position:absolute;z-index:4;left:0;right:0;top:47%;font-size:3rem}.gift-box.opened{animation:giftPop .6s ease}.gift-reveal{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.4rem;border:1px solid var(--line);border-radius:20px}
.diary-cover{min-height:470px;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #ff8bc8;border-radius:24px;background:linear-gradient(150deg,#ff76ba,#b02d85 48%,#42003a)}.diary-cover>span{font-family:"Sacramento",cursive;font-size:5rem}.diary-cover strong{font-family:"Playfair Display",serif;font-size:2.2rem}.diary-page>p:not(.sv-eyebrow):not(.diary-signoff){font-family:"Playfair Display",serif;font-size:1.25rem;line-height:1.9}.diary-signoff{font-family:"Sacramento",cursive;font-size:2rem;color:#ff8dc8}
.mailbox-summary{display:flex;align-items:center;gap:1.4rem;margin:2rem 0;padding:1.4rem;border:1px solid var(--line);border-radius:20px;background:#0d000f}.pink-mailbox{font-size:4rem}.letters-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.letter-card{min-height:180px;padding:1.25rem;border:1px solid var(--line);border-radius:18px;background:#0b000d;text-align:center;display:grid;place-items:center}.letter-card.locked{opacity:.35}.letter-card button{border:0;background:none;color:#fff;cursor:pointer}.letter-card .envelope{font-size:3rem}
.collection-progress{display:flex;align-items:center;gap:1rem;margin:2rem 0}.collection-track{flex:1;height:12px;border-radius:99px;background:#2d0928;overflow:hidden}.collection-track i{display:block;height:100%;background:linear-gradient(90deg,#ff2b99,#bc3cff)}.collectible-shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding:2rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(#3b1230 0 8%,#160013 8% 84%,#5a2447 84%)}.collectible-slot{min-height:190px;display:grid;place-items:center;text-align:center;border-bottom:8px solid #7c426b}.collectible-slot .item{font-size:4rem;filter:drop-shadow(0 0 12px #ff72bd)}.collectible-slot.locked{opacity:.25}.collectible-slot small,.collectible-slot strong{display:block}
.sweetie-room{position:relative;min-height:600px;margin-top:2rem;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(#3a1242 0 67%,#71476f 67%);box-shadow:inset 0 0 80px rgba(255,70,170,.16)}.room-window{position:absolute;right:8%;top:10%;width:190px;height:180px;border:10px solid #ffd1e8;background:linear-gradient(#160025,#45105d);box-shadow:0 0 30px #ff7dbe55}.room-window::before,.room-window::after{content:"";position:absolute;background:#ffd1e8}.room-window::before{left:50%;top:0;bottom:0;width:6px}.room-window::after{left:0;right:0;top:50%;height:6px}.room-window i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}.room-window i:nth-child(2){left:25%;top:24%}.room-window i:nth-child(3){right:22%;top:35%}.room-window i:nth-child(4){left:35%;bottom:20%}.room-moon{position:absolute;right:16%;top:10%;font-size:3rem;color:#fff}
.room-poster{position:absolute;left:8%;top:10%;width:190px;height:240px;display:grid;place-items:center;border:8px solid #ffb5d8;background:linear-gradient(145deg,#ff52ac,#6d1b8d);font-family:"Sacramento",cursive;font-size:2.7rem;transform:rotate(-2deg)}.room-poster span{color:#fff}
.room-passport{position:absolute;left:34%;top:12%;padding:1rem 1.4rem;border:2px solid #ff99c9;border-radius:12px;background:#4a0d3e;text-align:center;font-family:"Playfair Display",serif}.room-passport span{font-family:"DM Sans",sans-serif;font-size:.65rem;color:#ffafd5}
.room-bed{position:absolute;left:5%;bottom:7%;width:44%;height:180px;border-radius:36px 36px 10px 10px;background:linear-gradient(#ff86c7,#c94a98);box-shadow:0 20px 30px #0005}.room-bed span{position:absolute;left:6%;top:10%;width:36%;height:38%;border-radius:20px;background:#ffd9eb}
.room-rug{position:absolute;left:35%;bottom:4%;width:36%;height:90px;border-radius:50%;display:grid;place-items:center;background:#ff75bd66;font-size:3rem}
.room-shelf{position:absolute;right:4%;bottom:10%;width:43%;min-height:170px;display:flex;align-items:flex-end;justify-content:center;gap:1rem;padding:1rem;border-bottom:14px solid #9c5a86}.room-shelf .room-item{font-size:3.4rem;animation:itemGlow 3s ease-in-out infinite}
.room-award{position:absolute;right:25%;top:10%;font-size:4rem;color:#ffd66d;filter:drop-shadow(0 0 12px #ffd66d);opacity:.2}.room-award.unlocked{opacity:1;animation:awardPulse 2s infinite}
.room-note{position:absolute;right:4%;bottom:3%;max-width:44%;font-size:.85rem;color:#ffe2ef;text-align:center}
.achievement-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2rem}.achievement-card{min-height:185px;padding:1.3rem;border:1px solid var(--line);border-radius:18px;background:#0b000d;text-align:center;display:grid;align-content:center;gap:.4rem;transition:.25s}.achievement-card.unlocked{box-shadow:var(--glow);animation:achievementFloat 4s ease-in-out infinite}.achievement-card.locked{opacity:.3}.achievement-card .icon{font-size:3rem}.achievement-card small{color:#ff9bcf}
.rank-track{display:grid;gap:.75rem}.rank-step{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem;border:1px solid #ff63b84d;border-radius:16px;opacity:.42}.rank-step.reached{opacity:1}.rank-step.current{box-shadow:var(--glow)}
.passport-card{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.passport-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;padding:1.2rem;border:1px solid var(--line);border-radius:20px;background:#0d000f}.passport-stats div{text-align:center}.passport-track{grid-column:1/-1;height:10px;background:#2c0827}.passport-track i{display:block;height:100%;background:linear-gradient(90deg,#ff2b99,#bc3cff)}
.stamp-grid,.location-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2rem}.stamp{padding:1.2rem;border:1px dashed var(--line);border-radius:18px;text-align:center}.stamp.visited{box-shadow:var(--glow)}.location-card{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#0b000c;cursor:pointer}.location-card img{width:100%;aspect-ratio:3/4;object-fit:cover}.location-card div{padding:1rem}.location-card strong,.location-card small{display:block}
.story-mode-card{margin:0 clamp(1rem,4vw,3rem) 3rem;padding:clamp(2rem,5vw,4rem);border:1px solid rgba(255,94,183,.5);border-radius:28px;background:radial-gradient(circle at 20% 20%,rgba(255,53,162,.2),transparent 30%),linear-gradient(145deg,#160016,#080009);text-align:center}.story-mode-card h2{font-size:clamp(2.8rem,6vw,5rem)}.story-mode-card p{color:#e8c9d9;max-width:760px;margin:1rem auto 1.7rem;line-height:1.7}
.secret-ending{text-align:center;margin:4rem 3vw;padding:5rem 1rem;border:1px solid #ff58ae;border-radius:28px;background:#090009}
.location-modal,.letter-modal{width:min(1020px,calc(100% - 2rem));padding:0;border:1px solid #ff62b7;border-radius:26px;background:#0b000c;color:#fff}.location-modal[open]{display:grid;grid-template-columns:.8fr 1.2fr}.letter-modal[open]{display:block}.modal-media{position:relative;min-height:100%}.modal-media img{width:100%;height:100%;object-fit:cover}.modal-atmosphere{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent,#090009aa)}.modal-copy{padding:3rem}.modal-close{position:absolute;right:1rem;top:.7rem;z-index:3;border:0;background:none;color:#fff;font-size:2rem;cursor:pointer}.modal-copy blockquote{margin:1.5rem 0;padding-left:1rem;border-left:3px solid #ff65b7;color:#ffd9eb}.jahntella-pop-in{padding:1rem;border:1px solid var(--line);border-radius:15px;background:#190018}
.discovery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.5rem}.discovery-card{padding:1rem;border:1px solid var(--line);border-radius:16px;background:#160014;text-align:center}.discovery-card button{display:block;margin:.4rem auto;border:0;background:none;color:#fff;font-size:3rem;cursor:pointer}.discovery-card small{display:block;color:#f6ddea}
.letter-paper{padding:4rem;background:linear-gradient(145deg,#fff5fb,#ffd9eb);color:#461035;border-radius:24px}.letter-paper h2{font-family:"Playfair Display",serif;font-size:clamp(2.6rem,5vw,4rem)}.letter-paper>p:not(.sv-eyebrow):not(.diary-signoff){font-family:"Playfair Display",serif;font-size:1.25rem;line-height:1.9}
.achievement-toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;display:flex;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:18px;background:#120013f5;transform:translateY(140%);opacity:0;transition:.35s}.achievement-toast.show{transform:none;opacity:1}
@keyframes twinkle{to{opacity:.25}}@keyframes drift{to{transform:translateX(calc(100vw + 650px))}}@keyframes shoot{0%,86%{opacity:0}88%{opacity:1}100%{opacity:0;transform:translate(-500px,300px) rotate(-28deg)}}@keyframes floatUp{to{transform:translateY(-115vh) rotate(80deg)}}@keyframes ambientDrift{to{transform:translate(110vw,-25vh) rotate(180deg)}}@keyframes breathe{50%{transform:scale(1.04)}}@keyframes butterfly{50%{transform:translate(35px,-22px) rotate(8deg)}}@keyframes balloon{50%{transform:translateY(-18px)}}@keyframes giftPop{50%{transform:scale(1.12) rotate(-3deg)}}@keyframes itemGlow{50%{filter:drop-shadow(0 0 18px #ff6db8)}}@keyframes awardPulse{50%{transform:scale(1.12)}}@keyframes achievementFloat{50%{transform:translateY(-6px)}}
@media(max-width:1050px){.sv-header nav{font-size:.68rem;gap:.55rem}.achievement-grid,.letters-grid,.collectible-shelf{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.sv-hero,.daily-gift-panel,.diary-panel,.rank-panel,.passport-card{grid-template-columns:1fr}.world-status{grid-template-columns:repeat(2,1fr)}.stamp-grid,.location-grid{grid-template-columns:repeat(2,1fr)}.living-map{display:grid;gap:1rem;min-height:auto;padding:1rem}.world-location{position:relative!important;inset:auto!important;width:100%}.map-river,.map-road,.map-butterfly,.map-cat,.map-balloon{display:none}.location-modal[open]{grid-template-columns:1fr}.sound-toggle,.jahntella-message{position:relative;inset:auto;margin-top:1rem}.living-orbit{min-height:auto}}
@media(max-width:700px){.sv-menu-button{display:block}.sv-header nav{display:none;position:absolute;top:100%;left:1rem;right:1rem;flex-direction:column;padding:1rem;background:#100010}.sv-header nav.open{display:flex}.world-status{grid-template-columns:1fr}.sv-panel{padding:1.4rem}.stamp-grid,.location-grid,.achievement-grid,.letters-grid,.collectible-shelf,.discovery-grid{grid-template-columns:1fr}.passport-stats{grid-template-columns:repeat(2,1fr)}.sweetie-room{min-height:720px}.room-poster{left:4%;top:6%;transform:scale(.72);transform-origin:top left}.room-window{right:3%;top:6%;transform:scale(.72);transform-origin:top right}.room-passport{left:32%;top:27%}.room-bed{left:4%;width:62%}.room-shelf{right:3%;bottom:25%;width:90%}.room-rug{left:22%;width:56%}.room-note{max-width:90%;right:5%}.letter-paper{padding:2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* === SWEETVILLE LIVING WORLD CINEMATIC LAYER === */
html{scroll-behavior:smooth}.cinematic-home{position:relative;min-height:100svh;overflow:hidden;background:#080018;color:#fff;isolation:isolate}.cinematic-bg{position:absolute;inset:-2%;background:url('assets/sweetville-cinematic-home.webp') center/cover no-repeat;animation:svKenBurns 22s ease-in-out infinite alternate;z-index:-5}.cinematic-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,0,20,.72) 0%,rgba(5,0,20,.08) 42%,rgba(5,0,20,.12) 68%,rgba(5,0,20,.58) 100%),linear-gradient(0deg,rgba(8,0,20,.96) 0%,transparent 32%);z-index:-2}.cinematic-home:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 35%,rgba(8,0,20,.45));pointer-events:none;z-index:5}.cinematic-home canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.cinematic-stars{position:absolute;inset:0;z-index:-1;pointer-events:none}.cinematic-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:white;box-shadow:0 0 10px #ff40cf;animation:svTwinkle var(--d) ease-in-out infinite}.cinematic-ui{position:relative;z-index:10;min-height:72svh;display:flex;justify-content:space-between;align-items:center;padding:9rem 4vw 12rem;gap:2rem}.cinematic-welcome{max-width:430px;text-shadow:0 2px 18px #05000d}.cinematic-script{font-family:'Sacramento',cursive;font-size:3rem;margin:0;color:#fff}.cinematic-welcome h1{font-size:clamp(3.4rem,6vw,6.7rem);line-height:.9;margin:.1em 0;color:#fff;letter-spacing:.03em;text-shadow:0 0 7px #ff4fcf,0 0 22px #ff119f,0 0 50px #ff0077;-webkit-text-stroke:1px #ffb5ed}.neon-heart{font-size:5rem;line-height:1;color:#fff;text-shadow:0 0 8px #fff,0 0 24px #ff008c;animation:svHeartbeat 1.8s ease-in-out infinite}.cinematic-welcome>p:not(.cinematic-script){font-size:1.35rem;line-height:1.45}.cinematic-actions{display:grid;gap:.8rem;max-width:330px}.journey-button,.intro-button{border:1px solid #ff83dc;border-radius:999px;padding:1rem 1.35rem;background:rgba(74,0,57,.45);color:white;text-align:center;font:700 1rem 'DM Sans';box-shadow:0 0 15px rgba(255,0,151,.55),inset 0 0 18px rgba(255,255,255,.08);backdrop-filter:blur(8px);transition:.25s}.journey-button{background:linear-gradient(90deg,#bd167f,#ff4fc5);font-size:1.05rem}.journey-button:hover,.intro-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 30px #ff2ab7}.mochi-message{margin-top:1.2rem;display:flex;gap:.8rem;align-items:center;padding:.8rem;border:1px solid rgba(255,93,206,.65);border-radius:18px;background:rgba(23,0,30,.66);backdrop-filter:blur(12px);box-shadow:0 0 22px rgba(255,0,151,.3)}.mochi-avatar{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;background:radial-gradient(circle,#fff,#ff9bdc);box-shadow:0 0 14px #ff59cc}.mochi-message strong{color:#ff9bdd}.mochi-message p{margin:.2rem 0 0;font-size:.85rem;line-height:1.35}.sweetie-stats-card{width:260px;padding:1rem;border-radius:24px;border:1px solid rgba(255,84,201,.6);background:linear-gradient(180deg,rgba(70,0,62,.48),rgba(19,0,28,.78));backdrop-filter:blur(14px);box-shadow:0 0 35px rgba(255,0,157,.34),inset 0 0 25px rgba(255,255,255,.05)}.official-sweetie{text-align:center;border:2px solid #ff62c8;border-radius:50%;padding:1rem;margin:-5rem auto 1rem;width:150px;height:130px;display:grid;place-items:center;line-height:1.05;background:rgba(36,0,48,.76);box-shadow:0 0 25px #ff149f}.official-sweetie em{font-family:'Sacramento',cursive;font-size:1.7rem}.sweetie-stats-card h2{text-align:center;font-size:1rem;letter-spacing:.12em}.sweetie-stats-card>div{display:flex;align-items:center;gap:.8rem;border-top:1px solid rgba(255,255,255,.13);padding:.7rem}.sweetie-stats-card>div span{font-size:1.6rem;color:#ff83dc}.sweetie-stats-card p{margin:0;font-size:.72rem}.sweetie-stats-card strong{display:block;font-size:1rem;color:white}.sweetie-stats-card>a{display:block;text-align:center;margin-top:.6rem;padding:.8rem;border-radius:12px;background:linear-gradient(90deg,#a20d74,#ff36bb);color:white}.district-dock{position:absolute;left:0;right:0;bottom:1.8rem;z-index:12;padding:0 3.5vw}.district-dock h2{text-align:center;font-size:1rem;letter-spacing:.15em;text-shadow:0 0 12px #ff42bc}.district-track{display:flex;gap:.65rem;overflow-x:auto;padding:.4rem .2rem 1rem;scroll-snap-type:x mandatory;scrollbar-width:thin}.district-card{position:relative;flex:0 0 190px;height:155px;padding:0;border-radius:16px;overflow:hidden;border:1px solid #ff67ca;background:#220019;color:white;scroll-snap-align:center;box-shadow:0 0 18px rgba(255,0,153,.24);transition:.3s}.district-card img{width:100%;height:100%;object-fit:cover;transition:.5s}.district-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(20,0,29,.96))}.district-card span{position:absolute;z-index:2;left:.7rem;right:.7rem;bottom:.55rem;text-align:left}.district-card strong,.district-card small{display:block}.district-card strong{font-size:.78rem}.district-card small{font-size:.62rem;color:#ffb5e8}.district-card:hover{transform:translateY(-7px);box-shadow:0 0 30px #ff20ae}.district-card:hover img{transform:scale(1.08)}.continue-world{position:absolute;z-index:14;bottom:.3rem;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.13em;color:#ffc1ec}.intro-active .cinematic-bg{animation-duration:7s}.intro-active .cinematic-vignette{background:radial-gradient(circle,transparent,rgba(5,0,15,.15))}.intro-active .cinematic-ui{animation:svIntroPulse 3s ease}.sv-header{background:rgba(13,0,24,.82)!important;backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,64,183,.28)}
@keyframes svKenBurns{from{transform:scale(1.02) translate3d(-.4%,0,0)}to{transform:scale(1.08) translate3d(.7%,-.6%,0)}}@keyframes svTwinkle{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.8)}}@keyframes svHeartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}}@keyframes svIntroPulse{0%{filter:brightness(1)}45%{filter:brightness(1.4)}100%{filter:brightness(1)}}
@media(max-width:800px){.cinematic-home{min-height:930px}.cinematic-bg{background-position:55% center}.cinematic-ui{padding:7rem 1rem 14rem;align-items:flex-start}.cinematic-welcome{max-width:330px}.cinematic-script{font-size:2.2rem}.cinematic-welcome h1{font-size:3.7rem}.sweetie-stats-card{position:absolute;right:.7rem;top:7rem;width:160px;padding:.55rem;opacity:.93}.official-sweetie{display:none}.sweetie-stats-card>div{padding:.42rem}.sweetie-stats-card h2{font-size:.72rem}.sweetie-stats-card p{font-size:.55rem}.sweetie-stats-card strong{font-size:.75rem}.cinematic-welcome>p:not(.cinematic-script){max-width:180px;font-size:1rem}.cinematic-actions{max-width:240px}.mochi-message{max-width:270px}.district-card{flex-basis:160px;height:140px}.district-dock{bottom:1rem;padding:0 .8rem}.district-dock h2{font-size:.7rem}.continue-world{display:none}}
@media(prefers-reduced-motion:reduce){.cinematic-bg,.cinematic-stars i,.neon-heart{animation:none!important}}

/* === v4.0.4 HERO IMAGE 2 REPLACEMENT === */
/* Use the approved Image 2 as the hero artwork, cropped to remove its baked-in top navigation strip. */
.cinematic-bg{
  inset:0;
  background-image:url('assets/sweetville-hero-image-2-cropped.webp');
  background-size:cover;
  background-position:center 34%;
  animation:svKenBurnsSoft 24s ease-in-out infinite alternate;
}
.cinematic-home{min-height:980px}
.cinematic-ui{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(320px,440px) minmax(235px,275px);
  justify-content:space-between;
  align-items:center;
  padding:8rem 4vw 18rem;
  gap:clamp(2rem,8vw,8rem);
}
.cinematic-welcome{position:relative;z-index:2;max-width:440px}
.sweetie-stats-card{position:relative;z-index:2;align-self:center;margin-top:2rem}
.district-dock{bottom:2.4rem;padding:0 2vw}
.district-track{gap:.8rem;padding:.55rem .25rem 1.25rem}
.district-card{flex:0 0 205px;height:170px}
.district-card img{object-fit:cover;object-position:50% 25%}
/* Landscape and location images need individual focal points. */
.district-card:nth-child(1) img{object-position:50% 38%}
.district-card:nth-child(2) img{object-position:50% 23%}
.district-card:nth-child(3) img{object-position:50% 20%}
.district-card:nth-child(4) img{object-position:50% 28%}
.district-card:nth-child(5) img{object-position:50% 50%}
.district-card:nth-child(6) img{object-position:50% 30%}
.district-card:nth-child(7) img{object-position:50% 42%}
.district-card:after{background:linear-gradient(transparent 48%,rgba(20,0,29,.97) 88%)}
.continue-world{bottom:.55rem}

/* Prevent the original living-world quote and sound button from colliding. */
.living-orbit{
  min-height:500px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr auto;
  align-items:end;
  gap:1rem;
  padding-bottom:1rem;
}
.orbit-world{grid-column:1/-1;grid-row:1;justify-self:center}
.jahntella-message,.sound-toggle{
  position:relative;
  inset:auto;
  bottom:auto;
  left:auto;
  right:auto;
  margin:0;
  z-index:3;
}
.jahntella-message{grid-column:2;grid-row:2;justify-self:end;max-width:290px}
.sound-toggle{grid-column:1;grid-row:2;justify-self:start;white-space:nowrap}

@keyframes svKenBurnsSoft{
  from{transform:scale(1.01) translate3d(-.3%,0,0)}
  to{transform:scale(1.045) translate3d(.4%,-.25%,0)}
}

@media(max-width:1000px){
  .cinematic-home{min-height:1050px}
  .cinematic-bg{background-position:56% 40%}
  .cinematic-ui{grid-template-columns:minmax(280px,390px) 225px;padding:7.5rem 2.5vw 19rem;gap:2rem}
  .district-card{flex-basis:190px;height:165px}
}

@media(max-width:800px){
  .cinematic-home{min-height:1120px}
  .cinematic-bg{background-position:57% 38%}
  .cinematic-ui{display:block;min-height:auto;padding:6.5rem 1rem 21rem}
  .cinematic-welcome{max-width:min(72vw,360px)}
  .sweetie-stats-card{position:absolute;right:.75rem;top:6.5rem;width:155px;margin:0}
  .district-dock{bottom:1.6rem}
  .district-card{flex-basis:175px;height:155px}
  .living-orbit{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:auto}
  .orbit-world{grid-column:1;grid-row:1}
  .sound-toggle{grid-column:1;grid-row:2;justify-self:center}
  .jahntella-message{grid-column:1;grid-row:3;justify-self:center;max-width:100%}
}

@media(max-width:560px){
  .cinematic-home{min-height:1180px}
  .cinematic-bg{background-position:60% 35%}
  .cinematic-welcome{max-width:62vw}
  .cinematic-welcome h1{font-size:clamp(2.8rem,14vw,4rem)}
  .cinematic-script{font-size:2rem}
  .cinematic-welcome>p:not(.cinematic-script){font-size:.95rem;max-width:190px}
  .cinematic-actions{max-width:205px}
  .journey-button,.intro-button{padding:.8rem .9rem;font-size:.78rem}
  .mochi-message{max-width:235px;padding:.65rem}
  .mochi-avatar{width:50px;height:50px;font-size:1.8rem;flex:0 0 50px}
  .sweetie-stats-card{top:6rem;width:145px}
  .district-card{flex-basis:165px;height:150px}
}


/* === v4.0.5 CLEAN HERO LAYOUT ===
   The approved artwork already contains a complete visual dashboard.
   Live controls now sit in a separate bar below the artwork instead of over it. */
.cinematic-home-clean{
  position:relative;
  min-height:0;
  height:auto;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#09000d;
  isolation:isolate;
}
.cinematic-home-clean .cinematic-bg{
  position:absolute;
  inset:0;
  background-image:url('assets/sweetville-hero-image-2-cropped.webp');
  background-size:cover;
  background-position:center center;
  animation:none;
  transform:none;
}
.cinematic-home-clean .cinematic-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,0,14,.04) 0%,rgba(5,0,14,.02) 72%,rgba(5,0,14,.82) 100%);
}
.hero-action-bar{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:1.15rem;
  transform:translateX(-50%);
  width:min(92%,980px);
  display:grid;
  grid-template-columns:1.2fr 1fr .72fr;
  gap:.75rem;
  padding:.75rem;
  border:1px solid rgba(255,93,206,.55);
  border-radius:22px;
  background:rgba(13,0,24,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 45px rgba(0,0,0,.48),0 0 25px rgba(255,0,153,.18);
}
.hero-action-bar .journey-button,
.hero-action-bar .intro-button,
.hero-sound-button{
  min-height:50px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,123,216,.62);
  color:#fff;
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  background:rgba(69,0,57,.58);
  box-shadow:none;
}
.hero-action-bar .journey-button{background:linear-gradient(90deg,#c21783,#ff43bd)}
.hero-action-bar .intro-button:hover,.hero-sound-button:hover,.hero-action-bar .journey-button:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(255,55,184,.45)}
.hero-progress-strip{
  position:absolute;
  z-index:4;
  top:1rem;
  right:1rem;
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:52%;
}
.hero-progress-strip span{
  padding:.48rem .7rem;
  border:1px solid rgba(255,101,202,.45);
  border-radius:999px;
  background:rgba(12,0,20,.76);
  backdrop-filter:blur(10px);
  font-size:.62rem;
  letter-spacing:.06em;
  color:#ffc7ed;
}
.hero-progress-strip strong{color:#fff;margin-left:.3rem}

/* Hide all previous overlay systems if older markup is cached. */
.cinematic-home-clean .cinematic-ui,
.cinematic-home-clean .district-dock,
.cinematic-home-clean .continue-world,
.cinematic-home-clean #fireworksCanvas,
.cinematic-home-clean .cinematic-stars{display:none!important}

/* The following content begins clearly below the hero. */
.cinematic-home-clean + .sv-hero{margin-top:0;padding-top:6rem}

@media(max-width:900px){
  .cinematic-home-clean{aspect-ratio:16 / 11}
  .hero-action-bar{grid-template-columns:1fr 1fr;bottom:.75rem;width:95%}
  .hero-sound-button{grid-column:1/-1;min-height:42px}
  .hero-progress-strip{display:none}
}
@media(max-width:620px){
  .cinematic-home-clean{aspect-ratio:4 / 5;min-height:620px}
  .cinematic-home-clean .cinematic-bg{background-size:auto 100%;background-position:56% center}
  .hero-action-bar{grid-template-columns:1fr;padding:.55rem;gap:.45rem;border-radius:17px}
  .hero-action-bar .journey-button,.hero-action-bar .intro-button,.hero-sound-button{min-height:43px;font-size:.72rem}
  .hero-sound-button{grid-column:auto}
}

/* SWEETVILLE v4.0.6 — LIVING WORLD POLISH */
.cinematic-home-clean{--sv-parallax-x:0px;--sv-parallax-y:0px}.cinematic-home-clean .cinematic-bg{transform:translate3d(var(--sv-parallax-x),var(--sv-parallax-y),0) scale(1.035);transition:transform 900ms cubic-bezier(.2,.75,.2,1);will-change:transform}.sv-ambient-layer{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.sv-ambient-layer .sv-spark{position:absolute;width:var(--spark-size,4px);height:var(--spark-size,4px);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 0 8px #fff,0 0 18px #ff4fc5;opacity:0;animation:svFloatSpark var(--spark-duration,9s) linear infinite;animation-delay:var(--spark-delay,0s)}.sv-ambient-layer .sv-heart-petal{position:absolute;top:-8%;color:rgba(255,145,218,.82);text-shadow:0 0 12px rgba(255,38,170,.82);font-size:var(--petal-size,13px);opacity:0;animation:svHeartDrift var(--petal-duration,13s) linear infinite;animation-delay:var(--petal-delay,0s)}.hero-action-bar{overflow:hidden}.hero-action-bar:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.13) 43%,transparent 63%);transform:translateX(-130%);animation:svBarSweep 8s ease-in-out infinite;pointer-events:none}.hero-action-bar>*{position:relative;z-index:1}.hero-action-bar .journey-button,.hero-action-bar .intro-button,.hero-sound-button{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,filter .25s ease}.hero-action-bar .journey-button:hover,.hero-action-bar .intro-button:hover,.hero-sound-button:hover{border-color:rgba(255,190,236,.95);filter:brightness(1.08)}.hero-progress-strip span{transition:transform .25s ease,background .25s ease,box-shadow .25s ease}.hero-progress-strip span:hover{transform:translateY(-2px);background:rgba(44,0,49,.9);box-shadow:0 0 18px rgba(255,55,184,.28)}.world-location,.location-card,.stamp,.achievement-card,.letter-card,.collectible-slot{position:relative;isolation:isolate}.world-location:after,.location-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.14) 46%,transparent 67%);transform:translateX(-145%);transition:transform .7s ease;pointer-events:none;z-index:3}.world-location:hover:after,.location-card:hover:after{transform:translateX(145%)}.location-card{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}.location-card:hover{transform:translateY(-8px) scale(1.015);border-color:rgba(255,113,205,.9);box-shadow:0 18px 45px rgba(0,0,0,.42),0 0 28px rgba(255,35,174,.34)}.location-card img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s ease}.location-card:hover img{transform:scale(1.065);filter:saturate(1.08) brightness(1.04)}.living-map:after{content:"";position:absolute;inset:-25%;background:radial-gradient(circle,rgba(255,85,197,.12),transparent 42%);animation:svMapGlow 9s ease-in-out infinite alternate;pointer-events:none}.sv-panel{transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}.sv-panel:hover{border-color:rgba(255,112,202,.35);box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 32px rgba(255,18,159,.08)}@keyframes svFloatSpark{0%{transform:translate3d(0,18px,0) scale(.45);opacity:0}14%{opacity:.9}55%{transform:translate3d(var(--spark-drift,20px),-22px,0) scale(1);opacity:.9}100%{transform:translate3d(calc(var(--spark-drift,20px)*-1),-72px,0) scale(.35);opacity:0}}@keyframes svHeartDrift{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}10%{opacity:.75}50%{transform:translate3d(var(--petal-drift,40px),48vh,0) rotate(165deg)}100%{transform:translate3d(calc(var(--petal-drift,40px)*-.5),108vh,0) rotate(340deg);opacity:0}}@keyframes svBarSweep{0%,68%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}@keyframes svMapGlow{from{transform:translate3d(-4%,-2%,0) scale(.9);opacity:.45}to{transform:translate3d(5%,3%,0) scale(1.08);opacity:.8}}@media(max-width:900px){.cinematic-home-clean .cinematic-bg{transform:scale(1.02)}.sv-ambient-layer .sv-heart-petal:nth-child(n+7){display:none}}@media(prefers-reduced-motion:reduce){.cinematic-home-clean .cinematic-bg,.sv-ambient-layer .sv-spark,.sv-ambient-layer .sv-heart-petal,.hero-action-bar:after,.living-map:after{animation:none!important;transition:none!important;transform:none!important}}

/* =========================================================
   SWEETVILLE v4.0.8 — DEFINITIVE MAP + PLAYABLE PIANO FIX
   ========================================================= */

/* Completely disable the original absolutely-positioned map artwork. */
.living-map-panel .living-map {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 30px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.living-map-panel .living-map > .world-location,
.living-map-panel .living-map > button.world-location,
.living-map-panel .living-map > div.world-location {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 145px !important;
  margin: 0 !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
}

.living-map-panel .living-map > .world-location:hover {
  transform: translateY(-5px) !important;
}

.living-map-panel .map-river,
.living-map-panel .map-road,
.living-map-panel .map-butterfly,
.living-map-panel .map-cat,
.living-map-panel .map-balloon {
  display: none !important;
}

.living-map-panel .living-map::before,
.living-map-panel .living-map::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

.living-map-panel .world-location > span {
  font-size: 2rem !important;
  margin: 0 0 8px !important;
}

.living-map-panel .world-location > strong,
.living-map-panel .world-location > small {
  position: static !important;
  display: block !important;
  width: 100% !important;
}

.living-map-panel .world-location > strong {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.living-map-panel .world-location > small {
  margin-top: 6px !important;
  line-height: 1.35 !important;
  opacity: .82 !important;
}

/* Fully styled, self-contained playable piano dialog. */
dialog.mini-piano-modal {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  translate: -50% -50% !important;
  width: min(860px, calc(100vw - 32px)) !important;
  max-width: 860px !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 92, 194, .85) !important;
  border-radius: 28px !important;
  background: #100011 !important;
  color: #fff !important;
  box-shadow: 0 30px 110px rgba(0, 0, 0, .78), 0 0 55px rgba(255, 32, 170, .32) !important;
  z-index: 99999 !important;
}

dialog.mini-piano-modal:not([open]) {
  display: none !important;
}

dialog.mini-piano-modal[open] {
  display: block !important;
}

dialog.mini-piano-modal::backdrop {
  background: rgba(4, 0, 8, .82) !important;
  backdrop-filter: blur(10px) !important;
}

.mini-piano-shell {
  position: relative !important;
  padding: 34px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 82% 15%, rgba(255, 53, 182, .2), transparent 30%),
    linear-gradient(145deg, #31002e, #0b000e 72%) !important;
}

.mini-piano-shell > * {
  position: relative;
  z-index: 2;
}

.mini-piano-shell h2 {
  margin: 4px 0 8px !important;
  color: #fff !important;
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
}

.mini-piano-shell p {
  color: rgba(255,255,255,.82) !important;
}

.mini-piano-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255, 125, 212, .65) !important;
  border-radius: 999px !important;
  background: #250020 !important;
  color: #fff !important;
  font-size: 1.75rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

.mini-piano {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: 260px !important;
  margin-top: 28px !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 102, 200, .26) !important;
  border-radius: 18px !important;
  background: #110011 !important;
  box-shadow: inset 0 0 24px rgba(255, 52, 177, .18) !important;
}

.mini-piano .piano-key {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  margin: 0 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  transition: transform .08s ease, filter .08s ease, box-shadow .08s ease !important;
}

.mini-piano .piano-key.white {
  flex: 1 1 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 2px 17px !important;
  border: 1px solid rgba(90, 0, 55, .35) !important;
  border-radius: 0 0 12px 12px !important;
  background: linear-gradient(#fffafd, #ffd8ef) !important;
  color: #4b0030 !important;
  box-shadow: inset 0 -12px 18px rgba(151, 0, 88, .12) !important;
  z-index: 1 !important;
}

.mini-piano .piano-key.black {
  position: absolute !important;
  top: 0 !important;
  width: 8.2% !important;
  height: 62% !important;
  padding: 0 0 12px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 98, 197, .35) !important;
  border-radius: 0 0 9px 9px !important;
  background: linear-gradient(#430035, #080008) !important;
  color: #fff !important;
  box-shadow: 0 9px 14px rgba(0,0,0,.62), inset 0 -8px 11px rgba(255, 28, 161, .14) !important;
  z-index: 4 !important;
}

.mini-piano .piano-key span {
  font-weight: 900 !important;
  font-size: 1.12rem !important;
}

.mini-piano .piano-key small {
  font-weight: 800 !important;
  opacity: .72 !important;
}

.mini-piano .piano-key.active,
.mini-piano .piano-key:active {
  transform: translateY(5px) !important;
  filter: brightness(1.2) !important;
  box-shadow: 0 0 26px rgba(255, 52, 180, .8) !important;
}

.mini-piano .key-cs { left: 10.4% !important; }
.mini-piano .key-ds { left: 24.7% !important; }
.mini-piano .key-fs { left: 53.3% !important; }
.mini-piano .key-gs { left: 67.6% !important; }
.mini-piano .key-as { left: 81.9% !important; }

.piano-display {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 18px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 99, 197, .38) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, .34) !important;
}

.piano-display span {
  color: #ff77c9 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

.piano-display small {
  color: rgba(255,255,255,.75) !important;
}

@media (max-width: 1100px) {
  .living-map-panel .living-map {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .living-map-panel .living-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .mini-piano-shell {
    padding: 28px 16px 20px !important;
  }

  .mini-piano {
    height: 205px !important;
  }

  .mini-piano .piano-key.black {
    width: 9% !important;
  }
}

@media (max-width: 480px) {
  .living-map-panel .living-map {
    grid-template-columns: 1fr !important;
  }

  .mini-piano {
    height: 170px !important;
  }

  .piano-display {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   SWEETVILLE v4.0.9 — LIVE DISTRICT PREVIEWS
   ========================================================= */

#playDistrictSound,
.play-district-sound,
[data-action="play-mood"] {
  display: none !important;
}

.living-map-panel .living-map > .live-district-card {
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 300px !important;
  justify-content: flex-start !important;
  background: linear-gradient(180deg, rgba(9,0,13,.35), rgba(9,0,13,.98)) !important;
}

.live-district-visual {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255,104,194,.45) !important;
}

.live-district-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .65s ease, filter .45s ease !important;
}

.live-district-card:hover .live-district-visual img {
  transform: scale(1.07) !important;
  filter: saturate(1.12) brightness(1.06) !important;
}

.live-district-effects {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.live-district-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding: 16px 18px 18px !important;
}

.live-district-copy > span,
.live-district-copy > strong,
.live-district-copy > small {
  position: static !important;
}

.live-waterfall {
  position: absolute;
  left: 42%;
  top: 8%;
  width: 16%;
  height: 68%;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(150,225,255,.76), rgba(255,119,215,.2));
  filter: blur(1px);
  opacity: .8;
  clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
  animation: svWaterfallFlow 1.6s linear infinite;
  mix-blend-mode: screen;
}

.live-ripple {
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: 18%;
  aspect-ratio: 2.4 / 1;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: svRipple 2.8s ease-out infinite;
}
.live-ripple.r2 { animation-delay: 1.4s; }

.live-heart {
  position: absolute;
  color: rgba(255,159,222,.9);
  text-shadow: 0 0 10px #ff4bb5;
  animation: svHeartFloat 4.6s ease-in-out infinite;
}
.live-heart.h1 { left: 16%; top: 28%; }
.live-heart.h2 { right: 13%; top: 20%; animation-delay: -2s; }

.live-wheel {
  position: absolute;
  right: 8%;
  top: 8%;
  width: 34%;
  aspect-ratio: 1;
  border: 3px solid rgba(255,193,236,.9);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255,49,178,.8);
  animation: svWheelSpin 15s linear infinite;
}
.live-wheel::before,
.live-wheel::after,
.live-wheel i::before,
.live-wheel i::after {
  content: "";
  position: absolute;
  inset: 48% 0 auto 0;
  height: 2px;
  background: rgba(255,196,234,.85);
  transform-origin: 50% 50%;
}
.live-wheel::after { transform: rotate(45deg); }
.live-wheel i::before { transform: rotate(90deg); }
.live-wheel i::after { transform: rotate(135deg); }

.live-balloon {
  position: absolute;
  font-size: 14px;
  color: #ff5fbf;
  text-shadow: 0 0 10px #ff5fbf;
  animation: svBalloonRise 5.5s ease-in-out infinite;
}
.live-balloon.b1 { left: 16%; bottom: 8%; }
.live-balloon.b2 { left: 30%; bottom: 14%; animation-delay: -2.3s; }

.live-spotlight {
  position: absolute;
  top: -18%;
  width: 20%;
  height: 125%;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,64,181,.05));
  filter: blur(2px);
  transform-origin: top center;
  animation: svSpotlight 5s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.live-spotlight.s1 { left: 22%; transform: rotate(14deg); }
.live-spotlight.s2 { right: 18%; transform: rotate(-14deg); animation-delay: -2.5s; }

.live-confetti {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #fff;
  box-shadow:
    -52px 12px 0 #ff4fb2, -34px 28px 0 #ffd84f, -18px 5px 0 #70e6ff,
    18px 18px 0 #ff83dc, 36px 2px 0 #fff, 48px 34px 0 #a673ff,
    -44px 50px 0 #ff83dc, -10px 58px 0 #fff, 28px 55px 0 #ffd84f;
  animation: svConfettiBurst 3.8s ease-in-out infinite;
}

.live-candy-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.28) 46%, transparent 65%);
  transform: translateX(-120%);
  animation: svCandySweep 4.2s ease-in-out infinite;
}

.live-candy {
  position: absolute;
  color: #ff89d2;
  text-shadow: 0 0 12px #ff39ad;
  animation: svCandyTwinkle 2.6s ease-in-out infinite;
}
.live-candy.candy1 { left: 17%; top: 25%; }
.live-candy.candy2 { right: 20%; top: 18%; animation-delay: -.9s; }
.live-candy.candy3 { right: 32%; bottom: 18%; animation-delay: -1.7s; }

.live-neon-pulse {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 45px rgba(255,22,174,.18);
  animation: svNeonPulse 3s ease-in-out infinite;
}

.live-car {
  position: absolute;
  bottom: 14%;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: -8px 0 10px #ff3eb1, 8px 0 10px #55ddff;
  animation: svCarMove 5.4s linear infinite;
}
.live-car.c1 { left: -12%; }
.live-car.c2 { left: -18%; bottom: 24%; animation-delay: -2.6s; }

@keyframes svWaterfallFlow {
  0% { background-position: 0 -20px; opacity: .62; }
  50% { opacity: .92; }
  100% { background-position: 0 60px; opacity: .62; }
}
@keyframes svRipple {
  0% { transform: translateX(-50%) scale(.35); opacity: .8; }
  100% { transform: translateX(-50%) scale(2.2); opacity: 0; }
}
@keyframes svHeartFloat {
  0%,100% { transform: translateY(8px) scale(.85); opacity: .45; }
  50% { transform: translateY(-10px) scale(1.12); opacity: 1; }
}
@keyframes svWheelSpin { to { transform: rotate(360deg); } }
@keyframes svBalloonRise {
  0%,100% { transform: translateY(4px); opacity: .5; }
  50% { transform: translateY(-18px); opacity: 1; }
}
@keyframes svSpotlight {
  0% { rotate: -12deg; opacity: .32; }
  100% { rotate: 12deg; opacity: .7; }
}
@keyframes svConfettiBurst {
  0%,70%,100% { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
  76% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  92% { transform: translate(-50%,40%) scale(1.25); opacity: 0; }
}
@keyframes svCandySweep {
  0%,58% { transform: translateX(-120%); }
  82%,100% { transform: translateX(120%); }
}
@keyframes svCandyTwinkle {
  0%,100% { transform: scale(.7) rotate(-8deg); opacity: .35; }
  50% { transform: scale(1.25) rotate(8deg); opacity: 1; }
}
@keyframes svNeonPulse {
  0%,100% { opacity: .45; filter: saturate(1); }
  50% { opacity: 1; filter: saturate(1.35); }
}
@keyframes svCarMove {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(520px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .live-district-effects * { animation: none !important; }
}

/* =========================================================
   SWEETVILLE v4.1.0 — DISTRICT CARD VISUAL REPAIR
   ========================================================= */

.living-map-panel .living-map {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 26px !important;
  align-items: start !important;
}

.living-map-panel .living-map > .world-location {
  min-height: 0 !important;
  height: auto !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  display: block !important;
}

.living-map-panel .living-map > .live-district-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(27,0,31,.92), rgba(8,0,12,.98)) !important;
}

.live-district-visual {
  width: 100% !important;
  height: 190px !important;
  aspect-ratio: auto !important;
  display: block !important;
  border-bottom: 1px solid rgba(255,104,194,.42) !important;
}

.live-district-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
}

.live-lagoon .live-district-visual img {
  object-position: center 44% !important;
}

.live-stage .live-district-visual img {
  object-position: center 28% !important;
}

.live-carnival .live-district-visual img {
  object-position: center 42% !important;
}

.live-candy .live-district-visual img {
  object-position: center 42% !important;
}

.live-neon .live-district-visual img {
  object-position: center 48% !important;
}

.live-district-copy {
  padding: 15px 16px 17px !important;
  gap: 3px !important;
  min-height: 118px !important;
  justify-content: flex-start !important;
}

.live-district-copy > span:first-child {
  font-size: 1.55rem !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.live-district-copy strong {
  font-size: 1.08rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: none !important;
}

.live-district-copy small {
  margin-top: 4px !important;
  font-size: .82rem !important;
  line-height: 1.38 !important;
  color: rgba(255,255,255,.72) !important;
  text-shadow: none !important;
}

.live-district-effects {
  clip-path: inset(0 round 0);
}

.live-wheel {
  width: 28% !important;
  right: 7% !important;
  top: 9% !important;
}

.live-waterfall {
  left: 45% !important;
  width: 11% !important;
  top: 4% !important;
  height: 73% !important;
}

.live-spotlight {
  width: 15% !important;
}

.live-confetti {
  top: 34% !important;
}

.live-candy {
  font-size: 12px !important;
}

.live-car {
  height: 3px !important;
}

.living-map-panel .world-location:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 26px rgba(255,43,172,.27) !important;
}

.living-map-panel .locked-location {
  min-height: 150px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 1180px) {
  .living-map-panel .living-map {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .living-map-panel .living-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .live-district-visual {
    height: 175px !important;
  }
}

@media (max-width: 540px) {
  .living-map-panel .living-map {
    grid-template-columns: 1fr !important;
  }

  .live-district-visual {
    height: 210px !important;
  }

  .live-district-copy {
    min-height: 104px !important;
  }
}

/* =========================================================
   SWEETVILLE v4.1.1 — CUSTOM DISTRICT ANIMATIONS
   ========================================================= */

/* Donut District */
.donut-sign {
  position: absolute;
  right: 8%;
  top: 12%;
  width: 25%;
  aspect-ratio: 1;
  border: 7px solid #ff83cc;
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px #7b1a66, 0 0 18px #ff43b4;
  animation: svDonutSpin 11s linear infinite;
}
.donut-sign::before {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: rgba(10,0,12,.88);
}
.donut-sign i {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 74% 23%, #ffe05b 0 2px, transparent 3px),
    radial-gradient(circle at 62% 75%, #71e9ff 0 2px, transparent 3px),
    radial-gradient(circle at 25% 70%, #fff 0 2px, transparent 3px);
}
.sprinkle {
  position: absolute;
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px currentColor;
  animation: svSprinkleDrift 4.8s ease-in-out infinite;
}
.sp1 { left: 12%; top: 20%; color:#ff71c4; transform:rotate(24deg); }
.sp2 { left: 28%; top: 34%; color:#ffd760; transform:rotate(-16deg); animation-delay:-1s; }
.sp3 { left: 43%; top: 18%; color:#7be8ff; transform:rotate(65deg); animation-delay:-2s; }
.sp4 { left: 22%; bottom: 18%; color:#fff; transform:rotate(-42deg); animation-delay:-3s; }
.sp5 { right: 18%; bottom: 22%; color:#ff91df; transform:rotate(12deg); animation-delay:-1.7s; }
.sugar-glow {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 70%, rgba(255,94,191,.25), transparent 50%);
  animation:svSugarPulse 3.2s ease-in-out infinite;
}

/* Sparkle Lake */
.lake-moon-glow {
  position:absolute;
  right:10%;
  top:8%;
  width:48px;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,240,255,.88);
  box-shadow:0 0 24px rgba(255,255,255,.9),0 0 42px rgba(255,83,194,.55);
  animation:svMoonGlow 4s ease-in-out infinite;
}
.lake-shimmer {
  position:absolute;
  left:10%;
  right:10%;
  bottom:8%;
  height:28%;
  background:linear-gradient(110deg, transparent 18%, rgba(255,255,255,.34) 46%, transparent 70%);
  transform:skewX(-12deg) translateX(-120%);
  animation:svLakeShimmer 5.4s ease-in-out infinite;
}
.lake-ripple {
  position:absolute;
  left:50%;
  bottom:14%;
  width:22%;
  aspect-ratio:2.5/1;
  border:2px solid rgba(255,255,255,.68);
  border-radius:50%;
  transform:translateX(-50%);
  opacity:0;
  animation:svLakeRipple 3.4s ease-out infinite;
}
.lr2 { animation-delay:1.7s; }
.lake-firefly {
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff8a6;
  box-shadow:0 0 10px #fff27a;
  animation:svFirefly 5s ease-in-out infinite;
}
.lf1{left:18%;top:34%}
.lf2{right:24%;top:42%;animation-delay:-1.8s}
.lf3{left:58%;top:18%;animation-delay:-3s}

/* Starlight Stage */
.stage-crowd-glow {
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:30%;
  background:
    radial-gradient(circle at 10% 70%, #ff78cd 0 2px, transparent 3px),
    radial-gradient(circle at 28% 52%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 46% 68%, #7ee8ff 0 2px, transparent 3px),
    radial-gradient(circle at 63% 45%, #ffd85d 0 2px, transparent 3px),
    radial-gradient(circle at 80% 65%, #ff78cd 0 2px, transparent 3px);
  animation:svCrowdPulse 2.2s ease-in-out infinite;
}

/* Candy Lane */
.candy-sign-glow {
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 34px rgba(255,62,177,.18);
  animation:svCandySignGlow 3s ease-in-out infinite;
}

/* Neon Sweetheart */
.neon-heart-pulse {
  position:absolute;
  right:10%;
  top:12%;
  font-size:3.1rem;
  color:#ff7bd0;
  text-shadow:0 0 12px #ff4db8,0 0 24px #ff4db8;
  animation:svNeonHeart 2.5s ease-in-out infinite;
}
.neon-billboard {
  position:absolute;
  left:10%;
  top:14%;
  width:28%;
  height:18%;
  border:2px solid rgba(255,124,213,.85);
  border-radius:6px;
  background:linear-gradient(135deg,rgba(255,50,170,.15),rgba(109,63,255,.28));
  box-shadow:0 0 18px rgba(255,45,176,.55);
  animation:svBillboard 4s ease-in-out infinite;
}
.window-twinkle {
  position:absolute;
  width:4px;
  height:4px;
  background:#fff;
  box-shadow:0 0 10px #fff,0 0 14px #ff4fbb;
  animation:svWindowTwinkle 2.6s ease-in-out infinite;
}
.wt1{left:48%;top:26%}
.wt2{left:62%;top:44%;animation-delay:-1s}
.wt3{left:35%;top:58%;animation-delay:-1.8s}
.neon-reflection {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28%;
  background:linear-gradient(100deg,transparent 18%,rgba(255,63,181,.24) 44%,rgba(83,214,255,.18) 58%,transparent 80%);
  transform:translateX(-120%) skewX(-16deg);
  animation:svNeonReflection 5.8s ease-in-out infinite;
}

@keyframes svDonutSpin { to { transform:rotate(360deg); } }
@keyframes svSprinkleDrift {
  0%,100% { translate:0 0; opacity:.45; }
  50% { translate:0 -12px; opacity:1; }
}
@keyframes svSugarPulse {
  0%,100% { opacity:.45; }
  50% { opacity:1; }
}
@keyframes svMoonGlow {
  0%,100% { transform:scale(.92); opacity:.72; }
  50% { transform:scale(1.08); opacity:1; }
}
@keyframes svLakeShimmer {
  0%,58% { transform:skewX(-12deg) translateX(-120%); }
  82%,100% { transform:skewX(-12deg) translateX(120%); }
}
@keyframes svLakeRipple {
  0% { transform:translateX(-50%) scale(.4); opacity:.75; }
  100% { transform:translateX(-50%) scale(2.4); opacity:0; }
}
@keyframes svFirefly {
  0%,100% { transform:translate(0,0); opacity:.25; }
  35% { transform:translate(8px,-10px); opacity:1; }
  70% { transform:translate(-6px,8px); opacity:.6; }
}
@keyframes svCrowdPulse {
  0%,100% { filter:brightness(.75); opacity:.5; }
  50% { filter:brightness(1.4); opacity:1; }
}
@keyframes svCandySignGlow {
  0%,100% { opacity:.45; }
  50% { opacity:1; }
}
@keyframes svNeonHeart {
  0%,100% { transform:scale(.92); opacity:.65; }
  50% { transform:scale(1.13); opacity:1; }
}
@keyframes svBillboard {
  0%,100% { filter:hue-rotate(0deg) brightness(.9); }
  50% { filter:hue-rotate(22deg) brightness(1.35); }
}
@keyframes svWindowTwinkle {
  0%,100% { transform:scale(.5); opacity:.2; }
  50% { transform:scale(1.5); opacity:1; }
}
@keyframes svNeonReflection {
  0%,60% { transform:translateX(-120%) skewX(-16deg); }
  85%,100% { transform:translateX(120%) skewX(-16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .donut-sign,.sprinkle,.sugar-glow,.lake-moon-glow,.lake-shimmer,
  .lake-ripple,.lake-firefly,.stage-crowd-glow,.candy-sign-glow,
  .neon-heart-pulse,.neon-billboard,.window-twinkle,.neon-reflection {
    animation:none !important;
  }
}

/* =========================================================
   SWEETVILLE v4.1.2 — SPARKLE LAKE WATER-ONLY EFFECT FIX
   ========================================================= */

/* Keep the image crop focused so Jahntella stays visible. */
.live-lagoon .live-district-visual img {
  object-position: center 42% !important;
}

/* Confine every Sparkle Lake effect to the lower water zone. */
.live-lagoon .live-district-effects {
  clip-path: inset(43% 0 0 0) !important;
}

/* Remove the moon orb from the subject area and convert it to a soft reflection. */
.live-lagoon .lake-moon-glow {
  left: 58% !important;
  right: auto !important;
  top: 62% !important;
  width: 70px !important;
  height: 18px !important;
  aspect-ratio: auto !important;
  border-radius: 50% !important;
  background: rgba(255, 238, 255, .34) !important;
  box-shadow:
    0 0 18px rgba(255,255,255,.55),
    0 0 34px rgba(255,93,201,.38) !important;
  filter: blur(2px) !important;
  transform: translateX(-50%) !important;
  animation: svWaterReflectionPulse 4s ease-in-out infinite !important;
}

/* Put the shimmer fully across the water, not the person. */
.live-lagoon .lake-shimmer {
  left: 4% !important;
  right: 4% !important;
  top: auto !important;
  bottom: 4% !important;
  height: 34% !important;
  background:
    linear-gradient(
      108deg,
      transparent 12%,
      rgba(255,255,255,.10) 30%,
      rgba(255,183,230,.34) 46%,
      rgba(132,221,255,.22) 58%,
      transparent 78%
    ) !important;
  mix-blend-mode: screen !important;
}

/* Center ripples on the visible lagoon surface. */
.live-lagoon .lake-ripple {
  left: 55% !important;
  top: auto !important;
  bottom: 9% !important;
  width: 22% !important;
  border-color: rgba(255, 215, 242, .74) !important;
}

/* Fireflies stay near the waterline and edges. */
.live-lagoon .lf1 {
  left: 13% !important;
  top: 68% !important;
}

.live-lagoon .lf2 {
  right: 14% !important;
  top: 73% !important;
}

.live-lagoon .lf3 {
  left: 36% !important;
  top: 61% !important;
}

@keyframes svWaterReflectionPulse {
  0%,100% {
    transform: translateX(-50%) scaleX(.82);
    opacity: .38;
  }
  50% {
    transform: translateX(-50%) scaleX(1.18);
    opacity: .82;
  }
}



/* SWEETVILLE 5.0 — Living World patch */

/* Permanently remove Sparkle Lake ripple elements. */
.live-lagoon .lake-ripple,
.live-lagoon .lr1,
.live-lagoon .lr2 {
  display: none !important;
  animation: none !important;
}

/* Dedicated lower-water mask so no lake effect can sit on Jahntella. */
.live-lagoon .lake-water-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(0 22%, 100% 10%, 100% 100%, 0 100%);
}

.live-lagoon .lake-water-mask .lake-moon-glow {
  left: 62% !important;
  top: 24% !important;
  width: 72px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: rgba(255,244,255,.30) !important;
  box-shadow: 0 0 18px rgba(255,255,255,.48), 0 0 34px rgba(255,93,201,.30) !important;
  filter: blur(2px) !important;
}

.live-lagoon .lake-water-mask .lake-shimmer {
  left: 3% !important;
  right: 3% !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}

.live-lagoon .lake-water-mask .lf1 { left: 11% !important; top: 22% !important; }
.live-lagoon .lake-water-mask .lf2 { right: 14% !important; top: 34% !important; }
.live-lagoon .lake-water-mask .lf3 { left: 39% !important; top: 16% !important; }

/* Refined district animation intensity. */
.live-district-effects { opacity: .82; mix-blend-mode: screen; }
.live-district-card:hover .live-district-effects { opacity: 1; }

.live-donut .donut-sign { width: 21% !important; opacity: .82; }
.live-stage .live-confetti { animation-duration: 5.2s !important; }
.live-candy .live-candy-shimmer { opacity: .62; }
.live-neon .neon-heart-pulse {
  font-size: 2.45rem !important;
  right: 7% !important;
  top: 10% !important;
}

/* Premium card depth. */
.living-map-panel .live-district-card {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.living-map-panel .live-district-card:hover {
  transform: translateY(-8px) scale(1.012) !important;
  border-color: rgba(255,138,214,.88) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.48), 0 0 32px rgba(255,45,174,.25) !important;
}

/* Mochi hero idle guide. */
.mochi-guide {
  position: absolute;
  right: 3.5%;
  bottom: 15%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,165,220,.82));
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 0 28px rgba(255,74,181,.52);
  animation: mochiIdle 4.8s ease-in-out infinite;
}
.mochi-guide .mochi-face {
  font-size: 3.1rem;
  transform-origin: center bottom;
  animation: mochiBlink 5.2s infinite;
}
.mochi-guide i {
  position: absolute;
  right: -12px;
  bottom: 18px;
  width: 28px;
  height: 12px;
  border-radius: 999px;
  background: #ffd6ed;
  transform-origin: left center;
  animation: mochiTail 1.15s ease-in-out infinite alternate;
}

@keyframes mochiIdle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes mochiBlink {
  0%,46%,50%,100% { transform: scaleY(1); }
  48% { transform: scaleY(.72); }
}
@keyframes mochiTail {
  from { transform: rotate(-18deg); }
  to { transform: rotate(22deg); }
}

@media (max-width: 760px) {
  .mochi-guide { width: 62px; height: 62px; right: 4%; bottom: 19%; }
  .mochi-guide .mochi-face { font-size: 2.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mochi-guide,
  .mochi-guide .mochi-face,
  .mochi-guide i { animation: none !important; }
}



/* =========================================================
   SWEETVILLE EXP 2.0 — CINEMATIC EXPERIENCE
   ========================================================= */
.sv-cinematic-intro{
  position:fixed;inset:0;z-index:999999;background:#050006;color:#fff;
  overflow:hidden;transition:opacity 1s ease,visibility 1s ease
}
.sv-cinematic-intro.finished{opacity:0;visibility:hidden;pointer-events:none}
.sv-cinema-scene{position:absolute;inset:0;opacity:0;transform:scale(1.12);
  transition:opacity 1.2s ease,transform 6s ease}
.sv-cinema-scene.active{opacity:1;transform:scale(1)}
.sv-scene-image{position:absolute;inset:-3%;background-size:cover;background-position:center;
  filter:saturate(1.12) brightness(.82)}
.scene-castle .sv-scene-image{background-image:url("assets/sweetville-hero-approved.webp")}
.scene-carnival .sv-scene-image{background-image:url("assets/dream-carnival.webp")}
.scene-lake .sv-scene-image{background-image:url("assets/lagoon-of-love.webp");background-position:center 46%}
.scene-candy .sv-scene-image{background-image:url("assets/candy-lane.webp")}
.scene-stage .sv-scene-image{background-image:url("assets/starlight-stage.webp");background-position:center 28%}
.scene-neon .sv-scene-image{background-image:url("assets/neon-city.webp")}
.sv-cinema-scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,0,10,.78),rgba(7,0,10,.12) 58%,rgba(7,0,10,.5)),
  linear-gradient(transparent 58%,rgba(7,0,10,.86))}
.sv-cinema-copy{position:absolute;z-index:4;left:7vw;bottom:13vh;max-width:720px;
  text-shadow:0 4px 28px #000}
.sv-cinema-copy small{display:block;letter-spacing:.28em;font-weight:900;color:#ff8dd0}
.sv-cinema-copy h1,.sv-cinema-copy h2{font-family:"Playfair Display",serif;
  font-size:clamp(3.5rem,8vw,8rem);line-height:.92;margin:.35rem 0}
.sv-cinema-copy p{font-size:clamp(1.1rem,2vw,1.6rem)}
.sv-pink-fog{position:absolute;z-index:3;width:75vw;height:42vh;border-radius:50%;
  filter:blur(42px);background:radial-gradient(ellipse,rgba(255,77,190,.52),transparent 65%);
  animation:svFogDrift 8s ease-in-out infinite alternate}
.fog-one{left:-18vw;bottom:-16vh}.fog-two{right:-24vw;bottom:-10vh;animation-delay:-4s}
.sv-cinema-sparkles{position:absolute;inset:0;z-index:5;pointer-events:none}
.sv-cinema-sparkles i{position:absolute;width:4px;height:4px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px #fff,0 0 18px #ff58bd;
  animation:svCinemaSpark 4s ease-in-out infinite}
.sv-cinema-progress{position:absolute;z-index:8;left:7vw;right:7vw;bottom:5vh;height:4px;
  border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.sv-cinema-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff49b4,#fff,#b767ff)}
.sv-cinema-skip{position:absolute;z-index:9;right:4vw;top:4vh;padding:.8rem 1.1rem;
  border:1px solid rgba(255,126,207,.7);border-radius:999px;background:rgba(10,0,12,.58);
  color:#fff;font-weight:900;cursor:pointer;backdrop-filter:blur(12px)}
.sv-cinema-finale{position:absolute;inset:0;z-index:7;display:grid;place-items:center;
  align-content:center;gap:1rem;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,46,168,.38),rgba(6,0,8,.94) 65%)}
.sv-cinema-finale.show{opacity:1;transition:opacity 1s ease}
.sv-cinema-finale span{font-size:6rem;color:#ff70c5;text-shadow:0 0 34px #ff39aa}
.sv-cinema-finale strong{font-family:"Playfair Display",serif;font-size:clamp(2rem,5vw,5rem)}
@keyframes svFogDrift{to{transform:translate(18vw,-4vh) scale(1.16);opacity:.75}}
@keyframes svCinemaSpark{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.5)}}
@media(max-width:700px){
  .sv-cinema-copy{left:1.2rem;right:1.2rem;bottom:12vh}
  .sv-cinema-copy h1,.sv-cinema-copy h2{font-size:clamp(2.8rem,14vw,5rem)}
  .sv-cinema-skip{right:1rem;top:1rem}
}
@media(prefers-reduced-motion:reduce){
  .sv-cinema-scene,.sv-pink-fog,.sv-cinema-sparkles i{animation:none!important;transition:none!important}
}

/* SWEETVILLE EXP 3.0 */
.sv-cinematic-intro.exp3 .scene-gates .sv-scene-image{background-image:url("assets/exp3/01-opening-gates.webp")}.sv-cinematic-intro.exp3 .scene-castle .sv-scene-image{background-image:url("assets/exp3/02-sweetville-castle.webp")}.sv-cinematic-intro.exp3 .scene-carnival .sv-scene-image{background-image:url("assets/exp3/03-dream-carnival.webp")}.sv-cinematic-intro.exp3 .scene-lake .sv-scene-image{background-image:url("assets/exp3/04-sparkle-lake.webp")}.sv-cinematic-intro.exp3 .scene-donut .sv-scene-image{background-image:url("assets/exp3/05-donut-district.webp")}.sv-cinematic-intro.exp3 .scene-candy .sv-scene-image{background-image:url("assets/exp3/06-candy-lane.webp")}.sv-cinematic-intro.exp3 .scene-stage .sv-scene-image{background-image:url("assets/exp3/07-starlight-stage.webp")}.sv-cinematic-intro.exp3 .scene-neon .sv-scene-image{background-image:url("assets/exp3/08-neon-sweetheart.webp")}.sv-cinematic-intro.exp3 .scene-mochi .sv-scene-image{background-image:url("assets/exp3/09-mochi-moment.webp")}.sv-cinematic-intro.exp3 .scene-home .sv-scene-image{background-image:url("assets/exp3/10-welcome-home.webp")}
.sv-cinematic-intro.exp3 .sv-cinema-scene.active .sv-scene-image{animation:exp3Camera 7s ease-in-out forwards}.sv-cinematic-intro.exp3 .scene-lake.active .sv-scene-image,.sv-cinematic-intro.exp3 .scene-neon.active .sv-scene-image{animation-name:exp3Pan}.sv-cinematic-intro.exp3 .scene-candy.active .sv-scene-image,.sv-cinematic-intro.exp3 .scene-donut.active .sv-scene-image{animation-name:exp3Street}.sv-cinematic-intro.exp3 .scene-stage.active .sv-scene-image{animation-name:exp3Push}@keyframes exp3Camera{from{transform:scale(1.11)}to{transform:scale(1.02)}}@keyframes exp3Pan{from{transform:scale(1.08) translateX(-1.2%)}to{transform:scale(1.03) translateX(1.2%)}}@keyframes exp3Street{from{transform:scale(1.09) translateY(1%)}to{transform:scale(1.03) translateY(-1%)}}@keyframes exp3Push{from{transform:scale(1.03)}to{transform:scale(1.10)}}

/* =========================================================
   SWEETVILLE EXP 3.1 — CINEMATIC POLISH
   ========================================================= */

/* Softer, more cinematic scene transitions */
.sv-cinematic-intro.exp3 .sv-cinema-scene {
  transition:
    opacity 1.55s ease,
    transform 7.5s cubic-bezier(.22,.61,.36,1),
    filter 1.55s ease !important;
  filter: brightness(.78) saturate(.95);
}
.sv-cinematic-intro.exp3 .sv-cinema-scene.active {
  filter: brightness(1) saturate(1.08);
}

/* More refined copy entrance */
.sv-cinematic-intro.exp3 .sv-cinema-copy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease .35s, transform 1s ease .35s;
}
.sv-cinematic-intro.exp3 .sv-cinema-scene.active .sv-cinema-copy {
  opacity: 1;
  transform: translateY(0);
}

/* Pink fog polish */
.sv-cinematic-intro.exp3 .sv-pink-fog {
  opacity: .62;
  filter: blur(52px);
}
.sv-cinematic-intro.exp3 .fog-one {
  animation-duration: 11s !important;
}
.sv-cinematic-intro.exp3 .fog-two {
  animation-duration: 14s !important;
}

/* Sparkle Lake: completely suppress any legacy ripple visuals */
.live-lagoon .lake-ripple,
.live-lagoon .lr1,
.live-lagoon .lr2,
.live-lagoon [class*="ripple"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* Gentle district camera drift */
.live-district-visual img {
  transform: scale(1.025);
  transition: transform 9s ease, filter .45s ease !important;
}
.live-district-card:hover .live-district-visual img {
  transform: scale(1.075) translate3d(0,-1.2%,0) !important;
}

/* Smoother location modal entrance */
.location-modal[open] .modal-panel,
.location-modal.open .modal-panel {
  animation: svModalCinemaIn .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes svModalCinemaIn {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle ambient district labels */
.live-district-copy strong {
  letter-spacing: .01em;
}
.live-district-copy small {
  opacity: .82;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .sv-cinematic-intro.exp3 .sv-cinema-scene,
  .sv-cinematic-intro.exp3 .sv-cinema-copy,
  .live-district-visual img,
  .location-modal[open] .modal-panel,
  .location-modal.open .modal-panel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   SWEETVILLE EXP 3.2 — LIVING WORLD
   CODE-ONLY UPGRADE: reuses existing EXP 3.0 artwork
   ========================================================= */

.exp32-world-life{
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
  overflow:hidden;
}

.exp32-petals span,
.exp32-fireflies span,
.exp32-birds span,
.exp32-lanterns span{
  position:absolute;
  display:block;
}

.exp32-petals span{
  top:-8vh;
  color:#ff9bd8;
  text-shadow:0 0 12px rgba(255,93,195,.85);
  animation:exp32PetalFall linear infinite;
}

.exp32-fireflies span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff3a1;
  box-shadow:0 0 10px #fff19a,0 0 18px rgba(255,222,90,.75);
  animation:exp32Firefly ease-in-out infinite;
}

.exp32-birds span{
  top:10vh;
  font-size:1.1rem;
  opacity:.5;
  animation:exp32BirdFlight linear infinite;
}

.exp32-lanterns span{
  bottom:-10vh;
  width:16px;
  height:24px;
  border-radius:8px 8px 10px 10px;
  background:linear-gradient(#ffd7ed,#ff7ec8);
  box-shadow:0 0 14px rgba(255,95,183,.8);
  animation:exp32LanternRise linear infinite;
}

@keyframes exp32PetalFall{
  from{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}
  10%{opacity:.85}
  to{transform:translate3d(var(--drift),110vh,0) rotate(540deg);opacity:0}
}
@keyframes exp32Firefly{
  0%,100%{transform:translate(0,0) scale(.7);opacity:.25}
  35%{transform:translate(14px,-18px) scale(1.15);opacity:1}
  70%{transform:translate(-10px,10px) scale(.9);opacity:.5}
}
@keyframes exp32BirdFlight{
  from{transform:translateX(-15vw) translateY(0)}
  to{transform:translateX(115vw) translateY(-4vh)}
}
@keyframes exp32LanternRise{
  from{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.8}
  to{transform:translateY(-120vh) translateX(var(--drift));opacity:0}
}

/* Carnival feels alive without new images */
.live-carnival .live-wheel,
.live-donut .donut-sign{
  animation-duration:18s!important;
}
.live-carnival:hover .live-wheel,
.live-donut:hover .donut-sign{
  animation-duration:10s!important;
}

/* Night-only fireflies */
html:not([data-phase="night"]) .exp32-fireflies{
  display:none;
}

/* Morning/day birds, night lanterns */
html[data-phase="night"] .exp32-birds{
  display:none;
}
html:not([data-phase="night"]) .exp32-lanterns{
  display:none;
}

/* Gentle living reflections */
.live-neon .neon-reflection,
.live-lagoon .lake-shimmer{
  animation-duration:7.5s!important;
}

/* District focus pulse */
.live-district-card{
  position:relative;
}
.live-district-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}
.live-district-card:hover::after{
  box-shadow:inset 0 0 28px rgba(255,86,190,.16);
}

/* Keep visual noise low on mobile */
@media(max-width:700px){
  .exp32-petals span:nth-child(n+9),
  .exp32-fireflies span:nth-child(n+7),
  .exp32-birds span:nth-child(n+3),
  .exp32-lanterns span:nth-child(n+4){
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp32-petals,
  .exp32-fireflies,
  .exp32-birds,
  .exp32-lanterns{
    display:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 4.0 — JAHNTELLA LIVES HERE
   CODE-ONLY UPDATE: reuses all existing Sweetville assets
   ========================================================= */

.exp40-character-layer{
  position:fixed;
  inset:0;
  z-index:45;
  pointer-events:none;
}

.exp40-jahntella,
.exp40-mochi{
  position:absolute;
  pointer-events:auto;
  border:0;
  cursor:pointer;
  color:#fff;
}

.exp40-jahntella{
  left:4vw;
  bottom:5vh;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem 1rem .7rem .7rem;
  border-radius:999px;
  background:rgba(15,0,19,.82);
  border:1px solid rgba(255,118,207,.65);
  box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 24px rgba(255,63,177,.24);
  backdrop-filter:blur(14px);
  transform:translateY(160%);
  opacity:0;
  transition:transform .75s cubic-bezier(.22,.61,.36,1),opacity .75s ease;
}

.exp40-jahntella.visible{
  transform:translateY(0);
  opacity:1;
}

.exp40-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-family:"Sacramento",cursive;
  font-size:2rem;
  background:linear-gradient(145deg,#ff75c5,#8124d8);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 0 20px rgba(255,75,183,.45);
}

.exp40-character-copy{
  text-align:left;
}
.exp40-character-copy strong,
.exp40-character-copy small{
  display:block;
}
.exp40-character-copy strong{
  font-family:"Playfair Display",serif;
  font-size:1rem;
}
.exp40-character-copy small{
  max-width:250px;
  color:#ffd8ee;
  font-size:.78rem;
  line-height:1.3;
}

.exp40-mochi{
  right:-100px;
  bottom:11vh;
  width:64px;
  height:64px;
  border-radius:50%;
  background:radial-gradient(circle,#fff8fb,#ffb8df);
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 0 24px rgba(255,78,182,.48);
  font-size:2.4rem;
  transition:right .7s ease,transform .3s ease;
}
.exp40-mochi.visible{
  right:4vw;
}
.exp40-mochi:hover{
  transform:translateY(-5px) scale(1.05);
}
.exp40-mochi i{
  position:absolute;
  right:-10px;
  bottom:12px;
  width:24px;
  height:10px;
  border-radius:999px;
  background:#ffd0e9;
  transform-origin:left center;
  animation:exp40Tail 1s ease-in-out infinite alternate;
}

.exp40-toast{
  position:absolute;
  left:50%;
  bottom:6vh;
  transform:translate(-50%,30px);
  max-width:min(90vw,560px);
  padding:.9rem 1.15rem;
  border-radius:18px;
  background:rgba(10,0,13,.9);
  border:1px solid rgba(255,109,202,.62);
  box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 24px rgba(255,63,178,.2);
  color:#fff;
  text-align:center;
  opacity:0;
  transition:opacity .35s ease,transform .35s ease;
}
.exp40-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

.exp40-district-visit{
  position:absolute;
  inset:auto 12px 12px 12px;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding:.55rem .7rem;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(13,0,16,.82),rgba(74,0,58,.68));
  border:1px solid rgba(255,128,210,.42);
  color:#fff;
  font-size:.72rem;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
}
.live-district-card:hover .exp40-district-visit,
.live-district-card.exp40-active .exp40-district-visit{
  opacity:1;
  transform:translateY(0);
}
.exp40-district-visit strong{
  color:#ffb5dd;
}

.exp40-presence-glow{
  animation:exp40Presence 1.8s ease-in-out 2;
}

@keyframes exp40Tail{
  from{transform:rotate(-18deg)}
  to{transform:rotate(20deg)}
}
@keyframes exp40Presence{
  0%,100%{box-shadow:0 0 0 rgba(255,56,175,0)}
  50%{box-shadow:0 0 36px rgba(255,56,175,.55)}
}

@media(max-width:700px){
  .exp40-jahntella{
    left:1rem;
    right:1rem;
    bottom:1rem;
    border-radius:20px;
  }
  .exp40-character-copy small{
    max-width:none;
  }
  .exp40-mochi.visible{
    right:1rem;
    bottom:8.5rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp40-jahntella,
  .exp40-mochi,
  .exp40-toast,
  .exp40-district-visit,
  .exp40-mochi i{
    animation:none!important;
    transition:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 4.1 — LIVING MAGIC
   Removes permanent EXP 4.0 overlays and replaces them with
   brief ambient moments that never cover district artwork.
   ========================================================= */

.exp40-character-layer,
.exp40-jahntella,
.exp40-mochi,
.exp40-toast,
.exp40-district-visit{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Clean district cards: artwork stays unobstructed */
.live-district-card .exp40-district-visit{
  display:none!important;
}

/* Hover sparkle without text overlays */
.live-district-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:
    radial-gradient(circle at 18% 72%,rgba(255,255,255,.82) 0 1px,transparent 2px),
    radial-gradient(circle at 38% 34%,rgba(255,160,219,.75) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 72% 25%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 66%,rgba(255,111,195,.68) 0 1.5px,transparent 2.5px);
  filter:drop-shadow(0 0 8px rgba(255,98,190,.8));
  transition:opacity .3s ease;
}
.live-district-card:hover::before{
  opacity:1;
  animation:exp41CardSparkle 1.8s ease-in-out infinite;
}

.exp41-whisper{
  position:fixed;
  right:2.2rem;
  bottom:2.2rem;
  z-index:48;
  max-width:min(86vw,340px);
  padding:.85rem 1rem;
  border-radius:18px;
  background:rgba(10,0,13,.86);
  border:1px solid rgba(255,115,203,.58);
  box-shadow:0 16px 36px rgba(0,0,0,.4),0 0 24px rgba(255,65,180,.2);
  backdrop-filter:blur(14px);
  color:#fff;
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.exp41-whisper.show{
  opacity:1;
  transform:translateY(0);
}
.exp41-whisper strong{
  display:block;
  margin-bottom:.15rem;
  color:#ffafd8;
  font-family:"Playfair Display",serif;
}
.exp41-whisper span{
  font-size:.84rem;
  line-height:1.45;
  color:#ffe7f3;
}

.exp41-mochi-runner{
  position:fixed;
  left:-90px;
  bottom:1rem;
  z-index:47;
  font-size:2.7rem;
  pointer-events:none;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.35));
}
.exp41-mochi-runner.run{
  animation:exp41MochiRun 8s linear forwards;
}

.exp41-event-layer{
  position:fixed;
  inset:0;
  z-index:19;
  pointer-events:none;
  overflow:hidden;
}
.exp41-gust span,
.exp41-heart-rise span,
.exp41-firework span{
  position:absolute;
  display:block;
}
.exp41-gust span{
  top:-8vh;
  color:#ff9bd5;
  text-shadow:0 0 10px rgba(255,91,190,.75);
  animation:exp41PetalGust linear forwards;
}
.exp41-heart-rise span{
  bottom:-30px;
  color:#ff72bd;
  text-shadow:0 0 12px rgba(255,91,190,.8);
  animation:exp41HeartRise ease-out forwards;
}
.exp41-firework span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px #ff9ad1;
  animation:exp41Firework 1.4s ease-out forwards;
}

@keyframes exp41CardSparkle{
  0%,100%{transform:translateX(-3px);filter:drop-shadow(0 0 7px rgba(255,98,190,.55))}
  50%{transform:translateX(3px);filter:drop-shadow(0 0 14px rgba(255,145,218,.9))}
}
@keyframes exp41MochiRun{
  0%{left:-90px;transform:translateY(0) rotate(0)}
  16%{transform:translateY(-5px) rotate(-5deg)}
  32%{transform:translateY(0) rotate(5deg)}
  48%{transform:translateY(-4px) rotate(-4deg)}
  64%{transform:translateY(0) rotate(4deg)}
  100%{left:calc(100vw + 90px);transform:translateY(0)}
}
@keyframes exp41PetalGust{
  from{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}
  12%{opacity:.9}
  to{transform:translate3d(var(--drift),110vh,0) rotate(620deg);opacity:0}
}
@keyframes exp41HeartRise{
  from{transform:translateY(0) scale(.7);opacity:0}
  15%{opacity:.85}
  to{transform:translateY(-45vh) translateX(var(--drift)) scale(1.1);opacity:0}
}
@keyframes exp41Firework{
  from{transform:translate(0,0) scale(1);opacity:1}
  to{transform:translate(var(--x),var(--y)) scale(.35);opacity:0}
}

@media(max-width:700px){
  .exp41-whisper{
    left:1rem;
    right:1rem;
    bottom:1rem;
    max-width:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp41-whisper,
  .exp41-mochi-runner,
  .exp41-event-layer,
  .live-district-card::before{
    display:none!important;
    animation:none!important;
    transition:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 5.0 — STORY MODE
   Code-only. Reuses all existing Sweetville artwork.
   ========================================================= */

.exp50-story-panel{
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 8%,rgba(255,65,177,.18),transparent 28%),
    radial-gradient(circle at 12% 88%,rgba(133,78,255,.14),transparent 30%),
    var(--panel);
}

.exp50-story-shell{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.6fr);
  gap:1.25rem;
  margin-top:2rem;
}

.exp50-story-map{
  display:grid;
  gap:.75rem;
  align-content:start;
}

.exp50-chapter{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:.7rem;
  align-items:center;
  width:100%;
  padding:.9rem;
  border:1px solid rgba(255,100,190,.28);
  border-radius:17px;
  background:rgba(9,0,12,.65);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:.3s ease;
}

.exp50-chapter span{
  grid-row:1/3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2c092b;
  color:#ffabd5;
  font-weight:900;
}

.exp50-chapter strong,
.exp50-chapter small{
  display:block;
}

.exp50-chapter small{
  color:#d9b9cc;
}

.exp50-chapter:hover,
.exp50-chapter.active{
  transform:translateX(5px);
  border-color:rgba(255,125,207,.72);
  background:linear-gradient(135deg,rgba(255,52,168,.22),rgba(119,37,210,.2));
  box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 22px rgba(255,61,168,.14);
}

.exp50-chapter.completed span{
  background:linear-gradient(135deg,#ff46ad,#8f35e9);
  color:#fff;
}

.exp50-story-card{
  display:grid;
  grid-template-columns:minmax(240px,.88fr) minmax(0,1.12fr);
  min-height:470px;
  overflow:hidden;
  border:1px solid rgba(255,101,190,.4);
  border-radius:24px;
  background:rgba(8,0,11,.76);
  box-shadow:0 24px 58px rgba(0,0,0,.28);
}

.exp50-story-art{
  position:relative;
  display:grid;
  place-items:center;
  min-height:340px;
  overflow:hidden;
  background:
    linear-gradient(rgba(8,0,12,.2),rgba(8,0,12,.7)),
    url("assets/exp3/01-opening-gates.webp") center/cover;
  transition:background-image .7s ease;
}

.exp50-story-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(8,0,11,.92));
}

.exp50-story-glow{
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,82,186,.36) 35%,transparent 70%);
  filter:blur(5px);
  animation:exp50Glow 3.5s ease-in-out infinite;
}

.exp50-story-icon{
  position:relative;
  z-index:2;
  font-size:5rem;
  filter:drop-shadow(0 0 20px rgba(255,99,193,.85));
}

.exp50-story-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2rem;
}

.exp50-story-copy h3,
.exp50-finale h3{
  margin:.25rem 0 1rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,4vw,3.8rem);
}

.exp50-story-copy > p:not(.sv-eyebrow){
  color:#f3ddec;
  font-size:1.03rem;
  line-height:1.65;
}

.exp50-objective{
  margin:1.2rem 0;
  padding:1rem;
  border-left:3px solid #ff55b1;
  border-radius:0 14px 14px 0;
  background:rgba(255,71,173,.08);
}

.exp50-objective small,
.exp50-objective strong{
  display:block;
}

.exp50-objective small{
  margin-bottom:.3rem;
  color:#ff98ce;
  letter-spacing:.12em;
  font-weight:900;
}

.exp50-story-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.exp50-story-progress{
  margin-top:1.4rem;
}

.exp50-story-progress > div:first-child{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.55rem;
  color:#ffd9ec;
  font-size:.8rem;
  font-weight:900;
}

.exp50-progress-track{
  height:11px;
  overflow:hidden;
  border-radius:999px;
  background:#310b2e;
}

.exp50-progress-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#ff45ad,#d14bff,#7a7cff);
  box-shadow:0 0 14px rgba(255,78,181,.5);
  transition:width .55s ease;
}

.exp50-finale{
  margin-top:1.5rem;
  padding:2.2rem;
  border:1px solid rgba(255,129,208,.55);
  border-radius:24px;
  background:radial-gradient(circle at 50% 0,rgba(255,63,177,.25),rgba(10,0,13,.82) 60%);
  text-align:center;
}

.exp50-finale > span{
  display:block;
  color:#ff72c0;
  font-size:4.5rem;
  text-shadow:0 0 28px rgba(255,70,180,.75);
}

.exp50-story-burst{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  overflow:hidden;
}

.exp50-story-burst span{
  position:absolute;
  left:50%;
  top:50%;
  color:#ff83c8;
  text-shadow:0 0 12px #ff4eae;
  animation:exp50Burst 1.5s ease-out forwards;
}

@keyframes exp50Glow{
  0%,100%{transform:scale(.88);opacity:.55}
  50%{transform:scale(1.12);opacity:1}
}

@keyframes exp50Burst{
  from{transform:translate(-50%,-50%) scale(.4);opacity:1}
  to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(420deg) scale(1.1);opacity:0}
}

@media(max-width:900px){
  .exp50-story-shell,
  .exp50-story-card{
    grid-template-columns:1fr;
  }

  .exp50-story-map{
    grid-template-columns:repeat(5,minmax(180px,1fr));
    overflow-x:auto;
    padding-bottom:.5rem;
  }

  .exp50-story-art{
    min-height:280px;
  }

  .exp50-story-art::after{
    background:linear-gradient(transparent 55%,rgba(8,0,11,.9));
  }
}

@media(max-width:600px){
  .exp50-story-copy{
    padding:1.25rem;
  }

  .exp50-story-actions .sv-button{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp50-story-glow,
  .exp50-story-burst,
  .exp50-chapter,
  .exp50-progress-track i{
    animation:none!important;
    transition:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 5.1 — SCROLL UNLOCK REPAIR
   ========================================================= */

html.sv-scroll-locked,
body.sv-scroll-locked{
  overflow:hidden!important;
  height:100%!important;
}

html:not(.sv-scroll-locked),
body:not(.sv-scroll-locked){
  overflow-x:hidden!important;
}

.sv-cinematic-intro.finished{
  pointer-events:none!important;
}


/* SWEETVILLE EXP 5.5 — STORYBOOK EDITION */
.exp55-storybook{position:relative;border:10px solid #5a1a48;border-radius:30px 18px 18px 30px;background:#f9e9f2;box-shadow:inset 0 0 0 2px #d8a5bf,inset 24px 0 38px rgba(92,22,72,.18),0 26px 70px rgba(0,0,0,.36);transform-origin:left center;overflow:visible}
.exp55-storybook::before{content:"";position:absolute;left:-18px;top:24px;bottom:24px;width:20px;border-radius:12px 0 0 12px;background:linear-gradient(#7a285f,#3b0c31);box-shadow:inset -4px 0 8px rgba(0,0,0,.35)}
.exp55-storybook::after{content:"";position:absolute;inset:14px;pointer-events:none;border:1px solid rgba(155,98,128,.38);border-radius:18px;box-shadow:inset 0 0 30px rgba(126,65,101,.08)}
.exp55-storybook.page-turn{animation:exp55PageTurn .75s cubic-bezier(.22,.61,.36,1)}
.exp55-storybook .exp50-story-copy{position:relative;color:#3b1732;background:repeating-linear-gradient(0deg,rgba(124,75,101,.04) 0 1px,transparent 1px 28px),linear-gradient(90deg,rgba(104,41,83,.08),transparent 8%),#fffafc}
.exp55-storybook .sv-eyebrow,.exp55-storybook .exp50-story-copy>p,.exp55-storybook .exp50-objective strong{color:#5a2b4c!important}
.exp55-book-ribbon{position:absolute;right:1.4rem;top:-10px;z-index:4;padding:.7rem .8rem 1.4rem;background:linear-gradient(#ff61b7,#b42986);color:#fff;font-size:.65rem;letter-spacing:.18em;font-weight:900;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);box-shadow:0 8px 18px rgba(92,24,74,.28)}
.exp55-dialogue{margin:1rem 0;padding:1rem 1.1rem;border:1px solid rgba(126,67,104,.2);border-radius:18px 18px 18px 4px;background:#fff;box-shadow:0 10px 24px rgba(85,34,67,.08)}
.exp55-dialogue strong,.exp55-dialogue span{display:block}.exp55-dialogue strong{color:#c52784;font-family:"Playfair Display",serif}.exp55-dialogue span{margin-top:.35rem;color:#4d2940;line-height:1.5}
.exp55-reward-card{margin-top:1rem;padding:.9rem 1rem;border:1px dashed #c76b9f;border-radius:16px;background:linear-gradient(135deg,#fff7fb,#f9e5f1);color:#5a2448}
.exp55-reward-card small,.exp55-reward-card strong{display:block}.exp55-reward-card small{margin-bottom:.25rem;color:#b84682;letter-spacing:.14em;font-weight:900}.exp55-reward-card.unlocked{animation:exp55RewardPop .65s ease;border-style:solid;box-shadow:0 0 24px rgba(255,82,176,.22)}
#exp55StarDisplay{color:#ff4faf;letter-spacing:.25em;font-size:1.05rem}
.exp55-final-reward{display:inline-block;margin:1rem auto 1.4rem;padding:.85rem 1.1rem;border-radius:999px;background:linear-gradient(135deg,#ff4daf,#8e35e5);box-shadow:0 0 26px rgba(255,75,180,.32);font-weight:900;letter-spacing:.06em}
.exp50-finale:not([hidden]){animation:exp55FinaleIn .9s ease both}
@keyframes exp55PageTurn{0%{transform:perspective(1200px) rotateY(0)}45%{transform:perspective(1200px) rotateY(-10deg) translateX(-8px)}100%{transform:perspective(1200px) rotateY(0)}}
@keyframes exp55RewardPop{0%{transform:scale(.92);opacity:.4}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes exp55FinaleIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:900px){.exp55-storybook{border-radius:22px;border-width:7px}.exp55-storybook::before{display:none}}
@media(prefers-reduced-motion:reduce){.exp55-storybook.page-turn,.exp55-reward-card.unlocked,.exp50-finale:not([hidden]){animation:none!important}}

/* =========================================================
   SWEETVILLE EXP 6.0 — PASSPORT EDITION
   ========================================================= */

.exp60-passport-panel{
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,84,184,.17),transparent 28%),
    radial-gradient(circle at 92% 88%,rgba(127,82,255,.14),transparent 30%),
    var(--panel);
}

.exp60-passport-shell{
  display:grid;
  grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);
  gap:1.5rem;
  margin-top:2rem;
  align-items:start;
}

.exp60-passport-cover{
  position:sticky;
  top:92px;
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2.2rem;
  border:10px solid #6d174f;
  border-radius:30px 18px 18px 30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),transparent 24%),
    radial-gradient(circle at 50% 30%,rgba(255,96,186,.2),transparent 32%),
    linear-gradient(160deg,#711752,#3b092f 72%,#180011);
  box-shadow:
    inset 0 0 0 2px rgba(255,210,233,.3),
    inset 22px 0 28px rgba(0,0,0,.18),
    0 28px 68px rgba(0,0,0,.32);
}

.exp60-passport-cover::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,211,234,.28);
  border-radius:20px;
  pointer-events:none;
}

.exp60-passport-emblem{
  font-size:5.5rem;
  color:#ff7cc4;
  text-shadow:0 0 30px rgba(255,78,181,.65);
}

.exp60-passport-cover small{
  letter-spacing:.22em;
  color:#ffc5e3;
  font-weight:900;
}

.exp60-passport-cover h3{
  margin:.45rem 0 0;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.8rem,5vw,4.8rem);
}

.exp60-passport-cover strong{
  font-family:"Sacramento",cursive;
  font-size:2.2rem;
  color:#ff9fd2;
}

.exp60-passport-cover p{
  color:#e9c9da;
}

.exp60-passport-number{
  margin-top:1.5rem;
  padding:.65rem 1rem;
  border:1px solid rgba(255,172,215,.42);
  border-radius:10px;
  background:rgba(8,0,10,.32);
  letter-spacing:.14em;
  font-weight:900;
}

.exp60-passport-pages{
  display:grid;
  gap:1rem;
}

.exp60-passport-page{
  position:relative;
  padding:1.6rem;
  border:1px solid rgba(175,103,145,.28);
  border-radius:22px;
  background:
    repeating-linear-gradient(0deg,rgba(125,76,101,.035) 0 1px,transparent 1px 29px),
    linear-gradient(90deg,rgba(104,41,83,.07),transparent 8%),
    #fffafc;
  color:#4f2942;
  box-shadow:0 18px 42px rgba(0,0,0,.2);
}

.exp60-page-heading{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.2rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(126,67,104,.18);
}

.exp60-page-heading>span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f5d6e7;
  color:#9f3f76;
  font-family:"Playfair Display",serif;
  font-weight:900;
}

.exp60-page-heading small,
.exp60-page-heading h3{
  display:block;
}

.exp60-page-heading small{
  color:#b74d86;
  letter-spacing:.14em;
  font-weight:900;
}

.exp60-page-heading h3{
  margin:.2rem 0 0;
  font-family:"Playfair Display",serif;
  font-size:clamp(1.6rem,3vw,2.6rem);
}

.exp60-profile-grid{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:1.2rem;
}

.exp60-profile-photo{
  min-height:200px;
  display:grid;
  place-items:center;
  align-content:center;
  border:8px solid #fff;
  background:linear-gradient(145deg,#ff7fc4,#8f36db);
  box-shadow:0 10px 26px rgba(71,22,55,.18);
  transform:rotate(-1.5deg);
}

.exp60-profile-photo span{
  font-size:5rem;
  color:#fff;
}

.exp60-profile-photo small{
  margin-top:.5rem;
  color:#fff;
  font-weight:900;
  letter-spacing:.16em;
}

.exp60-profile-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
  margin:0;
}

.exp60-profile-details div{
  padding:1rem;
  border:1px solid rgba(126,67,104,.16);
  border-radius:14px;
  background:rgba(255,255,255,.66);
}

.exp60-profile-details dt{
  color:#a24a78;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.exp60-profile-details dd{
  margin:.35rem 0 0;
  font-family:"Playfair Display",serif;
  font-size:1.3rem;
}

.exp60-progress-wrap{
  margin-top:1.2rem;
}

.exp60-progress-label{
  display:flex;
  justify-content:space-between;
  margin-bottom:.55rem;
  color:#7e3c63;
  font-size:.78rem;
  font-weight:900;
}

.exp60-progress-track{
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:#eed2e1;
}

.exp60-progress-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#ff45ad,#ca49ff,#6d73ff);
  box-shadow:0 0 14px rgba(255,78,181,.38);
  transition:width .55s ease;
}

.exp60-stamp-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.8rem;
}

.exp60-stamp{
  min-height:155px;
  padding:.8rem;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  border:2px dashed rgba(161,76,125,.36);
  border-radius:50%;
  background:rgba(255,255,255,.62);
  transform:rotate(var(--stamp-rotation));
  transition:.35s ease;
}

.exp60-stamp span{
  font-size:2.7rem;
  filter:grayscale(1);
  opacity:.25;
}

.exp60-stamp strong,
.exp60-stamp small{
  display:block;
}

.exp60-stamp strong{
  margin-top:.35rem;
  font-size:.78rem;
}

.exp60-stamp small{
  margin-top:.2rem;
  color:#a26988;
  font-size:.68rem;
}

.exp60-stamp.unlocked{
  border-style:solid;
  border-color:#c94791;
  color:#a3276e;
  background:radial-gradient(circle,#fff 0 42%,#ffd8ec 43% 100%);
  box-shadow:0 0 22px rgba(255,72,174,.18);
}

.exp60-stamp.unlocked span{
  filter:none;
  opacity:1;
}

.exp60-sticker-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.8rem;
}

.exp60-sticker{
  min-height:145px;
  padding:.8rem;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  border:1px solid rgba(126,67,104,.18);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 20px rgba(74,27,57,.08);
}

.exp60-sticker span{
  font-size:2.8rem;
}

.exp60-sticker strong,
.exp60-sticker small{
  display:block;
}

.exp60-sticker small{
  color:#a46c89;
}

.exp60-sticker.locked{
  opacity:.32;
  filter:grayscale(.8);
}

.exp60-history-list{
  display:grid;
  gap:.7rem;
}

.exp60-history-item{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:.8rem;
  align-items:center;
  padding:.8rem;
  border:1px solid rgba(126,67,104,.14);
  border-radius:14px;
  background:rgba(255,255,255,.66);
}

.exp60-history-item>span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f6d9e8;
}

.exp60-history-item strong,
.exp60-history-item small{
  display:block;
}

.exp60-history-item small,
.exp60-history-item time{
  color:#9e6b87;
  font-size:.72rem;
}

.exp60-empty-history{
  padding:1.2rem;
  text-align:center;
  color:#9c6c87;
  border:1px dashed rgba(126,67,104,.22);
  border-radius:14px;
}

.exp60-reset-button{
  margin-top:1rem;
  color:#5c2646!important;
  border-color:rgba(126,67,104,.28)!important;
  background:#fff!important;
}

.exp60-stamp-celebration{
  position:fixed;
  left:50%;
  top:50%;
  z-index:90;
  transform:translate(-50%,-50%) scale(.8);
  padding:1rem 1.3rem;
  border:2px solid #ff87ca;
  border-radius:18px;
  background:rgba(12,0,14,.94);
  color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.42),0 0 35px rgba(255,74,180,.3);
  opacity:0;
  pointer-events:none;
}

.exp60-stamp-celebration.show{
  animation:exp60StampPop 2.4s ease both;
}

@keyframes exp60StampPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-8deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(2deg)}
  75%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-60%) scale(.96)}
}

@media(max-width:1050px){
  .exp60-passport-shell{
    grid-template-columns:1fr;
  }

  .exp60-passport-cover{
    position:relative;
    top:auto;
    min-height:390px;
  }

  .exp60-stamp-grid,
  .exp60-sticker-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:700px){
  .exp60-profile-grid,
  .exp60-profile-details{
    grid-template-columns:1fr;
  }

  .exp60-profile-photo{
    min-height:170px;
  }

  .exp60-stamp-grid,
  .exp60-sticker-grid{
    grid-template-columns:1fr 1fr;
  }

  .exp60-history-item{
    grid-template-columns:40px 1fr;
  }

  .exp60-history-item time{
    grid-column:2;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp60-progress-track i,
  .exp60-stamp,
  .exp60-stamp-celebration{
    animation:none!important;
    transition:none!important;
  }
}

/* EXP 6.1 Collection Sync */
.sv-sync-toast{position:fixed;left:50%;bottom:2rem;z-index:120;transform:translate(-50%,20px);padding:.9rem 1.15rem;border:1px solid rgba(255,117,203,.65);border-radius:18px;background:rgba(10,0,13,.94);color:#fff;opacity:0;pointer-events:none;transition:.28s;text-align:center;font-weight:800}.sv-sync-toast.show{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   SWEETVILLE EXP 7.0 — ENGINE UPDATE
   ========================================================= */

.exp32-world-life,
.ambient-life{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 1.2s ease,visibility 1.2s ease;
}

.exp32-world-life.active,
.ambient-life.active,
.sv-world-awake .exp32-world-life,
.sv-world-awake .ambient-life{
  opacity:1;
  visibility:visible;
}

.exp32-world-life{
  position:fixed;
  inset:0;
  z-index:18;
  overflow:hidden;
}

.sv-living-fireworks{
  position:fixed;
  inset:0;
  z-index:19;
  pointer-events:none;
}

.exp70-firefly,
.exp70-petal,
.exp70-bird,
.exp70-lantern{
  position:absolute;
  display:block;
  pointer-events:none;
  animation-delay:var(--delay);
  animation-duration:var(--duration);
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

.exp70-firefly{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff8a7;
  box-shadow:0 0 8px #fff8a7,0 0 18px rgba(255,241,133,.8);
  animation-name:exp70Firefly;
}

.exp70-petal{
  color:#ff9bd1;
  font-size:12px;
  opacity:.7;
  animation-name:exp70Petal;
}

.exp70-bird{
  color:rgba(255,255,255,.72);
  font-size:22px;
  animation-name:exp70Bird;
}

.exp70-lantern{
  color:#ffd27b;
  font-size:15px;
  text-shadow:0 0 12px #ff9f52,0 0 24px rgba(255,135,59,.9);
  animation-name:exp70Lantern;
}

@keyframes exp70Firefly{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:.15}
  25%{opacity:1}
  50%{transform:translate3d(var(--drift),-45px,0) scale(1.15);opacity:.55}
  75%{opacity:1}
  100%{transform:translate3d(calc(var(--drift)*-.4),-95px,0) scale(.7);opacity:.12}
}

@keyframes exp70Petal{
  0%{transform:translate3d(0,-15vh,0) rotate(0);opacity:0}
  12%{opacity:.75}
  100%{transform:translate3d(var(--drift),115vh,0) rotate(520deg);opacity:0}
}

@keyframes exp70Bird{
  0%{transform:translate3d(-15vw,0,0) scale(.8);opacity:0}
  12%{opacity:.72}
  100%{transform:translate3d(115vw,-18vh,0) scale(1.1);opacity:0}
}

@keyframes exp70Lantern{
  0%{transform:translate3d(0,110vh,0) scale(.75);opacity:0}
  18%{opacity:.9}
  100%{transform:translate3d(var(--drift),-18vh,0) scale(1.05);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .exp70-firefly,
  .exp70-petal,
  .exp70-bird,
  .exp70-lantern{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
  }
}


.exp701-passport-toast{position:fixed;left:50%;top:18%;z-index:125;transform:translate(-50%,-18px) scale(.92);max-width:min(90vw,460px);padding:1rem 1.2rem;border:2px solid #ff91cf;border-radius:18px;background:rgba(12,0,15,.95);color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.45),0 0 30px rgba(255,71,177,.3);opacity:0;pointer-events:none;font-weight:900;text-align:center}.exp701-passport-toast.show{animation:exp701PassportToast 2.6s ease both}.exp60-stamp.exp701-stamp-new{animation:exp701StampIn .55s ease both}@keyframes exp701PassportToast{0%{opacity:0;transform:translate(-50%,-18px) scale(.92)}18%{opacity:1;transform:translate(-50%,0) scale(1.04)}72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-14px) scale(.97)}}@keyframes exp701StampIn{from{opacity:.35;transform:rotate(var(--stamp-rotation)) scale(.72)}to{opacity:1;transform:rotate(var(--stamp-rotation)) scale(1)}}

/* =========================================================
   SWEETVILLE EXP 7.1 — STABILITY & PERFORMANCE
   ========================================================= */

.sv-page-hidden .exp32-world-life,
.sv-page-hidden .ambient-life,
.sv-page-hidden .sv-living-fireworks,
.sv-page-hidden .sv-cinema-sparkles{
  animation-play-state:paused!important;
}

.sv-page-hidden *,
.sv-page-hidden *::before,
.sv-page-hidden *::after{
  animation-play-state:paused!important;
}

.sv-reduced-effects .exp70-petal,
.sv-reduced-effects .exp70-bird,
.sv-reduced-effects .exp70-lantern{
  display:none!important;
}

.sv-reduced-effects .exp70-firefly{
  animation-duration:16s!important;
}

img{
  content-visibility:auto;
}

.exp60-passport-panel,
.exp50-story-panel,
.living-map-panel,
.daily-gift-panel,
.collection-panel,
.bedroom-panel,
.achievement-panel{
  content-visibility:auto;
  contain-intrinsic-size:700px;
}

.sv-living-fireworks,
.exp32-world-life,
.ambient-life{
  contain:strict;
}

@media(max-width:700px){
  .exp70-bird:nth-child(n+4),
  .exp70-lantern:nth-child(n+7),
  .exp70-firefly:nth-child(n+30){
    display:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 7.2 — MAGIC POLISH
   ========================================================= */

body{
  opacity:0;
  transition:opacity .65s ease;
}

body.sv72-ready{
  opacity:1;
}

.cinematic-home,
.living-map{
  --sv72-x:0px;
  --sv72-y:0px;
}

.cinematic-home .cinematic-bg{
  transform:translate3d(var(--sv72-x),var(--sv72-y),0) scale(1.025);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.living-map{
  transform:translate3d(calc(var(--sv72-x)*.28),calc(var(--sv72-y)*.28),0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.world-location,
.location-card,
.live-district-card{
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    box-shadow .38s ease,
    filter .38s ease,
    border-color .38s ease;
  will-change:transform;
}

.world-location:hover,
.location-card:hover,
.live-district-card:hover,
.world-location.sv72-hover,
.location-card.sv72-hover,
.live-district-card.sv72-hover{
  transform:translateY(-7px) scale(1.018);
  filter:brightness(1.06) saturate(1.05);
  box-shadow:
    0 22px 50px rgba(0,0,0,.28),
    0 0 34px rgba(255,85,184,.24);
}

.world-location.sv72-activate,
.location-card.sv72-activate,
.live-district-card.sv72-activate{
  animation:sv72DistrictActivate .7s ease;
}

.sv72-opening::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.32),rgba(255,79,182,.16) 28%,transparent 65%);
  animation:sv72GateFlash 1.15s ease both;
}

.sv72-open .cinematic-home,
.sv72-open .sv-hero{
  animation:sv72WorldReveal 1s ease both;
}

.mochi-guide{
  transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .45s ease;
}

.mochi-guide.sv72-react{
  transform:translateY(-9px) rotate(-3deg) scale(1.08);
  filter:drop-shadow(0 12px 18px rgba(255,91,180,.35));
}

.mochi-guide.sv72-react::after{
  content:attr(data-reaction);
  position:absolute;
  right:-6px;
  top:-24px;
  font-size:1.35rem;
  animation:sv72MochiBubble 1.6s ease both;
}

.sv72-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
}

.sv72-reveal.sv72-in-view{
  opacity:1;
  transform:none;
}

.sv72-return .sv-header,
.sv72-return .cinematic-home{
  animation:sv72ReturnPulse .9s ease;
}

html[data-sv72-audio-ducked="true"] .exp70-firefly,
html[data-sv72-audio-ducked="true"] .exp70-lantern{
  filter:brightness(.86);
}

.sv-button,
.journey-button,
.intro-button,
.hero-sound-button,
.sound-toggle,
.book-button{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.sv-button:hover,
.journey-button:hover,
.intro-button:hover,
.hero-sound-button:hover,
.sound-toggle:hover,
.book-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}

.sv-button:active,
.journey-button:active,
.intro-button:active,
.hero-sound-button:active,
.sound-toggle:active,
.book-button:active{
  transform:translateY(0) scale(.98);
}

@keyframes sv72DistrictActivate{
  0%{transform:scale(1)}
  35%{transform:scale(1.035)}
  70%{transform:scale(.99)}
  100%{transform:scale(1)}
}

@keyframes sv72GateFlash{
  0%{opacity:0}
  35%{opacity:1}
  100%{opacity:0}
}

@keyframes sv72WorldReveal{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:none}
}

@keyframes sv72MochiBubble{
  0%{opacity:0;transform:translateY(8px) scale(.7)}
  25%{opacity:1;transform:translateY(0) scale(1.08)}
  100%{opacity:0;transform:translateY(-16px) scale(.95)}
}

@keyframes sv72ReturnPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}

@media(max-width:700px){
  .world-location:hover,
  .location-card:hover,
  .live-district-card:hover,
  .world-location.sv72-hover,
  .location-card.sv72-hover,
  .live-district-card.sv72-hover{
    transform:translateY(-3px) scale(1.008);
  }
}

@media(prefers-reduced-motion:reduce){
  body{
    opacity:1!important;
  }

  .cinematic-home .cinematic-bg,
  .living-map,
  .world-location,
  .location-card,
  .live-district-card,
  .mochi-guide,
  .sv72-reveal{
    transition:none!important;
    animation:none!important;
    transform:none!important;
  }

  .sv72-reveal{
    opacity:1!important;
  }
}

/* SWEETVILLE EXP 7.2.1 — PIANO HOTFIX */
#miniPianoModal{
  z-index:2147483000!important;
}

#miniPianoModal[open]{
  display:block!important;
  pointer-events:auto!important;
}

#miniPianoModal::backdrop{
  pointer-events:auto;
}

#miniPianoModal .piano-modal-card,
#miniPianoModal .mini-piano-card,
#miniPianoModal > div{
  position:relative;
  pointer-events:auto!important;
}

#miniPianoClose{
  position:absolute!important;
  top:.75rem!important;
  right:.75rem!important;
  z-index:20!important;
  min-width:44px!important;
  min-height:44px!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation;
}

#miniPiano .piano-key{
  pointer-events:auto!important;
  touch-action:none;
  cursor:pointer;
}

#miniPiano .piano-key.active{
  filter:brightness(1.16);
  transform:translateY(3px);
}

html[data-sv72-audio-ducked="true"]{
  --sv-piano-focus:1;
}

/* =========================================================
   SWEETVILLE EXP 8.0 — LITTLE MOMENTS
   ========================================================= */

.exp80-moments-panel{
  position:relative;
  overflow:hidden;
}

.exp80-moments-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,180,224,.16),transparent 28%),
    radial-gradient(circle at 85% 70%,rgba(153,118,255,.13),transparent 34%);
}

.exp80-moment-shell{
  position:relative;
  display:grid;
  gap:1.25rem;
}

.exp80-welcome-card,
.exp80-moment-card,
.exp80-keepsake-card,
.exp80-smile-card,
.exp80-memory-strip{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
}

.exp80-welcome-card{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem;
  border-radius:24px;
}

.exp80-welcome-icon{
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.8rem;
  background:linear-gradient(135deg,#ff72bb,#9b6dff);
  box-shadow:0 0 26px rgba(255,92,184,.35);
}

.exp80-welcome-card small,
.exp80-moment-card small,
.exp80-keepsake-card small,
.exp80-smile-card small{
  letter-spacing:.14em;
  font-weight:800;
  opacity:.72;
}

.exp80-welcome-card h3,
.exp80-moment-card h3,
.exp80-keepsake-card h3{
  margin:.25rem 0 .4rem;
}

.exp80-welcome-card p,
.exp80-moment-card p,
.exp80-keepsake-card p{
  margin:0;
  opacity:.86;
}

.exp80-moment-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.25rem;
}

.exp80-moment-card,
.exp80-keepsake-card{
  min-height:300px;
  border-radius:28px;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.exp80-moment-card{
  background:
    radial-gradient(circle at 78% 20%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(145deg,rgba(255,84,177,.22),rgba(92,57,150,.14));
}

.exp80-keepsake-card{
  background:
    radial-gradient(circle at 25% 18%,rgba(255,245,190,.18),transparent 30%),
    linear-gradient(145deg,rgba(255,195,105,.18),rgba(255,89,173,.12));
}

.exp80-moment-icon,
.exp80-keepsake-card>span{
  font-size:2.6rem;
  margin-bottom:.8rem;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.24));
}

.exp80-moment-card .sv-button,
.exp80-keepsake-card .sv-button{
  margin-top:1.1rem;
}

.exp80-smile-card{
  border-radius:22px;
  padding:1rem 1.15rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.exp80-smile-card strong{
  display:block;
  margin-top:.25rem;
}

.exp80-smile-card button{
  border:0;
  border-radius:999px;
  padding:.8rem 1rem;
  cursor:pointer;
  font-weight:800;
  background:#fff;
  color:#5e174e;
}

.exp80-memory-strip{
  border-radius:18px;
  padding:.9rem 1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}

.exp80-memory-strip span{
  opacity:.68;
  font-size:.76rem;
  letter-spacing:.11em;
  font-weight:800;
}

.exp80-memory-strip strong{
  font-size:1.25rem;
  margin-right:.75rem;
}

.exp80-sharing{
  animation:exp80MomentGlow 2.6s ease both;
}

.exp80-kept{
  box-shadow:0 20px 50px rgba(0,0,0,.22),0 0 36px rgba(255,111,192,.28);
}

.exp80-pop{
  animation:exp80SmilePop .5s ease;
}

@keyframes exp80MomentGlow{
  0%,100%{filter:brightness(1);transform:scale(1)}
  35%{filter:brightness(1.13);transform:scale(1.012)}
  70%{filter:brightness(1.04);transform:scale(1.006)}
}

@keyframes exp80SmilePop{
  0%{transform:scale(.98)}
  55%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

@media(max-width:800px){
  .exp80-moment-grid{grid-template-columns:1fr}
  .exp80-moment-card,.exp80-keepsake-card{min-height:250px}
}

@media(max-width:560px){
  .exp80-welcome-card{align-items:flex-start}
  .exp80-smile-card{align-items:flex-start;flex-direction:column}
  .exp80-smile-card button{width:100%}
}

/* =========================================================
   SWEETVILLE EXP 8.0.1 — SWEETVILLE UI POLISH
   Luxury storybook + modern editorial + magical warmth
   ========================================================= */

.exp80-moments-panel{
  --exp801-rose:#ff70b8;
  --exp801-cotton:#ffd7eb;
  --exp801-lavender:#d9c6ff;
  --exp801-cream:#fff9f4;
  --exp801-gold:#f6d58d;
  --exp801-ink:#5a2146;
}

.exp80-moments-panel .sv-section-heading{
  position:relative;
  padding-top:1rem;
}

.exp80-moments-panel .sv-section-heading::before,
.exp80-moments-panel .sv-section-heading::after{
  content:"✦";
  position:absolute;
  top:1.15rem;
  color:var(--exp801-gold);
  opacity:.7;
}

.exp80-moments-panel .sv-section-heading::before{left:0}
.exp80-moments-panel .sv-section-heading::after{right:0}

.exp80-moments-panel .sv-section-heading h2{
  text-shadow:0 10px 30px rgba(255,87,177,.16);
}

.exp80-welcome-card{
  position:relative;
  overflow:hidden;
  padding:1.6rem 1.6rem 3.7rem;
  border:1px solid rgba(120,56,95,.14);
  background:
    linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,243,249,.78)),
    var(--exp801-cream);
  color:var(--exp801-ink);
  box-shadow:
    0 24px 60px rgba(61,13,48,.2),
    inset 0 0 0 1px rgba(255,255,255,.85);
}

.exp80-welcome-card::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(218,151,187,.26);
  border-radius:18px;
  pointer-events:none;
}

.exp80-welcome-card::after{
  content:"";
  position:absolute;
  right:-24px;
  top:-30px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0 7%,transparent 8%),
    radial-gradient(circle at 30% 30%,rgba(255,128,190,.5),transparent 55%);
  opacity:.55;
  filter:blur(1px);
}

.exp80-welcome-icon{
  flex:0 0 auto;
  position:relative;
  width:70px;
  height:70px;
  border:2px solid rgba(255,255,255,.85);
  background:
    linear-gradient(145deg,#ff9bd0,#ff6fb7 45%,#b481ff);
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.34),
    0 12px 30px rgba(255,74,176,.28);
}

.exp80-welcome-icon::after{
  content:"";
  position:absolute;
  top:7px;
  left:12px;
  width:28px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  transform:rotate(-15deg);
}

.exp80-welcome-card h3{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.65rem,3vw,2.35rem);
}

.exp80-welcome-card p{
  max-width:62ch;
  line-height:1.75;
}

.exp801-signature{
  position:absolute;
  right:1.8rem;
  bottom:1.1rem;
  display:flex;
  align-items:flex-end;
  gap:.45rem;
  color:#b94480;
  transform:rotate(-2deg);
}

.exp801-signature span{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.exp801-signature strong{
  font-family:"Sacramento",cursive;
  font-size:1.8rem;
  font-weight:400;
}

.exp80-moment-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
  background:
    radial-gradient(circle at 80% 12%,rgba(255,255,255,.26),transparent 24%),
    linear-gradient(145deg,#8d4ac7 0%,#d558a3 45%,#ff8ac6 100%);
  box-shadow:
    0 26px 60px rgba(67,20,68,.28),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.exp80-moment-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 0 36%,rgba(255,255,255,.16) 42%,transparent 49%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 8px);
}

.exp80-moment-card h3{
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1;
}

.exp80-moment-card p{
  max-width:50ch;
  line-height:1.7;
}

.exp80-keepsake-card{
  position:relative;
  overflow:hidden;
  padding:1.8rem 1.7rem 2.6rem;
  color:var(--exp801-ink);
  border:10px solid #fff;
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,244,235,.92)),
    var(--exp801-cream);
  box-shadow:
    0 20px 50px rgba(68,24,53,.2),
    0 0 0 1px rgba(207,146,177,.25);
  transform:rotate(1deg);
}

.exp80-keepsake-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px dashed rgba(192,97,145,.32);
  border-radius:14px;
  pointer-events:none;
}

.exp80-keepsake-card::after{
  content:"♡";
  position:absolute;
  right:1.3rem;
  bottom:1rem;
  font-size:3.6rem;
  color:rgba(255,103,181,.15);
  transform:rotate(-12deg);
}

.exp80-keepsake-card h3{
  position:relative;
  z-index:2;
  font-family:"Playfair Display",serif;
  font-size:clamp(1.8rem,3vw,2.65rem);
}

.exp80-keepsake-card p{
  position:relative;
  z-index:2;
  line-height:1.7;
}

.exp801-postmark{
  position:absolute;
  right:1.2rem;
  top:1.1rem;
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  align-content:center;
  border:2px solid rgba(181,76,129,.48);
  border-radius:50%;
  color:#b64f86;
  transform:rotate(10deg);
  opacity:.76;
}

.exp801-postmark span,
.exp801-postmark small{
  display:block;
  line-height:1.1;
  letter-spacing:.08em;
  font-weight:900;
}

.exp801-postmark span{font-size:.68rem}
.exp801-postmark small{font-size:.5rem}

.exp80-smile-card{
  position:relative;
  overflow:hidden;
  border:8px solid #fff;
  background:
    linear-gradient(135deg,#fff8fc 0%,#fde5f3 55%,#eee4ff 100%);
  color:var(--exp801-ink);
  box-shadow:
    0 18px 46px rgba(52,16,45,.22),
    0 0 0 1px rgba(255,140,199,.18);
}

.exp80-smile-card::before{
  content:"SWEETVILLE DAILY";
  position:absolute;
  left:-33px;
  top:23px;
  padding:.35rem 2.6rem;
  background:#ff72b7;
  color:#fff;
  font-size:.55rem;
  letter-spacing:.13em;
  font-weight:900;
  transform:rotate(-42deg);
}

.exp80-smile-card strong{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.15rem,2.5vw,1.65rem);
  line-height:1.45;
}

.exp801-paws{
  position:absolute;
  right:1rem;
  bottom:.4rem;
  opacity:.2;
  transform:rotate(-9deg);
}

.exp801-candy-button{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:999px!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.38),
    inset 0 -4px 10px rgba(110,15,73,.16),
    0 10px 25px rgba(87,18,67,.22)!important;
  text-shadow:0 1px 1px rgba(92,18,63,.18);
}

.exp801-candy-button::before{
  content:"";
  position:absolute;
  inset:2px 8% auto;
  height:42%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0));
  pointer-events:none;
  z-index:-1;
}

.exp801-candy-button:hover{
  transform:translateY(-3px) scale(1.015)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.48),
    inset 0 -4px 10px rgba(110,15,73,.13),
    0 15px 32px rgba(95,18,73,.28),
    0 0 22px rgba(255,95,184,.28)!important;
}

.exp801-candy-button:active{
  transform:translateY(1px) scale(.985)!important;
}

.exp801-button-sparkle{
  display:inline-block;
  margin-left:.45rem;
  font-size:.78em;
  opacity:.75;
  animation:exp801Sparkle 2.6s ease-in-out infinite;
}

.exp80-smile-card button.exp801-candy-button{
  background:linear-gradient(145deg,#ff8bc8,#ff6aad 55%,#c271f0)!important;
  color:#fff!important;
}

.exp80-keepsake-card .sv-button.secondary.exp801-candy-button{
  color:#6a214d!important;
  background:linear-gradient(145deg,#fff,#ffeaf4 60%,#f5ddff)!important;
}

.exp80-moment-card .sv-button.primary.exp801-candy-button{
  background:linear-gradient(145deg,#fff2f9,#ffcce5 45%,#ff8ac5)!important;
  color:#6a214d!important;
}

.exp801-card-flip{
  animation:exp801CardFlip .55s cubic-bezier(.22,.61,.36,1);
}

.exp801-saved{
  animation:exp801Saved 1.15s ease both;
}

.exp801-warm{
  animation:exp801Warm 1.8s ease;
}

@keyframes exp801Sparkle{
  0%,100%{transform:rotate(0) scale(.9);opacity:.45}
  50%{transform:rotate(20deg) scale(1.18);opacity:1}
}

@keyframes exp801CardFlip{
  0%{transform:perspective(700px) rotateX(0)}
  45%{transform:perspective(700px) rotateX(7deg) scale(.99)}
  100%{transform:none}
}

@keyframes exp801Saved{
  0%{transform:rotate(1deg) scale(1)}
  45%{transform:rotate(-1deg) scale(1.025);box-shadow:0 24px 60px rgba(68,24,53,.24),0 0 36px rgba(255,103,181,.32)}
  100%{transform:rotate(1deg) scale(1)}
}

@keyframes exp801Warm{
  0%,100%{filter:brightness(1)}
  45%{filter:brightness(1.06)}
}

@media(max-width:650px){
  .exp801-signature{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:1rem;
    justify-content:flex-end;
  }

  .exp80-welcome-card{
    padding-bottom:1.5rem;
  }

  .exp801-postmark{
    width:68px;
    height:68px;
    right:.8rem;
    top:.8rem;
  }

  .exp80-keepsake-card{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp801-button-sparkle,
  .exp801-card-flip,
  .exp801-saved,
  .exp801-warm{
    animation:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 8.1 — TOUCH THE WORLD
   Every important touch creates a response
   ========================================================= */

.exp81-touchable{
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.exp81-ripple{
  position:absolute;
  z-index:25;
  border-radius:50%;
  pointer-events:none;
  transform:scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.62),rgba(255,151,211,.28) 45%,transparent 70%);
  animation:exp81Ripple .72s ease-out forwards;
}

.exp81-toast-host{
  position:fixed;
  z-index:999999;
  right:18px;
  top:88px;
  width:min(360px,calc(100vw - 28px));
  display:grid;
  gap:10px;
  pointer-events:none;
}

.exp81-toast{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 1.05rem;
  border:1px solid rgba(255,255,255,.48);
  border-radius:20px;
  color:#5f1f4d;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,229,243,.94));
  box-shadow:
    0 18px 45px rgba(50,12,41,.28),
    inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(18px);
  opacity:0;
  transform:translateX(28px) scale(.96);
  transition:.32s ease;
}

.exp81-toast.show{
  opacity:1;
  transform:none;
}

.exp81-toast>span{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:1.35rem;
  background:linear-gradient(145deg,#ffd4e9,#e5d4ff);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75);
}

.exp81-toast strong,
.exp81-toast small{
  display:block;
}

.exp81-toast strong{
  font-family:"Playfair Display",serif;
  font-size:1.02rem;
}

.exp81-toast small{
  margin-top:.16rem;
  line-height:1.35;
  opacity:.76;
}

.exp81-confetti-host{
  position:fixed;
  z-index:999998;
  width:1px;
  height:1px;
  pointer-events:none;
}

.exp81-confetti-host span{
  position:absolute;
  color:#ffd2ea;
  text-shadow:0 0 12px rgba(255,80,180,.5);
  animation:exp81Confetti 1.35s cubic-bezier(.12,.7,.3,1) var(--d) forwards;
}

.exp81-note{
  position:fixed;
  z-index:999999;
  pointer-events:none;
  color:#ffd3ec;
  font-size:1.7rem;
  text-shadow:0 0 18px rgba(255,85,186,.7);
  animation:exp81Note 1.1s ease-out forwards;
}

.exp81-entered{
  animation:exp81Entered 1.1s ease!important;
}

.exp81-world-response{
  animation:exp81WorldResponse 1.7s ease!important;
}

.exp81-tucked{
  animation:exp81Tucked 1.15s cubic-bezier(.22,.7,.32,1)!important;
}

.exp81-smile-bounce{
  animation:exp81SmileBounce .68s ease!important;
}

.exp81-stamped{
  animation:exp81Stamp .82s cubic-bezier(.2,.8,.2,1)!important;
}

.exp81-page-turn{
  transform-origin:left center;
  animation:exp81PageTurn .82s ease!important;
}

.exp81-section-awake{
  animation:exp81SectionAwake .9s ease!important;
}

.exp81-experience-badge{
  position:fixed;
  z-index:99990;
  right:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem .8rem;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(145deg,rgba(105,45,127,.9),rgba(236,81,158,.9));
  box-shadow:0 15px 36px rgba(34,10,37,.28);
  backdrop-filter:blur(15px);
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:.3s ease;
}

.exp81-experience-badge.visible{
  opacity:1;
  transform:none;
}

.exp81-experience-badge>span{
  font-size:1.15rem;
}

.exp81-experience-badge small,
.exp81-experience-badge strong{
  display:block;
  line-height:1.05;
}

.exp81-experience-badge small{
  font-size:.55rem;
  letter-spacing:.1em;
  opacity:.74;
}

.exp81-experience-badge strong{
  margin-top:.12rem;
}

html[data-exp81-district="cafe"] .living-sky{
  filter:hue-rotate(-12deg) saturate(1.06) brightness(1.06);
}

html[data-exp81-district="studio"] .living-sky{
  filter:hue-rotate(18deg) saturate(.92);
}

html[data-exp81-district="donut"] .living-sky{
  filter:hue-rotate(-25deg) saturate(1.25);
}

html[data-exp81-district="lake"] .living-sky{
  filter:hue-rotate(40deg) saturate(.88) brightness(.96);
}

html[data-exp81-district="heart"] .living-sky{
  filter:hue-rotate(-4deg) saturate(1.35);
}

.living-sky{
  transition:filter 1.1s ease;
}

.world-location,
.exp80-moment-card,
.exp80-keepsake-card,
.exp80-smile-card,
.exp50-story-card,
.sv-panel{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

@keyframes exp81Ripple{
  0%{transform:scale(0);opacity:.85}
  100%{transform:scale(1);opacity:0}
}

@keyframes exp81Confetti{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}
}

@keyframes exp81Note{
  0%{transform:translate(-50%,-20%) scale(.7);opacity:0}
  18%{opacity:1}
  100%{transform:translate(-50%,-120px) scale(1.25) rotate(12deg);opacity:0}
}

@keyframes exp81Entered{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-9px) scale(1.035);filter:brightness(1.14)}
  65%{transform:translateY(-4px) scale(1.015)}
}

@keyframes exp81WorldResponse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  35%{filter:brightness(1.13);transform:scale(1.018)}
  62%{filter:brightness(1.06);box-shadow:0 28px 75px rgba(255,70,174,.3)}
}

@keyframes exp81Tucked{
  0%{transform:rotate(1deg) scale(1)}
  40%{transform:rotate(-2deg) scale(1.035) translateY(-6px)}
  100%{transform:rotate(1deg) scale(1)}
}

@keyframes exp81SmileBounce{
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-8px) rotate(-.4deg)}
  70%{transform:translateY(-3px) rotate(.25deg)}
}

@keyframes exp81Stamp{
  0%{transform:scale(1) rotate(0)}
  45%{transform:scale(.9) rotate(-5deg);filter:saturate(1.35)}
  100%{transform:scale(1) rotate(0)}
}

@keyframes exp81PageTurn{
  0%{transform:perspective(1000px) rotateY(0)}
  42%{transform:perspective(1000px) rotateY(-7deg)}
  100%{transform:perspective(1000px) rotateY(0)}
}

@keyframes exp81SectionAwake{
  0%,100%{filter:brightness(1)}
  42%{filter:brightness(1.08)}
}

@media(max-width:650px){
  .exp81-toast-host{
    top:auto;
    bottom:82px;
    right:14px;
  }

  .exp81-experience-badge{
    right:12px;
    bottom:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp81-ripple,
  .exp81-confetti-host span,
  .exp81-note,
  .exp81-entered,
  .exp81-world-response,
  .exp81-tucked,
  .exp81-smile-bounce,
  .exp81-stamped,
  .exp81-page-turn,
  .exp81-section-awake{
    animation:none!important;
  }

  .living-sky{
    transition:none!important;
  }
}

.exp90-coloring-panel{position:relative;overflow:hidden}
.exp90-coloring-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,rgba(255,114,188,.18),transparent 28%),radial-gradient(circle at 86% 18%,rgba(166,114,255,.16),transparent 25%),radial-gradient(circle at 50% 95%,rgba(255,211,102,.08),transparent 30%)}
.exp90-studio-shell{position:relative;display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,2fr);gap:1.25rem;align-items:start}
.exp90-host-card,.exp90-canvas-card{border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));box-shadow:0 24px 60px rgba(0,0,0,.24);backdrop-filter:blur(18px)}
.exp90-host-card{position:sticky;top:88px;border-radius:28px;padding:1.35rem;overflow:hidden}
.exp90-host-card::after{content:"♡";position:absolute;right:-8px;bottom:-24px;font-size:8rem;color:rgba(255,255,255,.055);transform:rotate(-12deg)}
.exp90-host-badge{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;font-size:2rem;margin-bottom:1rem;background:linear-gradient(145deg,#ff9fd1,#ff67b1 50%,#aa78f4);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 14px 32px rgba(255,73,173,.28)}
.exp90-host-card h3{font-family:"Playfair Display",serif;font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.08;margin:.35rem 0 .65rem}
.exp90-host-card p{line-height:1.7;opacity:.84}
.exp90-progress-wrap{margin-top:1.3rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
.exp90-progress-wrap span,.exp90-mini-gallery span{display:block;font-size:.68rem;letter-spacing:.12em;font-weight:800;opacity:.68}
.exp90-progress-track{height:10px;margin:.55rem 0;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.11)}
.exp90-progress-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ff6db6,#c178f3,#ffd166);box-shadow:0 0 18px rgba(255,99,180,.45);transition:width .35s ease}
.exp90-progress-wrap strong{font-size:.84rem}
.exp90-mini-gallery{margin-top:1.15rem;display:flex;align-items:end;justify-content:space-between}
.exp90-mini-gallery strong{font-size:2rem;font-family:"Playfair Display",serif}
.exp90-canvas-card{border-radius:30px;padding:1rem}
.exp90-canvas-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .4rem 1rem}
.exp90-canvas-topbar small,.exp90-canvas-topbar strong{display:block}
.exp90-canvas-topbar small{letter-spacing:.12em;font-weight:800;opacity:.63}
.exp90-canvas-topbar strong{margin-top:.2rem;font-family:"Playfair Display",serif;font-size:1.35rem}
.exp90-icon-button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.08);cursor:pointer}
.exp90-canvas-wrap{position:relative;max-width:760px;margin:0 auto;border-radius:24px;padding:14px;background:linear-gradient(145deg,#fff,#ffeaf6);box-shadow:0 22px 60px rgba(29,9,26,.34),inset 0 0 0 1px rgba(255,255,255,.8)}
.exp90-canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:5/6;border-radius:15px;background:#fffafc;touch-action:none;cursor:crosshair}
.exp90-canvas-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:.55rem .85rem;border-radius:999px;color:#6e2754;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(54,16,46,.18);font-size:.82rem;font-weight:800;pointer-events:none;transition:.3s ease}
.exp90-canvas-hint.hidden{opacity:0;transform:translate(-50%,10px)}
.exp90-tools{display:grid;grid-template-columns:1.15fr .65fr 1.2fr;gap:1rem;margin-top:1rem}
.exp90-tool-block{padding:1rem;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(255,255,255,.055)}
.exp90-tool-block>small{display:block;margin-bottom:.75rem;letter-spacing:.12em;font-size:.67rem;font-weight:800;opacity:.68}
.exp90-palette{display:flex;flex-wrap:wrap;gap:.55rem}
.exp90-palette button{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.65);background:var(--swatch);cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.16);transition:.22s ease}
.exp90-palette button.active{transform:translateY(-3px) scale(1.12);box-shadow:0 0 0 3px rgba(255,255,255,.2),0 8px 18px rgba(0,0,0,.22)}
.exp90-size-controls,.exp90-action-tools>div{display:flex;flex-wrap:wrap;gap:.5rem}
.exp90-size-controls button,.exp90-action-tools button{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.58rem .78rem;color:#fff;background:rgba(255,255,255,.075);cursor:pointer;font-weight:700}
.exp90-size-controls button.active,.exp90-action-tools button.active{color:#64224e;background:linear-gradient(145deg,#fff,#ffd7ea)}
.exp90-save-row{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.exp90-expanded{position:fixed;z-index:999999;inset:14px;max-width:none;display:grid;place-items:center;background:rgba(17,4,20,.94);overflow:auto}
.exp90-expanded canvas{max-width:min(92vw,850px);max-height:90vh;width:auto;height:auto}
body.exp90-lock{overflow:hidden!important}
.exp90-celebrate{animation:exp90Celebrate 1.2s ease}
@keyframes exp90Celebrate{0%,100%{filter:brightness(1);transform:scale(1)}38%{filter:brightness(1.12);transform:scale(1.012)}70%{filter:brightness(1.05)}}
@media(max-width:980px){.exp90-studio-shell{grid-template-columns:1fr}.exp90-host-card{position:relative;top:auto}.exp90-tools{grid-template-columns:1fr 1fr}.exp90-action-tools{grid-column:1/-1}}
@media(max-width:650px){.exp90-canvas-card{padding:.75rem}.exp90-tools{grid-template-columns:1fr}.exp90-action-tools{grid-column:auto}.exp90-save-row .sv-button{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.exp90-celebrate{animation:none!important}.exp90-progress-track i{transition:none!important}}

/* =========================================================
   SWEETVILLE EXP 9.1 — SWEETVILLE GALLERY
   ========================================================= */

.exp91-gallery-panel{
  position:relative;
  overflow:hidden;
}

.exp91-gallery-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 18%,rgba(255,184,221,.15),transparent 27%),
    radial-gradient(circle at 88% 72%,rgba(181,133,255,.14),transparent 32%);
}

.exp91-gallery-shell{
  position:relative;
  display:grid;
  gap:1rem;
}

.exp91-gallery-toolbar,
.exp91-gallery-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.15rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(16px);
}

.exp91-gallery-toolbar small,
.exp91-gallery-toolbar strong{
  display:block;
}

.exp91-gallery-toolbar small{
  letter-spacing:.12em;
  font-size:.67rem;
  font-weight:800;
  opacity:.66;
}

.exp91-gallery-toolbar strong{
  margin-top:.2rem;
  font-family:"Playfair Display",serif;
  font-size:1.25rem;
}

.exp91-gallery-wall{
  min-height:340px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
  padding:1.25rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 34px);
  box-shadow:inset 0 0 60px rgba(0,0,0,.13);
}

.exp91-gallery-empty{
  grid-column:1/-1;
  align-self:center;
  justify-self:center;
  max-width:500px;
  text-align:center;
  padding:2rem;
}

.exp91-gallery-empty>span{
  font-size:3rem;
}

.exp91-gallery-empty h3{
  margin:.6rem 0 .35rem;
  font-family:"Playfair Display",serif;
  font-size:2rem;
}

.exp91-gallery-empty p{
  margin:0 0 1rem;
  opacity:.76;
}

.exp91-art-frame{
  position:relative;
  align-self:start;
  padding:11px;
  border-radius:13px;
  background:
    linear-gradient(145deg,#f9dba0,#a36b2a 30%,#f6cf89 56%,#7f4a1d);
  box-shadow:
    0 18px 42px rgba(0,0,0,.29),
    inset 0 0 0 2px rgba(255,255,255,.25);
  transform:rotate(var(--tilt));
  transition:transform .32s ease,box-shadow .32s ease;
}

.exp91-art-frame:hover{
  transform:rotate(0) translateY(-7px) scale(1.015);
  box-shadow:
    0 25px 55px rgba(0,0,0,.34),
    0 0 28px rgba(255,100,185,.2);
}

.exp91-art-frame.displayed{
  box-shadow:
    0 25px 58px rgba(0,0,0,.34),
    0 0 0 3px rgba(255,123,195,.4),
    0 0 34px rgba(255,88,177,.32);
}

.exp91-art-open{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  cursor:pointer;
  background:#fff;
  overflow:hidden;
}

.exp91-art-open img{
  display:block;
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover;
  background:#fff;
}

.exp91-frame-glow{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:inset 0 0 25px rgba(255,255,255,.32);
}

.exp91-art-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  padding:.75rem .3rem .2rem;
  color:#fff8e9;
}

.exp91-art-caption strong,
.exp91-art-caption small{
  display:block;
}

.exp91-art-caption strong{
  font-family:"Playfair Display",serif;
  line-height:1.1;
}

.exp91-art-caption small{
  margin-top:.18rem;
  opacity:.72;
}

.exp91-art-delete{
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:#fff;
  background:rgba(60,20,44,.4);
  cursor:pointer;
}

.exp91-room-tag{
  position:absolute;
  top:-10px;
  right:12px;
  padding:.35rem .55rem;
  border-radius:999px;
  color:#6f234f;
  background:#fff1f8;
  font-size:.57rem;
  letter-spacing:.08em;
  font-weight:900;
  box-shadow:0 7px 18px rgba(0,0,0,.2);
}

.exp91-gallery-note{
  justify-content:flex-start;
}

.exp91-gallery-note>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(145deg,#ff9bd1,#b57df0);
}

.exp91-gallery-note p{
  margin:0;
  font-family:"Playfair Display",serif;
}

.exp91-artwork-modal{
  width:min(920px,94vw);
  max-height:92vh;
  padding:0;
  border:0;
  border-radius:28px;
  color:#fff;
  background:#190719;
  box-shadow:0 35px 100px rgba(0,0,0,.55);
}

.exp91-artwork-modal::backdrop{
  background:rgba(5,0,8,.82);
  backdrop-filter:blur(8px);
}

.exp91-modal-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  min-height:520px;
}

.exp91-modal-card>img{
  width:100%;
  height:100%;
  max-height:88vh;
  object-fit:contain;
  background:#fff4fa;
}

.exp91-modal-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2rem;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,105,184,.18),transparent 30%),
    linear-gradient(145deg,#2a0c28,#140516);
}

.exp91-modal-copy small{
  letter-spacing:.13em;
  font-weight:800;
  opacity:.65;
}

.exp91-modal-copy h3{
  margin:.45rem 0 .4rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,4vw,3.3rem);
}

.exp91-modal-copy p{
  opacity:.72;
}

.exp91-modal-copy>div{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

.exp91-modal-close{
  position:absolute;
  z-index:5;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:#fff;
  background:rgba(15,3,18,.72);
  font-size:1.7rem;
  cursor:pointer;
}

.exp91-room-art-wall{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:1rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:rgba(255,255,255,.055);
}

.exp91-room-frame{
  width:120px;
  padding:8px;
  flex:0 0 auto;
  border-radius:8px;
  background:linear-gradient(145deg,#f6d78f,#925920);
  box-shadow:0 14px 30px rgba(0,0,0,.26);
}

.exp91-room-frame img,
.exp91-room-art-placeholder{
  display:block;
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover;
  background:#fff6fb;
}

.exp91-room-art-placeholder{
  display:grid;
  place-items:center;
  font-size:2rem;
}

.exp91-room-art-wall small,
.exp91-room-art-wall strong,
.exp91-room-art-wall a{
  display:block;
}

.exp91-room-art-wall small{
  letter-spacing:.12em;
  font-size:.65rem;
  font-weight:800;
  opacity:.66;
}

.exp91-room-art-wall strong{
  margin:.25rem 0 .45rem;
  font-family:"Playfair Display",serif;
}

.exp91-room-art-wall a{
  color:#ff9bd2;
  font-weight:800;
  text-decoration:none;
}

@media(max-width:760px){
  .exp91-gallery-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .exp91-gallery-toolbar .sv-button{
    width:100%;
    justify-content:center;
  }

  .exp91-modal-card{
    grid-template-columns:1fr;
  }

  .exp91-modal-card>img{
    max-height:58vh;
  }

  .exp91-modal-copy{
    padding:1.3rem;
  }
}

/* =========================================================
   SWEETVILLE EXP 9.3 — CREATE WITH JAHNTELLA
   ========================================================= */

.exp93-creative-panel{
  position:relative;
  overflow:hidden;
}

.exp93-creative-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,121,191,.16),transparent 28%),
    radial-gradient(circle at 88% 82%,rgba(172,128,255,.15),transparent 32%);
}

.exp93-creative-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,.78fr) minmax(0,1.7fr);
  gap:1.25rem;
  align-items:start;
}

.exp93-sidebar,
.exp93-workspace{
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.04));
  box-shadow:0 24px 62px rgba(0,0,0,.25);
  backdrop-filter:blur(18px);
}

.exp93-sidebar{
  position:sticky;
  top:88px;
  padding:1rem;
}

.exp93-host-message{
  padding:1rem;
  border-radius:20px;
  color:#5d244b;
  background:linear-gradient(145deg,#fff8fc,#f6e8ff);
}

.exp93-host-message>span{
  display:block;
  font-size:1.8rem;
}

.exp93-host-message small{
  display:block;
  margin-top:.55rem;
  letter-spacing:.12em;
  font-size:.65rem;
  font-weight:800;
  opacity:.66;
}

.exp93-host-message h3{
  margin:.35rem 0 .45rem;
  font-family:"Playfair Display",serif;
  font-size:1.65rem;
}

.exp93-host-message p{
  margin:0;
  line-height:1.55;
}

.exp93-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  margin-top:1rem;
}

.exp93-mode-tabs button,
.exp93-backgrounds button,
.exp93-sticker-palette button,
.exp93-top-actions button,
.exp93-stage-controls button{
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.07);
  cursor:pointer;
  font-weight:800;
}

.exp93-mode-tabs button{
  padding:.8rem .65rem;
}

.exp93-mode-tabs button.active,
.exp93-backgrounds button.active{
  color:#64244e;
  background:linear-gradient(145deg,#fff,#ffd7eb);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.exp93-control-group{
  margin-top:1rem;
}

.exp93-control-group>small{
  display:block;
  margin-bottom:.55rem;
  font-size:.66rem;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.65;
}

.exp93-backgrounds{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}

.exp93-backgrounds button{
  padding:.64rem .5rem;
}

.exp93-control-group select,
.exp93-control-group input{
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:.75rem;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.exp93-control-group input{
  margin-top:.55rem;
}

.exp93-control-group select option{
  color:#35142d;
}

.exp93-sticker-palette{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.exp93-sticker-palette button{
  width:42px;
  height:42px;
  padding:0;
  font-size:1.35rem;
}

.exp93-workspace{
  padding:1rem;
}

.exp93-workspace-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.2rem .2rem 1rem;
}

.exp93-workspace-topbar small,
.exp93-workspace-topbar strong{
  display:block;
}

.exp93-workspace-topbar small{
  letter-spacing:.12em;
  font-size:.66rem;
  font-weight:800;
  opacity:.65;
}

.exp93-workspace-topbar strong{
  margin-top:.2rem;
  font-family:"Playfair Display",serif;
  font-size:1.35rem;
}

.exp93-top-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.exp93-top-actions button,
.exp93-stage-controls button{
  padding:.58rem .72rem;
}

.exp93-stage-wrap{
  display:grid;
  place-items:center;
  padding:1rem;
  border-radius:24px;
  background:rgba(0,0,0,.14);
  overflow:auto;
}

.exp93-stage{
  position:relative;
  width:min(100%,720px);
  aspect-ratio:4/5;
  overflow:hidden;
  border:12px solid #fff;
  border-radius:24px;
  background:linear-gradient(145deg,#7e3ca0,#ff6cab);
  box-shadow:0 24px 65px rgba(0,0,0,.34);
}

.exp93-stage.mode-wallpaper{
  width:min(100%,440px);
  aspect-ratio:9/16;
}

.exp93-stage.mode-card{
  width:min(100%,760px);
  aspect-ratio:3/2;
}

.exp93-stage.mode-stickers{
  aspect-ratio:1/1;
}

.exp93-stage.bg-pink-sky{
  background:linear-gradient(145deg,#8638a0,#ff70b4 58%,#ffc3e4);
}

.exp93-stage.bg-lavender-night{
  background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.24),transparent 20%),linear-gradient(160deg,#251047,#6544a2 52%,#d763b1);
}

.exp93-stage.bg-candy-cloud{
  background:radial-gradient(circle at 25% 25%,#fff 0 8%,transparent 9%),radial-gradient(circle at 70% 35%,rgba(255,255,255,.8) 0 11%,transparent 12%),linear-gradient(145deg,#83c9ff,#f7b1df 58%,#fff0b7);
}

.exp93-stage.bg-sparkle-lake{
  background:radial-gradient(circle at 50% 82%,rgba(255,255,255,.22),transparent 32%),linear-gradient(180deg,#33236d,#7f58b5 48%,#d37bb7 49%,#5f75c6);
}

.exp93-stage.bg-cream-paper{
  color:#663050;
  background:repeating-linear-gradient(0deg,rgba(132,92,113,.035) 0 1px,transparent 1px 28px),#fff7ef;
}

.exp93-stage-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 16%,rgba(255,255,255,.32),transparent 28%),
    radial-gradient(circle at 80% 78%,rgba(255,255,255,.16),transparent 30%);
}

.exp93-stage-frame{
  position:absolute;
  inset:22px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:18px;
  pointer-events:none;
}

.exp93-stage-copy{
  position:absolute;
  z-index:3;
  inset:0;
  display:grid;
  place-content:center;
  padding:12%;
  text-align:center;
  color:#fff;
}

.bg-cream-paper .exp93-stage-copy{
  color:#663050;
}

.exp93-stage-copy small{
  letter-spacing:.18em;
  font-weight:800;
}

.exp93-stage-copy h3{
  margin:.55rem 0;
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,6vw,5rem);
  line-height:1;
}

.exp93-stage-copy strong{
  font-family:"Sacramento",cursive;
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:400;
}

.exp93-signature{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:4%;
  transform:translateX(-50%);
  width:90%;
  text-align:center;
  color:rgba(255,255,255,.9);
  font-size:.72rem;
  font-weight:800;
}

.bg-cream-paper .exp93-signature{
  color:#7c4162;
}

.exp93-sticker-item{
  position:absolute;
  z-index:6;
  border:0;
  padding:0;
  background:none;
  font-size:3rem;
  cursor:grab;
  touch-action:none;
  transform:rotate(var(--rotate,0deg)) scale(var(--scale,1));
  transform-origin:center;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));
}

.exp93-sticker-item.selected{
  outline:2px dashed rgba(255,255,255,.9);
  outline-offset:5px;
}

.exp93-stage-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}

.exp93-stage-controls small,
.exp93-stage-controls span{
  display:block;
}

.exp93-stage-controls small{
  font-size:.64rem;
  letter-spacing:.1em;
  font-weight:800;
  opacity:.65;
}

.exp93-stage-controls span{
  margin-top:.18rem;
}

.exp93-stage-controls>div:last-child{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.exp93-save-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}

@media(max-width:980px){
  .exp93-creative-shell{
    grid-template-columns:1fr;
  }

  .exp93-sidebar{
    position:relative;
    top:auto;
  }
}

@media(max-width:680px){
  .exp93-workspace-topbar,
  .exp93-stage-controls{
    align-items:flex-start;
    flex-direction:column;
  }

  .exp93-save-actions .sv-button{
    width:100%;
    justify-content:center;
  }

  .exp93-mode-tabs,
  .exp93-backgrounds{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   SWEETVILLE EXP 9.4.1 — PHOTO BOOTH
   ========================================================= */
.exp94-photo-panel{position:relative;overflow:hidden}
.exp94-photo-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 15%,rgba(255,104,183,.17),transparent 29%),radial-gradient(circle at 88% 78%,rgba(167,112,255,.14),transparent 32%)}
.exp94-photo-shell{position:relative;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.75fr);gap:1.25rem;align-items:start}
.exp94-photo-controls,.exp94-photo-workspace{border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.04));box-shadow:0 24px 62px rgba(0,0,0,.25);backdrop-filter:blur(18px)}
.exp94-photo-controls{position:sticky;top:88px;padding:1rem}
.exp94-host-note{padding:1rem;border-radius:20px;color:#5d244b;background:linear-gradient(145deg,#fff8fc,#f2e3ff)}
.exp94-host-note>span{font-size:1.8rem}
.exp94-host-note small{display:block;margin-top:.55rem;letter-spacing:.12em;font-size:.65rem;font-weight:800;opacity:.66}
.exp94-host-note h3{margin:.35rem 0 .45rem;font-family:"Playfair Display",serif;font-size:1.65rem}
.exp94-host-note p{margin:0;line-height:1.55}
.exp94-upload-button{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding:1rem;border:1px dashed rgba(255,255,255,.35);border-radius:18px;cursor:pointer;background:rgba(255,255,255,.065)}
.exp94-upload-button>span{font-size:1.65rem}
.exp94-upload-button strong,.exp94-upload-button small{display:block}
.exp94-upload-button small{opacity:.65}
.exp94-control-group{margin-top:1rem}
.exp94-control-group>small{display:block;margin-bottom:.55rem;font-size:.66rem;letter-spacing:.12em;font-weight:800;opacity:.66}
.exp94-control-group input[type="range"]{width:100%}
.exp94-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.exp94-option-grid button,#exp94ResetPhoto{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.68rem;color:#fff;background:rgba(255,255,255,.07);cursor:pointer;font-weight:800}
.exp94-option-grid button.active{color:#65234f;background:linear-gradient(145deg,#fff,#ffd8eb)}
.exp94-control-group select,.exp94-control-group input[type="text"]{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.75rem;color:#fff;background:rgba(255,255,255,.08)}
.exp94-control-group input[type="text"]{margin-top:.55rem}
.exp94-control-group select option{color:#35142d}
#exp94ResetPhoto{width:100%;margin-top:1rem}
.exp94-photo-workspace{padding:1rem}
.exp94-photo-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.25rem .25rem 1rem}
.exp94-photo-topbar small,.exp94-photo-topbar strong{display:block}
.exp94-photo-topbar small{letter-spacing:.12em;font-size:.66rem;font-weight:800;opacity:.65}
.exp94-photo-topbar strong{margin-top:.2rem;font-family:"Playfair Display",serif;font-size:1.35rem}
.exp94-photo-topbar>span{font-size:.8rem;opacity:.68}
.exp94-preview-wrap{position:relative;border:12px solid #fff;border-radius:24px;overflow:hidden;background:#210820;box-shadow:0 24px 65px rgba(0,0,0,.36)}
.exp94-preview-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;touch-action:none;cursor:grab}
.exp94-preview-wrap canvas:active{cursor:grabbing}
.exp94-empty-photo{position:absolute;left:4.5%;top:15%;width:40.7%;height:68.5%;display:grid;place-content:center;justify-items:center;text-align:center;padding:1rem;border:2px dashed rgba(255,255,255,.45);border-radius:24px;color:#fff;background:rgba(20,2,23,.54);pointer-events:none}
.exp94-empty-photo.hidden{display:none}
.exp94-empty-photo>span{font-size:2.5rem}
.exp94-empty-photo strong,.exp94-empty-photo small{display:block}
.exp94-empty-photo small{margin-top:.25rem;opacity:.72}
.exp94-photo-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.exp94-privacy-note{margin:.9rem 0 0;text-align:right;font-size:.72rem;opacity:.64}
@media(max-width:980px){.exp94-photo-shell{grid-template-columns:1fr}.exp94-photo-controls{position:relative;top:auto}}
@media(max-width:680px){.exp94-photo-topbar{align-items:flex-start;flex-direction:column}.exp94-option-grid{grid-template-columns:1fr}.exp94-photo-actions .sv-button{width:100%;justify-content:center}.exp94-privacy-note{text-align:left}}

/* =========================================================
   SWEETVILLE EXP 10.0 — THE WORLD OF SWEET EDITION
   ========================================================= */

#svNav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(.45rem,1vw,1rem);
  flex-wrap:nowrap;
}

#svNav a{
  white-space:nowrap;
  font-size:clamp(.68rem,.82vw,.86rem);
}

.exp100-create-hub{
  position:relative;
  overflow:hidden;
}

.exp100-create-hub::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,111,190,.18),transparent 28%),
    radial-gradient(circle at 86% 78%,rgba(164,112,255,.16),transparent 31%),
    radial-gradient(circle at 50% 48%,rgba(255,220,151,.07),transparent 34%);
}

.exp100-create-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.exp100-create-card{
  position:relative;
  min-height:285px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:1.35rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:26px;
  color:#fff;
  text-decoration:none;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.14),transparent 26%),
    linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:0 22px 52px rgba(0,0,0,.23);
  backdrop-filter:blur(16px);
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
}

.exp100-create-card::after{
  content:"♡";
  position:absolute;
  right:-12px;
  bottom:-35px;
  font-size:8rem;
  color:rgba(255,255,255,.045);
  transform:rotate(-13deg);
}

.exp100-create-card:hover{
  transform:translateY(-8px);
  filter:brightness(1.08);
  box-shadow:
    0 30px 65px rgba(0,0,0,.28),
    0 0 30px rgba(255,91,183,.18);
}

.exp100-create-card>span{
  font-size:2.7rem;
  filter:drop-shadow(0 9px 15px rgba(0,0,0,.24));
}

.exp100-create-card small{
  margin-top:1rem;
  letter-spacing:.13em;
  font-size:.64rem;
  font-weight:900;
  opacity:.68;
}

.exp100-create-card h3{
  margin:.35rem 0 .55rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(1.55rem,2.2vw,2.25rem);
  line-height:1.05;
}

.exp100-create-card p{
  margin:0;
  line-height:1.55;
  opacity:.78;
}

.exp100-create-card strong{
  margin-top:auto;
  padding-top:1rem;
  color:#ffc5e4;
}

.exp100-create-card.exp100-featured{
  background:
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.25),transparent 24%),
    linear-gradient(145deg,rgba(163,74,190,.72),rgba(255,83,168,.72));
  box-shadow:
    0 24px 58px rgba(0,0,0,.26),
    0 0 34px rgba(255,78,172,.18);
}

#photoBooth{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  min-height:500px;
}

#photoBooth.exp100-module-ready{
  animation:exp100PhotoReady .8s ease both;
}

.exp100-health-notice{
  position:fixed;
  z-index:2147483000;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(92vw,620px);
  padding:.9rem 1rem;
  border:1px solid rgba(255,255,255,.4);
  border-radius:16px;
  color:#fff;
  background:rgba(110,18,77,.96);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  text-align:center;
}

.exp100-health-notice strong,
.exp100-health-notice span{
  display:block;
}

.exp100-health-notice span{
  margin-top:.2rem;
  font-size:.8rem;
  opacity:.8;
}

@keyframes exp100PhotoReady{
  from{opacity:.5;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@media(max-width:1120px){
  #svNav{
    gap:.55rem;
  }

  #svNav a{
    font-size:.7rem;
  }

  .exp100-create-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:820px){
  #svNav{
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
  }

  #svNav a{
    font-size:.9rem;
  }
}

@media(max-width:620px){
  .exp100-create-grid{
    grid-template-columns:1fr;
  }

  .exp100-create-card{
    min-height:235px;
  }
}

@media(prefers-reduced-motion:reduce){
  #photoBooth.exp100-module-ready{
    animation:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 11.0 — LIVING TIME
   ========================================================= */

.exp110-time-status{
  min-width:135px;
}

.exp110-living-time-panel{
  position:relative;
  overflow:hidden;
}

.exp110-living-time-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,125,194,.16),transparent 28%),
    radial-gradient(circle at 88% 78%,rgba(153,118,255,.14),transparent 30%);
}

.exp110-time-shell{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.exp110-time-shell article{
  min-height:220px;
  padding:1.25rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.12),transparent 27%),
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  box-shadow:0 22px 52px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
}

.exp110-time-shell small{
  display:block;
  letter-spacing:.12em;
  font-size:.64rem;
  font-weight:900;
  opacity:.66;
}

.exp110-clock-card strong{
  display:block;
  margin:.75rem 0 .2rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:1;
}

.exp110-clock-card span{
  opacity:.76;
}

.exp110-time-shell h3{
  margin:.65rem 0 .45rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(1.45rem,2.4vw,2.2rem);
}

.exp110-time-shell p{
  margin:0;
  line-height:1.6;
  opacity:.76;
}

.exp110-season-card>span{
  display:block;
  margin-top:.7rem;
  font-size:2.4rem;
}

.exp110-daily-card strong{
  display:block;
  margin:.75rem 0 .55rem;
  font-family:"Playfair Display",serif;
  font-size:1.8rem;
}

/* Time-driven world atmosphere */
html[data-sweetville-time="late-night"] .living-sky,
html[data-sweetville-time="night"] .living-sky{
  filter:hue-rotate(20deg) saturate(.9) brightness(.72);
}

html[data-sweetville-time="dawn"] .living-sky{
  filter:hue-rotate(-12deg) saturate(1.06) brightness(.96);
}

html[data-sweetville-time="morning"] .living-sky{
  filter:hue-rotate(-18deg) saturate(1.05) brightness(1.12);
}

html[data-sweetville-time="afternoon"] .living-sky{
  filter:saturate(1.08) brightness(1.08);
}

html[data-sweetville-time="golden-hour"] .living-sky{
  filter:hue-rotate(-28deg) saturate(1.2) brightness(1.03);
}

html[data-sweetville-time="evening"] .living-sky{
  filter:hue-rotate(8deg) saturate(1.12) brightness(.9);
}

html[data-sweetville-time="late-night"] .firefly,
html[data-sweetville-time="night"] .firefly,
html[data-sweetville-time="evening"] .firefly,
html[data-sweetville-time="golden-hour"] .firefly{
  opacity:1!important;
}

html[data-sweetville-time="morning"] .firefly,
html[data-sweetville-time="afternoon"] .firefly{
  opacity:.25!important;
}

html[data-sweetville-season="holiday-sweetville"] body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  background-image:
    radial-gradient(circle,#fff 0 1.5px,transparent 2px),
    radial-gradient(circle,#ffdff1 0 1px,transparent 1.5px);
  background-size:70px 70px,95px 95px;
  animation:exp110Snow 14s linear infinite;
  opacity:.32;
}

@keyframes exp110Snow{
  from{background-position:0 -100px,30px -140px}
  to{background-position:0 900px,30px 760px}
}

@media(max-width:980px){
  .exp110-time-shell{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .exp110-time-shell{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-sweetville-season="holiday-sweetville"] body::after{
    animation:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 12.0 — A DAY WITH JAHNTELLA
   ========================================================= */

.exp120-day-panel{
  position:relative;
  overflow:hidden;
}

.exp120-day-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 16%,rgba(255,119,190,.17),transparent 29%),
    radial-gradient(circle at 88% 82%,rgba(156,116,255,.15),transparent 32%);
}

.exp120-feature-shell,
.exp120-moment-gallery,
.exp120-gallery-heading,
.exp120-memory-status{
  position:relative;
}

.exp120-feature-card{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
}

.exp120-feature-image{
  position:relative;
  min-height:620px;
  overflow:hidden;
  background:#180719;
}

.exp120-feature-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .2s ease,transform .7s ease;
}

.exp120-feature-image img.changing{
  opacity:.25;
  transform:scale(1.025);
}

.exp120-time-badge{
  position:absolute;
  top:18px;
  left:18px;
  padding:.55rem .75rem;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  color:#fff;
  background:rgba(50,8,48,.72);
  backdrop-filter:blur(12px);
  font-size:.62rem;
  letter-spacing:.12em;
  font-weight:900;
}

.exp120-feature-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1.5rem,4vw,3.2rem);
}

.exp120-feature-copy>small{
  letter-spacing:.14em;
  font-size:.68rem;
  font-weight:900;
  opacity:.67;
}

.exp120-feature-copy h3{
  margin:.6rem 0 .75rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,4.5vw,4.8rem);
  line-height:.98;
}

.exp120-feature-copy p{
  margin:0;
  line-height:1.7;
  opacity:.8;
}

.exp120-feature-copy blockquote{
  margin:1.35rem 0;
  padding-left:1rem;
  border-left:3px solid rgba(255,126,197,.72);
  font-family:"Playfair Display",serif;
  font-size:1.25rem;
  line-height:1.45;
}

.exp120-feature-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

.exp120-gallery-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin:1.35rem 0 .8rem;
}

.exp120-gallery-heading small,
.exp120-gallery-heading strong{
  display:block;
}

.exp120-gallery-heading small{
  letter-spacing:.12em;
  font-size:.65rem;
  font-weight:900;
  opacity:.64;
}

.exp120-gallery-heading strong{
  margin-top:.2rem;
  font-family:"Playfair Display",serif;
  font-size:1.5rem;
}

.exp120-gallery-heading>span{
  font-size:.8rem;
  opacity:.7;
}

.exp120-moment-gallery{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.8rem;
}

.exp120-moment-card{
  position:relative;
  min-width:0;
  padding:0 0 .9rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  color:#fff;
  text-align:left;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  transition:transform .28s ease,box-shadow .28s ease,filter .28s ease;
}

.exp120-moment-card:hover,
.exp120-moment-card.active{
  transform:translateY(-6px);
  filter:brightness(1.08);
  box-shadow:0 20px 45px rgba(0,0,0,.28),0 0 24px rgba(255,81,174,.16);
}

.exp120-moment-card.active{
  border-color:rgba(255,143,207,.66);
}

.exp120-moment-card.kept::after{
  content:"KEPT ♡";
  position:absolute;
  top:10px;
  right:10px;
  padding:.3rem .48rem;
  border-radius:999px;
  color:#6a234e;
  background:#fff1f8;
  font-size:.54rem;
  letter-spacing:.08em;
  font-weight:900;
}

.exp120-moment-card img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.exp120-moment-card>span,
.exp120-moment-card>small,
.exp120-moment-card>strong{
  display:block;
  margin-left:.85rem;
  margin-right:.85rem;
}

.exp120-moment-card>span{
  margin-top:.75rem;
  font-size:1.3rem;
}

.exp120-moment-card>small{
  margin-top:.35rem;
  letter-spacing:.1em;
  font-size:.58rem;
  font-weight:900;
  opacity:.61;
}

.exp120-moment-card>strong{
  margin-top:.18rem;
  font-family:"Playfair Display",serif;
  line-height:1.12;
}

.exp120-memory-status{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-top:1rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}

.exp120-memory-status>span{
  letter-spacing:.1em;
  font-size:.65rem;
  font-weight:900;
  opacity:.63;
}

.exp120-memory-status>strong{
  font-size:1.5rem;
  font-family:"Playfair Display",serif;
}

.exp120-memory-status>p{
  margin:0 0 0 auto;
  font-size:.78rem;
  opacity:.7;
}

@media(max-width:1100px){
  .exp120-feature-card{
    grid-template-columns:1fr;
  }

  .exp120-feature-image{
    min-height:520px;
  }

  .exp120-moment-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .exp120-feature-image{
    min-height:440px;
  }

  .exp120-moment-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .exp120-gallery-heading,
  .exp120-memory-status{
    align-items:flex-start;
    flex-direction:column;
  }

  .exp120-memory-status>p{
    margin-left:0;
  }

  .exp120-feature-actions .sv-button{
    width:100%;
    justify-content:center;
  }
}

@media(max-width:480px){
  .exp120-moment-gallery{
    grid-template-columns:1fr;
  }

  .exp120-moment-card{
    display:grid;
    grid-template-columns:110px 1fr;
    grid-template-rows:auto auto auto;
    align-items:center;
    padding:0;
  }

  .exp120-moment-card img{
    grid-row:1/4;
    width:110px;
    height:135px;
    aspect-ratio:auto;
  }

  .exp120-moment-card>span,
  .exp120-moment-card>small,
  .exp120-moment-card>strong{
    margin-left:.8rem;
  }
}

/* =========================================================
   SWEETVILLE EXP 13/14 — BEHIND THE SCENES + FAN EXPERIENCE
   ========================================================= */

.exp1314-backstage-panel,
.exp1314-fan-panel{
  position:relative;
  overflow:hidden;
}

.exp1314-backstage-panel::before,
.exp1314-fan-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,110,189,.17),transparent 30%),
    radial-gradient(circle at 88% 82%,rgba(142,95,255,.14),transparent 32%);
}

.exp1314-backstage-grid,
.exp1314-pass-card,
.exp1314-return-card,
.exp1314-fan-grid{
  position:relative;
}

.exp1314-backstage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.exp1314-scene-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:0 25px 62px rgba(0,0,0,.27);
}

.exp1314-scene-image{
  position:relative;
  min-height:620px;
  overflow:hidden;
  background:#180719;
}

.exp1314-scene-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.exp1314-hotspot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:46px;
  height:46px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  font-size:1.2rem;
  background:rgba(72,9,58,.72);
  box-shadow:0 0 0 8px rgba(255,113,192,.15),0 0 28px rgba(255,113,192,.5);
  cursor:pointer;
  animation:exp1314Pulse 2.4s ease-in-out infinite;
}

.exp1314-hotspot.active{
  background:#fff0f8;
  color:#7a2457;
}

@keyframes exp1314Pulse{
  50%{transform:translate(-50%,-50%) scale(1.08)}
}

.exp1314-scene-copy{
  padding:1.2rem;
}

.exp1314-scene-copy>small,
.exp1314-fan-card>small,
.exp1314-return-card small{
  display:block;
  letter-spacing:.13em;
  font-size:.63rem;
  font-weight:900;
  opacity:.65;
}

.exp1314-scene-copy h3,
.exp1314-pass-card h3,
.exp1314-fan-card h3,
.exp1314-return-card h3{
  margin:.45rem 0 .55rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(1.6rem,3vw,2.5rem);
}

.exp1314-scene-copy p,
.exp1314-pass-card p,
.exp1314-fan-card p,
.exp1314-return-card p{
  margin:0;
  line-height:1.6;
  opacity:.77;
}

.exp1314-detail-box{
  margin-top:1rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}

.exp1314-detail-box strong,
.exp1314-detail-box span{
  display:block;
}

.exp1314-detail-box span{
  margin-top:.25rem;
  font-size:.82rem;
  opacity:.74;
}

.exp1314-pass-card{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:linear-gradient(120deg,rgba(255,95,180,.12),rgba(126,92,255,.09));
}

.exp1314-pass-card>strong{
  white-space:nowrap;
  font-size:.78rem;
  opacity:.72;
}

.exp1314-return-card{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  padding:1.15rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:rgba(255,255,255,.055);
}

.exp1314-return-card>span{
  font-size:2.2rem;
}

.exp1314-fan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.exp1314-fan-card{
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.1),transparent 25%),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:0 20px 48px rgba(0,0,0,.22);
}

.exp1314-card-icon{
  display:block;
  margin-bottom:.45rem;
  font-size:1.9rem;
}

.exp1314-fan-card textarea{
  width:100%;
  min-height:100px;
  margin:1rem 0 .7rem;
  padding:.9rem;
  resize:vertical;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  color:#fff;
  background:rgba(0,0,0,.18);
}

.exp1314-message-wall{
  display:grid;
  gap:.5rem;
  margin-top:.9rem;
}

.exp1314-message-wall p{
  margin:0;
  padding:.7rem .8rem;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  font-family:"Playfair Display",serif;
}

.exp1314-message-wall .empty{
  font-family:inherit;
  opacity:.55;
}

.exp1314-postcard{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:1rem 0;
  padding:1.25rem;
  border:7px solid #f8d9e8;
  border-radius:14px;
  color:#6d2754;
  text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.88),rgba(255,245,251,.94)),
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(180,90,140,.08) 25px 26px);
  box-shadow:0 20px 35px rgba(0,0,0,.22);
  transform:rotate(-1deg);
}

.exp1314-postcard span{
  font-family:"Sacramento",cursive;
  font-size:2rem;
}

.exp1314-postcard strong{
  margin-top:.6rem;
  font-family:"Playfair Display",serif;
  line-height:1.45;
}

.exp1314-surprise{
  display:grid;
  gap:.35rem;
  margin:1rem 0;
  padding:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}

.exp1314-surprise>span{
  font-size:2rem;
}

.exp1314-surprise p{
  margin:0;
}

.exp1314-gift-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.5rem;
  margin:1rem 0 .7rem;
}

.exp1314-gift-grid>div{
  display:grid;
  place-items:center;
  min-height:78px;
  padding:.5rem;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  filter:grayscale(1);
  opacity:.35;
  background:rgba(255,255,255,.04);
}

.exp1314-gift-grid>div.collected{
  filter:none;
  opacity:1;
  border-style:solid;
  border-color:rgba(255,138,205,.58);
  box-shadow:0 0 22px rgba(255,87,180,.14);
}

.exp1314-gift-grid small{
  font-size:.55rem;
}

.exp1314-gift-count{
  display:block;
  font-size:.8rem;
  opacity:.72;
}

@media(max-width:980px){
  .exp1314-backstage-grid,
  .exp1314-fan-grid{
    grid-template-columns:1fr;
  }

  .exp1314-pass-card{
    grid-template-columns:1fr;
    align-items:start;
  }

  .exp1314-scene-image{
    min-height:520px;
  }
}

@media(max-width:620px){
  .exp1314-scene-image{
    min-height:430px;
  }

  .exp1314-gift-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .exp1314-pass-card .sv-button,
  .exp1314-fan-card .sv-button{
    width:100%;
    justify-content:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp1314-hotspot{animation:none!important}
}

/* =========================================================
   SWEETVILLE EXP 15 — LIVING SWEETVILLE
   ========================================================= */

html.sv-menu-open,
body.sv-menu-open{
  overflow:hidden!important;
}

.sv-nav-close{
  display:none;
}

.exp150-living-panel{
  position:relative;
  overflow:hidden;
}

.exp150-living-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,112,191,.18),transparent 29%),
    radial-gradient(circle at 88% 82%,rgba(139,96,255,.15),transparent 33%);
}

.exp150-welcome-card,
.exp150-world-grid,
.exp150-today-card{
  position:relative;
}

.exp150-welcome-card{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.exp150-welcome-image{
  position:relative;
  min-height:680px;
  overflow:hidden;
  background:#180719;
}

.exp150-welcome-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  transition:transform 1s ease,filter 1s ease;
}

.exp150-welcome-card.entered .exp150-welcome-image img{
  transform:scale(1.04);
  filter:brightness(1.06);
}

.exp150-door-button{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:2;
  padding:.9rem 1.2rem;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  color:#fff;
  background:rgba(70,10,57,.76);
  backdrop-filter:blur(12px);
  box-shadow:0 0 32px rgba(255,111,193,.38);
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}

.exp150-door-glow{
  position:absolute;
  left:43%;
  top:40%;
  width:120px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,158,.34),transparent 70%);
  filter:blur(12px);
  pointer-events:none;
  animation:exp150DoorGlow 3s ease-in-out infinite;
}

@keyframes exp150DoorGlow{
  50%{opacity:.45;transform:scale(1.08)}
}

.exp150-welcome-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1.6rem,4vw,3.2rem);
}

.exp150-welcome-copy>small{
  letter-spacing:.14em;
  font-size:.66rem;
  font-weight:900;
  opacity:.66;
}

.exp150-welcome-copy h3{
  margin:.6rem 0 .7rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,4vw,4.6rem);
  line-height:1;
}

.exp150-welcome-copy p{
  margin:0;
  line-height:1.7;
  opacity:.79;
}

.exp150-evening-choices{
  display:grid;
  gap:.65rem;
  margin-top:1.2rem;
}

.exp150-evening-choices button,
.exp150-world-card button{
  padding:.8rem .9rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.055);
  cursor:pointer;
}

.exp150-world-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.9rem;
  margin-top:1rem;
}

.exp150-world-card{
  min-height:230px;
  padding:1.1rem;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  background:rgba(255,255,255,.05);
  box-shadow:0 18px 42px rgba(0,0,0,.2);
}

.exp150-world-card>span{
  font-size:1.9rem;
}

.exp150-world-card small{
  display:block;
  margin-top:.55rem;
  letter-spacing:.12em;
  font-size:.6rem;
  font-weight:900;
  opacity:.64;
}

.exp150-world-card h3{
  margin:.4rem 0 .45rem;
  font-family:"Playfair Display",serif;
  font-size:1.55rem;
}

.exp150-world-card p{
  margin:0 0 .8rem;
  line-height:1.55;
  opacity:.74;
}

.exp150-today-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  padding:1.15rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:linear-gradient(120deg,rgba(255,93,181,.12),rgba(129,91,255,.08));
}

.exp150-today-card small{
  letter-spacing:.12em;
  font-size:.62rem;
  font-weight:900;
  opacity:.63;
}

.exp150-today-card h3{
  margin:.35rem 0;
  font-family:"Playfair Display",serif;
}

.exp150-today-card p{
  margin:0;
  opacity:.72;
}

.exp150-today-card>strong{
  white-space:nowrap;
  padding:.5rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:.68rem;
  letter-spacing:.08em;
}

.exp150-world-layer{
  position:fixed;
  inset:0;
  z-index:12;
  pointer-events:none;
  overflow:hidden;
}

.exp150-petals span,
.exp150-fireflies span,
.exp150-balloons span{
  position:absolute;
  left:var(--x);
  top:-8vh;
  font-size:var(--size);
  animation:exp150Fall var(--duration) linear var(--delay) infinite;
}

.exp150-fireflies span{
  top:auto;
  bottom:10vh;
  color:#ffd987;
  text-shadow:0 0 12px #ffd987;
  animation:exp150Float var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes exp150Fall{
  to{transform:translateY(115vh) rotate(360deg)}
}

@keyframes exp150Float{
  50%{transform:translate(25px,-100px);opacity:.35}
}

.exp150-mochi{
  position:absolute;
  right:-120px;
  bottom:28px;
  font-size:72px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));
  transition:right 1.1s ease;
}

.exp150-mochi.show{
  right:22px;
  animation:exp150MochiBounce .8s ease 1s 3;
}

@keyframes exp150MochiBounce{
  50%{transform:translateY(-16px) rotate(-4deg)}
}

.exp120-running-card img{
  object-position:center 18%!important;
}

@media(max-width:900px){
  #svNav{
    position:fixed;
    inset:0;
    z-index:9999;
    padding:5rem 1.2rem 2rem;
    overflow:auto;
  }

  #svNav:not(.open){
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }

  #svNav.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }

  .sv-nav-close{
    display:grid;
    place-items:center;
    position:absolute;
    top:14px;
    right:14px;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.06);
    font-size:1.8rem;
    cursor:pointer;
  }
}

@media(max-width:980px){
  .exp150-welcome-card{
    grid-template-columns:1fr;
  }

  .exp150-welcome-image{
    min-height:560px;
  }

  .exp150-world-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .exp150-welcome-image{
    min-height:480px;
  }

  .exp150-world-grid{
    grid-template-columns:1fr;
  }

  .exp150-today-card{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  .exp150-door-glow,
  .exp150-petals span,
  .exp150-fireflies span,
  .exp150-balloons span,
  .exp150-mochi{
    animation:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 16/17/18 — MEGA EXPANSION
   ========================================================= */

.exp1618-panel{position:relative;overflow:hidden}
.exp1618-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 15%,rgba(255,96,185,.16),transparent 29%),radial-gradient(circle at 90% 85%,rgba(130,92,255,.14),transparent 32%)}
.exp1618-premiere-card,.exp1618-memory-book,.exp1618-cruise-card,.exp1618-summer-grid,.exp1618-festival-finale{position:relative}
.exp1618-premiere-card,.exp1618-cruise-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:0 26px 65px rgba(0,0,0,.27)}
.exp1618-premiere-image,.exp1618-cruise-image{position:relative;min-height:650px;overflow:hidden;background:#180719}
.exp1618-premiere-image img,.exp1618-cruise-image img{width:100%;height:100%;object-fit:cover}
.exp1618-premiere-image img{object-position:center 35%}
.exp1618-cruise-image img{object-position:center}
.exp1618-premiere-hotspot{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.72);border-radius:50%;font-size:1.15rem;background:rgba(68,8,56,.75);box-shadow:0 0 0 8px rgba(255,106,190,.14),0 0 26px rgba(255,106,190,.48);cursor:pointer;animation:exp1618Pulse 2.4s ease-in-out infinite}
.exp1618-premiere-hotspot.active{background:#fff0f8;color:#762052}
@keyframes exp1618Pulse{50%{transform:translate(-50%,-50%) scale(1.08)}}
.exp1618-premiere-copy,.exp1618-cruise-dashboard{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,4vw,3rem)}
.exp1618-premiere-copy>small,.exp1618-cruise-dashboard>small,.exp1618-summer-copy>small,.exp1618-festival-finale small,.exp1618-memory-heading small{letter-spacing:.13em;font-size:.64rem;font-weight:900;opacity:.65}
.exp1618-premiere-copy h3,.exp1618-cruise-dashboard h3,.exp1618-summer-copy h3,.exp1618-festival-finale h3,.exp1618-memory-heading h3{margin:.5rem 0 .65rem;font-family:"Playfair Display",serif;font-size:clamp(1.8rem,3.8vw,3.4rem)}
.exp1618-premiere-copy p,.exp1618-cruise-dashboard p,.exp1618-summer-copy p,.exp1618-festival-finale p{line-height:1.65;opacity:.78}
.exp1618-memory-book{margin-top:1rem;padding:1.2rem;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:rgba(255,255,255,.045)}
.exp1618-memory-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.exp1618-memory-heading h3{font-size:1.7rem;margin:.25rem 0 0}
.exp1618-memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.exp1618-memory-card{padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))}
.exp1618-memory-card span,.exp1618-memory-card small,.exp1618-memory-card strong{display:block}
.exp1618-memory-card span{font-size:1.7rem}
.exp1618-memory-card small{margin-top:.4rem;font-size:.55rem;letter-spacing:.09em;opacity:.6}
.exp1618-memory-card strong{margin:.28rem 0 .7rem;font-family:"Playfair Display",serif}
.exp1618-memory-card button{padding:.45rem .65rem;border:1px solid rgba(255,163,211,.28);border-radius:999px;color:#ffd8ec;background:rgba(255,255,255,.04);cursor:pointer}
.exp1618-empty-memory{grid-column:1/-1;margin:0;padding:1.2rem;text-align:center;opacity:.6}
.exp1618-cruise-badge{position:absolute;top:18px;left:18px;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(45,5,43,.72);backdrop-filter:blur(12px);font-size:.62rem;font-weight:900;letter-spacing:.1em}
.exp1618-driving-lights{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 0 42%,rgba(255,255,255,.18) 49%,transparent 56%);transform:translateX(-130%)}
.exp1618-cruise-card.driving .exp1618-driving-lights{animation:exp1618Drive 1.2s ease}
@keyframes exp1618Drive{to{transform:translateX(130%)}}
.exp1618-radio-buttons,.exp1618-destination-buttons,.exp1618-look-buttons{display:flex;flex-wrap:wrap;gap:.55rem;margin:.8rem 0}
.exp1618-radio-buttons button,.exp1618-destination-buttons button,.exp1618-look-buttons button{padding:.7rem .8rem;border:1px solid rgba(255,255,255,.13);border-radius:14px;color:#fff;background:rgba(255,255,255,.05);cursor:pointer}
.exp1618-radio-buttons button.active,.exp1618-destination-buttons button.active,.exp1618-look-buttons button.active{border-color:rgba(255,151,207,.68);background:linear-gradient(135deg,rgba(255,72,174,.35),rgba(139,74,255,.25));box-shadow:0 0 20px rgba(255,75,180,.16)}
.exp1618-summer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.exp1618-summer-card{overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:rgba(255,255,255,.045);box-shadow:0 22px 52px rgba(0,0,0,.23)}
.exp1618-summer-card>img,.exp1618-look-image img{display:block;width:100%;height:620px;object-fit:cover}
.exp1618-summer-card>img{object-position:center 30%}
.exp1618-look-image img{object-position:center 25%;transition:opacity .25s ease}
.exp1618-summer-copy{padding:1.15rem}
.exp1618-summer-copy>strong{display:block;margin-top:.65rem}
.exp1618-festival-finale{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding:1.2rem;border:1px solid rgba(255,255,255,.14);border-radius:21px;background:linear-gradient(120deg,rgba(255,82,180,.12),rgba(126,88,255,.09))}
.exp1618-festival-finale>span{font-size:2.4rem}
.exp1618-festival-finale>div{flex:1}
.exp1618-festival-finale h3{font-size:1.55rem;margin:.25rem 0}
.exp1618-festival-finale p{margin:0}

@media(max-width:1050px){
  .exp1618-premiere-card,.exp1618-cruise-card{grid-template-columns:1fr}
  .exp1618-premiere-image,.exp1618-cruise-image{min-height:560px}
  .exp1618-memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .exp1618-summer-grid{grid-template-columns:1fr}
  .exp1618-summer-card>img,.exp1618-look-image img{height:520px}
  .exp1618-festival-finale,.exp1618-memory-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .exp1618-premiere-image,.exp1618-cruise-image{min-height:450px}
  .exp1618-memory-grid{grid-template-columns:1fr}
  .exp1618-summer-card>img,.exp1618-look-image img{height:460px}
}
@media(prefers-reduced-motion:reduce){
  .exp1618-premiere-hotspot,.exp1618-driving-lights{animation:none!important}
}

/* =========================================================
   SWEETVILLE EXP 18.1 — STABILITY & PERFORMANCE HOTFIX
   ========================================================= */

@media(max-width:900px){
  .sv-menu-button{
    display:inline-grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    cursor:pointer!important;
    position:relative!important;
    z-index:10002!important;
  }

  #svNav{
    position:fixed!important;
    inset:0!important;
    z-index:10001!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:.55rem!important;
    padding:5.2rem 1rem 2rem!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-12px)!important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease!important;
    background:linear-gradient(180deg,rgba(20,0,22,.99),rgba(5,0,8,.99))!important;
  }

  #svNav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  #svNav .sv-nav-close{
    display:grid!important;
    place-items:center!important;
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    width:44px!important;
    height:44px!important;
    border-radius:50%!important;
    z-index:10003!important;
    cursor:pointer!important;
  }

  body.sv-menu-open{overflow:hidden!important}
}

.sv-offscreen .ambient-life,
.sv-offscreen .exp32-world-life,
.sv-offscreen .sv-living-fireworks{
  animation-play-state:paused!important;
}

.sv-mobile-lite .cloud,
.sv-mobile-lite .shooting-star,
.sv-mobile-lite .map-butterfly,
.sv-mobile-lite .exp32-birds{
  display:none!important;
}

.sv-mobile-lite .floating-world span,
.sv-mobile-lite .ambient-life span{
  animation-duration:18s!important;
}

.exp1618-cruise-card.music-playing .exp1618-driving-lights{
  animation:exp1618Drive 1.2s ease infinite!important;
}

.exp1618-radio-buttons button{
  min-width:min(100%,260px);
  justify-content:center;
}

@media(prefers-reduced-motion:reduce){
  .exp1618-cruise-card.music-playing .exp1618-driving-lights{
    animation:none!important;
  }
}

/* EXP 18.1.1 — authoritative mobile menu rules */
@media(max-width:900px){
  html.sv-menu-open,
  body.sv-menu-open{
    overflow:hidden!important;
    touch-action:none!important;
  }

  .sv-header{
    position:sticky!important;
    top:0!important;
    z-index:20000!important;
  }

  #menuButton.sv-menu-button,
  .sv-menu-button#menuButton{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:relative!important;
    z-index:20003!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    padding:0!important;
  }

  #svNav{
    display:flex!important;
    position:fixed!important;
    inset:0!important;
    z-index:20001!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    padding:5.25rem 1rem 2rem!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    background:#100011!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-10px)!important;
  }

  #svNav.open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  #svNav a{
    display:flex!important;
    width:100%!important;
    min-height:48px!important;
    flex:0 0 auto!important;
  }

  #svNavClose{
    display:grid!important;
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    z-index:20004!important;
    width:46px!important;
    height:46px!important;
    pointer-events:auto!important;
  }
}

.sv-mobile-critical-lite .cloud,
.sv-mobile-critical-lite .map-butterfly,
.sv-mobile-critical-lite .exp150-world-layer,
.sv-mobile-critical-lite .sv-cinema-sparkles{
  display:none!important;
}

.sv-panel{
  contain:layout paint style;
}

@media(max-width:760px){
  .sv-panel{
    backdrop-filter:none!important;
  }
}

/* =========================================================
   SWEETVILLE EXP 18.2 — COVER, DRIVE DESTINATIONS & PHOTOS
   ========================================================= */

.cinematic-bg{
  background-image:url("assets/exp18-2/sweetville-home-cover.webp?v=18.2")!important;
  background-position:center center!important;
}

#exp1618CruiseImage{
  transition:opacity .25s ease,transform .35s ease;
}
#exp1618CruiseImage.changing{
  opacity:.28;
  transform:scale(1.015);
}

.exp182-city-return{
  border-color:rgba(255,193,224,.55)!important;
  background:linear-gradient(135deg,rgba(255,79,178,.22),rgba(116,78,255,.16))!important;
}

.exp182-kiss-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}
.exp182-kiss-grid figure{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,154,207,.32);
  border-radius:24px;
  background:rgba(255,255,255,.045);
  box-shadow:0 18px 45px rgba(0,0,0,.24);
}
.exp182-kiss-grid img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}
.exp182-kiss-grid figure:hover img{
  transform:scale(1.025);
  filter:brightness(1.05);
}
.exp182-kiss-grid figcaption{
  padding:.8rem 1rem;
  font-family:"Playfair Display",serif;
  text-align:center;
  color:#ffd4ea;
}

.exp182-backstage-extra{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:1rem 0;
}
.exp182-backstage-card{
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);
  overflow:hidden;
  border:1px solid rgba(255,161,209,.25);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
}
.exp182-backstage-card img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
}
.exp182-backstage-card>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1.4rem;
}
.exp182-backstage-card small{
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.14em;
  color:#ff96cb;
}
.exp182-backstage-card h3{
  margin:.45rem 0 .6rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(1.6rem,3vw,2.5rem);
}
.exp182-backstage-card p{
  margin:0;
  line-height:1.7;
  color:#efd9e7;
}

@media(max-width:980px){
  .exp182-kiss-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exp182-backstage-card{grid-template-columns:1fr}
  .exp182-backstage-card img{height:520px;min-height:0}
}

@media(max-width:620px){
  .cinematic-bg{
    background-position:60% center!important;
  }
  .exp182-kiss-grid{grid-template-columns:1fr}
  .exp182-kiss-grid img{aspect-ratio:4/5}
  .exp182-backstage-extra{grid-template-columns:1fr}
  .exp182-backstage-card img{height:480px}
}

/* =========================================================
   SWEETVILLE EXP 18.3 — DRIVING FRAMING & WALK-IN CLOSET
   ========================================================= */

#exp1618CruiseImage{
  object-fit:contain!important;
  object-position:center center;
  background:#160014;
}

.exp1618-cruise-image{
  background:
    radial-gradient(circle at 50% 30%,rgba(255,83,180,.14),transparent 48%),
    #160014!important;
}

.exp182-backstage-extra{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.exp183-closet-card img{
  object-position:center 24%;
}

@media(max-width:1180px){
  .exp182-backstage-extra{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  #exp1618CruiseImage{
    object-fit:contain!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }

  .exp1618-cruise-image{
    min-height:0!important;
  }
}