@font-face {
    font-family: 'Centrale Sans';
    src: url('/fonts/CentraleSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Centrale Sans';
    src: url('/fonts/CentraleSans-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Centrale Sans';
    src: url('/fonts/CentraleSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Centrale Sans';
    src: url('/fonts/CentraleSans-Bold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Centrale Sans';
    src: url('/fonts/CentraleSans-Bold.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arame';
    src: url('/fonts/Arame-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* === İYİLİK KUMBARASI — TEMA SİSTEMİ ===
   Sadece Türk Telekom teması — varsayılan olarak uygulanır.
   data-theme attribute'üne gerek yok, sayfa açılır açılmaz TT arka planı gelir.
*/

/* ============================================
   📡 Türk Telekom — İyilik Feneri (VARSAYILAN)
   ============================================ */

html {
    background: #030810;
}

.display-container {
    background: url("/images/BG.png?v=3") center top / cover no-repeat;
    background-color: #0b0f16;
}

html.day-mode .display-container {
    background-image:
        linear-gradient(180deg, rgba(210, 236, 255, 0.75) 0%, rgba(176, 216, 255, 0.35) 48%, rgba(10, 16, 28, 0.2) 100%),
        url("/images/BG.png?v=3");
    background-position: center top, center top;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-color: #cfe6ff;
}

.display-container::before,
.display-container::after {
    display: none;
}

/* Star field — box-shadow technique for GPU-efficient rendering
   Single 1x1px element with many shadow clones = one composite layer */
.display-container::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    background: transparent;
    box-shadow:
        /* ═══ FAR STARS — 1px dots, dim white/blue ═══ */
        35px 95px 0 0 rgba(255,255,255,0.25),
        180px 220px 0 0 rgba(200,220,255,0.2),
        320px 50px 0 0 rgba(255,255,255,0.3),
        450px 380px 0 0 rgba(220,235,255,0.22),
        600px 150px 0 0 rgba(255,255,255,0.28),
        750px 480px 0 0 rgba(200,225,255,0.2),
        880px 80px 0 0 rgba(255,255,255,0.25),
        1020px 340px 0 0 rgba(210,230,255,0.22),
        1150px 190px 0 0 rgba(255,255,255,0.3),
        1300px 550px 0 0 rgba(200,220,255,0.25),
        1450px 90px 0 0 rgba(255,255,255,0.2),
        1600px 310px 0 0 rgba(220,235,255,0.28),
        1780px 180px 0 0 rgba(255,255,255,0.22),
        1850px 450px 0 0 rgba(200,225,255,0.25),
        90px 700px 0 0 rgba(255,255,255,0.3),
        280px 900px 0 0 rgba(210,230,255,0.2),
        500px 750px 0 0 rgba(255,255,255,0.25),
        720px 1050px 0 0 rgba(200,220,255,0.28),
        950px 820px 0 0 rgba(255,255,255,0.22),
        1100px 1000px 0 0 rgba(220,235,255,0.25),
        1350px 860px 0 0 rgba(255,255,255,0.3),
        1550px 1150px 0 0 rgba(200,225,255,0.2),
        1750px 950px 0 0 rgba(255,255,255,0.28),
        120px 1350px 0 0 rgba(210,230,255,0.22),
        380px 1500px 0 0 rgba(255,255,255,0.25),
        620px 1280px 0 0 rgba(200,220,255,0.3),
        850px 1450px 0 0 rgba(255,255,255,0.2),
        1080px 1350px 0 0 rgba(220,235,255,0.28),
        1280px 1550px 0 0 rgba(255,255,255,0.22),
        1500px 1400px 0 0 rgba(200,225,255,0.25),
        1720px 1300px 0 0 rgba(255,255,255,0.3),
        60px 1800px 0 0 rgba(210,230,255,0.2),
        300px 1950px 0 0 rgba(255,255,255,0.25),
        540px 1750px 0 0 rgba(200,220,255,0.28),
        780px 1900px 0 0 rgba(255,255,255,0.22),
        1000px 1780px 0 0 rgba(220,235,255,0.25),
        1250px 2000px 0 0 rgba(255,255,255,0.3),
        1480px 1850px 0 0 rgba(200,225,255,0.2),
        1700px 1750px 0 0 rgba(255,255,255,0.28),
        1880px 2050px 0 0 rgba(210,230,255,0.22),
        150px 2300px 0 0 rgba(255,255,255,0.25),
        400px 2450px 0 0 rgba(200,220,255,0.3),
        650px 2250px 0 0 rgba(255,255,255,0.2),
        900px 2400px 0 0 rgba(220,235,255,0.28),
        1150px 2280px 0 0 rgba(255,255,255,0.22),
        1400px 2500px 0 0 rgba(200,225,255,0.25),
        1650px 2350px 0 0 rgba(255,255,255,0.3),
        1850px 2480px 0 0 rgba(210,230,255,0.2),
        80px 2700px 0 0 rgba(255,255,255,0.25),
        350px 2850px 0 0 rgba(200,220,255,0.28),
        580px 2650px 0 0 rgba(255,255,255,0.22),
        820px 2800px 0 0 rgba(220,235,255,0.25),
        1050px 2700px 0 0 rgba(255,255,255,0.3),
        1300px 2900px 0 0 rgba(200,225,255,0.2),
        1520px 2780px 0 0 rgba(255,255,255,0.28),
        1780px 2680px 0 0 rgba(210,230,255,0.22),
        200px 3150px 0 0 rgba(255,255,255,0.25),
        450px 3300px 0 0 rgba(200,220,255,0.3),
        700px 3100px 0 0 rgba(255,255,255,0.2),
        950px 3250px 0 0 rgba(220,235,255,0.28),
        1200px 3150px 0 0 rgba(255,255,255,0.22),
        1450px 3350px 0 0 rgba(200,225,255,0.25),
        1680px 3200px 0 0 rgba(255,255,255,0.3),
        1900px 3100px 0 0 rgba(210,230,255,0.2),
        100px 3550px 0 0 rgba(255,255,255,0.25),
        340px 3700px 0 0 rgba(200,220,255,0.28),
        600px 3500px 0 0 rgba(255,255,255,0.22),
        830px 3650px 0 0 rgba(220,235,255,0.25),
        1100px 3580px 0 0 rgba(255,255,255,0.3),
        1350px 3750px 0 0 rgba(200,225,255,0.2),
        1580px 3630px 0 0 rgba(255,255,255,0.28),
        1820px 3500px 0 0 rgba(210,230,255,0.22),
        250px 4000px 0 0 rgba(255,255,255,0.25),
        500px 4150px 0 0 rgba(200,220,255,0.3),
        780px 4050px 0 0 rgba(255,255,255,0.2),
        1020px 4200px 0 0 rgba(220,235,255,0.28),
        1280px 4080px 0 0 rgba(255,255,255,0.22),
        1500px 4250px 0 0 rgba(200,225,255,0.25),
        1750px 4120px 0 0 rgba(255,255,255,0.3),
        /* ═══ MID STARS — 2px dots, medium brightness ═══ */
        150px 300px 0 0.5px rgba(255,255,255,0.45),
        480px 600px 0 0.5px rgba(220,240,255,0.4),
        800px 200px 0 0.5px rgba(255,255,255,0.5),
        1100px 450px 0 0.5px rgba(200,230,255,0.45),
        1400px 700px 0 0.5px rgba(255,255,255,0.4),
        1700px 350px 0 0.5px rgba(220,240,255,0.5),
        250px 1100px 0 0.5px rgba(255,255,255,0.45),
        550px 1350px 0 0.5px rgba(200,230,255,0.4),
        900px 1000px 0 0.5px rgba(255,255,255,0.5),
        1200px 1250px 0 0.5px rgba(220,240,255,0.45),
        1500px 1100px 0 0.5px rgba(255,255,255,0.4),
        1800px 1300px 0 0.5px rgba(200,230,255,0.5),
        100px 1700px 0 0.5px rgba(255,255,255,0.45),
        420px 1900px 0 0.5px rgba(220,240,255,0.4),
        750px 1650px 0 0.5px rgba(255,255,255,0.5),
        1050px 1850px 0 0.5px rgba(200,230,255,0.45),
        300px 2400px 0 0.5px rgba(255,255,255,0.4),
        650px 2600px 0 0.5px rgba(220,240,255,0.5),
        980px 2350px 0 0.5px rgba(255,255,255,0.45),
        1250px 2550px 0 0.5px rgba(200,230,255,0.4),
        1550px 2400px 0 0.5px rgba(255,255,255,0.5),
        1850px 2600px 0 0.5px rgba(220,240,255,0.45),
        180px 3100px 0 0.5px rgba(255,255,255,0.4),
        520px 3300px 0 0.5px rgba(200,230,255,0.5),
        850px 3050px 0 0.5px rgba(255,255,255,0.45),
        1150px 3250px 0 0.5px rgba(220,240,255,0.4),
        400px 3800px 0 0.5px rgba(255,255,255,0.5),
        700px 3950px 0 0.5px rgba(200,230,255,0.45),
        1000px 3750px 0 0.5px rgba(255,255,255,0.4),
        1600px 3800px 0 0.5px rgba(220,240,255,0.5),
        /* ═══ NEAR STARS — 3px dots, bright with soft glow ═══ */
        300px 180px 1px 1px rgba(255,255,255,0.7),
        780px 520px 1px 1px rgba(240,248,255,0.65),
        1250px 280px 1px 1px rgba(255,255,255,0.8),
        1700px 600px 1px 1px rgba(230,245,255,0.7),
        200px 1200px 1px 1px rgba(255,255,255,0.75),
        650px 1600px 1px 1px rgba(240,248,255,0.65),
        1100px 1400px 1px 1px rgba(255,255,255,0.8),
        1550px 1150px 1px 1px rgba(230,245,255,0.7),
        400px 2100px 1px 1px rgba(255,255,255,0.75),
        900px 2500px 1px 1px rgba(240,248,255,0.65),
        1350px 2800px 1px 1px rgba(255,255,255,0.8),
        1800px 3200px 1px 1px rgba(230,245,255,0.7),
        550px 3500px 1px 1px rgba(255,255,255,0.75),
        1050px 3900px 1px 1px rgba(240,248,255,0.65);
    pointer-events: none;
    z-index: 0;
    animation: starDrift 100s ease-in-out infinite alternate, ttTwinkle 8s ease-in-out infinite alternate;
}

/* Distant lantern dots — warm amber glow simulating far-away lanterns in sky */
.display-container::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    background: transparent;
    box-shadow:
        250px 650px 3px 2px rgba(255,180,60,0.15),
        1650px 400px 3px 2px rgba(255,160,40,0.12),
        800px 1400px 3px 2px rgba(255,170,50,0.18),
        1400px 1050px 3px 2px rgba(255,150,30,0.14),
        100px 2000px 3px 2px rgba(255,180,60,0.16),
        1800px 1750px 3px 2px rgba(255,160,40,0.12),
        500px 2600px 3px 2px rgba(255,170,50,0.15),
        1200px 2300px 3px 2px rgba(255,150,30,0.18),
        350px 3300px 3px 2px rgba(255,180,60,0.14),
        1550px 3000px 3px 2px rgba(255,160,40,0.16),
        900px 3700px 3px 2px rgba(255,170,50,0.12),
        1700px 4050px 3px 2px rgba(255,150,30,0.15);
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
    animation: lanternDotsDrift 90s ease-in-out infinite alternate;
}

/* Star parallax drift — slow upward float */
@keyframes starDrift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

/* Distant lantern drift — slightly different speed for parallax feel */
@keyframes lanternDotsDrift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-120px); }
}

/* Star twinkle — nuanced opacity variation */
@keyframes ttTwinkle {
    0% { opacity: 0.5; }
    25% { opacity: 0.85; }
    50% { opacity: 0.6; }
    75% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════
   HEADER — Premium Glassmorphism + Gradient
   ═══════════════════════════════════════════ */
/* Logo Box — ortak glassmorphism stil */
/* Logo bar — viewport altına yapışık flexbox şerit */
.logos-bottom-bar {
    display: none;
}

.logos-top-bar {
    position: absolute;
    top: calc(clamp(24px, 3vh, 80px) + 24px + var(--logo-offset, 0px) + var(--logo-top-y, 0px));
    left: calc(50% + var(--logo-top-x, 0px));
    transform: translateX(-50%);
    gap: 24px;
    width: min(92vw, 1800px);
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 200;
}

.logos-top-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(60px, 9vh, 150px);
    object-fit: contain;
    transform: scale(var(--logo-scale, 1));
    transform-origin: center top;
    filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.35));
}

