:root {
    /* Color Palette */
    --clr-bg-deep: #050b14;
    --clr-bg-primary: #0b182b;
    --clr-bg-secondary: #162640;
    --clr-gold: #f5c225;
    --clr-gold-glow: rgba(245, 194, 37, 0.4);
    --clr-text-main: #ffffff;
    --clr-text-muted: #a0aec0;
    
    /* Typography */
    --font-primary: 'Outfit', sans-serif;
    
    /* Spacing & Sizes */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Animations */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-primary);
    background: radial-gradient(circle at top center, var(--clr-bg-secondary), var(--clr-bg-deep) 80%);
    color: var(--clr-text-main);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

#app {
    width: 100%;
    max-width: 480px; /* Mobile optimized max-width */
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    background-color: var(--clr-bg-primary);
    overflow: hidden;
}

/* Utilities */
.text-center { text-align: center; }
.text-gold { color: var(--clr-gold); }
.font-light { font-weight: 300; }
.font-bold { font-weight: 700; }

/* Buttons */
.btn-primary {
    display: inline-block;
    width: 100%;
    background: linear-gradient(135deg, #f5c225, #f59e0b);
    color: #000;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 4px 15px var(--clr-gold-glow);
    transition: var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--clr-gold-glow);
}

.btn-primary:active {
    transform: translateY(1px);
}

/* Screen Transitions */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    transform: translateX(20px);
}

.screen.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

/* Specific Screen Layouts */
.screen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Branding */
.brand-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-gold);
    margin-bottom: var(--spacing-xl);
    letter-spacing: 2px;
}

/* Titles */
.title-main {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.subtitle {
    font-size: 1rem;
    color: var(--clr-text-muted);
    margin-bottom: var(--spacing-xl);
}

/* Hero Image Placeholder */
.hero-image {
    width: 180px;
    height: 252px;
    margin-bottom: var(--spacing-xl);
    animation: float 4s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Bottom Actions */
.bottom-actions {
    width: 100%;
    padding-bottom: var(--spacing-md);
    margin-top: auto;
}

/* Top Navigation */
.top-nav {
    display: flex;
    align-items: center;
    padding-bottom: var(--spacing-lg);
    font-size: 1.2rem;
    font-weight: 600;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--clr-gold);
    font-size: 1.8rem;
    cursor: pointer;
    margin-right: 1rem;
    padding: 0 0.5rem;
}

/* Puzzle Grid */
.puzzle-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(5, 70px);
    gap: 2px;
    margin: 2rem auto;
    width: max-content;
    background: rgba(255,255,255,0.1);
    padding: 4px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.puzzle-piece {
    width: 70px;
    height: 70px;
    background-image: url('assets/puzzle.png');
    background-size: 280px 350px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    border-radius: 4px;
}

.puzzle-piece:active {
    transform: scale(0.95);
}

.puzzle-piece.selected {
    outline: 3px solid var(--clr-gold);
    outline-offset: -3px;
    filter: brightness(1.2);
    z-index: 2;
}

/* Color Palette */
.color-palette-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-full);
    margin: 1rem 0;
}

