/* ==========================================================
   LolliArt Custom Fonts
========================================================== */

@font-face{

    font-family:"Adelia";

    src:url("assets/fonts/Adelia.otf") format("opentype");

    font-weight:400;

    font-style:normal;

    font-display:swap;

}

/* ==========================================
   LolliArt Memory Maker™
   Experience Design Sprint 1.0
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Poppins","Segoe UI",sans-serif;
    background:var(--la-cream);
    color:var(--la-dark);
    overflow-x:hidden;
}

/* ---------- SCENES ---------- */

.scene{
    display:none;
    min-height:100vh;
    padding:40px 24px;
    position:relative;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.scene-active{
    display:flex;
}

/* ---------- BACKGROUND ---------- */

.soft-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(255,255,255,.15),
            rgba(255,249,242,.55)
        ),
        url("../assets/backgrounds/background1.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:-2;
}

/* ---------- LOGO ---------- */

.logo-area{
    text-align:center;
    margin-bottom:25px;
}

.main-logo{
    width:260px;
    max-width:80%;
    height:auto;
    display:block;
    margin:0 auto;
    animation:logoPop .9s ease-out both;
}

.subtitle{
    margin-top:6px;
    color:var(--la-muted);
    letter-spacing:5px;
    font-size:.8rem;
}

/* ---------- HERO PRODUCT ---------- */

.hero-product{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:min(78vw, 360px);
    height:min(78vw, 360px);
    margin:20px auto 28px;
}

.hero-lollipop{
    width:340px;
    max-width:80vw;
    position:relative;
    z-index:5;
    animation:
        heroFloat 5s ease-in-out infinite,
        heroAppear 1s ease;
    filter:drop-shadow(0 35px 45px rgba(0,0,0,.18));
}

.magic-ring{
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    border:2px solid rgba(255,170,90,.25);
    animation:rotateRing 18s linear infinite;
}
.magic-glow{

    position:absolute;

    width:520px;

    max-width:none;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    pointer-events:none;

    z-index:1;

    opacity:.95;

    animation:glowFloat 8s ease-in-out infinite;

}


/* ---------- OLD CSS LOLLIPOP FALLBACK ---------- */

.lollipop-head{
    width:210px;
    height:210px;
    border-radius:50%;
    background:var(--la-gradient-primary);
    border:8px solid var(--la-white);
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:var(--la-shadow-soft);
    animation:float 4s ease-in-out infinite;
}

.lollipop-art{
    color:var(--la-white);
    font-size:2rem;
    font-weight:700;
}

.bow{
    text-align:center;
    font-size:2rem;
    margin-top:10px;
}

.stick{
    width:8px;
    height:180px;
    background:var(--la-white);
    margin:0 auto;
    border-radius:50px;
}

/* ---------- COPY ---------- */

.welcome-copy{
    max-width:340px;
    text-align:center;
}

.welcome-copy h1{
    font-size:2.3rem;
    line-height:1.15;
    margin-bottom:20px;
    color:var(--la-dark);
}

.welcome-copy span{
    color:var(--la-orange);
}

.welcome-copy p{
    color:var(--la-muted);
    font-size:1rem;
    line-height:1.5;
    margin-bottom:35px;
}

/* ---------- BUTTON ---------- */

.primary-btn{
    width:100%;
    max-width:340px;
    border:none;
    border-radius:100px;
    padding:18px;
    font-size:1.2rem;
    font-weight:700;
    color:var(--la-white);
    cursor:pointer;
    background:var(--la-gradient-primary);
    box-shadow:var(--la-shadow-soft);
    transition:.25s;
}

.primary-btn:hover{
    transform:translateY(-2px);
}

.link-btn{
    background:none;
    border:none;
    margin-top:18px;
    color:var(--la-orange);
    font-size:1rem;
    cursor:pointer;
    font-weight:600;
}

/* ---------- FOOTER ---------- */

.made{
    margin-top:40px;
    color:var(--la-muted);
    font-size:.95rem;
}

/* =======================================
   SCENE 02
======================================= */

.choice-header{
    text-align:center;
    margin-bottom:35px;
}

.choice-header h2{
    font-size:2rem;
    margin-bottom:10px;
    color:var(--la-dark);
}

.choice-header p{
    color:var(--la-muted);
}

.choice-cards{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
    max-width:420px;
}

.choice-card{
    position:relative;
    border:none;
    border-radius:26px;
    background:var(--la-white);
    padding:26px;
    text-align:left;
    cursor:pointer;
    transition:.25s;
    box-shadow:var(--la-shadow-soft);
}

.choice-card:hover{
    transform:translateY(-4px);
}

.choice-card .icon{
    font-size:2.5rem;
    margin-bottom:10px;
}

.choice-card h3{
    margin-bottom:8px;
    font-size:1.3rem;
    color:var(--la-dark);
}

.choice-card p{
    color:var(--la-muted);
    line-height:1.5;
}

.featured{
    border:3px solid var(--la-orange);
}

.badge{
    position:absolute;
    right:18px;
    top:18px;
    background:var(--la-orange);
    color:var(--la-white);
    border-radius:100px;
    padding:6px 12px;
    font-size:.8rem;
    font-weight:700;
}

.selected-message{
    margin-top:35px;
    text-align:center;
    font-weight:600;
    color:var(--la-orange);
}

/* ---------- BACK ---------- */

.experience-back{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin:18px auto 28px;

    border:none;
    background:none;

    color:var(--la-orange);

    font-size:1rem;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.experience-back:hover{

    transform:translateX(-4px);

}

/* ---------- ANIMATIONS ---------- */

@keyframes logoPop{
    0%{
        opacity:0;
        transform:translateY(-10px) scale(.92);
    }

    70%{
        opacity:1;
        transform:translateY(0) scale(1.03);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes heroFloat{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes heroAppear{
    from{
        opacity:0;
        transform:scale(.85);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes rotateRing{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes float{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }
}
@keyframes glowFloat{

    0%{
        transform:translate(-50%,-50%) scale(.96);
        opacity:.80;
    }

    50%{
        transform:translate(-50%,-50%) scale(1.04);
        opacity:1;
    }

    100%{
        transform:translate(-50%,-50%) scale(.96);
        opacity:.80;
    }

}
/* ---------- LOLLIART MAGIC EFFECTS ---------- */

.sparkle-field{
    position:absolute;
    inset:-35px;
    z-index:2;
    pointer-events:none;
}

.sparkle{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,214,120,.95);
    box-shadow:
        0 0 8px rgba(255,214,120,.9),
        0 0 18px rgba(255,170,70,.55);
    animation:sparkleFloat var(--duration) ease-in-out infinite;
    opacity:.75;
}

.sparkle.star{
    width:10px;
    height:10px;
    background:transparent;
}

.sparkle.star::before,
.sparkle.star::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:rgba(255,232,160,.95);
    border-radius:20px;
    transform:translate(-50%,-50%);
    box-shadow:0 0 12px rgba(255,214,120,.9);
}

.sparkle.star::before{
    width:100%;
    height:2px;
}

.sparkle.star::after{
    width:2px;
    height:100%;
}

.magic-orbit{
    position:absolute;
    width:min(82vw, 340px);
    height:min(82vw, 340px);
    border-radius:50%;
    z-index:1;
    pointer-events:none;
    animation:orbitRotate 14s linear infinite;
}

.magic-orbit span{
    position:absolute;
    left:50%;
    top:0;
    width:120px;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,220,120,.95), transparent);
    transform:translateX(-50%);
    filter:drop-shadow(0 0 8px rgba(255,190,80,.9));
}

@keyframes sparkleFloat{
    0%{
        transform:translateY(0) scale(.75);
        opacity:.15;
    }

    35%{
        opacity:.95;
    }

    50%{
        transform:translateY(-18px) scale(1.15);
    }

    100%{
        transform:translateY(0) scale(.75);
        opacity:.15;
    }
}

@keyframes orbitRotate{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}
@media (max-width:480px){

    .scene{
        padding:28px 18px;
    }

    .main-logo{
        width:210px;
    }

    .subtitle{
        font-size:.68rem;
        letter-spacing:4px;
    }

    /* ---------- HERO ---------- */

    .hero-product{
        width:320px;
        height:320px;
        margin:10px auto 20px;
    }

    .hero-lollipop{
        width:310px;
        max-width:90vw;
    }

    .magic-glow{
        width:420px;
    }

    .magic-ring{
        width:300px;
        height:300px;
    }

    /* ---------- COPY ---------- */

    .welcome-copy h1{
        font-size:2rem;
        line-height:1.08;
        margin-bottom:14px;
    }

    .welcome-copy p{
        font-size:.95rem;
        margin-bottom:24px;
    }

    /* ---------- BUTTON ---------- */

    .primary-btn{
        max-width:320px;
        padding:16px;
        font-size:1.08rem;
    }

    .made{
        margin-top:28px;
        font-size:.85rem;
    }

}
@media (max-width:480px){

    .scene{
        min-height:100svh;
        padding:18px 18px 16px;
        justify-content:flex-start;
        overflow:hidden;
    }

    .logo-area{
        margin-bottom:10px;
    }

    .main-logo{
        width:190px;
    }

    .subtitle{
        font-size:.62rem;
        letter-spacing:4px;
        margin-top:4px;
    }

    .hero-product{
        width:300px;
        height:300px;
        margin:6px auto 10px;
    }

    .hero-lollipop{
        width:285px;
        max-width:88vw;
    }

    .sparkle-field{
        inset:-20px;
    }

    .welcome-copy{
        max-width:340px;
    }

    .welcome-copy h1{
        font-size:1.9rem;
        line-height:1.05;
        margin-bottom:10px;
    }

    .welcome-copy p{
        font-size:.92rem;
        line-height:1.35;
        margin-bottom:16px;
    }

    .primary-btn{
        max-width:330px;
        padding:15px 18px;
        font-size:1.05rem;
    }

    .link-btn{
        margin-top:10px;
        font-size:.92rem;
    }

    .made{
        margin-top:12px;
        font-size:.78rem;
    }
}
.hero-image-window{
    position:absolute;
    width:155px;
    height:155px;
    border-radius:50%;
    overflow:hidden;

    left:50%;
    top:31%;
    transform:translate(-50%,-50%);

    z-index:4;
}

.hero-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.05);
    transition:opacity 1.8s ease, transform 6s ease;
}

.hero-art.active{
    opacity:1;
    transform:scale(1);
}

.hero-lollipop{
    z-index:5;
}
/* ---------- HERO ENGINE v2.0 FIX ---------- */

.hero-product{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image-window{
    position:absolute;
    width:155px;
    height:155px;
    border-radius:50%;
    overflow:hidden;
    z-index:4;

    left:50%;
    top:142px;
    transform:translate(-50%, -50%);
}

.hero-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.08);
    transition:opacity 1.8s ease, transform 6s ease;
}

.hero-art.active{
    opacity:1;
    transform:scale(1);
}

.hero-lollipop{
    position:relative;
    z-index:5;
}

/* ---------- MOBILE HERO ENGINE FIX ---------- */

@media (max-width:480px){

    .hero-product{
        width:320px;
        height:320px;
        margin:8px auto 12px;
    }

    .hero-lollipop{
        width:310px;
        max-width:90vw;
    }

    .hero-image-window{
        width:142px;
        height:142px;
        left:50%;
        top:132px;
        transform:translate(-50%, -50%);
    }

}
/* ---------- HERO ENGINE v2.0 ALIGNMENT FIX ---------- */

.hero-product{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-lollipop-wrap{
    position:relative;
    width:340px;
    height:520px;
    z-index:5;
    animation:
        heroFloat 5s ease-in-out infinite,
        heroAppear 1s ease;
}

.hero-lollipop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:5;
    filter:drop-shadow(0 35px 45px rgba(0,0,0,.18));
    animation:none;
}

.hero-image-window{
    position:absolute;
    width:155px;
    height:155px;
    border-radius:50%;
    overflow:hidden;
    z-index:4;
    left:50%;
    top:26.5%;
    transform:translate(-50%, -50%);
}

.hero-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.08);
    transition:opacity 1.8s ease, transform 6s ease;
}

.hero-art.active{
    opacity:1;
    transform:scale(1);
}

@media (max-width:480px){

    .hero-product{
        width:320px;
        height:320px;
        margin:8px auto 12px;
    }

    .hero-lollipop-wrap{
        width:310px;
        height:477px;
    }

    .hero-image-window{
        width:142px;
        height:142px;
        top:26.5%;
    }

}
/* ---------- FINAL HERO IMAGE POSITION FIX ---------- */

.hero-lollipop-wrap .hero-image-window{
    width:155px;
    height:155px;
    left:50%;
    top:142px;
    transform:translate(-50%, -50%);
}

@media (max-width:480px){

    .hero-lollipop-wrap .hero-image-window{
        width:142px;
        height:142px;
        left:50%;
        top:132px;
        transform:translate(-50%, -50%);
    }

}
/* ---------- FINAL HERO IMAGE POSITION FIX v2 ---------- */

.hero-product .hero-image-window{
    position:absolute !important;
    width:155px !important;
    height:155px !important;
    left:50% !important;
    top:185px !important;
    transform:translate(-50%, -50%) !important;
    border-radius:50% !important;
    overflow:hidden !important;
    z-index:4 !important;
}

@media (max-width:480px){

    .hero-product .hero-image-window{
        width:142px !important;
        height:142px !important;
        left:50% !important;
        top:165px !important;
        transform:translate(-50%, -50%) !important;
    }

}
/* ---------- FINAL HERO IMAGE POSITION FIX v3 ---------- */