/* Logo Box — ortak glassmorphism stil */
.logo-box {
    position: relative;
    overflow: hidden;

    /* Glassmorphism */
    background: rgba(3, 8, 16, 0.75);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* Sol alt — Bakanlık (büyük, öne çıkan) */
.logo-box--left {
    width: 25vw;
    max-width: 320px;
    height: 100px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: headerRevealCorner 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Orta — AKM */
.logo-box--center {
    width: 24vw;
    max-width: 320px;
    height: 110px;
    flex-shrink: 0;
    animation: headerRevealCenter 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sağ alt — TT */
.logo-box--right {
    width: 26vw;
    max-width: 340px;
    height: 110px;
    flex-shrink: 0;
    animation: headerRevealCorner 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Bakanlık logosu — büyük */
.bakanlik-logo {
    display: block;
    max-height: 90%;
    max-width: 95%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 15px rgba(255, 255, 255, 0.2))
        drop-shadow(0 0 35px rgba(255, 255, 255, 0.12));
}

/* AKM logosu — orta */
.akm-logo {
    display: block;
    max-height: 100%;
    max-width: 100%;
    transform: scale(1.3);
    object-fit: contain;
    filter:
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.15))
        drop-shadow(0 0 30px rgba(255, 255, 255, 0.08));
}

/* TT logosu — sağ */
.logo-box--right .title-logo {
    display: block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.header-title-box {
    position: absolute;
    top: auto;
    bottom: calc(clamp(140px, 12vh, 260px) - 56px + var(--header-offset, 0px) + var(--header-safe-offset, 0px) + var(--header-y, 0px));
    left: calc(50% + var(--header-x, 0px));
    transform: translateX(-50%) scale(var(--header-scale, 1));
    transform-origin: center top;
    z-index: 200;

    /* Glassmorphism */
    background: rgba(3, 8, 16, 0.75);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 40px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* Reveal animation */
    animation: headerReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

/* .logo-box--center için headerRevealCenter kullanılıyor (aşağıda tanımlı) */
/* Sol ve sağ için headerRevealCorner */
@keyframes headerReveal {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(var(--header-scale, 1));
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(var(--header-scale, 1));
        filter: blur(0);
    }
}

.title-logo {
    display: block;
    height: 90px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    filter:
        drop-shadow(0 0 15px rgba(0, 120, 255, 0.3))
        drop-shadow(0 0 40px rgba(0, 80, 200, 0.2));
    animation: ttLogoGlow 3s ease-in-out infinite alternate;
}

@keyframes ttLogoGlow {
    from {
        filter:
            drop-shadow(0 0 12px rgba(0, 120, 255, 0.25))
            drop-shadow(0 0 30px rgba(0, 80, 200, 0.12));
    }
    to {
        filter:
            drop-shadow(0 0 25px rgba(0, 140, 255, 0.5))
            drop-shadow(0 0 60px rgba(0, 100, 220, 0.3));
    }
}

/* Title glow wrapper — drop-shadow here so gradient text stays clean */
.title-glow-wrapper {
    animation: none;
    filter: none;
}

@keyframes titleGlow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(255, 180, 100, 0.2))
                drop-shadow(0 0 30px rgba(255, 154, 158, 0.1));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 180, 100, 0.4))
                drop-shadow(0 0 50px rgba(255, 154, 158, 0.2));
    }
}