.color-swatch {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--transition-fast), border var(--transition-fast);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.swatch-fire { background: linear-gradient(135deg, #fde047, #f97316, #dc2626); }
.swatch-water { background: linear-gradient(to top right, #0284c7, #67e8f9); }
.swatch-lotus { background: linear-gradient(135deg, #fbcfe8, #ec4899, #be185d); }
.swatch-gold { background: linear-gradient(135deg, #fef08a, #eab308, #a16207); }
.swatch-nature { background: linear-gradient(135deg, #86efac, #16a34a); }
.swatch-magic { background: linear-gradient(135deg, #d8b4fe, #9333ea); }

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.active {
    transform: scale(1.2);
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* Interactive Lantern Parts */
.lantern-part {
    transition: fill var(--transition-base), filter var(--transition-base);
}

.lantern-part:hover {
    filter: brightness(1.2);
}

/* WhatsApp Button */
.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #25D366;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

/* Puzzle Layout & Reference */
.puzzle-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.puzzle-reference {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.puzzle-reference img {
    width: 100px;
    height: 125px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Share Screen container base */
#screen-share {
    position: relative;
    overflow: hidden;
    padding: 0;          /* full-bleed – no padding; inner blocks handle their own spacing */
}

/* Bottom action buttons on share screen need their own padding */
#screen-share .bottom-actions {
    padding: 0 var(--spacing-lg) var(--spacing-md);
}


.bokeh-particle {
    position: absolute;
    bottom: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 194, 37, 0.25) 0%, rgba(245, 194, 37, 0) 70%);
    pointer-events: none;
    animation: float-up 14s infinite linear;
    z-index: 0;
}

@keyframes float-up {
    0% {
        transform: translateY(0) scale(0.8) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-90vh) scale(1.3) rotate(360deg);
        opacity: 0;
    }
}

.bokeh-particle:nth-child(1) { left: 10%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: 0s; }
.bokeh-particle:nth-child(2) { left: 25%; width: 45px; height: 45px; animation-duration: 18s; animation-delay: 3s; }
.bokeh-particle:nth-child(3) { left: 40%; width: 25px; height: 25px; animation-duration: 12s; animation-delay: 1s; }
.bokeh-particle:nth-child(4) { left: 55%; width: 50px; height: 50px; animation-duration: 20s; animation-delay: 5s; }
.bokeh-particle:nth-child(5) { left: 70%; width: 35px; height: 35px; animation-duration: 15s; animation-delay: 2s; }
.bokeh-particle:nth-child(6) { left: 85%; width: 40px; height: 40px; animation-duration: 16s; animation-delay: 4s; }
.bokeh-particle:nth-child(7) { left: 15%; width: 20px; height: 20px; animation-duration: 13s; animation-delay: 7s; }
.bokeh-particle:nth-child(8) { left: 80%; width: 48px; height: 48px; animation-duration: 19s; animation-delay: 8s; }

/* Metallic Gold Text Gradient */
.text-gradient-gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef08a 30%, #f5c225 70%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(245, 194, 37, 0.15);
}

/* Share screen button refinements */
.btn-share-download {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
}

.btn-share-download:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6) !important;
}

.btn-share-whatsapp {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
    animation: pulse-button 3s infinite alternate;
}

.btn-share-whatsapp:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.6) !important;
    animation-play-state: paused;
}

@keyframes pulse-button {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); }
}

/* ============================================================
   REVAMPED SHARE SCREEN  (Screen 7)
   Matches the photorealistic Stupa / full-moon reference image
   ============================================================ */

/* Background: set by JS via --vesak-bg-url CSS variable (base64 data URI) */
.share-screen-bg {
    background: var(--vesak-bg-url) no-repeat center center !important;
    background-size: cover !important;
    position: relative;
    overflow: hidden;
}

/* Overlay fades — mask original text / SLIC logo baked into the jpg */
.share-top-fade,
.share-bot-fade,
.share-left-fade {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.share-top-fade {
    top: 0; left: 0; width: 100%; height: 100px;
    background: linear-gradient(to bottom,
        rgba(3,7,18,0.3)   0%,
        rgba(8,15,35,0)    100%);
}
.share-bot-fade {
    bottom: 0; left: 0; width: 100%; height: 160px;
    background: linear-gradient(to top,
        rgba(2,6,23,0.85)   0%,
        rgba(5,11,20,0.5)  40%,
        rgba(5,11,20,0)    100%);
}
.share-left-fade {
    top: 0; left: 0; width: 42%; height: 100%;
    background: linear-gradient(to right,
        rgba(2,6,20,0.38) 0%,
        rgba(2,6,20,0)   100%);
}

/* ── Lantern container (new image: branch is top-left diagonal) ── */
/* Branch anchor point ~top 12%, left 18% of the screen            */
.share-lantern-wrap {
    position: absolute;
    left:  -8%;
    top:   5%;
    width: 62%;
    height: 55%;
    z-index: 2;
    pointer-events: none;
    /* NO float / bounce animation — lantern is still */
    filter: drop-shadow(0 8px 28px rgba(0,0,0,0.75));
}

/* ── Greeting text block ───────────────────────────────────── */
/* Sits in the LOWER portion, overlapping the water reflection  */
/* so it doesn't cover the moon/stupa on the right             */
.share-greeting-block {
    position: absolute;
    bottom: 165px;        /* above the action buttons */
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
    padding: 0 1.5rem;
    /* subtle dark pill behind the text for legibility */
    background: linear-gradient(to bottom,
        rgba(2,6,20,0) 0%,
        rgba(2,6,20,0.55) 30%,
        rgba(2,6,20,0.72) 100%);
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-radius: 0 0 0 0;
}

.share-greeting-sub {
    font-family: 'Outfit', serif;
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(255,255,255,0.90);
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95);
}

.share-greeting-main {
    font-family: 'Outfit', serif;
    font-size: 2.35rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    /* Metallic gold gradient — identical to reference */
    background: linear-gradient(160deg,
        #fffde7 0%,
        #fef08a 25%,
        #f5c225 65%,
        #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.95));
    margin: 0;
}

/* ── Bottom branding block ─────────────────────────────────── */
.share-brand-block {
    position: absolute;
    bottom: 310px;           /* sits above the greeting text block */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    gap: 0.5rem;
}

/* Gold divider with central gem diamond */
.share-divider {
    display: flex;
    align-items: center;
    width: 200px;
    opacity: 0.9;
}
.share-divider-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(to right, transparent, var(--clr-gold));
}
.share-divider-line-r {
    background: linear-gradient(to left, transparent, var(--clr-gold));
}
.share-divider-gem {
    width: 9px;
    height: 9px;
    background: var(--clr-gold);
    transform: rotate(45deg);
    margin: 0 10px;
    box-shadow: 0 0 10px var(--clr-gold), 0 0 20px rgba(245,194,37,0.5);
}

/* SLIC logo text */
.share-slic {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--clr-gold);
    text-shadow: 0 0 14px rgba(245,194,37,0.55);
}

/* ── Spin animation for loading indicator ─────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   TASSEL WAVE ANIMATIONS
   Each tassel group sways independently, pivoting from the top
   (where it attaches to the lantern body), like in a breeze.
   transform-origin is set relative to each tassel's anchor point
   in the 500×700 viewBox coordinate space.
   ============================================================ */

/* Generic tassel pivot style */
.tassel-sway {
    transform-box: fill-box;
    transform-origin: 50% 0%;   /* pivot from top of each tassel */
}

/* Left tassel — medium sway, moderate speed */
.tassel-sway-l {
    animation: tassel-wave-l 3.2s ease-in-out infinite;
}

/* Center tassel — longer sway, slower (heavier) */
.tassel-sway-c {
    animation: tassel-wave-c 3.8s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* Right tassel — shorter sway, slightly faster */
.tassel-sway-r {
    animation: tassel-wave-r 2.9s ease-in-out infinite;
    animation-delay: 1.1s;
}

@keyframes tassel-wave-l {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(5deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

@keyframes tassel-wave-c {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(6deg); }
    60%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes tassel-wave-r {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-4deg); }
    55%  { transform: rotate(5deg); }
    80%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}