.hero-product .hero-image-window{

    position:absolute !important;

    width:173px !important;
    height:173px !important;

    left:52% !important;
    top:189px !important;

    transform:translate(-50%, -50%) !important;

    border-radius:50% !important;
    overflow:hidden !important;

    z-index:4 !important;
}

/* ---------- Hero Artwork ---------- */

.hero-art{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    opacity:0;

    transform:scale(1.08);
    transition:
        opacity 1.8s ease,
        transform 7s ease;

    will-change:opacity, transform;
}

.hero-art.active{
    opacity:1;
    transform:scale(1.18);
}

/* ---------- Mobile ---------- */

@media (max-width:480px){

    .hero-product .hero-image-window{

        width:165px !important;
        height:165px !important;

        left:50% !important;
        top:175px !important;

        transform:translate(-50%, -50%) !important;

    }

}
/* ==========================================================
   LolliArt Experience Screen v1.0
========================================================== */

.experience-screen{

    position:relative;
    min-height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding:36px 22px 40px;

    overflow:hidden;

}

.experience-bg-sparkles{

    position:absolute;
    inset:0;

    pointer-events:none;
    opacity:.35;

}

.experience-header{

    text-align:center;
    margin-bottom:34px;

}

.mini-lollipop{

    font-size:54px;
    margin-bottom:12px;

    animation:floatHero 5s ease-in-out infinite;

}

.experience-header h2{

    font-size:42px;
    line-height:1.05;
    font-weight:800;

    color:#222;

}

.experience-header span{

    background:linear-gradient(90deg,#ff8a00,#ff4f7d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.experience-header p{

    margin-top:14px;

    color:#666;

    font-size:17px;

}

.experience-list{

    width:100%;
    max-width:520px;

    display:flex;
    flex-direction:column;
    gap:22px;

}

.experience-item{

    position:relative;

    display:flex;
    align-items:center;

    gap:20px;

    padding:22px;

    border:none;

    border-radius:28px;

    cursor:pointer;

    background:rgba(255,255,255,.30);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

        0 10px 35px rgba(0,0,0,.08),

        inset 0 1px 0 rgba(255,255,255,.55);

    transition:
        transform .35s,
        box-shadow .35s;

}

.experience-item:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 45px rgba(255,140,0,.18);

}

.experience-icon{

    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;

    background:linear-gradient(135deg,#ff9f2d,#ff5b83);

    color:white;

    flex-shrink:0;

}

.experience-text{

    flex:1;
    text-align:left;

}

.experience-text h3{

    font-size:24px;
    margin-bottom:6px;

    color:#222;

}

.experience-text p{

    color:#666;
    line-height:1.45;

}

.experience-arrow{

    font-size:30px;
    color:#ff7a3c;

    transition:transform .35s;

}

.experience-item:hover .experience-arrow{

    transform:translateX(6px);

}

.experience-featured{

    border:2px solid rgba(255,170,40,.55);

    box-shadow:

        0 0 40px rgba(255,180,40,.18),

        0 12px 40px rgba(0,0,0,.10);

}

.premium-tag{

    position:absolute;

    top:-10px;
    right:18px;

    padding:7px 14px;

    border-radius:30px;

    font-size:12px;
    font-weight:700;

    color:white;

    background:linear-gradient(90deg,#ff9800,#ff4d6d);

    box-shadow:0 6px 18px rgba(255,120,40,.35);

}

@media (max-width:480px){

    .experience-header h2{

        font-size:34px;

    }

    .experience-icon{

        width:60px;
        height:60px;

        font-size:28px;

    }

    .experience-item{

        padding:18px;

        border-radius:22px;

    }

    .experience-text h3{

        font-size:21px;

    }

    .experience-text p{

        font-size:14px;

    }

}
/* ==========================================================
   LolliArt Hero Transition v3.0
========================================================== */

.welcome-scene.hero-leaving .hero-lollipop-wrap{
    transform:scale(1.08);
    opacity:.15;
    transition:all .65s ease;
}

.welcome-scene.hero-leaving .welcome-copy,
.welcome-scene.hero-leaving .primary-btn,
.welcome-scene.hero-leaving .link-btn,
.welcome-scene.hero-leaving .made{
    opacity:0;
    transform:translateY(20px);
    transition:all .45s ease;
}

.welcome-scene.hero-leaving .main-logo,
.welcome-scene.hero-leaving .subtitle{
    opacity:.35;
    transform:translateY(-8px);
    transition:all .45s ease;
}

.choice-scene.scene-active .experience-header{
    animation:experienceIntro .65s ease both;
}

.choice-scene.scene-active .experience-item{
    animation:cardIntro .7s ease both;
}

.choice-scene.scene-active .experience-item:nth-child(1){
    animation-delay:.08s;
}

.choice-scene.scene-active .experience-item:nth-child(2){
    animation-delay:.18s;
}

.choice-scene.scene-active .experience-item:nth-child(3){
    animation-delay:.28s;
}

@keyframes experienceIntro{
    from{
        opacity:0;
        transform:translateY(25px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes cardIntro{
    from{
        opacity:0;
        transform:translateY(35px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
/* ---------- FINAL BACKGROUND FIX ---------- */

.welcome-scene .soft-bg,
.choice-scene .soft-bg{

    position:absolute !important;
    inset:0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,248,240,.42)
        ),
        url("../assets/backgrounds/background1.png?v=2");

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

    z-index:-2 !important;
}
/* ==========================================================
   LolliArt Hero Engine v2.1 - Animated Background
========================================================== */

.hero-background{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:-3;
}

.hero-bg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;
    transform:scale(1.08);

    transition:
        opacity 2.8s ease,
        transform 18s ease;
}

.hero-bg.active{
    opacity:1;
    transform:scale(1);
}

/* soft overlay only, no background image here */
.welcome-scene .soft-bg{
    position:absolute !important;
    inset:0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,248,240,.42)
        ) !important;

    z-index:-2 !important;
}
/* ==========================================================
   LolliArt Experience Screen v1.1
========================================================== */

.choice-scene .soft-bg{
    position:absolute !important;
    inset:0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,248,240,.48)
        ) !important;

    z-index:-2 !important;
}

.experience-screen{
    min-height:100svh;
}

.experience-list{
    position:relative;
    z-index:2;
}

.experience-item{
    overflow:hidden;
}

.experience-item::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.16)
        );

    opacity:.7;
    pointer-events:none;
}

.experience-item > *{
    position:relative;
    z-index:2;
}

.experience-featured::after{
    content:"";
    position:absolute;
    inset:-2px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,154,40,.45),
            rgba(255,78,124,.32),
            rgba(255,255,255,.15)
        );

    z-index:1;
    opacity:.45;
    pointer-events:none;
}

@media (max-width:480px){

    .experience-screen{
        padding:22px 18px 24px;
        justify-content:flex-start;
    }

    .mini-lollipop{
        font-size:42px;
        margin-bottom:8px;
    }

    .experience-header{
        margin-bottom:22px;
    }

    .experience-header h2{
        font-size:31px;
        line-height:1.02;
    }

    .experience-header p{
        margin-top:10px;
        font-size:14px;
    }

    .experience-list{
        gap:14px;
    }

    .experience-item{
        min-height:104px;
        padding:16px 15px;
        gap:14px;
        border-radius:24px;
    }

    .experience-icon{
        width:54px;
        height:54px;
        font-size:25px;
    }

    .experience-text h3{
        font-size:19px;
        margin-bottom:4px;
    }

    .experience-text p{
        font-size:13px;
        line-height:1.34;
    }

    .experience-arrow{
        font-size:24px;
    }

    .premium-tag{
        top:-8px;
        right:14px;
        font-size:11px;
        padding:6px 12px;
    }
}
/* ==========================================================
   LolliArt Gold Navigation Button
========================================================== */

.gold-back-btn{

    position:relative;

    width:54px;
    height:54px;

    margin:0 auto 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    cursor:pointer;

    color:#ffffff;

    font-size:24px;
    font-weight:700;

    background:
        radial-gradient(circle at 30% 30%,
            #ffe7a8 0%,
            #ffca56 22%,
            #ff9d1f 55%,
            #ff7d00 100%);

    box-shadow:

        0 0 8px rgba(255,180,50,.55),

        0 0 18px rgba(255,170,0,.45),

        inset 0 2px 4px rgba(255,255,255,.65),

        inset 0 -3px 6px rgba(120,55,0,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.gold-back-btn span{

    position:relative;
    z-index:2;

}

.gold-back-btn::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(255,220,120,.55),
            transparent 72%);

    opacity:.65;

    filter:blur(8px);

}

.gold-back-btn:hover{

    transform:scale(1.08);

    box-shadow:

        0 0 12px rgba(255,200,80,.8),

        0 0 28px rgba(255,170,0,.55),

        inset 0 2px 4px rgba(255,255,255,.75);

}

.gold-back-btn:active{

    transform:scale(.96);

}

@media (max-width:480px){

    .gold-back-btn{

        width:48px;
        height:48px;

        margin:0 auto 18px;

        font-size:22px;

    }

}
/* ---------- Gold Back Button Living Motion ---------- */

.gold-back-btn{
    animation:goldButtonFloat 6s ease-in-out infinite;
}

.gold-back-btn::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:1px solid rgba(255,210,120,.45);
    opacity:.55;
    animation:goldButtonPulse 3.8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes goldButtonFloat{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes goldButtonPulse{
    0%{
        transform:scale(.85);
        opacity:.15;
    }

    50%{
        transform:scale(1.12);
        opacity:.55;
    }

    100%{
        transform:scale(.85);
        opacity:.15;
    }
}
/* ==========================================================
   LolliArt Experience Engine v2.0
========================================================== */

/* ---------- Card ---------- */

.experience-item{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.55);

    box-shadow:

        0 14px 40px rgba(0,0,0,.10),

        inset 0 1px 0 rgba(255,255,255,.65);

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        border-color .30s ease;

}

/* ---------- Light Reflection ---------- */

.experience-item::before{

    content:"";

    position:absolute;

    left:-45%;
    top:-30%;

    width:70%;
    height:180%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.42),

            transparent

        );

    transform:rotate(18deg);

    pointer-events:none;

}

/* ---------- Hover ---------- */

.experience-item:hover{

    transform:translateY(-8px);

    border-color:rgba(255,170,40,.45);

    box-shadow:

        0 22px 48px rgba(0,0,0,.18),

        0 0 28px rgba(255,180,40,.18);

}

.experience-item:hover::before{

    animation:cardShine 1.1s ease;

}

/* ---------- Icon ---------- */

.experience-icon{

    animation:iconFloat 5s ease-in-out infinite;

}

/* ---------- Arrow ---------- */

.experience-arrow{

    transition:

        transform .25s ease,

        color .25s ease;

}

.experience-item:hover .experience-arrow{

    transform:translateX(6px);

    color:var(--la-orange);

}

/* ---------- Appear Animation ---------- */

.experience-item{

    opacity:0;

    transform:translateY(24px);

    animation:cardAppear .7s ease forwards;

}

.experience-item:nth-child(1){

    animation-delay:.10s;

}

.experience-item:nth-child(2){

    animation-delay:.25s;

}

.experience-item:nth-child(3){

    animation-delay:.40s;

}

/* ---------- Animations ---------- */

@keyframes cardAppear{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes iconFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes cardShine{

    from{

        transform:translateX(-120%) rotate(18deg);

    }

    to{

        transform:translateX(240%) rotate(18deg);

    }

}
/* ---------- Experience Top Hero ---------- */

.experience-top-hero{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:12px;
}

.experience-top-hero img{
    width:120px;
    height:auto;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.16));
    animation:heroFloat 5s ease-in-out infinite;
}

@media (max-width:480px){

    .experience-top-hero img{
        width:96px;
    }

}
/* ---------- AI Tags ---------- */

.ai-tags{

    display:flex;
    gap:10px;

    margin-top:14px;

    flex-wrap:wrap;

}

.ai-tag{

    padding:6px 14px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #ff9b28,
        #ff5f7d
    );

    color:#fff;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.3px;

}

.price-tag{

    padding:6px 14px;

    border-radius:999px;

    border:2px solid var(--la-orange);

    color:var(--la-orange);

    background:rgba(255,255,255,.92);

    font-size:.72rem;

    font-weight:700;

}
/* ==========================================================
   FINAL SCENE VISIBILITY FIX
========================================================== */

.scene{
    display:none !important;
}

.scene.scene-active{
    display:flex !important;
}
.experience-logo-area{
    margin-bottom:18px;
}

.experience-logo-area .main-logo{
    width:230px;
}

@media (max-width:480px){
    .experience-logo-area .main-logo{
        width:190px;
    }
}
/* ==========================================================
   Router Error
========================================================== */

.router-error{

    min-height:100svh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-family:Poppins,sans-serif;

    color:#555;

}

.router-error h2{

    color:var(--la-orange);

    margin-bottom:12px;

}
/* ==========================================================
   LolliArt Memory Engine v1.0 – Sprint A.2
========================================================== */

.memory-scene{
    position:relative;
    min-height:100svh;
    padding:24px 18px 28px;
    overflow:hidden;
    justify-content:flex-start;
}

.memory-header{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:390px;
    margin:0 auto 18px;
}

.memory-logo-area{
    margin-bottom:18px;
}

.memory-logo-area .main-logo{
    width:220px;
}

.memory-header h2{
    font-size:2.15rem;
    line-height:1.05;
    font-weight:800;
    color:var(--la-dark);
    margin-bottom:12px;
}