.header-line1 {
    font-size: clamp(20px, 1.7vw, 32px);
    font-weight: 800;
    letter-spacing: clamp(0.75px, 0.3vw, 4.5px);
    line-height: 1.15;
    font-family: 'Centrale Sans', 'Nunito', sans-serif;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    animation: none;
}

.header-line2 {
    font-size: clamp(20px, 1.7vw, 32px);
    font-weight: 800;
    letter-spacing: clamp(0.75px, 0.3vw, 4.5px);
    line-height: 1.15;
    font-family: 'Centrale Sans', 'Nunito', sans-serif;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    animation: none;
}

@keyframes textShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* logo-layer devre dışı */
.logo-layer {
    display: none;
}

/* Balloon glow */
.balloon-body {
    box-shadow:
        0 20px 60px rgba(0, 80, 180, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.2),
        inset 0 -30px 50px rgba(0, 0, 0, 0.15),
        inset 0 30px 40px rgba(255, 255, 255, 0.15) !important;
}

/* UI elements */
.counter,
.new-wish-toast,
.fullscreen-btn,
.mute-btn {
    background: linear-gradient(135deg, #0a1628, #0f2040) !important;
    color: white !important;
    border: 1px solid rgba(0, 100, 200, 0.3) !important;
}

#spotlight-label {
    background: linear-gradient(135deg, #0a1628, #0f2040) !important;
    color: white !important;
}
/* Sol ve sağ logo köşe animasyonu */
@keyframes headerRevealCorner {
    from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Orta logo animasyonu */
@keyframes headerRevealCenter {
    from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ─── Responsive: dar + portrait ekranlar ─── */
@media (max-width: 1024px) {
    .logo-box--left   { width: 30vw; max-width: 280px; height: 85px; }
    .logo-box--center { width: 22vw; max-width: 220px; height: 75px; }
    .logo-box--right  { width: 22vw; max-width: 220px; height: 75px; }
    .bakanlik-logo    { max-height: 80%; }
}

/* Portrait / narrow — compact horizontal row (NOT column stack) */
@media (max-width: 800px), (orientation: portrait), (max-aspect-ratio: 1/1) {
    .logos-top-bar {
        top: calc(clamp(16px, 2.5vh, 48px) + 16px + var(--logo-offset, 0px));
        width: min(94vw, 1400px);
    }
    .logos-top-image { max-height: clamp(50px, 8vh, 120px); }
    .header-title-box {
        bottom: calc(clamp(120px, 10vh, 200px) - 48px + var(--header-offset, 0px) + var(--header-safe-offset, 0px));
        padding: 14px 20px;
        top: auto;
    }
    .header-line1, .header-line2 {
        font-size: clamp(15px, 2.6vw, 24px);
        letter-spacing: clamp(0.4px, 0.25vw, 2.25px);
    }
    .logos-bottom-bar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        bottom: 12px !important;
        left: 6px !important;
        right: 6px !important;
        gap: 6px !important;
    }
    .logo-box--left {
        flex: 1 1 38% !important;
        max-width: 200px !important;
        height: 52px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }
    .logo-box--center {
        flex: 0 1 24% !important;
        max-width: 120px !important;
        height: 52px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }
    .logo-box--right {
        flex: 1 1 30% !important;
        max-width: 160px !important;
        height: 52px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }
    .bakanlik-logo { max-width: 100% !important; max-height: 36px !important; }
    .akm-logo      { max-width: 100% !important; max-height: 34px !important; }
    .logo-box--right .title-logo { max-width: 100% !important; max-height: 34px !important; }
    .header-title-box { padding: 14px 20px !important; top: auto !important; bottom: calc(clamp(120px, 10vh, 200px) - 48px + var(--header-offset, 0px) + var(--header-safe-offset, 0px)) !important; }
    .header-line1, .header-line2 { font-size: clamp(15px, 2.6vw, 24px) !important; letter-spacing: clamp(0.4px, 0.25vw, 2.25px) !important; }
}

/* JS-based portrait class — media query fallback için */
.logos-bottom-bar.portrait-mode {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    bottom: 12px !important;
    left: 6px !important;
    right: 6px !important;
    gap: 6px !important;
}
.logos-bottom-bar.portrait-mode .logo-box--left   { flex: 1 1 38% !important; max-width: 200px !important; height: 52px !important; padding: 8px 10px !important; border-radius: 8px !important; }
.logos-bottom-bar.portrait-mode .logo-box--center { flex: 0 1 24% !important; max-width: 120px !important; height: 52px !important; padding: 8px 10px !important; border-radius: 8px !important; }
.logos-bottom-bar.portrait-mode .logo-box--right  { flex: 1 1 30% !important; max-width: 160px !important; height: 52px !important; padding: 8px 10px !important; border-radius: 8px !important; }

.message-stage {
    display: none;
}

html.display-mode-messagewall {
    background:
        radial-gradient(circle at 20% 82%, rgba(255, 118, 160, 0.26) 0%, transparent 24%),
        radial-gradient(circle at 82% 8%, rgba(188, 108, 255, 0.22) 0%, transparent 18%),
        linear-gradient(180deg, #050714 0%, #090d1e 52%, #070b18 100%);
}

html.display-mode-messagewall .display-container {
    background:
        radial-gradient(circle at 20% 82%, rgba(255, 118, 160, 0.18) 0%, transparent 18%),
        radial-gradient(circle at 82% 8%, rgba(188, 108, 255, 0.14) 0%, transparent 14%),
        linear-gradient(135deg, #060814 0%, #090d1d 48%, #050915 100%);
    overflow: hidden;
}

html.display-mode-messagewall .display-container::before {
    display: block;
    content: "";
    position: absolute;
    inset: auto auto 32px 28px;
    width: 540px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 118, 160, 0.24) 0%, rgba(255, 118, 160, 0.06) 38%, transparent 70%);
    filter: blur(16px);
    opacity: 0.9;
}

html.display-mode-messagewall .display-container::after {
    display: block;
    content: "";
    position: absolute;
    inset: 58px 160px auto auto;
    width: 360px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 110, 255, 0.24) 0%, rgba(216, 110, 255, 0.08) 48%, transparent 70%);
    filter: blur(18px);
    opacity: 0.8;
}

html.display-mode-messagewall .moon,
html.display-mode-messagewall .sparkle-star,
html.display-mode-messagewall #embers-container,
html.display-mode-messagewall .logos-top-bar,
html.display-mode-messagewall .header-title-box {
    display: none !important;
}

html.display-mode-messagewall #wishes-container {
    z-index: 30;
}

html.display-mode-messagewall #wishes-container.stage-layout .wish-card {
    opacity: 1;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card {
    opacity: 0.3;
}

html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card.spotlight-active {
    opacity: 1;
    z-index: 80 !important;
    top: 0 !important;
    left: 0 !important;
    transform: translate3d(var(--slot-x, 0px), var(--slot-y, 0px), 0) scale(1.04) !important;
    filter: drop-shadow(0 0 28px rgba(255, 180, 138, 0.42));
}

html.display-mode-messagewall .message-stage {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 35;
}

html.display-mode-messagewall .message-stage__brand-row {
    position: absolute;
    top: 42px;
    left: 54px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    color: #f7f3ef;
}

html.display-mode-messagewall .message-stage__brand-stack {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

html.display-mode-messagewall .message-stage__brand-mark {
    position: relative;
    width: 74px;
    height: 74px;
}

html.display-mode-messagewall .brand-mark__outer,
html.display-mode-messagewall .brand-mark__inner {
    position: absolute;
    display: block;
    border: 5px solid #fff7f2;
}

html.display-mode-messagewall .brand-mark__outer {
    inset: 0 16px 20px 0;
    border-right: none;
    border-bottom: none;
}

html.display-mode-messagewall .brand-mark__inner {
    inset: 25px 0 0 18px;
    border-top: none;
    border-right: none;
}

html.display-mode-messagewall .message-stage__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
}