.memory-header h2 span{
    background:var(--la-gradient-primary);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.memory-header p{
    color:var(--la-muted);
    font-size:.96rem;
    line-height:1.45;
}

.memory-card{
    position:relative;
    z-index:2;
    width:100%;
    max-width:360px;
    min-height:330px;
    margin:18px auto 18px;
    padding:34px 24px 26px;
    border-radius:32px;
    text-align:center;
    overflow:hidden;
    background:rgba(255,255,255,.68);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.58);
    box-shadow:
        0 18px 48px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.72);
    animation:memoryCardFloat 6s ease-in-out infinite;
}

.memory-watermark{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.035;
    pointer-events:none;
    transform:scale(1.15);
}

.memory-watermark img{
    width:280px;
    height:auto;
}

.memory-portal{
    position:relative;
    width:92px;
    height:92px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.portal-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at center,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.58) 42%,
            rgba(255,190,80,.22) 100%);
    border:2px solid rgba(255,176,48,.78);
    box-shadow:
        0 0 16px rgba(255,190,80,.55),
        0 0 34px rgba(255,150,40,.25),
        inset 0 2px 8px rgba(255,255,255,.9);
    animation:portalPulse 4.8s ease-in-out infinite;
}

.portal-ring::before,
.portal-ring::after{
    content:"";
    position:absolute;
    border-radius:50%;
    inset:-9px;
    border:1px solid rgba(255,190,80,.34);
    animation:portalHalo 5.5s ease-in-out infinite;
}

.portal-ring::after{
    inset:-18px;
    opacity:.35;
    animation-delay:1.4s;
}

.portal-plus{
    position:relative;
    z-index:2;
    color:var(--la-orange);
    font-size:2.5rem;
    line-height:1;
    font-weight:500;
    text-shadow:0 0 16px rgba(255,170,40,.55);
}

.memory-card h3{
    position:relative;
    z-index:2;
    font-size:1.35rem;
    color:var(--la-dark);
    margin-bottom:12px;
}

.memory-card-text{
    position:relative;
    z-index:2;
    color:var(--la-muted);
    font-size:.96rem;
    line-height:1.45;
    margin-bottom:18px;
}

.memory-formats{
    position:relative;
    z-index:2;
    color:rgba(44,36,48,.48);
    font-size:.76rem;
    font-weight:700;
    letter-spacing:1.8px;
}

.memory-actions{
    position:relative;
    z-index:2;
    width:100%;
    max-width:360px;
    margin:0 auto 16px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.memory-action-btn{
    min-height:52px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:var(--la-dark);
    font-size:.9rem;
    font-weight:700;
    box-shadow:
        0 10px 28px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.75);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.memory-action-btn span{
    margin-right:6px;
}

.memory-action-btn:hover{
    transform:translateY(-3px);
    box-shadow:
        0 16px 34px rgba(0,0,0,.14),
        0 0 20px rgba(255,180,40,.18);
}

.memory-create-btn{
    position:relative;
    z-index:2;
    opacity:.46;
    cursor:not-allowed;
    pointer-events:none;
}

/* ---------- Memory Animations ---------- */

@keyframes memoryCardFloat{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes portalPulse{
    0%{
        transform:scale(.96);
        opacity:.82;
    }

    50%{
        transform:scale(1.04);
        opacity:1;
    }

    100%{
        transform:scale(.96);
        opacity:.82;
    }
}

@keyframes portalHalo{
    0%{
        transform:scale(.9);
        opacity:.18;
    }

    50%{
        transform:scale(1.12);
        opacity:.62;
    }

    100%{
        transform:scale(.9);
        opacity:.18;
    }
}

/* ---------- Mobile Memory Engine ---------- */

@media (max-width:480px){

    .memory-scene{
        padding:18px 18px 20px;
    }

    .memory-logo-area{
        margin-bottom:12px;
    }

    .memory-logo-area .main-logo{
        width:190px;
    }

    .memory-header{
        margin-bottom:12px;
    }

    .memory-header h2{
        font-size:1.9rem;
        margin-bottom:8px;
    }

    .memory-header p{
        font-size:.9rem;
        line-height:1.34;
    }

    .memory-card{
        max-width:335px;
        min-height:300px;
        margin:14px auto 14px;
        padding:28px 22px 22px;
        border-radius:28px;
    }

    .memory-portal{
        width:78px;
        height:78px;
        margin-bottom:16px;
    }

    .portal-plus{
        font-size:2.15rem;
    }

    .memory-card h3{
        font-size:1.22rem;
        margin-bottom:10px;
    }

    .memory-card-text{
        font-size:.9rem;
        margin-bottom:14px;
    }

    .memory-actions{
        max-width:335px;
        gap:10px;
        margin-bottom:14px;
    }

    .memory-action-btn{
        min-height:48px;
        font-size:.82rem;
    }

}
.scene{
    display:none !important;
}

.scene.scene-active{
    display:flex !important;
}
/* ==========================================================
   LolliArt Memory Engine v1.0
   Pixel Perfect Override v1.1
========================================================== */

/* ---------- Memory Header ---------- */

.memory-logo-area{
    margin-bottom:10px !important;
}

/* ---------- Memory Card ---------- */

.memory-card{

    max-width:380px !important;
    min-height:350px !important;

    padding:38px 28px 30px !important;

    border-radius:34px !important;

}

/* ---------- Watermark ---------- */

.memory-watermark{

    opacity:.018 !important;

}

/* ---------- Memory Portal ---------- */

.memory-portal{

    width:104px !important;
    height:104px !important;

    margin-bottom:22px !important;

    animation:
        portalFloat 6s ease-in-out infinite !important;

}

.portal-ring{

    box-shadow:

        0 0 18px rgba(255,185,60,.55),

        0 0 42px rgba(255,170,40,.28),

        0 0 78px rgba(255,170,40,.12),

        inset 0 2px 10px rgba(255,255,255,.92) !important;

}

.portal-plus{

    font-size:2.9rem !important;

}

/* ---------- Card Text ---------- */

.memory-card h3{

    margin-top:8px !important;
    margin-bottom:10px !important;

}

/* ---------- Action Buttons ---------- */

.memory-action-btn{

    transition:
        transform .28s ease,
        box-shadow .28s ease !important;

}

.memory-action-btn:hover{

    transform:
        translateY(-4px)
        scale(1.02) !important;

    box-shadow:

        0 16px 34px rgba(0,0,0,.14),

        0 0 24px rgba(255,180,40,.22) !important;

}

/* ---------- CTA ---------- */

.memory-create-btn{

    opacity:.62 !important;

}

/* ---------- Soft Overlay ---------- */

.memory-scene .soft-bg{

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.08),

            rgba(255,248,240,.36)

        ) !important;

}

/* ---------- Portal Float ---------- */

@keyframes portalFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-2px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ---------- Mobile ---------- */

@media (max-width:480px){

    .memory-card{

        max-width:345px !important;
        min-height:315px !important;

    }

    .memory-portal{

        width:88px !important;
        height:88px !important;

    }

    .portal-plus{

        font-size:2.45rem !important;

    }

}
/* ==========================================================
   Memory Engine Pixel Perfect FORCE v1.2
========================================================== */

.memory-scene .memory-card{
    max-width:420px !important;
    min-height:360px !important;
    padding:42px 30px 32px !important;
    border-radius:36px !important;
}

.memory-scene .memory-portal{
    width:118px !important;
    height:118px !important;
    margin-bottom:24px !important;
}

.memory-scene .portal-plus{
    font-size:3.2rem !important;
}

.memory-scene .memory-watermark{
    opacity:.012 !important;
}

.memory-scene .memory-create-btn{
    opacity:.72 !important;
}

.memory-scene .memory-logo-area{
    margin-bottom:6px !important;
}

@media (max-width:480px){

    .memory-scene .memory-card{
        max-width:370px !important;
        min-height:335px !important;
        padding:36px 26px 28px !important;
    }

    .memory-scene .memory-portal{
        width:104px !important;
        height:104px !important;
    }

}
/* ==========================================================
   Memory Action Buttons FORCE v1.1
========================================================== */

.memory-scene .memory-actions{
    max-width:420px !important;
    gap:16px !important;
    margin:18px auto 18px !important;
}

.memory-scene .memory-action-btn{
    min-height:58px !important;
    border-radius:999px !important;
    padding:0 22px !important;

    background:rgba(255,255,255,.82) !important;

    border:1px solid rgba(255,255,255,.72) !important;

    font-size:.95rem !important;
    font-weight:800 !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.memory-scene .memory-action-btn span{
    margin-right:8px !important;
}

.memory-scene .memory-action-btn:hover{
    transform:translateY(-4px) scale(1.025) !important;

    box-shadow:
        0 18px 38px rgba(0,0,0,.16),
        0 0 26px rgba(255,180,40,.24) !important;
}

@media (max-width:480px){

    .memory-scene .memory-actions{
        max-width:370px !important;
        gap:12px !important;
    }

    .memory-scene .memory-action-btn{
        min-height:54px !important;
        padding:0 16px !important;
        font-size:.86rem !important;
    }

}
/* ==========================================================
   LolliArt Card System v1.0
========================================================== */

.la-card{
    position:relative;
    overflow:hidden;

    background:rgba(255,255,255,.74);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.62);
    border-radius:30px;

    box-shadow:
        0 16px 42px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.78);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.la-card-clickable{
    cursor:pointer;
}

.la-card-clickable:hover{
    transform:translateY(-6px) scale(1.015);

    border-color:rgba(255,170,40,.45);

    box-shadow:
        0 22px 52px rgba(0,0,0,.16),
        0 0 30px rgba(255,180,40,.22),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.la-card-xl{
    min-height:120px;
    padding:24px;
    border-radius:30px;
}

.la-card-lg{
    min-height:330px;
    padding:38px 28px 30px;
    border-radius:34px;
}

.la-card-md{
    min-height:58px;
    padding:0 22px;
    border-radius:999px;
}

.la-card-sm{
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
}

.la-card-featured{
    border-color:rgba(255,120,70,.55);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.72),
            rgba(255,238,232,.62)
        );
}

.la-card-disabled{
    opacity:.55;
    pointer-events:none;
}

@media (max-width:480px){

    .la-card-xl{
        min-height:104px;
        padding:18px;
        border-radius:24px;
    }

    .la-card-lg{
        min-height:315px;
        padding:34px 24px 28px;
        border-radius:30px;
    }

    .la-card-md{
        min-height:54px;
        padding:0 16px;
    }

}
/* ==========================================================
   LolliArt Card System Apply v1.1
========================================================== */

.memory-scene .memory-action-btn.la-card{
    min-height:76px !important;
    border-radius:26px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;

    padding:0 24px !important;

    background:rgba(255,255,255,.74) !important;
}

.memory-scene .memory-actions{
    max-width:420px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px !important;
}

.memory-scene .memory-action-btn span{
    width:42px;
    height:42px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--la-gradient-primary);
    color:white;

    margin-right:0 !important;
    flex-shrink:0;
}

@media (max-width:480px){

    .memory-scene .memory-action-btn.la-card{
        min-height:70px !important;
        padding:0 18px !important;
        border-radius:24px !important;
        font-size:.86rem !important;
    }

    .memory-scene .memory-action-btn span{
        width:38px;
        height:38px;
    }

}
/* ==========================================================
   Memory Action SVG Icons
========================================================== */

.memory-scene .la-action-icon svg{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:#fff;
    stroke-width:2.3;
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* ==========================================================
   LolliArt Memory Engine v1.0 – Sprint B.1
========================================================== */

.memory-file-input{
    display:none;
}

.memory-preview{
    position:absolute;
    inset:24px;
    width:calc(100% - 48px);
    height:calc(100% - 48px);
    object-fit:cover;
    border-radius:26px;
    opacity:0;
    transform:scale(.96);
    transition:
        opacity .45s ease,
        transform .45s ease;
    z-index:3;
}

.memory-ready-message{
    position:relative;
    z-index:4;
    margin-top:18px;
    color:var(--la-orange);
    font-weight:800;
    opacity:0;
    transform:translateY(8px);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.memory-card.memory-selected .memory-preview{
    opacity:1;
    transform:scale(1);
}

.memory-card.memory-selected .memory-portal,
.memory-card.memory-selected h3,
.memory-card.memory-selected .memory-card-text,
.memory-card.memory-selected .memory-formats,
.memory-card.memory-selected .memory-watermark{
    opacity:0;
    pointer-events:none;
}

.memory-card.memory-selected .memory-ready-message{
    opacity:1;
    transform:translateY(0);
}

.memory-create-btn.memory-ready{
    opacity:1 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
}/* =========================================================
   LolliArt
   Memory Engine Sprint B.1
   Layout Fixes
========================================================= */

/* ---------- Memory Portal ---------- */

.memory-portal{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ---------- Center "+" ---------- */

.portal-plus{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

/* ---------- Hidden File Input ---------- */

.memory-file-input{
    display:none;
}

/* ---------- Preview Image ---------- */

.memory-preview{
    display:none;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
}

/* ---------- CTA spacing ---------- */

.memory-scene{
    padding-bottom:120px;
    box-sizing:border-box;
}

.memory-actions{
    margin-bottom:24px;
}

.memory-cta{
    margin-bottom:32px;
}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .memory-scene{
        min-height:100svh;
        padding-bottom:140px;
    }

    .memory-actions{
        margin-bottom:20px;
    }

    .memory-cta{
        margin-bottom:28px;
    }

}
/* =========================================================
   Memory Engine Sprint B.1+
   Portal Plus Center + Gallery Watermark
========================================================= */

.memory-card {
    position: relative;
    overflow: hidden;
}

.memory-portal {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-plus {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    z-index: 5;
}

/* halvány váltakozó galéria-vízjel a kártyában */
.memory-gallery-watermark {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    filter: blur(1px);
    transition: background-image 900ms ease, opacity 900ms ease;
    pointer-events: none;
}

.memory-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255,255,255,0.72);
    pointer-events: none;
}
/* =========================================================
   Memory Engine Sprint B.1+
   Final Portal Center Fix + Stronger Gallery Watermark
========================================================= */

.memory-card {
    position: relative;
    overflow: hidden;
}

.memory-gallery-watermark {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    filter: blur(0.5px) saturate(1.15);
    transition: background-image 900ms ease, opacity 900ms ease;
    pointer-events: none;
}

.memory-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255,255,255,0.58);
    pointer-events: none;
}