html.display-mode-messagewall .message-stage__brand-copy strong {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

html.display-mode-messagewall .message-stage__brand-divider {
    width: 1px;
    height: 92px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
}

html.display-mode-messagewall .message-stage__conference-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-transform: uppercase;
    line-height: 0.9;
    margin-top: 4px;
}

html.display-mode-messagewall .message-stage__conference-kicker {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

html.display-mode-messagewall .message-stage__conference-title {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

html.display-mode-messagewall .message-stage__headline {
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
    width: 1480px;
    text-align: center;
    color: #fff8f2;
}

html.display-mode-messagewall .message-stage__headline-prefix {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 8px;
}

html.display-mode-messagewall .message-stage__headline-text {
    font-size: 76px;
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

html.display-mode-messagewall .message-stage__sponsor {
    position: absolute;
    left: 62px;
    bottom: 46px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff6f2;
}

html.display-mode-messagewall .message-stage__sponsor-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 78px;
    font-style: italic;
    line-height: 0.9;
    color: #fff7f2;
}

html.display-mode-messagewall .message-stage__sponsor-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

html.display-mode-messagewall .message-stage__crystal {
    position: absolute;
    right: 52px;
    bottom: -10px;
    width: 440px;
    height: 470px;
    filter: drop-shadow(0 18px 60px rgba(255, 97, 132, 0.34));
}

html.display-mode-messagewall .message-stage__shard {
    position: absolute;
    display: block;
    background: linear-gradient(180deg, rgba(255, 168, 132, 0.98) 0%, rgba(255, 104, 142, 0.9) 46%, rgba(157, 78, 255, 0.7) 100%);
    border: 1px solid rgba(255, 213, 198, 0.45);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.15);
}

html.display-mode-messagewall .message-stage__shard::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, transparent 62%);
    opacity: 0.55;
}

html.display-mode-messagewall .message-stage__shard.shard-1 {
    width: 102px;
    height: 236px;
    bottom: 8px;
    right: 18px;
    clip-path: polygon(24% 0, 84% 10%, 100% 34%, 70% 100%, 0 82%, 8% 28%);
    transform: rotate(14deg);
}

html.display-mode-messagewall .message-stage__shard.shard-2 {
    width: 120px;
    height: 220px;
    bottom: 48px;
    right: 122px;
    clip-path: polygon(18% 0, 78% 8%, 100% 42%, 68% 100%, 4% 88%, 0 24%);
    transform: rotate(-12deg);
}

html.display-mode-messagewall .message-stage__shard.shard-3 {
    width: 96px;
    height: 196px;
    bottom: 10px;
    right: 210px;
    clip-path: polygon(16% 0, 88% 6%, 100% 46%, 58% 100%, 0 82%, 0 22%);
    transform: rotate(-24deg);
}

html.display-mode-messagewall .message-stage__shard.shard-4 {
    width: 132px;
    height: 156px;
    bottom: 142px;
    right: 70px;
    clip-path: polygon(24% 0, 92% 16%, 100% 56%, 66% 100%, 0 78%, 8% 18%);
    transform: rotate(9deg);
}

html.display-mode-messagewall .message-stage__shard.shard-5 {
    width: 170px;
    height: 110px;
    bottom: 68px;
    right: 198px;
    clip-path: polygon(18% 0, 86% 8%, 100% 48%, 80% 100%, 4% 82%, 0 26%);
    transform: rotate(18deg);
}

html.display-mode-messagewall .wish-card.messagewall-mode {
    width: var(--slot-width, 260px);
    min-height: var(--slot-height, 250px);
    pointer-events: auto;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell {
    position: relative;
    width: 100%;
    min-height: var(--slot-height, 250px);
    padding: 28px 26px 74px;
    background: rgba(6, 10, 24, 0.82);
    border: 12px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell::after {
    content: "";
    position: absolute;
    left: 38px;
    bottom: -42px;
    width: 46px;
    height: 54px;
    background: inherit;
    border-left: inherit;
    border-bottom: inherit;
    transform: skewY(36deg);
}

html.display-mode-messagewall .wish-card.messagewall-mode .wish-text {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    color: #fcf8f2;
    font-size: 18px;
    line-height: 1.28;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 5;
}

html.display-mode-messagewall .wish-card.messagewall-mode .child-name {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;
    margin-top: 22px;
    color: #fdf7f0;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--hero {
    z-index: 45;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--hero .message-card-shell {
    border-color: #ff8ea8;
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.34),
        0 0 50px rgba(255, 121, 158, 0.24);
    padding: 42px 34px 86px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--hero .wish-text {
    font-size: 28px;
    line-height: 1.18;
    -webkit-line-clamp: 5;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--hero .child-name {
    font-size: 24px;
    letter-spacing: 1.2px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--hero .message-card-shell::after {
    width: 56px;
    height: 66px;
    left: 70px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--left-low,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--left-high,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--right-high,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--right-low {
    z-index: 40;
}

html.display-mode-messagewall .wish-card.messagewall-mode.card-entering,
html.display-mode-messagewall .wish-card.messagewall-mode.new-wish-highlight {
    animation: messageStagePulse 2.8s ease;
}

@keyframes messageStagePulse {
    0% {
        transform: translate3d(var(--slot-x, 0px), calc(var(--slot-y, 0px) + 12px), 0) scale(0.96);
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--slot-x, 0px), var(--slot-y, 0px), 0) scale(1);
        opacity: 1;
    }
}

html.display-mode-messagewall .display-container {
    background:
        radial-gradient(circle at 18% 84%, rgba(255, 118, 160, 0.18) 0%, rgba(255, 118, 160, 0.05) 18%, transparent 36%),
        radial-gradient(circle at 83% 10%, rgba(188, 108, 255, 0.16) 0%, rgba(188, 108, 255, 0.04) 18%, transparent 34%),
        url("/images/messagewall-background.png?v=1") center/cover no-repeat,
        #050713;
    overflow: hidden;
}

html.display-mode-messagewall .display-container::before,
html.display-mode-messagewall .display-container::after {
    display: block;
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    filter: blur(16px);
    opacity: 0.9;
}

html.display-mode-messagewall .display-container::before {
    inset: auto auto 38px 26px;
    width: 520px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 166, 0.24) 0%, rgba(255, 122, 166, 0.08) 42%, transparent 72%);
}

html.display-mode-messagewall .display-container::after {
    inset: 42px 116px auto auto;
    width: 320px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 112, 255, 0.22) 0%, rgba(190, 112, 255, 0.06) 46%, transparent 74%);
}

html.display-mode-messagewall .message-stage {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 35;
    pointer-events: none;
}

html.display-mode-messagewall .message-stage__top-logo {
    position: absolute;
    top: 42px;
    left: 46px;
    width: clamp(230px, 20vw, 380px);
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.38));
}

html.display-mode-messagewall .message-stage__headline {
    position: absolute;
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(84vw, 1360px);
    text-align: center;
    color: #fffaf7;
    z-index: 2;
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.35);
}

html.display-mode-messagewall .message-stage__headline-prefix {
    display: block;
    margin-bottom: 12px;
    font-size: clamp(18px, 1.8vw, 30px);
    font-weight: 800;
    letter-spacing: clamp(4px, 0.55vw, 10px);
    text-transform: uppercase;
}

html.display-mode-messagewall .message-stage__headline-text {
    font-size: clamp(42px, 4.6vw, 86px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html.display-mode-messagewall .message-stage__bottom-logo {
    position: absolute;
    left: 52px;
    bottom: 42px;
    width: clamp(140px, 13vw, 240px);
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.34));
}

html.display-mode-messagewall .message-stage__brand-row,
html.display-mode-messagewall .message-stage__brand-stack,
html.display-mode-messagewall .message-stage__brand-mark,
html.display-mode-messagewall .message-stage__brand-copy,
html.display-mode-messagewall .message-stage__brand-divider,
html.display-mode-messagewall .message-stage__conference-copy,
html.display-mode-messagewall .message-stage__sponsor,
html.display-mode-messagewall .message-stage__crystal,
html.display-mode-messagewall .message-stage__shard {
    display: none !important;
}

html.display-mode-messagewall #wishes-container {
    transform: translate3d(0, -56vh, 0);
    transform-origin: top left;
}