.memory-watermark,
.memory-portal,
.memory-card-title,
.memory-card-subtitle,
.memory-formats {
    position: relative;
    z-index: 4;
}

.memory-portal {
    position: relative;
    width: 118px;
    height: 118px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.portal-plus {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    z-index: 6;
}
/* =========================================================
   Memory Engine Sprint B.1+
   Safe Restore + Center Plus Only
========================================================= */

.memory-card {
    position: relative;
    overflow: hidden;
}

/* gallery watermark marad, de nem nyúl bele a layoutba */
.memory-gallery-watermark {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    opacity: 0.14;
    filter: blur(0.4px) saturate(1.1);
    transition: background-image 900ms ease, opacity 900ms ease;
    pointer-events: none;
}

/* világos fátyol */
.memory-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255,255,255,0.64);
    pointer-events: none;
}

/* tartalom legyen a vízjel fölött */
.memory-watermark,
.memory-portal,
.memory-card-title,
.memory-card-subtitle,
.memory-formats {
    position: relative;
    z-index: 4;
}

/* FONTOS: nincs width / height módosítás */
.memory-portal {
    position: relative;
}

/* csak a + igazítása */
.portal-plus {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    z-index: 6;
}
/* =========================================================
   Memory Engine Sprint B.1+
   Square Memory Card + Center Portal
========================================================= */

.memory-card {
    position: relative;
    overflow: hidden;
    width: min(420px, 82vw);
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 34px;
}

.memory-gallery-watermark {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    opacity: 0.16;
    filter: blur(0.4px) saturate(1.1);
    pointer-events: none;
}

.memory-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255,255,255,0.62);
    pointer-events: none;
}

.memory-portal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.portal-plus {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    transform: translate(-50%, -50%);
    line-height: 1;
    pointer-events: none;
}

.memory-watermark {
    position: relative;
    z-index: 4;
}
/* =========================================================
   Memory Engine Sprint B.1.1
   Portal Center Fix
========================================================= */

.portal-ring{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.portal-plus{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:42px;
    font-weight:300;
    line-height:1;

    z-index:10;
    pointer-events:none;
}
/* ==========================================================
   LolliArt
   Memory Engine Sprint B.1.2
   Portal Center Override
   (Append to end of style.css)
========================================================== */

/* A Memory Card legyen a referencia */
.memory-card{
    position:relative;
}

/* A teljes portal réteg töltse ki a kártyát */
.memory-portal{

    position:absolute !important;

    inset:0 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    z-index:20;

    pointer-events:none;
}

/* A pulzáló kör */
.portal-ring{

    position:relative;

    width:130px;
    height:130px;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* A "+" ikon */
.portal-plus{

    position:absolute;

    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:68px;
    font-weight:300;
    line-height:1;

    color:#ff9624;

    z-index:30;

    pointer-events:none;
}
/* ==========================================================
   LolliArt
   Memory Engine Sprint B.1.3
   Final Memory Card Center Fix
   Append to end of style.css
========================================================== */

.memory-card{
    position:relative !important;
    overflow:hidden !important;

    width:min(420px, 82vw) !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:center !important;

    padding:0 24px 32px !important;
    box-sizing:border-box !important;

    border-radius:34px !important;
}

/* Háttér galéria vízjel */
.memory-gallery-watermark{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    background-size:cover !important;
    background-position:center !important;

    opacity:0.22 !important;
    filter:blur(0.2px) saturate(1.2) !important;

    pointer-events:none !important;
}

/* Fehér fátyol */
.memory-card::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;

    background:rgba(255,255,255,0.52) !important;

    pointer-events:none !important;
}

/* A vízjel nyalóka vissza */
.memory-watermark{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    opacity:0.12 !important;
    pointer-events:none !important;
}

.memory-watermark img{
    width:58% !important;
    max-width:240px !important;
    height:auto !important;
}

/* Portal pontosan a kártya közepére */
.memory-portal{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;

    width:150px !important;
    height:150px !important;

    z-index:20 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    pointer-events:none !important;
}

/* Pulzáló kör */
.portal-ring{
    position:relative !important;

    width:140px !important;
    height:140px !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

/* Plusz jel */
.portal-plus{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    font-size:72px !important;
    font-weight:300 !important;
    line-height:1 !important;

    color:#ff9624 !important;

    z-index:30 !important;
    pointer-events:none !important;
}

/* Alsó szövegek a kártyán belül */
.memory-card h3,
.memory-card-text,
.memory-formats{
    position:relative !important;
    z-index:10 !important;
}
/* ==========================================================
   LolliArt
   Memory Portal Engine v2.0
   Append to end of style.css
========================================================== */

.memory-portal{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    z-index:30 !important;
    pointer-events:none !important;
}

.portal-pulse{
    position:absolute !important;

    width:152px !important;
    aspect-ratio:1 / 1 !important;

    border-radius:50% !important;
    border:2px solid rgba(255, 170, 40, 0.22) !important;

    box-shadow:
        0 0 22px rgba(255, 170, 40, 0.18),
        0 0 54px rgba(255, 170, 40, 0.16) !important;

    animation:memoryPortalPulse 2.8s ease-in-out infinite !important;
}

.portal-circle{
    position:relative !important;

    width:112px !important;
    aspect-ratio:1 / 1 !important;

    border-radius:50% !important;
    background:rgba(255,255,255,0.88) !important;

    border:2px solid rgba(255, 170, 40, 0.78) !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    box-shadow:
        0 0 20px rgba(255, 170, 40, 0.25),
        0 0 42px rgba(255, 170, 40, 0.22) !important;
}

.portal-plus{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    font-size:64px !important;
    font-weight:300 !important;
    line-height:1 !important;

    color:#ff9624 !important;

    transform:translateY(-3px) !important;

    pointer-events:none !important;
}

@keyframes memoryPortalPulse{
    0%{
        transform:scale(0.92);
        opacity:0.35;
    }

    50%{
        transform:scale(1.08);
        opacity:0.78;
    }

    100%{
        transform:scale(0.92);
        opacity:0.35;
    }
}
/* ==========================================================
   LolliArt
   Memory Portal Absolute Center Hard Fix
========================================================== */

.memory-card{
    position:relative !important;
}

#memoryPortalCenter{
    position:absolute !important;

    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    inset:auto !important;

    width:152px !important;
    height:152px !important;

    transform:translate(-50%, -50%) !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    z-index:40 !important;

    pointer-events:none !important;
}

#memoryPortalCenter .portal-pulse{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:152px !important;
    height:152px !important;

    transform:translate(-50%, -50%) !important;

    border-radius:50% !important;
    border:2px solid rgba(255,170,40,0.24) !important;

    box-shadow:
        0 0 22px rgba(255,170,40,0.18),
        0 0 54px rgba(255,170,40,0.16) !important;

    animation:memoryPortalPulseHard 2.8s ease-in-out infinite !important;
}

#memoryPortalCenter .portal-circle{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:112px !important;
    height:112px !important;

    transform:translate(-50%, -50%) !important;

    border-radius:50% !important;
    background:rgba(255,255,255,0.88) !important;

    border:2px solid rgba(255,170,40,0.78) !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    box-shadow:
        0 0 20px rgba(255,170,40,0.25),
        0 0 42px rgba(255,170,40,0.22) !important;
}

#memoryPortalCenter .portal-plus{
    display:block !important;

    font-size:64px !important;
    font-weight:300 !important;
    line-height:1 !important;

    color:#ff9624 !important;

    transform:translateY(-4px) !important;

    pointer-events:none !important;
}

@keyframes memoryPortalPulseHard{
    0%{
        transform:translate(-50%, -50%) scale(0.92);
        opacity:0.35;
    }

    50%{
        transform:translate(-50%, -50%) scale(1.08);
        opacity:0.78;
    }

    100%{
        transform:translate(-50%, -50%) scale(0.92);
        opacity:0.35;
    }
}
/* ==========================================================
   LolliArt
   Memory Portal Final Visual Center
   Append to end of style.css
========================================================== */

#memoryPortalCenter{
    left:50% !important;
    top:42% !important;
    transform:translate(-50%, -50%) !important;
}

#memoryPortalCenter .portal-pulse{
    width:132px !important;
    height:132px !important;
}

#memoryPortalCenter .portal-circle{
    width:96px !important;
    height:96px !important;
}

#memoryPortalCenter .portal-plus{
    font-size:60px !important;
    transform:translateY(-4px) !important;
}
/* ==========================================================
   Memory Portal
   Plus Center Fix
========================================================== */

.portal-circle{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.portal-plus{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    transform:translate(-50%, -56%) !important;

    width:60px !important;
    height:60px !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    font-size:58px !important;
    font-weight:300 !important;

    line-height:1 !important;

    color:#ff9624 !important;

    margin:0 !important;
    padding:0 !important;
}
/* ==========================================================
   LolliArt
   Memory Portal Engine v3.0
   Clean Final CSS
   Append to end of style.css
========================================================== */

/* Régi portal rendszerek kikapcsolása */
.memory-portal,
.portal-ring,
.portal-pulse,
.portal-circle,
.portal-plus,
#memoryPortalCenter{
    display:none !important;
}

/* Memory Card alap */
.memory-card{
    position:relative;
    overflow:hidden;

    width:min(420px, 82vw);
    aspect-ratio:1 / 1;
    height:auto;

    border-radius:34px;
}

/* Kattintható teljes kártyafelület */
.memory-card-click{
    position:absolute;
    inset:0;
    z-index:25;
    cursor:pointer;
}

/* Gallery watermark */
.memory-gallery-watermark{
    position:absolute;
    inset:0;
    z-index:1;

    background-size:cover;
    background-position:center;

    opacity:0.22;
    filter:blur(0.2px) saturate(1.15);

    pointer-events:none;
}

/* Fehér fátyol */
.memory-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;

    background:rgba(255,255,255,0.54);

    pointer-events:none;
}

/* LolliArt halvány vízjel */
.memory-watermark{
    position:absolute;
    inset:0;
    z-index:3;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0.10;
    pointer-events:none;
}

.memory-watermark img{
    width:58%;
    max-width:240px;
    height:auto;
}

/* Portal Engine v3.0 */
.memory-portal-v3{
    position:absolute;
    left:50%;
    top:42%;
    transform:translate(-50%, -50%);

    width:150px;
    height:150px;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:40;
    pointer-events:none;
}

/* Pulzáló külső kör */
.memory-portal-pulse{
    position:absolute;
    inset:0;

    border-radius:50%;
    border:2px solid rgba(255,165,35,0.22);

    box-shadow:
        0 0 22px rgba(255,165,35,0.18),
        0 0 55px rgba(255,165,35,0.16);

    animation:memoryPortalV3Pulse 2.8s ease-in-out infinite;
}

/* Középső gomb */
.memory-portal-button{
    position:relative;

    width:108px;
    height:108px;

    border-radius:50%;
    border:2px solid rgba(255,165,35,0.82);

    background:rgba(255,255,255,0.90);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;
    margin:0;

    box-shadow:
        0 0 20px rgba(255,165,35,0.22),
        0 0 45px rgba(255,165,35,0.22);

    cursor:pointer;
    pointer-events:auto;
}

/* Plus jel */
.memory-portal-plus{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    height:100%;

    font-size:68px;
    font-weight:300;
    line-height:1;

    color:#ff9624;

    transform:translateY(-4px);
    pointer-events:none;
}

/* Alsó szöveges rész */
.memory-content{
    position:absolute;
    left:50%;
    bottom:34px;
    transform:translateX(-50%);

    width:100%;
    padding:0 24px;
    box-sizing:border-box;

    z-index:10;
    text-align:center;
    pointer-events:none;
}

.memory-content h3,
.memory-content .memory-card-text,
.memory-content .memory-formats{
    position:relative;
    z-index:10;
}

/* Rejtett file input */
.memory-file-input{
    display:none;
}

/* Preview alap */
.memory-preview{
    display:none;
    position:absolute;
    inset:0;
    z-index:8;

    width:100%;
    height:100%;

    object-fit:cover;
    border-radius:inherit;
}

/* Animáció */
@keyframes memoryPortalV3Pulse{
    0%{
        transform:scale(0.92);
        opacity:0.35;
    }

    50%{
        transform:scale(1.08);
        opacity:0.78;
    }

    100%{
        transform:scale(0.92);
        opacity:0.35;
    }
}

/* Mobil finomhangolás */
@media (max-width:768px){

    .memory-card{
        width:min(390px, 86vw);
    }

    .memory-portal-v3{
        top:40%;
        width:138px;
        height:138px;
    }

    .memory-portal-button{
        width:98px;
        height:98px;
    }

    .memory-portal-plus{
        font-size:62px;
    }

    .memory-content{
        bottom:28px;
    }
}
/* ==========================================================
   LolliArt
   Memory Engine Sprint B.2
   Live Preview
========================================================== */

.memory-preview{
    display:block;
    opacity:0;
    transform:scale(1.03);
    transition:
        opacity 700ms ease,
        transform 900ms ease;
}

.memory-preview.is-visible{
    opacity:1;
    transform:scale(1);
}