html.display-mode-messagewall .wish-card.messagewall-mode {
    width: var(--message-card-width, 260px);
    min-height: var(--message-card-height, 240px);
    pointer-events: auto;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell {
    position: relative;
    width: 100%;
    min-height: inherit;
    padding: 22px 22px 66px;
    background: linear-gradient(180deg, rgba(8, 11, 22, 0.92) 0%, rgba(10, 16, 34, 0.88) 100%);
    border: 10px solid rgba(255, 255, 255, 0.96);
    border-color: var(--message-border, rgba(255, 255, 255, 0.96));
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell::after {
    content: "";
    position: absolute;
    left: 40px;
    bottom: -40px;
    width: 46px;
    height: 54px;
    background: inherit;
    border-left: inherit;
    border-bottom: inherit;
    transform: skewY(36deg);
}

html.display-mode-messagewall .wish-card.messagewall-mode .wish-text {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    color: #fbf7f2;
    font-size: 18px;
    line-height: 1.28;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 5;
}

html.display-mode-messagewall .wish-card.messagewall-mode .child-name {
    position: static;
    width: 100%;
    max-width: none;
    padding: 0;
    margin-top: 20px;
    color: #fdf7f0;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--hero,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--left-low,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--left-high,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--right-high,
html.display-mode-messagewall .wish-card.messagewall-mode.stage-slot--right-low {
    z-index: auto;
}

html.display-mode-messagewall #wishes-container {
    z-index: 24;
    transform: none !important;
    transform-origin: top left;
}

html.display-mode-messagewall .message-stage__headline {
    top: 214px;
    left: 50%;
    transform: translateX(-50%);
    width: min(84vw, 1360px);
}

html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card {
    opacity: 0.18;
}

html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card.spotlight-active {
    opacity: 1 !important;
    z-index: 80 !important;
    top: 0 !important;
    left: 0 !important;
    transform: translate3d(var(--spotlight-x, 0px), var(--spotlight-y, 0px), 0) scale(1.06) rotate(var(--spotlight-rot, 0deg)) !important;
    filter: drop-shadow(0 0 34px rgba(255, 184, 150, 0.48));
}

html.display-mode-messagewall .wish-card.messagewall-mode.card-entering,
html.display-mode-messagewall .wish-card.messagewall-mode.new-wish-highlight {
    animation: messageWallPulse 2.2s ease;
}

@keyframes messageWallPulse {
    0% {
        opacity: 0;
        filter: drop-shadow(0 0 0 rgba(255, 144, 176, 0));
    }
    30% {
        opacity: 1;
    }
    60% {
        filter: drop-shadow(0 0 24px rgba(255, 144, 176, 0.34));
    }
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 0 rgba(255, 144, 176, 0));
    }
}

html.display-mode-messagewall .message-stage {
    z-index: 34;
}

html.display-mode-messagewall .message-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 108px;
    width: 1080px;
    height: 320px;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at center, rgba(7, 10, 22, 0.82) 0%, rgba(7, 10, 22, 0.58) 42%, rgba(7, 10, 22, 0.06) 78%, transparent 100%),
        linear-gradient(180deg, rgba(7, 10, 22, 0.28) 0%, transparent 100%);
    filter: blur(10px);
    opacity: 0.95;
    pointer-events: none;
}

html.display-mode-messagewall .message-stage__top-logo {
    top: 28px;
    left: 34px;
    width: clamp(240px, 14vw, 292px);
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.34));
}

html.display-mode-messagewall .message-stage__headline {
    top: 152px;
    width: min(76vw, 1080px);
    z-index: 3;
}

html.display-mode-messagewall .message-stage__headline-prefix {
    margin-bottom: 8px;
    font-size: clamp(15px, 1.3vw, 24px);
    letter-spacing: clamp(3px, 0.35vw, 6px);
}

html.display-mode-messagewall .message-stage__headline-text {
    font-size: clamp(38px, 4vw, 74px);
    line-height: 0.98;
    letter-spacing: 0.035em;
}

html.display-mode-messagewall .message-stage__bottom-logo {
    left: 40px;
    bottom: 28px;
    width: clamp(116px, 8vw, 156px);
    opacity: 0.92;
}

html.display-mode-messagewall #wishes-container {
    z-index: 18;
}