.memory-card.has-memory .memory-gallery-watermark,
.memory-card.has-memory .memory-watermark{
    opacity:0;
    transition:opacity 500ms ease;
}

.memory-portal-v3{
    transition:
        opacity 450ms ease,
        transform 450ms ease;
}

.memory-portal-v3.is-hidden{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.86);
    pointer-events:none;
}

.memory-card.has-memory::after{
    background:rgba(255,255,255,0.12);
}

.memory-card.has-memory .memory-content{
    background:rgba(255,255,255,0.72);
    border-radius:22px;
    padding:14px 18px;
    bottom:24px;
    backdrop-filter:blur(10px);
}

.memory-create-btn.is-active{
    opacity:1;
    cursor:pointer;
    filter:drop-shadow(0 0 16px rgba(255,150,36,0.35));
    animation:memoryCtaGlow 2.2s ease-in-out infinite;
}

@keyframes memoryCtaGlow{
    0%, 100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-2px);
    }
}
/* ==========================================================
   LolliArt
   Memory Engine Sprint B.2.1
   CTA Active Fix
========================================================== */

.memory-create-btn{
    transition:
        opacity 300ms ease,
        filter 300ms ease,
        transform 300ms ease;
}

.memory-create-btn:disabled{
    opacity:0.55;
    cursor:not-allowed;
    filter:none;
}

.memory-create-btn.is-active{
    opacity:1 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    filter:drop-shadow(0 0 18px rgba(255,150,36,0.42));
}

.memory-create-btn.is-active:hover{
    transform:translateY(-2px);
}
/* ==========================================================
   LolliArt
   Shape Engine v1.0
   Circle Mode - Sprint C.1
========================================================== */

.shape-engine{
    display:none;
    position:absolute;
    inset:0;
    z-index:18;

    justify-content:center;
    align-items:center;

    pointer-events:none;
}

.memory-card.has-memory .shape-engine{
    display:flex;
}

.shape-viewport{
    position:relative;

    width:74%;
    aspect-ratio:1 / 1;

    border-radius:50%;
    overflow:hidden;

    box-shadow:
        0 0 28px rgba(255,165,35,0.22),
        0 0 60px rgba(255,165,35,0.16);
}

.shape-image{
    position:absolute;
    left:50%;
    top:50%;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:translate(-50%, -50%) scale(1);
    transform-origin:center;

    user-select:none;
    pointer-events:none;
}

.shape-overlay{
    position:absolute;
    inset:0;

    border-radius:50%;

    box-shadow:
        0 0 0 999px rgba(0,0,0,0.28);

    pointer-events:none;
}

.shape-border{
    position:absolute;
    inset:0;

    border-radius:50%;
    border:3px solid rgba(255,165,35,0.88);

    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.35),
        0 0 18px rgba(255,165,35,0.35);

    pointer-events:none;
}

.memory-card.has-memory .memory-preview{
    opacity:0;
}

.memory-card.has-memory .memory-portal-v3{
    opacity:0;
    pointer-events:none;
}/* ==========================================================
   LolliArt
   Shape Engine v1.0
   Circle Mode Visibility Fix
========================================================== */

.memory-card.has-memory .memory-preview{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}

.memory-card.has-memory .shape-engine{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:35 !important;
}

.shape-viewport{
    width:76% !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
    overflow:hidden !important;
}

.shape-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.shape-border{
    border:4px solid rgba(255,165,35,0.95) !important;
}
/* ==========================================================
   LolliArt
   Shape Engine v1.0
   Circle Mode Layout Polish
========================================================== */

.shape-engine{
    align-items:flex-start !important;
    padding-top:34px !important;
}

.shape-viewport{
    width:68% !important;
    max-width:285px !important;
}

.shape-border{
    border:3px solid rgba(255,165,35,0.92) !important;
}

.memory-card.has-memory .memory-content{
    bottom:24px !important;
    padding:12px 18px !important;
}

.memory-card.has-memory .memory-content h3{
    display:none !important;
}

.memory-card.has-memory .memory-card-text{
    font-size:15px !important;
    margin:0 !important;
}

.memory-card.has-memory .memory-formats{
    display:none !important;
}
/* ==========================================================
   LolliArt
   Shape Engine v1.2
   Drag Engine
========================================================== */

.shape-viewport{
    pointer-events:auto !important;
    cursor:grab;
    touch-action:none;
}

.shape-viewport.is-dragging{
    cursor:grabbing;
}

.shape-image{
    will-change:transform;
}
/* ==========================================================
   LolliArt
   Shape Engine v1.2.1
   Drag Hit Area Fix
========================================================== */

.shape-engine{
    pointer-events:auto !important;
}

.shape-viewport{
    pointer-events:auto !important;
    cursor:grab !important;
    touch-action:none !important;
}

.shape-viewport.is-dragging{
    cursor:grabbing !important;
}

.shape-image{
    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
}
/* ==========================================================
   LolliArt
   Shape Engine v1.2.2
   Original Image Ratio Fix
========================================================== */

.shape-image{
    position:absolute !important;
    left:50% !important;
    top:50% !important;

    width:auto !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:unset !important;

    transform-origin:center center !important;

    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
}
/* ==========================================================
   LolliArt
   Shape Engine v1.2.4
   Non Destructive Crop View
========================================================== */

.shape-viewport{
    overflow:visible !important;
    border-radius:0 !important;
}

.shape-image{
    z-index:1 !important;
}

.shape-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;

    border-radius:50% !important;

    box-shadow:
        0 0 0 999px rgba(255,255,255,0.62) !important;

    pointer-events:none !important;
}

.shape-border{
    position:absolute !important;
    inset:0 !important;
    z-index:4 !important;

    border-radius:50% !important;
    border:3px solid rgba(255,165,35,0.95) !important;

    pointer-events:none !important;
}
/* ==========================================================
   Shape Engine v1.3
   Zoom Controls
========================================================== */

.shape-controls{

    position:absolute;

    right:18px;
    top:18px;

    display:flex;
    flex-direction:column;

    gap:10px;

    z-index:80;

}

.shape-btn{

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#ff9624;

    font-size:26px;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(0,0,0,.15);

    transition:.25s;

}

.shape-btn:hover{

    transform:scale(1.08);

}/* Shape Controls click fix */

.shape-controls{
    pointer-events:auto !important;
    z-index:120 !important;
}

.shape-btn{
    pointer-events:auto !important;
    z-index:121 !important;
}

.memory-card.has-memory .memory-card-click{
    display:none !important;
}/* ==========================================================
   LolliArt
   Shape Controls v2.0
   Zoom Slider
========================================================== */

.shape-controls{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    z-index:140;
    pointer-events:auto;
}

.shape-btn{
    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,0.92);
    color:#ff9624;

    font-size:26px;
    line-height:1;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow:0 8px 22px rgba(0,0,0,0.14);
}

.shape-zoom-slider{
    width:130px;
    height:28px;

    transform:rotate(-90deg);

    accent-color:#ff9624;
    cursor:pointer;
}
/* ==========================================================
   Shape Controls v3.0
========================================================== */

.shape-controls{

    position:absolute;

    right:18px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:14px;

    z-index:150;

}

.shape-control-plus,
.shape-control-minus{

    width:38px;
    height:38px;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:26px;

    color:#ff9b22;

    cursor:pointer;

    box-shadow:0 8px 18px rgba(0,0,0,.12);

    transition:.25s;

}

.shape-control-plus:hover,
.shape-control-minus:hover{

    transform:scale(1.08);

}

.shape-slider-track{

    width:8px;

    height:170px;

    border-radius:20px;

    background:rgba(255,255,255,.78);

    position:relative;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.08);

}

.shape-slider-thumb{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:26px;
    height:26px;

    border-radius:50%;

    background:white;

    border:3px solid #FFA126;

    box-shadow:

        0 6px 14px rgba(0,0,0,.15);

    cursor:pointer;

}
/* ==========================================================
   LolliArt
   Shape Controls v3.1
   Visibility + Layout Fix
========================================================== */

.shape-controls{
    display:none;
}

.memory-card.has-memory .shape-controls{
    display:flex !important;
}

.memory-card:not(.has-memory) .memory-create-btn,
.memory-card:not(.has-memory) .shape-controls{
    pointer-events:none;
}

.shape-controls{
    position:absolute !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:160 !important;
    pointer-events:auto !important;
}

.shape-slider-track,
.shape-slider-thumb,
.shape-control-plus,
.shape-control-minus{
    pointer-events:auto !important;
}
/* ==========================================================
   LolliArt
   Memory Initial State Layout Fix
========================================================== */

.memory-card:not(.has-memory) .shape-engine,
.memory-card:not(.has-memory) .shape-controls{
    display:none !important;
}

.memory-card:not(.has-memory) .memory-content{
    position:absolute !important;
    left:50% !important;
    bottom:34px !important;
    transform:translateX(-50%) !important;
    z-index:20 !important;
}

.memory-actions{
    position:relative !important;
    z-index:30 !important;
    margin-top:24px !important;
}

.memory-create-btn{
    position:relative !important;
    z-index:30 !important;
    margin-top:18px !important;
}

.memory-card .memory-create-btn,
.memory-card .memory-actions{
    display:none !important;
}
/* ==========================================================
   LolliArt
   Memory Layout Restore
========================================================== */

.memory-actions{
    display:flex !important;
    position:relative !important;
    z-index:60 !important;
    margin-top:24px !important;
}

.memory-create-btn{
    display:flex !important;
    position:relative !important;
    z-index:60 !important;
    margin-top:18px !important;
}

.memory-content{
    display:block !important;
}

.memory-card:not(.has-memory) .memory-content{
    position:absolute !important;
    left:50% !important;
    bottom:34px !important;
    transform:translateX(-50%) !important;
    z-index:25 !important;
}

.memory-card:not(.has-memory) .memory-card-text,
.memory-card:not(.has-memory) .memory-formats,
.memory-card:not(.has-memory) h3{
    display:block !important;
}

.memory-card:not(.has-memory) .shape-engine,
.memory-card:not(.has-memory) .shape-controls{
    display:none !important;
}
/* ==========================================================
   LolliArt
   Memory Actions Hard Restore
========================================================== */

.memory-scene{
    overflow-y:auto !important;
    padding-bottom:120px !important;
}

.memory-actions{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    z-index:200 !important;

    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;

    margin-top:24px !important;
    margin-bottom:18px !important;

    pointer-events:auto !important;
}

.memory-action-btn{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.memory-create-btn{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    z-index:200 !important;

    margin-top:0 !important;
    margin-bottom:40px !important;

    pointer-events:auto !important;
/* ==========================================================
   LolliArt App Engine v1.0
========================================================== */

function initializePage(page){

    switch(page){

        case "hero":

            createSparkles();
            startHeroArtSlider();
            startBackgroundSlider();

        break;

        case "experience":

            startBackgroundSlider();

        break;

    }

}
/* ==========================================================
   LolliArt
   Shape Engine v1.1
   State Engine
========================================================== */

const shapeState = {
    mode: "circle",

    image: null,

    x: 0,
    y: 0,

    scale: 1,
    rotation: 0,

    dragging: false,
    ready: false
};

/* ==========================================================
   LolliArt Experience Engine
========================================================== */

function goToScene(sceneId) {

    const scenes = document.querySelectorAll(".scene");

    scenes.forEach(scene => {
        scene.classList.remove("scene-active");
    });

    const targetScene = document.getElementById(sceneId);

    if (targetScene) {

        targetScene.classList.add("scene-active");

        window.scrollTo(0, 0);

    }

}

function selectExperience(type) {

    const message = document.getElementById("selected-message");

    if (!message) return;

    switch(type){

        case "memory":

            message.innerHTML =
                "📷 My Memory selected — upload flow coming next.";

        break;

        case "ai":

            message.innerHTML =
                "✨ AI Memory Maker™ selected — magic flow coming next.";

        break;

        case "collections":

            message.innerHTML =
                "🏝️ LolliArt Collections selected — gallery coming next.";

        break;

    }

}

/* ==========================================================
   LolliArt Magic Particles
========================================================== */

function createSparkles() {

    const field = document.querySelector(".sparkle-field");

    if (!field) return;

    field.innerHTML = "";

    const sparkleCount = 26;

    for (let i = 0; i < sparkleCount; i++) {

        const sparkle = document.createElement("span");

        sparkle.className = "sparkle";

        if (i % 5 === 0) {
            sparkle.classList.add("star");
        }

        sparkle.style.left = Math.random() * 100 + "%";
        sparkle.style.top = Math.random() * 100 + "%";

        sparkle.style.setProperty(
            "--duration",
            (3.5 + Math.random() * 4) + "s"
        );

        sparkle.style.animationDelay =
            Math.random() * 4 + "s";

        field.appendChild(sparkle);

    }

}

/* ==========================================================
   LolliArt Hero Engine v2.0
========================================================== */

function startHeroArtSlider() {

    const images = document.querySelectorAll(".hero-art");

    if (!images.length) return;

    let current = 0;

    images.forEach(img => img.classList.remove("active"));

    images[current].classList.add("active");

    setInterval(() => {

        images[current].classList.remove("active");

        current = (current + 1) % images.length;

        images[current].classList.add("active");

    }, 6500);

}

/* ==========================================================
   LolliArt Hero Transition v3.0
========================================================== */

function startHeroTransition() {

    const welcomeScene =
        document.getElementById("scene-welcome");

    if (!welcomeScene) {

        goToScene("scene-choice");

        return;

    }

    welcomeScene.classList.add("hero-leaving");

    setTimeout(() => {

        goToScene("scene-choice");

        welcomeScene.classList.remove("hero-leaving");

    }, 650);

}

/* ==========================================================
   LolliArt Hero Engine v2.1
   Animated Background Slider
========================================================== */

function startBackgroundSlider() {

    const backgrounds =
        document.querySelectorAll(".hero-background");

    if (!backgrounds.length) return;

    backgrounds.forEach(background => {

        const images =
            background.querySelectorAll(".hero-bg");

        if (!images.length) return;

        let current = 0;

        images.forEach(img =>
            img.classList.remove("active")
        );

        images[current].classList.add("active");

        setInterval(() => {

            images[current].classList.remove("active");

            current = (current + 1) % images.length;

            images[current].classList.add("active");

        }, 12000);

    });

}
function openMemoryScene() {
    goToScene("scene-memory");

    setTimeout(() => {
        initMemoryEngine();
        initMemoryGalleryWatermark();
        initShapeDragEngine();
        initShapeSliderDrag();
    }, 100);
}
/* ==========================================================
   LolliArt Memory Engine v1.0 – Sprint B.1
========================================================== */

function openMemoryFilePicker() {
  const input = document.getElementById("memoryFileInput");

  if (!input) {
    console.warn("Memory file input not found");
    return;
  }

  input.click();
}

function initMemoryEngine() {
    const input = document.getElementById("memoryFileInput");
    const card = document.querySelector(".memory-card");
    const cardText = document.querySelector(".memory-card-text");
    const createBtn = document.querySelector(".memory-create-btn");
    const portal = document.querySelector(".memory-portal-v3");

    if (!input || !card) return;

    input.addEventListener("change", function (event) {
        const file = event.target.files && event.target.files[0];

        if (!file) return;

        const imageUrl = URL.createObjectURL(file);

        shapeState.image = imageUrl;
        const shapeImage = document.getElementById("shapeImage");

if (shapeImage) {
    shapeImage.onload = function () {
        fitShapeImageToCircle();
    };
}
        shapeState.x = 0;
        shapeState.y = 0;
        shapeState.scale = 1;
        shapeState.rotation = 0;
        shapeState.ready = true;

        updateShapeEngine();

        card.classList.add("has-memory");

        if (cardText) {
            cardText.innerHTML = "✨ Your memory is ready.";
        }

        if (createBtn) {
            createBtn.disabled = false;
            createBtn.removeAttribute("disabled");
            createBtn.classList.add("is-active");
        }

        if (portal) {
            portal.classList.add("is-hidden");
        }
    });
}
function initMemoryGalleryWatermark() {
    const watermark = document.getElementById("memoryGalleryWatermark");

    if (!watermark) return;

    const galleryImages = [
    "assets/gallery/GRANCAN20252.png",
    "assets/gallery/GRANCAN20253.png",
    "assets/gallery/LAPALMASKY12025.png",
    "assets/gallery/LAPALMASKY32025.png",
    "assets/gallery/TENSUP20252.png",
    "assets/gallery/TENSUP20257.png"
];

    let index = 0;

    watermark.style.backgroundImage = `url("${galleryImages[index]}")`;

    setInterval(function () {
        index = (index + 1) % galleryImages.length;
        watermark.style.backgroundImage = `url("${galleryImages[index]}")`;
    }, 3500);
}
function updateShapeEngine() {
    const shapeImage = document.getElementById("shapeImage");

    if (!shapeImage || !shapeState.image) return;

    shapeImage.src = shapeState.image;

    shapeImage.style.transform =
        `translate(-50%, -50%)
         translate(${shapeState.x}px, ${shapeState.y}px)
         scale(${shapeState.scale})
         rotate(${shapeState.rotation}deg)`;
}
function initShapeDragEngine() {
    const viewport = document.querySelector(".shape-viewport");

    if (!viewport) return;

    let startX = 0;
    let startY = 0;
    let initialX = 0;
    let initialY = 0;

    viewport.addEventListener("pointerdown", function (event) {
        if (!shapeState.ready) return;

        shapeState.dragging = true;

        startX = event.clientX;
        startY = event.clientY;

        initialX = shapeState.x;
        initialY = shapeState.y;

        viewport.setPointerCapture(event.pointerId);
        viewport.classList.add("is-dragging");
    });

    viewport.addEventListener("pointermove", function (event) {
        if (!shapeState.dragging) return;

        const deltaX = event.clientX - startX;
        const deltaY = event.clientY - startY;

        shapeState.x = initialX + deltaX;
        shapeState.y = initialY + deltaY;

        updateShapeEngine();
    });

    viewport.addEventListener("pointerup", function (event) {
        shapeState.dragging = false;

        viewport.releasePointerCapture(event.pointerId);
        viewport.classList.remove("is-dragging");
    });

    viewport.addEventListener("pointercancel", function () {
        shapeState.dragging = false;
        viewport.classList.remove("is-dragging");
    });
}
function fitShapeImageToCircle() {
    const viewport = document.querySelector(".shape-viewport");
    const shapeImage = document.getElementById("shapeImage");

    if (!viewport || !shapeImage) return;

    const viewportSize = viewport.offsetWidth;

    const imageWidth = shapeImage.naturalWidth;
    const imageHeight = shapeImage.naturalHeight;

    if (!imageWidth || !imageHeight) return;

    const imageRatio = imageWidth / imageHeight;

    if (imageRatio > 1) {
        shapeImage.style.height = viewportSize + "px";
        shapeImage.style.width = viewportSize * imageRatio + "px";
    } else {
        shapeImage.style.width = viewportSize + "px";
        shapeImage.style.height = viewportSize / imageRatio + "px";
    }

    updateShapeEngine();
}
/* ==========================================================
   Shape Engine Configuration
========================================================== */

const SHAPE_CONFIG = {

    MIN_SCALE: 0.15,

    MAX_SCALE: 8,

    ZOOM_STEP: 0.15,

    WHEEL_STEP: 0.08,

    DRAG_SPEED: 1

};


/* ==========================================================
   Shape Engine
   Unified Zoom Engine
========================================================== */

function setShapeScale(newScale) {
    shapeState.scale = Math.max(
        SHAPE_CONFIG.MIN_SCALE,
        Math.min(newScale, SHAPE_CONFIG.MAX_SCALE)
    );

    updateShapeEngine();

    if (typeof window.updateShapeSliderThumb === "function") {
        window.updateShapeSliderThumb();
    }
}


function shapeZoomIn() {

    setShapeScale(
        shapeState.scale + SHAPE_CONFIG.ZOOM_STEP
    );

}


function shapeZoomOut() {

    setShapeScale(
        shapeState.scale - SHAPE_CONFIG.ZOOM_STEP
    );

}
function initShapeZoomSlider() {
    const slider = document.getElementById("shapeZoomSlider");

    if (!slider) return;

    slider.min = SHAPE_CONFIG.MIN_SCALE;
    slider.max = SHAPE_CONFIG.MAX_SCALE;
    slider.step = 0.01;
    slider.value = shapeState.scale;

    slider.addEventListener("input", function () {
        setShapeScale(Number(slider.value));
    });
}
function initShapeSliderDrag() {
    const track = document.querySelector(".shape-slider-track");
    const thumb = document.getElementById("shapeSliderThumb");

    if (!track || !thumb) return;

    function getPercentFromScale(scale) {
        const min = SHAPE_CONFIG.MIN_SCALE;
        const max = SHAPE_CONFIG.MAX_SCALE;

        const normalized =
            (Math.log(scale) - Math.log(min)) /
            (Math.log(max) - Math.log(min));

        return Math.max(0, Math.min(normalized, 1));
    }

    function getScaleFromPercent(percent) {
        const min = SHAPE_CONFIG.MIN_SCALE;
        const max = SHAPE_CONFIG.MAX_SCALE;

        return Math.exp(
            Math.log(min) +
            percent * (Math.log(max) - Math.log(min))
        );
    }

    function updateSliderFromScale() {
        const percent = getPercentFromScale(shapeState.scale);
        const y = (1 - percent) * 100;

        thumb.style.top = y + "%";
    }

    function setScaleFromPointer(clientY) {
        const rect = track.getBoundingClientRect();

        let y = clientY - rect.top;
        y = Math.max(0, Math.min(y, rect.height));

        const percent = 1 - (y / rect.height);
        const newScale = getScaleFromPercent(percent);

        setShapeScale(newScale);
        updateSliderFromScale();
    }

    thumb.addEventListener("pointerdown", function (event) {
        event.preventDefault();
        event.stopPropagation();

        thumb.setPointerCapture(event.pointerId);

        function moveHandler(moveEvent) {
            setScaleFromPointer(moveEvent.clientY);
        }

        function upHandler() {
            thumb.removeEventListener("pointermove", moveHandler);
            thumb.removeEventListener("pointerup", upHandler);
            thumb.removeEventListener("pointercancel", upHandler);
        }

        thumb.addEventListener("pointermove", moveHandler);
        thumb.addEventListener("pointerup", upHandler);
        thumb.addEventListener("pointercancel", upHandler);
    });

    track.addEventListener("pointerdown", function (event) {
        event.preventDefault();
        event.stopPropagation();

        setScaleFromPointer(event.clientY);
    });

    window.updateShapeSliderThumb = updateSliderFromScale;

    updateSliderFromScale();
}

    function setScaleFromPointer(clientY) {
        const rect = track.getBoundingClientRect();

        let y = clientY - rect.top;
        y = Math.max(0, Math.min(y, rect.height));

        const percent = 1 - (y / rect.height);

        const newScale =
            SHAPE_CONFIG.MIN_SCALE +
            percent * (SHAPE_CONFIG.MAX_SCALE - SHAPE_CONFIG.MIN_SCALE);

        setShapeScale(newScale);
        updateSliderFromScale();
    }

    thumb.addEventListener("pointerdown", function (event) {
        event.preventDefault();
        event.stopPropagation();

        thumb.setPointerCapture(event.pointerId);

        function moveHandler(moveEvent) {
            setScaleFromPointer(moveEvent.clientY);
        }

        function upHandler() {
            thumb.removeEventListener("pointermove", moveHandler);
            thumb.removeEventListener("pointerup", upHandler);
            thumb.removeEventListener("pointercancel", upHandler);
        }

        thumb.addEventListener("pointermove", moveHandler);
        thumb.addEventListener("pointerup", upHandler);
        thumb.addEventListener("pointercancel", upHandler);
    });

    track.addEventListener("pointerdown", function (event) {
        event.preventDefault();
        event.stopPropagation();

        setScaleFromPointer(event.clientY);
    });

    window.updateShapeSliderThumb = updateSliderFromScale;

    updateSliderFromScale();
}
/* ==========================================================
   LolliArt
   Generation Engine v1.0
========================================================== */

.generation-engine{
    display:none;
    position:absolute;
    inset:0;
    z-index:220;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    background:rgba(255,255,255,0.34);
    backdrop-filter:blur(10px);

    pointer-events:none;
}

.generation-engine.is-active{
    display:flex;
}

.generation-orb{
    width:150px;
    height:150px;
    border-radius:50%;

    border:3px solid rgba(255,165,35,0.95);

    background:
        radial-gradient(circle at 35% 30%,
            rgba(255,255,255,0.95),
            rgba(255,190,70,0.42),
            rgba(255,105,130,0.18));

    box-shadow:
        0 0 30px rgba(255,165,35,0.45),
        0 0 80px rgba(255,105,130,0.32);

    animation:generationOrbPulse 1.8s ease-in-out infinite;
}

.generation-message{
    margin-top:24px;
    padding:12px 22px;

    border-radius:999px;

    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(12px);

    color:#2c2333;
    font-weight:700;
    font-size:15px;

    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.generation-sparkles{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.generation-sparkles span{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;
    background:#ffc247;

    box-shadow:
        0 0 12px #ffc247,
        0 0 28px rgba(255,194,71,0.7);

    animation:generationSparkle 2.4s ease-in-out infinite;
}

.generation-sparkles span:nth-child(1){
    left:28%;
    top:32%;
    animation-delay:0s;
}

.generation-sparkles span:nth-child(2){
    left:70%;
    top:30%;
    animation-delay:.35s;
}

.generation-sparkles span:nth-child(3){
    left:66%;
    top:68%;
    animation-delay:.7s;
}

.generation-sparkles span:nth-child(4){
    left:31%;
    top:70%;
    animation-delay:1.05s;
}

.generation-sparkles span:nth-child(5){
    left:50%;
    top:22%;
    animation-delay:1.4s;
}

.memory-card.is-generating .shape-engine,
.memory-card.is-generating .shape-controls,
.memory-card.is-generating .memory-content{
    opacity:0;
    transition:opacity 400ms ease;
}

.memory-card.is-generated .generation-orb{
    animation:generationReadyPop 700ms ease forwards;
}

@keyframes generationOrbPulse{
    0%,100%{
        transform:scale(0.94) rotate(0deg);
        opacity:.88;
    }

    50%{
        transform:scale(1.06) rotate(6deg);
        opacity:1;
    }
}

@keyframes generationSparkle{
    0%,100%{
        transform:scale(.4);
        opacity:.25;
    }

    50%{
        transform:scale(1.25);
        opacity:1;
    }
}

@keyframes generationReadyPop{
    0%{
        transform:scale(.9);
    }

    70%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}
/* ==========================================================
   LolliArt
   Memory Buttons Final Restore
========================================================== */

.memory-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;

    position:relative !important;
    z-index:300 !important;

    margin-top:24px !important;
    margin-bottom:18px !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.memory-action-btn{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.memory-create-btn{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    position:relative !important;
    z-index:300 !important;

    margin:0 auto 48px !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.memory-create-btn:disabled{
    opacity:0.55 !important;
    pointer-events:none !important;
}
/* ==========================================================
   LolliArt
   Generated Lollipop Result v1.0
========================================================== */

.generation-result{
    display:none;
    opacity:0;
    transform:scale(0.82) translateY(12px);

    transition:
        opacity 600ms ease,
        transform 700ms cubic-bezier(.2,1.4,.4,1);
}

.generation-result img{
    width:180px;
    max-width:52vw;
    height:auto;

    filter:
        drop-shadow(0 18px 28px rgba(0,0,0,0.18))
        drop-shadow(0 0 24px rgba(255,165,35,0.35));
}

.memory-card.is-generated .generation-orb{
    display:none;
}

.memory-card.is-generated .generation-result{
    display:block;
    opacity:1;
    transform:scale(1) translateY(0);
}

.memory-card.is-generated .generation-message{
    margin-top:16px;
}
/* ==========================================================
   LolliArt
   Render Engine v1.0
========================================================== */

.generation-result canvas{
    width:300px;
    max-width:78vw;
    height:auto;

    filter:
        drop-shadow(0 20px 28px rgba(0,0,0,0.18))
        drop-shadow(0 0 28px rgba(255,165,35,0.42));
}

.memory-card.is-generated .generation-result{
    display:block;
    opacity:1;
    transform:scale(1) translateY(0);
}
/* ==========================================================
   LolliArt
   Flavor & Color Engine v1.0
========================================================== */

.flavor-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;

    width:min(420px, 86vw) !important;
    margin:24px auto 18px !important;
}

.flavor-btn{
    border:none;
    border-radius:22px;

    padding:13px 14px;

    background:rgba(255,255,255,0.88);

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;

    font-size:14px;
    font-weight:700;
    color:#2c2333;

    box-shadow:0 10px 24px rgba(0,0,0,0.10);

    cursor:pointer;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
}

.flavor-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,0.14);
}

.flavor-btn.is-selected{
    background:rgba(255,255,255,0.98);
    box-shadow:
        0 0 0 2px rgba(255,159,28,0.42),
        0 14px 32px rgba(0,0,0,0.14);
}

.flavor-dot{
    width:18px;
    height:18px;
    border-radius:50%;

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.65),
        0 4px 10px rgba(0,0,0,0.18);

    flex-shrink:0;
}

.memory-card.is-flavor-selection .generation-result canvas{
    animation:lollipopRotateSoft 4.5s ease-in-out infinite;
}

@keyframes lollipopRotateSoft{
    0%,100%{
        transform:rotate(-2deg) scale(1);
    }

    50%{
        transform:rotate(2deg) scale(1.03);
    }
}
/* ==========================================================
   Flavor Engine v1.1
========================================================== */

.flavor-emoji{

    font-size:24px;

    line-height:1;

    flex-shrink:0;

}

.flavor-name{

    font-weight:700;

    color:#312b37;

}

.flavor-btn{

    justify-content:flex-start;

    gap:14px;

    transition:.25s;

}

.flavor-btn:hover{

    transform:translateY(-3px) scale(1.02);

}

.flavor-btn.is-selected{

    transform:scale(1.03);

}
/* ==========================================================
   LolliArt
   Flavor Transition v1.0
========================================================== */

.memory-actions{
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        filter 260ms ease;
}

.memory-actions.is-transitioning-out{
    opacity:0 !important;
    transform:translateY(12px) scale(0.98) !important;
    filter:blur(4px);
    pointer-events:none !important;
}

.memory-actions.is-transitioning-in{
    opacity:0 !important;
    transform:translateY(14px) scale(0.98) !important;
    filter:blur(4px);
}

.memory-actions.is-transitioning-in.is-visible{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
    filter:blur(0);
}

.memory-create-btn{
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        filter 260ms ease;
}
/* ==========================================================
   LolliArt
   Flavor Lollipop Motion v1.0
========================================================== */

.memory-card.is-flavor-selection .generation-result canvas{
    animation:lolliFlavorRotate 5.2s ease-in-out infinite;
    transform-origin:center center;
}

.memory-card.is-flavor-selection .generation-result{
    animation:lolliFlavorFloat 4.8s ease-in-out infinite;
}

.memory-card.is-flavor-changing .generation-result canvas{
    animation:
        lolliFlavorColorPop 420ms ease,
        lolliFlavorRotate 5.2s ease-in-out infinite;
}

@keyframes lolliFlavorRotate{
    0%,100%{
        transform:rotate(-3deg) scale(1);
    }

    50%{
        transform:rotate(3deg) scale(1.035);
    }
}

@keyframes lolliFlavorFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }
}