html.display-mode-messagewall .wish-card.messagewall-mode {
    will-change: transform, opacity;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell {
    padding: 18px 18px 56px;
    border-width: 8px;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell::after {
    left: 32px;
    bottom: -32px;
    width: 34px;
    height: 44px;
}

html.display-mode-messagewall .wish-card.messagewall-mode .wish-text {
    font-size: 16px;
    line-height: 1.22;
    -webkit-line-clamp: 4;
}

html.display-mode-messagewall .wish-card.messagewall-mode .child-name {
    margin-top: 16px;
    font-size: 14px;
    letter-spacing: 0.7px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.is-background-layer {
    z-index: 12;
}

html.display-mode-messagewall .wish-card.messagewall-mode.is-background-layer .message-card-shell {
    background: linear-gradient(180deg, rgba(10, 12, 24, 0.5) 0%, rgba(10, 15, 30, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

html.display-mode-messagewall .wish-card.messagewall-mode.is-background-layer .wish-text,
html.display-mode-messagewall .wish-card.messagewall-mode.is-background-layer .child-name {
    color: rgba(255, 249, 242, 0.72);
}

html.display-mode-messagewall .wish-card.messagewall-mode.is-foreground-layer {
    z-index: 22;
}

html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card {
    opacity: 0.12;
}

html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card.spotlight-active {
    opacity: 1 !important;
    z-index: 88 !important;
}

html.display-mode-messagewall .message-stage::before {
    top: 74px;
    width: 980px;
    height: 240px;
    background:
        radial-gradient(circle at center, rgba(7, 10, 22, 0.94) 0%, rgba(7, 10, 22, 0.76) 44%, rgba(7, 10, 22, 0.18) 82%, transparent 100%);
}

html.display-mode-messagewall .message-stage::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    background:
        linear-gradient(180deg, rgba(4, 7, 18, 0.9) 0%, rgba(4, 7, 18, 0.68) 38%, rgba(4, 7, 18, 0.18) 82%, transparent 100%);
    pointer-events: none;
}

html.display-mode-messagewall .message-stage__top-logo {
    top: 18px;
    left: 24px;
    width: 236px;
}

html.display-mode-messagewall .message-stage__headline {
    top: 104px;
    width: min(68vw, 900px);
}

html.display-mode-messagewall .message-stage__headline-prefix {
    margin-bottom: 6px;
    font-size: clamp(14px, 1.05vw, 20px);
    letter-spacing: clamp(2px, 0.28vw, 5px);
}

html.display-mode-messagewall .message-stage__headline-text {
    font-size: clamp(34px, 3.55vw, 62px);
    line-height: 0.96;
}

html.display-mode-messagewall .message-stage__bottom-logo {
    left: 28px;
    bottom: 18px;
    width: 124px;
}

html.display-mode-messagewall #wishes-container {
    z-index: 15;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell {
    padding: 20px 18px 58px;
    border-width: 8px;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell::after {
    left: 30px;
    bottom: -34px;
    width: 34px;
    height: 44px;
}

html.display-mode-messagewall .wish-card.messagewall-mode .wish-text {
    font-size: 17px;
    line-height: 1.18;
    -webkit-line-clamp: 4;
}

html.display-mode-messagewall .wish-card.messagewall-mode .child-name {
    margin-top: 14px;
    font-size: 14px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.is-background-layer {
    display: none !important;
}

html.display-mode-messagewall {
    background: #050817 !important;
}

html.display-mode-messagewall .display-container {
    background: #050817 url('/images/marka-stage-background.png') center center / 100% 100% no-repeat !important;
}

html.display-mode-messagewall .display-container::before,
html.display-mode-messagewall .display-container::after,
html.display-mode-messagewall .message-stage,
html.display-mode-messagewall .message-stage::before,
html.display-mode-messagewall .message-stage::after,
html.display-mode-messagewall .logos-top-bar,
html.display-mode-messagewall .header-title-box,
html.display-mode-messagewall .moon,
html.display-mode-messagewall .sparkle-star,
html.display-mode-messagewall #embers-container,
html.display-mode-messagewall .message-stage__top-logo,
html.display-mode-messagewall .message-stage__headline,
html.display-mode-messagewall .message-stage__bottom-logo {
    display: none !important;
}

html.display-mode-messagewall #spotlight-overlay,
html.display-mode-messagewall #spotlight-label {
    display: none !important;
}

html.display-mode-messagewall #wishes-container {
    z-index: 22 !important;
    pointer-events: none;
}

html.display-mode-messagewall #empty-state {
    z-index: 30;
}

html.display-mode-messagewall #empty-state .empty-text,
html.display-mode-messagewall #empty-state .empty-sub {
    font-family: 'Centrale Sans', 'Nunito', sans-serif;
}

html.display-mode-messagewall .wish-card.messagewall-mode {
    position: absolute;
    width: var(--message-card-width) !important;
    height: var(--message-card-height) !important;
    z-index: var(--message-card-z, 40);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity, filter;
    transform-origin: top left;
    filter: blur(var(--messagewall-blur, 0px)) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
}

html.display-mode-messagewall .wish-card.messagewall-mode.card-entering,
html.display-mode-messagewall .wish-card.messagewall-mode.new-wish-highlight,
html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card,
html.display-mode-messagewall #wishes-container.spotlight-mode .wish-card.spotlight-active {
    animation: none !important;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: var(--message-frame-image) center center / 100% 100% no-repeat !important;
    box-shadow: none !important;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-shell::after {
    display: none !important;
    content: none !important;
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-fill {
    position: absolute;
    inset: var(--message-fill-top) var(--message-fill-right) var(--message-fill-bottom) var(--message-fill-left);
    background: linear-gradient(180deg, rgba(8, 11, 24, 0.96) 0%, rgba(10, 14, 28, 0.92) 100%);
}

html.display-mode-messagewall .wish-card.messagewall-mode .message-card-content {
    position: absolute;
    inset: var(--message-fill-top) var(--message-fill-right) var(--message-fill-bottom) var(--message-fill-left);
    display: block;
    overflow: hidden;
}

html.display-mode-messagewall .wish-card.messagewall-mode .wish-text,
html.display-mode-messagewall .wish-card.messagewall-mode .child-name {
    position: absolute !important;
    inset: auto;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    text-align: left;
}

html.display-mode-messagewall .wish-card.messagewall-mode .wish-text {
    color: #fbf7f0;
    font-family: 'Centrale Sans', 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.16;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html.display-mode-messagewall .wish-card.messagewall-mode .child-name {
    color: #fff6ef;
    font-family: 'Arame', 'Centrale Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.028em;
    text-transform: uppercase;
}

html.display-mode-messagewall .wish-card.messagewall-mode.messagewall-slot--small {
    --message-frame-image: url('/images/marka-frame-small.png');
    --message-fill-top: 18px;
    --message-fill-right: 18px;
    --message-fill-bottom: 46px;
    --message-fill-left: 18px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.messagewall-slot--small .wish-text {
    top: 8px;
    left: 8px;
    width: 120px !important;
    max-width: 120px !important;
    max-height: 142px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.messagewall-slot--small .child-name {
    left: 8px;
    right: auto;
    bottom: 10px;
    width: 132px !important;
    max-width: 132px !important;
    font-size: 15px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.messagewall-slot--hero {
    --message-frame-image: url('/images/marka-frame-large.png');
    --message-fill-top: 58px;
    --message-fill-right: 32px;
    --message-fill-bottom: 74px;
    --message-fill-left: 38px;
}

html.display-mode-messagewall .wish-card.messagewall-mode.messagewall-slot--hero .wish-text {
    top: 12px;
    left: 12px;
    width: 178px !important;
    max-width: 178px !important;
    max-height: 188px;
    font-size: 25px;
    line-height: 1.06;
    -webkit-line-clamp: 6;
}

html.display-mode-messagewall .wish-card.messagewall-mode.messagewall-slot--hero .child-name {
    left: 12px;
    right: auto;
    bottom: 14px;
    width: 204px !important;
    max-width: 204px !important;
    font-size: 20px;
    letter-spacing: 0.028em;
}