@keyframes lolliFlavorColorPop{
    0%{
        filter:brightness(1);
    }

    45%{
        filter:brightness(1.18) saturate(1.25);
    }

    100%{
        filter:brightness(1);
    }
}
/* ==========================================================
   LolliArt
   Share Engine v1.0
========================================================== */

.memory-card.is-share-selection{
    display:none !important;
}

.share-actions{
    width:min(980px, 92vw) !important;
    margin:20px auto 18px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    opacity:0;
    transform:translateY(18px);
    filter:blur(4px);

    transition:
        opacity 420ms ease,
        transform 420ms ease,
        filter 420ms ease;
}

.share-actions.is-visible{
    opacity:1 !important;
    transform:translateY(0) !important;
    filter:blur(0) !important;
}

.share-header{
    text-align:center;
    margin-bottom:18px;
}

.share-header h3{
    font-size:28px;
    line-height:1.12;
    font-weight:900;
    color:#2c2333;
    margin:0 0 8px;
}

.share-header p{
    font-size:15px;
    color:rgba(44,35,51,0.72);
    margin:0;
}

.share-card-grid{
    width:100%;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.share-card{
    position:relative;
    overflow:hidden;

    aspect-ratio:4 / 5;

    border:none;
    border-radius:28px;

    background:#111;

    cursor:pointer;

    box-shadow:
        0 18px 36px rgba(0,0,0,0.18);

    transform:translateY(0);
    transition:
        transform 260ms ease,
        box-shadow 260ms ease;
}

.share-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 24px 48px rgba(0,0,0,0.22);
}

.share-card-bg{
    position:absolute;
    inset:0;

    background-image:var(--share-bg);
    background-size:cover;
    background-position:center;

    filter:grayscale(1) blur(5px);
    transform:scale(1.08);

    opacity:0.78;
}

.share-card::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.18),
            rgba(0,0,0,0.62)
        );
}

.share-card-logo{
    position:absolute;
    left:22px;
    top:20px;
    z-index:5;

    color:#fff;
    font-size:22px;
    font-weight:900;

    text-shadow:0 2px 8px rgba(0,0,0,0.35);
}

.share-card-memory{
    position:absolute;
    left:50%;
    top:34%;
    z-index:5;

    width:46%;
    aspect-ratio:1 / 1;

    transform:translate(-50%, -50%);

    border-radius:50%;
    overflow:hidden;

    box-shadow:
        0 0 0 6px var(--share-color),
        0 18px 32px rgba(0,0,0,0.28);
}

.share-card-canvas{
    width:100%;
    height:100%;
    display:block;
}

/* ==========================================================
   Share Card Title
========================================================== */

.share-card-title{

    position:absolute;

    left:50%;
    bottom:112px;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    z-index:20;

    pointer-events:none;

}

.share-card-title span{

    display:block;

    font-family:"Adelia", cursive;

    font-size:28px;

    font-weight:400;

    color:#ffffff;

    line-height:1;

    letter-spacing:0.5px;

    text-shadow:
        0 3px 10px rgba(0,0,0,.45);

}

.share-card-title strong{

    display:block;

    margin-top:-2px;

    font-family:"Adelia", cursive;

    font-size:60px;

    font-weight:400;

    line-height:.9;

    color:var(--share-color);

    text-shadow:
        0 4px 14px rgba(0,0,0,.45),
        0 0 16px rgba(255,255,255,.12);

}


.share-card-subtitle{
    position:absolute;
    left:20px;
    right:20px;
    bottom:62px;
    z-index:5;

    color:#fff;

    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.share-card-url{
    position:absolute;
    left:50%;
    bottom:22px;
    z-index:5;

    transform:translateX(-50%);

    padding:9px 18px;
    border-radius:999px;

    background:var(--share-color);
    color:#fff;

    font-size:13px;
    font-weight:900;
}

.share-buttons{
    width:100%;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;

    margin-top:20px;
}

.share-btn{
    border:none;
    border-radius:20px;

    padding:16px 18px;

    background:rgba(255,255,255,0.9);
    color:#2c2333;

    font-weight:800;
    font-size:14px;

    cursor:pointer;

    box-shadow:0 12px 28px rgba(0,0,0,0.10);
}

@media (max-width:820px){

    .share-card-grid{
        grid-template-columns:1fr;
        max-width:360px;
        margin:0 auto;
    }

    .share-buttons{
        grid-template-columns:1fr;
        max-width:360px;
        margin-left:auto;
        margin-right:auto;
    }

    .share-header h3{
        font-size:24px;
    }
}
/* ==========================================================
   LolliArt
   Share Engine v1.1
   HARD LAYOUT FIX
========================================================== */

.memory-actions.share-actions{
    width:min(1040px, 94vw) !important;
    max-width:1040px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;

    margin:28px auto 18px !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    position:relative !important;
    z-index:300 !important;
}

.memory-actions.share-actions .share-header{
    width:100% !important;
    text-align:center !important;
    margin:0 0 22px !important;
}

.memory-actions.share-actions .share-header h3{
    font-size:32px !important;
    line-height:1.12 !important;
    font-weight:900 !important;
    color:#2c2333 !important;
    margin:0 0 8px !important;
}

.memory-actions.share-actions .share-header p{
    font-size:16px !important;
    line-height:1.45 !important;
    color:rgba(44,35,51,0.72) !important;
    margin:0 auto !important;
    max-width:520px !important;
}

.memory-actions.share-actions .share-card-grid{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:20px !important;

    margin:0 auto !important;
}

.memory-actions.share-actions .share-card{
    width:100% !important;
    min-width:0 !important;

    aspect-ratio:4 / 5 !important;

    display:block !important;
    position:relative !important;
    overflow:hidden !important;

    border:none !important;
    border-radius:30px !important;

    background:#111 !important;

    padding:0 !important;
    margin:0 !important;

    box-shadow:0 20px 42px rgba(0,0,0,0.20) !important;

    cursor:pointer !important;
}

.memory-actions.share-actions .share-card-bg{
    position:absolute !important;
    inset:0 !important;

    background:#111 !important;

    filter:grayscale(1) blur(5px) !important;
    transform:scale(1.08) !important;

    opacity:0.85 !important;
}

.memory-actions.share-actions .share-card::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.12),
        rgba(0,0,0,0.70)
    ) !important;

    z-index:2 !important;
}

.memory-actions.share-actions .share-card-logo{
    position:absolute !important;
    left:22px !important;
    top:20px !important;
    z-index:5 !important;

    color:#fff !important;
    font-size:24px !important;
    font-weight:900 !important;
}

.memory-actions.share-actions .share-card-memory{
    position:absolute !important;
    left:50% !important;
    top:35% !important;
    z-index:5 !important;

    width:48% !important;
    aspect-ratio:1 / 1 !important;

    transform:translate(-50%, -50%) !important;

    border-radius:50% !important;
    overflow:hidden !important;

    box-shadow:
        0 0 0 6px var(--share-color),
        0 18px 34px rgba(0,0,0,0.30) !important;
}

.memory-actions.share-actions .share-card-canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
}

.memory-actions.share-actions .share-card-title{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    bottom:96px !important;
    z-index:5 !important;

    color:var(--share-color) !important;

    font-size:34px !important;
    line-height:0.98 !important;
    font-weight:900 !important;
    text-align:left !important;

    text-shadow:0 4px 12px rgba(0,0,0,0.45) !important;
}

.memory-actions.share-actions .share-card-subtitle{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    bottom:62px !important;
    z-index:5 !important;

    color:#fff !important;

    font-size:14px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
}

.memory-actions.share-actions .share-card-url{
    position:absolute !important;
    left:50% !important;
    bottom:22px !important;
    z-index:5 !important;

    transform:translateX(-50%) !important;

    padding:9px 18px !important;
    border-radius:999px !important;

    background:var(--share-color) !important;
    color:#fff !important;

    font-size:13px !important;
    font-weight:900 !important;

    white-space:nowrap !important;
}

.memory-actions.share-actions .share-buttons{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:16px !important;

    margin-top:22px !important;
}

.memory-actions.share-actions .share-btn{
    width:100% !important;

    border:none !important;
    border-radius:22px !important;

    padding:16px 18px !important;

    background:rgba(255,255,255,0.92) !important;
    color:#2c2333 !important;

    font-weight:800 !important;
    font-size:15px !important;

    box-shadow:0 12px 28px rgba(0,0,0,0.10) !important;

    cursor:pointer !important;
}

@media (max-width:900px){

    .memory-actions.share-actions .share-card-grid{
        grid-template-columns:1fr !important;
        max-width:380px !important;
    }

    .memory-actions.share-actions .share-buttons{
        grid-template-columns:1fr !important;
        max-width:380px !important;
    }

    .memory-actions.share-actions .share-header h3{
        font-size:26px !important;
    }
}
/* ==========================================================
   LolliArt
   Share Card Visual Fix v1.2
========================================================== */

.share-card{
    position:relative !important;
    overflow:hidden !important;
    text-align:center !important;
}

.share-bg-canvas{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    z-index:1 !important;
}

.share-card-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;

    background:
        radial-gradient(circle at center 34%, rgba(255,255,255,0.08), transparent 28%),
        linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.74)) !important;
}

.share-card-logo{
    position:absolute !important;
    top:20px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:6 !important;
}

.share-card-logo img{
    width:132px !important;
    height:auto !important;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,0.35)) !important;
}

.share-card-memory{
    position:absolute !important;
    left:50% !important;
    top:34% !important;
    transform:translate(-50%, -50%) !important;

    width:48% !important;
    aspect-ratio:1 / 1 !important;

    border-radius:50% !important;
    overflow:hidden !important;

    z-index:6 !important;

    box-shadow:
        0 0 0 7px var(--share-color),
        0 18px 34px rgba(0,0,0,0.32) !important;
}

.share-card-title{
    position:absolute !important;
    left:20px !important;
    right:20px !important;
    bottom:112px !important;
    z-index:6 !important;

    text-align:center !important;

    color:var(--share-color) !important;

    font-size:36px !important;
    line-height:0.9 !important;
    font-weight:900 !important;

    font-family:"Brush Script MT", "Segoe Script", cursive !important;

    text-shadow:
        0 4px 10px rgba(0,0,0,0.55),
        0 0 18px rgba(255,255,255,0.12) !important;
}

.share-card-subtitle{
    position:absolute !important;
    left:20px !important;
    right:20px !important;
    bottom:76px !important;
    z-index:6 !important;

    text-align:center !important;

    color:#fff !important;
    font-size:15px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
}

.share-card-url{
    position:absolute !important;
    left:50% !important;
    bottom:30px !important;
    transform:translateX(-50%) !important;
    z-index:6 !important;

    background:var(--share-color) !important;
    color:#fff !important;
}

.share-buttons{
    margin-top:24px !important;
}

.share-btn{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
}

.share-btn:nth-child(1){
    background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5) !important;
    color:#fff !important;
}

.share-btn:nth-child(1)::before{
    content:"📸";
    font-size:20px;
}

.share-btn:nth-child(2){
    background:#1877f2 !important;
    color:#fff !important;
}

.share-btn:nth-child(2)::before{
    content:"f";
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    color:#1877f2;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.share-btn:nth-child(3){
    background:rgba(255,255,255,0.95) !important;
    color:#2c2333 !important;
}

.share-btn:nth-child(3)::before{
    content:"⬇️";
    font-size:18px;
}
/* ==========================================================
   LolliArt
   Share Engine v1.2 Final Visual Layout
========================================================== */

.memory-card.is-share-selection{
    display:none !important;
}

.memory-actions.share-actions{
    width:min(1120px, 94vw) !important;
    max-width:1120px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    margin:30px auto 20px !important;
    padding:0 !important;

    opacity:0;
    transform:translateY(18px);
    filter:blur(4px);

    transition:
        opacity 420ms ease,
        transform 420ms ease,
        filter 420ms ease;
}

.memory-actions.share-actions.is-visible{
    opacity:1 !important;
    transform:translateY(0) !important;
    filter:blur(0) !important;
}

.share-header{
    text-align:center !important;
    margin-bottom:22px !important;
}

.share-header h3{
    margin:0 0 8px !important;
    font-size:32px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    color:#2c2333 !important;
}

.share-header p{
    margin:0 !important;
    font-size:16px !important;
    color:rgba(44,35,51,0.72) !important;
}

.share-card-grid{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:20px !important;
}

.share-card{
    position:relative !important;
    overflow:hidden !important;

    aspect-ratio:4 / 5 !important;

    border:none !important;
    border-radius:28px !important;

    background:#111 !important;
    padding:0 !important;

    box-shadow:0 22px 46px rgba(0,0,0,0.22) !important;

    cursor:pointer !important;
}

.share-bg-canvas{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    z-index:1 !important;
}

.share-dark-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.08),
            rgba(0,0,0,0.68)
        ) !important;
}

.share-card-logo{
    position:absolute !important;
    top:20px !important;
    left:50% !important;
    z-index:5 !important;

    transform:translateX(-50%) !important;
}

.share-card-logo img{
    width:128px !important;
    height:auto !important;

    filter:
        brightness(1.08)
        drop-shadow(0 3px 8px rgba(0,0,0,0.45)) !important;
}

.share-card-lollipop{
    position:absolute !important;
    left:50% !important;
    top:35% !important;
    z-index:5 !important;

    width:48% !important;
    aspect-ratio:1 / 1 !important;

    transform:translate(-50%, -50%) !important;
}

.share-lollipop-canvas{
    width:100% !important;
    height:100% !important;
    display:block !important;
}

.share-card-title{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    bottom:118px !important;
    z-index:5 !important;

    text-align:center !important;
    line-height:0.92 !important;

    color:var(--share-color) !important;

    text-shadow:
        0 4px 14px rgba(0,0,0,0.55) !important;
}

.share-card-title span{
    display:block !important;

    font-size:28px !important;
    font-weight:800 !important;
    color:#fff !important;
}

.share-card-title strong{
    display:block !important;

    font-size:42px !important;
    font-weight:900 !important;

    font-family:"Brush Script MT", "Segoe Script", cursive !important;
    color:var(--share-color) !important;
}

.share-card-subtitle{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    bottom:78px !important;
    z-index:5 !important;

    color:#fff !important;
    font-size:15px !important;
    font-weight:900 !important;
    text-align:center !important;
    letter-spacing:.06em !important;
}

.share-card-url{
    position:absolute !important;
    left:50% !important;
    bottom:30px !important;
    z-index:5 !important;

    transform:translateX(-50%) !important;

    padding:10px 20px !important;
    border-radius:999px !important;

    background:var(--share-color) !important;
    color:#fff !important;

    font-size:14px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
}

.share-footer-text{
    margin:22px 0 20px !important;

    text-align:center !important;
    color:rgba(44,35,51,0.74) !important;

    font-size:16px !important;
    line-height:1.45 !important;
}

.share-buttons{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:16px !important;

    margin:0 0 22px !important;
}

.share-btn{
    width:100% !important;

    border:none !important;
    border-radius:22px !important;

    padding:16px 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;

    font-size:15px !important;
    font-weight:900 !important;

    box-shadow:0 12px 28px rgba(0,0,0,0.12) !important;

    cursor:pointer !important;
}

.instagram-btn{
    background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5) !important;
    color:#fff !important;
}

.facebook-btn{
    background:#1877f2 !important;
    color:#fff !important;
}

.facebook-btn span{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;
    color:#1877f2;

    font-weight:900;
}

.download-btn{
    background:rgba(255,255,255,0.94) !important;
    color:#2c2333 !important;
}

@media (max-width:900px){

    .share-card-grid{
        grid-template-columns:1fr !important;
        max-width:380px !important;
        margin:0 auto !important;
    }

    .share-buttons{
        grid-template-columns:1fr !important;
        max-width:380px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .share-header h3{
        font-size:26px !important;
    }
}
/* Share Engine final override */

.share-card::after{
    display:none !important;
}

.share-card-logo{
    left:50% !important;
    top:20px !important;
    transform:translateX(-50%) !important;
}

.share-card-logo img{
    width:128px !important;
    max-width:128px !important;
}

.share-card-lollipop{
    overflow:visible !important;
}

.share-buttons .share-btn::before{
    content:none !important;
}
/* ==========================================================
   Share Card Circle Only Fix
========================================================== */

.share-card-logo{
    left:50% !important;
    top:22px !important;
    transform:translateX(-50%) !important;
}

.share-card-logo img{
    width:136px !important;
    max-width:136px !important;
}

.share-card-lollipop{
    top:34% !important;
    width:56% !important;
}

.share-lollipop-canvas{
    width:100% !important;
    height:100% !important;
}

.share-card-title{
    bottom:112px !important;
}
/* ==========================================================
   LolliArt
   Share Card Circle + Logo Position Fix
========================================================== */

.share-card-logo{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
}

.share-card-logo img{
    width:105px;
    height:auto;
    display:block;
}

.share-card-lollipop{
    left:50% !important;
    top:39% !important;
    width:60% !important;
    transform:translate(-50%, -50%) !important;
    overflow:visible !important;
}

.share-lollipop-canvas{
    width:100% !important;
    height:100% !important;
    display:block !important;
}
/* ==========================================================
   LolliArt
   Share Card Logo Center Fix
========================================================== */

.memory-actions.share-actions .share-card-logo{
    position:absolute !important;
    top:18px !important;
    left:50% !important;
    right:auto !important;

    width:120px !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    z-index:30 !important;
}

.memory-actions.share-actions .share-card-logo img{
    width:120px !important;
    max-width:120px !important;
    height:auto !important;

    display:block !important;
}
/* ==========================================================
   LolliArt
   Share SVG Decoration Layer v1.0
========================================================== */

.share-decoration-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:7 !important;
    pointer-events:none !important;
}

.share-deco{
    position:absolute !important;

    width:24px !important;
    height:24px !important;

    fill:none !important;
    stroke:var(--share-color) !important;
    stroke-width:2.4 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    filter:
        drop-shadow(0 3px 8px rgba(0,0,0,0.35))
        drop-shadow(0 0 8px color-mix(in srgb, var(--share-color), transparent 35%)) !important;

    opacity:.95 !important;

    animation:shareDecoFloat 4.5s ease-in-out infinite !important;
}

.share-deco-heart{
    left:12% !important;
    top:58% !important;
    transform:rotate(-12deg) !important;
}

.share-deco-star{
    right:12% !important;
    top:28% !important;
    width:18px !important;
    height:18px !important;
    animation-delay:.6s !important;
}

.share-deco-spark{
    left:16% !important;
    top:36% !important;
    width:18px !important;
    height:18px !important;
    animation-delay:1s !important;
}

.share-deco-confetti{
    right:10% !important;
    top:54% !important;
    width:34px !important;
    height:34px !important;
    animation-delay:1.4s !important;
}

.share-deco-confetti path{
    fill:none !important;
    stroke:var(--share-color) !important;
}

@keyframes shareDecoFloat{
    0%,100%{
        opacity:.72;
        transform:translateY(0) rotate(0deg);
    }

    50%{
        opacity:1;
        transform:translateY(-7px) rotate(5deg);
    }
}
/* ==========================================================
   LolliArt
   Share Final Logo + Title Fix
========================================================== */

.memory-actions.share-actions .share-card-logo{
    position:absolute !important;
    top:18px !important;
    left:50% !important;
    right:auto !important;

    width:110px !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    z-index:40 !important;
}

.memory-actions.share-actions .share-card-logo img{
    width:110px !important;
    max-width:110px !important;
    height:auto !important;
    display:block !important;
}

.memory-actions.share-actions .share-card-title{
    position:absolute !important;

    left:50% !important;
    right:auto !important;
    bottom:106px !important;

    width:92% !important;

    transform:translateX(-50%) !important;

    text-align:center !important;
    z-index:40 !important;

    overflow:visible !important;
    pointer-events:none !important;
}

.memory-actions.share-actions .share-card-title span{
    display:block !important;

    font-family:"Adelia", "Segoe Script", cursive !important;
    font-size:24px !important;
    line-height:1 !important;
    font-weight:400 !important;

    color:#ffffff !important;

    text-align:center !important;
    margin:0 0 -2px 0 !important;

    white-space:nowrap !important;
}

.memory-actions.share-actions .share-card-title strong{
    display:block !important;

    font-family:"Adelia", "Segoe Script", cursive !important;
    font-size:38px !important;
    line-height:.95 !important;
    font-weight:400 !important;

    color:var(--share-color) !important;

    text-align:center !important;
    margin:0 auto !important;

    white-space:nowrap !important;
}
/* ==========================================================
   LolliArt
   Share Buttons Final Polish
========================================================== */

.memory-create-btn .order-icon{
    width:24px !important;
    height:24px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-right:10px !important;
}

.memory-create-btn .order-icon svg{
    width:24px !important;
    height:24px !important;

    fill:none !important;
    stroke:#ffffff !important;
    stroke-width:2.4 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.memory-actions.share-actions .share-buttons{
    gap:18px !important;
}

.memory-actions.share-actions .share-btn{
    min-height:58px !important;

    border-radius:24px !important;

    font-size:15px !important;
    font-weight:900 !important;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        filter 220ms ease !important;
}

.memory-actions.share-actions .share-btn:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 18px 36px rgba(0,0,0,0.16) !important;
    filter:brightness(1.04) !important;
}

/* Instagram */

.memory-actions.share-actions .instagram-btn{
    background:
        linear-gradient(135deg,
            #feda75 0%,
            #fa7e1e 28%,
            #d62976 55%,
            #962fbf 78%,
            #4f5bd5 100%) !important;

    color:#ffffff !important;
}

.memory-actions.share-actions .instagram-btn span{
    width:26px !important;
    height:26px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:18px !important;
}

/* Facebook */

.memory-actions.share-actions .facebook-btn{
    background:#1877f2 !important;
    color:#ffffff !important;
}

.memory-actions.share-actions .facebook-btn span{
    width:28px !important;
    height:28px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:#ffffff !important;
    color:#1877f2 !important;

    font-size:20px !important;
    font-weight:900 !important;
    font-family:Arial, sans-serif !important;
}

/* Download */

.memory-actions.share-actions .download-btn{
    background:rgba(255,255,255,0.96) !important;
    color:#2c2333 !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.7) !important;
}

.memory-actions.share-actions .download-btn span{
    width:26px !important;
    height:26px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:10px !important;

    background:#2c2333 !important;
    color:#ffffff !important;

    font-size:15px !important;
}
/* Instagram SVG */

.instagram-icon{
    width:24px;
    height:24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-right:10px;
}

.instagram-icon svg{
    width:22px;
    height:22px;

    fill:none;
    stroke:#fff;
    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}