/* ====================================================
   SAVE THE DATE – LUXURY CASINO SLOT MACHINE
   Full redesign: curtain, neon, marquee, chrome/brass
   ==================================================== */

/* ---------- CSS CUSTOM PROPERTIES ---------- */
:root {
    /* Palette */
    --bg-deep:       #0a0714;
    --bg-cabinet:    linear-gradient(160deg, #1a1027 0%, #0e0a18 100%);
    --gold:          #d4a843;
    --gold-light:    #f2d98b;
    --gold-dark:     #a07b22;
    --crimson:       #9a1b3a;
    --crimson-glow:  #d4234d;
    --ivory:         #f7f2e8;
    --chrome:        linear-gradient(180deg, #e8e8e8 0%, #999 50%, #e8e8e8 100%);
    --brass:         linear-gradient(135deg, #c9a94e 0%, #f2d98b 40%, #a07b22 100%);
    --felt:          #1a472a;
    --neon-pink:     #ff2d72;
    --neon-blue:     #00c3ff;
    --marquee-red:   #ff1a1a;
    --marquee-amber: #ffaa00;
    /* Shadows */
    --shadow-deep:   0 12px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
    --glow-gold:     0 0 20px rgba(212,168,67,.5), 0 0 60px rgba(212,168,67,.15);
    /* Type */
    --font-display:  'Playfair Display', serif;
    --font-body:     'Cormorant Garamond', serif;
    --font-ui:       'Montserrat', sans-serif;
    /* Sizes */
    --reel-h:        58px;
    --reel-w:        58px;
    --cabinet-radius: 14px;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body.slot-body {
    font-family: var(--font-body);
    background: var(--bg-deep);
    color: var(--ivory);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Canvas for sparkles behind everything */
#sparkle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ====================================================
   CURTAIN OVERLAY
   ==================================================== */
#curtain-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .8s ease;
}
#curtain-overlay.open {
    pointer-events: none;
}

/* Individual curtains */
.curtain {
    position: absolute;
    top: 0;
    width: 52%;
    height: 100%;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,.04) 0px,
            transparent 2px,
            transparent 20px,
            rgba(255,255,255,.04) 22px
        ),
        linear-gradient(90deg,
            #5c0a1e 0%,
            #8b1a3a 15%,
            #b5244e 30%,
            #a01e42 50%,
            #7a1432 70%,
            #5c0a1e 85%,
            #3d0615 100%
        );
    transition: transform 1.5s cubic-bezier(.77,0,.18,1);
    z-index: 1001;
}
.curtain-left {
    left: 0;
    transform: translateX(0);
    border-right: 3px solid rgba(212,168,67,.3);
}
.curtain-right {
    right: 0;
    transform: translateX(0);
    border-left: 3px solid rgba(212,168,67,.3);
}
/* Curtain fold illusion */
.curtain::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 35px,
            rgba(0,0,0,.15) 35px,
            rgba(0,0,0,.25) 50px,
            transparent 50px,
            transparent 85px
        );
    pointer-events: none;
}

/* Open states */
#curtain-overlay.open .curtain-left  { transform: translateX(-105%); }
#curtain-overlay.open .curtain-right { transform: translateX(105%); }
#curtain-overlay.open .curtain-pelmet { transform: translateY(-100%); }
#curtain-overlay.open .rope-system   { opacity: 0; transform: translateY(-30px); }
#curtain-overlay.open .curtain-text  { opacity: 0; transform: translateY(30px); }

/* Pelmet (top valance) */
.curtain-pelmet {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1003;
    background: var(--brass);
    border-bottom: 3px solid var(--gold-dark);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    transition: transform 1.2s cubic-bezier(.77,0,.18,1) .2s;
}
.curtain-pelmet::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background:
        radial-gradient(circle 15px at 15px 0, transparent 14px, var(--gold-dark) 14px, var(--gold-dark) 15px, transparent 15px)
        repeat-x;
    background-size: 30px 20px;
}

/* Golden Rope & Tassel */
.rope-system {
    position: absolute;
    z-index: 1004;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: opacity .5s, transform .5s;
    animation: ropeSwing 3s ease-in-out infinite;
}
@keyframes ropeSwing {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}
.rope-line {
    width: 5px;
    height: 110px;
    background: repeating-linear-gradient(
        0deg,
        #c9a94e 0px,
        #f2d98b 3px,
        #a07b22 6px,
        #c9a94e 9px
    );
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(212,168,67,.4);
}
.rope-tassel {
    width: 30px;
    height: 40px;
    background: linear-gradient(180deg, #c9a94e, #f2d98b 30%, #a07b22 60%, #7a5a10);
    border-radius: 0 0 50% 50%;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.rope-tassel::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 12px;
    background: var(--brass);
    border-radius: 50% 50% 0 0;
}
.rope-glow {
    position: absolute;
    bottom: -10px;
    width: 60px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(212,168,67,.3), transparent 70%);
    filter: blur(4px);
}

/* Curtain center CTA text */
.curtain-text {
    position: absolute;
    bottom: 25%;
    z-index: 1004;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: opacity .5s, transform .5s;
}
.curtain-text span {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(212,168,67,.5);
}
.curtain-cta-icon {
    font-size: 1.6rem;
    animation: ctaBounce 1.2s ease-in-out infinite;
}
@keyframes ctaBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ====================================================
   SLOT CONTAINER
   ==================================================== */
.slot-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    padding: 28px 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease .5s;
}
.slot-container.visible {
    opacity: 1;
}

/* ---------- HEADER ---------- */
.slot-header {
    text-align: center;
    margin-bottom: 18px;
}
.slot-subtitle {
    font-family: var(--font-ui);
    font-size: .65rem;
    letter-spacing: 5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 10px rgba(212,168,67,.3);
}
.slot-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 900;
    background: linear-gradient(180deg, var(--gold-light) 20%, var(--gold) 50%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.slot-instruction {
    font-family: var(--font-ui);
    font-size: .7rem;
    color: rgba(247,242,232,.5);
    letter-spacing: 1px;
}

/* ====================================================
   SLOT MACHINE CABINET
   ==================================================== */
.slot-machine {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin-left: -16px;
}

/* ---------- NEON ARCH SIGN ---------- */
.neon-arch {
    position: relative;
    width: 160px;
    margin: 0 auto 0;
    text-align: center;
    padding: 6px 18px;
    border: 2px solid var(--neon-pink);
    border-bottom: none;
    border-radius: 100px 100px 0 0;
    box-shadow:
        0 0 8px var(--neon-pink),
        0 0 20px rgba(255,45,114,.3),
        inset 0 0 8px rgba(255,45,114,.2);
    background: rgba(255,45,114,.05);
}
.neon-text {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: 3px;
    color: #fff;
    text-shadow:
        0 0 4px #fff,
        0 0 12px var(--neon-pink),
        0 0 30px var(--neon-pink),
        0 0 60px var(--neon-pink);
    animation: neonFlicker 4s ease-in-out infinite;
}
@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    5%       { opacity: .85; }
    6%       { opacity: 1; }
    41%      { opacity: 1; }
    42%      { opacity: .9; }
    43%      { opacity: 1; }
    76%      { opacity: 1; }
    77%      { opacity: .7; }
    78%      { opacity: 1; }
}

/* ---------- MARQUEE FRAME ---------- */
.marquee-frame {
    position: absolute;
    inset: 40px -6px -6px -6px;
    z-index: 1;
    pointer-events: none;
}
.marquee-lights {
    position: absolute;
    display: flex;
}
.marquee-top, .marquee-bottom {
    left: 0;
    right: 0;
    height: 10px;
    flex-direction: row;
    justify-content: space-around;
}
.marquee-top    { top: 0; }
.marquee-bottom { bottom: 0; }
.marquee-left, .marquee-right {
    top: 10px;
    bottom: 10px;
    width: 10px;
    flex-direction: column;
    justify-content: space-around;
}
.marquee-left  { left: 0; }
.marquee-right { right: 0; }

.marquee-bulb {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marquee-red);
    box-shadow: 0 0 4px var(--marquee-red), 0 0 8px rgba(255,26,26,.4);
    transition: background .2s, box-shadow .2s;
}
.marquee-bulb.amber {
    background: var(--marquee-amber);
    box-shadow: 0 0 4px var(--marquee-amber), 0 0 8px rgba(255,170,0,.4);
}
.marquee-bulb.off {
    background: #331111;
    box-shadow: none;
}

/* ---------- CABINET INNER (Gold Bezel) ---------- */
.cabinet-inner {
    position: relative;
    z-index: 2;
    background: var(--bg-cabinet);
    border: 3px solid var(--gold);
    border-radius: var(--cabinet-radius);
    padding: 18px 14px 14px;
    box-shadow:
        var(--shadow-deep),
        var(--glow-gold),
        inset 0 0 30px rgba(0,0,0,.4);
}
/* Gold corner rivets */
.rivet {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.6),
        0 1px 3px rgba(0,0,0,.5);
    z-index: 5;
}
.rivet-tl { top: 8px;  left: 8px; }
.rivet-tr { top: 8px;  right: 8px; }
.rivet-bl { bottom: 8px; left: 8px; }
.rivet-br { bottom: 8px; right: 8px; }

/* ---------- REELS VIEWPORT ---------- */
.reels-viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: var(--reel-h);
    background: #0d0d0d;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(212,168,67,.3);
}

/* Centre win-line */
.win-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    z-index: 6;
    opacity: .4;
}

/* Cylindrical glass overlay */
.reels-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.05) 35%,
            rgba(255,255,255,.04) 50%,
            rgba(0,0,0,.05) 65%,
            rgba(0,0,0,.55) 100%
        );
    z-index: 5;
    pointer-events: none;
}

/* Individual reel container */
.reel-container {
    width: var(--reel-w);
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Reel strip (infinite scroll) */
.reel-strip {
    display: flex;
    flex-direction: column;
    transition: transform 0s;
    will-change: transform;
}
.reel-symbol {
    width: var(--reel-w);
    height: var(--reel-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ivory);
    text-shadow: 0 0 8px rgba(212,168,67,.3);
    flex-shrink: 0;
}
.reel-symbol.final {
    color: var(--gold-light);
    text-shadow: 0 0 12px var(--gold), 0 0 30px rgba(212,168,67,.3);
}

/* Chrome dividers between reels */
.chrome-divider {
    width: 3px;
    height: 100%;
    background: var(--chrome);
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(255,255,255,.15);
}

/* ---------- CABINET BOTTOM LIGHTS ---------- */
.cabinet-bottom {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 10px 0 4px;
}
.light-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px var(--gold), 0 0 14px rgba(212,168,67,.3);
    animation: lightPulse 1.2s ease-in-out infinite alternate;
}
@keyframes lightPulse {
    0%   { opacity: .4; transform: scale(.8); }
    100% { opacity: 1;  transform: scale(1); }
}

/* ====================================================
   LEVER (One-Armed Bandit)
   ==================================================== */
.lever-system {
    position: absolute;
    right: -22px;
    top: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    user-select: none;
    filter: drop-shadow(-2px 4px 8px rgba(0,0,0,.5));
}
.lever-mount {
    width: 14px;
    height: 18px;
    background: var(--brass);
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--gold-dark);
}
.lever-stem {
    width: 6px;
    height: 42px;
    background: var(--chrome);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.2);
    transition: height .3s cubic-bezier(.34,1.56,.64,1);
    transform-origin: top center;
}
.lever-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff4d6d, var(--crimson) 50%, #600018);
    border: 2px solid rgba(255,255,255,.2);
    box-shadow:
        0 0 8px rgba(154,27,58,.6),
        inset 0 -2px 4px rgba(0,0,0,.4),
        inset 0 2px 4px rgba(255,255,255,.3);
    position: relative;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.knob-shine {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 8px;
    height: 6px;
    background: radial-gradient(ellipse, rgba(255,255,255,.6), transparent);
    border-radius: 50%;
}

/* Lever pulled state */
.lever-system.pulled .lever-stem {
    height: 30px;
}
.lever-system.pulled .lever-knob {
    transform: translateY(-10px);
}

/* ====================================================
   ORNAMENT DIVIDER
   ==================================================== */
.ornament-divider {
    margin-top: 14px;
    font-size: .9rem;
    color: var(--gold);
    letter-spacing: 8px;
    text-shadow: 0 0 10px rgba(212,168,67,.3);
    opacity: .6;
}

/* ====================================================
   REVEAL CARD OVERLAY
   ==================================================== */
.reveal-card-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(5,3,10,.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.reveal-card-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
#card-confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 501;
}
.reveal-card {
    position: relative;
    width: 90%;
    max-width: 320px;
    background: linear-gradient(160deg, #1a1028, #100c1c);
    border: 2px solid var(--gold);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(212,168,67,.2),
        0 20px 60px rgba(0,0,0,.5);
    transform: scale(.85) translateY(20px);
    transition: transform .7s cubic-bezier(.34,1.56,.64,1);
    z-index: 502;
}
.reveal-card-overlay.show .reveal-card {
    transform: scale(1) translateY(0);
}
.card-inner {
    position: relative;
    z-index: 503;
    padding: 30px 24px;
    text-align: center;
}
.card-ornament {
    font-size: .9rem;
    color: var(--gold);
    letter-spacing: 10px;
    margin-bottom: 10px;
}
.card-tagline {
    font-family: var(--font-ui);
    font-size: .6rem;
    letter-spacing: 5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.card-couple {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 6px;
}
.card-event-desc {
    font-family: var(--font-body);
    font-size: .75rem;
    color: rgba(247,242,232,.5);
    font-style: italic;
    margin-bottom: 2px;
}
.card-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    font-style: italic;
    color: var(--ivory);
    text-shadow: 0 0 20px rgba(212,168,67,.3);
    margin-bottom: 18px;
}

/* DATE BADGE */
.date-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 18px;
    padding: 10px 14px;
    background: rgba(212,168,67,.08);
    border: 1px solid rgba(212,168,67,.3);
    border-radius: 12px;
    max-width: 220px;
    width: auto;
}
.date-part {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1;
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(212,168,67,.3);
    text-align: center;
    white-space: nowrap;
}
.date-part.day {
    font-size: 1.8rem;
}
.date-part.month {
    font-size: .95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.date-part.year {
    font-size: 1.8rem;
}
.date-divider {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    flex-shrink: 0;
}
.card-location {
    font-family: var(--font-ui);
    font-size: .7rem;
    letter-spacing: 2px;
    color: rgba(247,242,232,.5);
    margin-bottom: 14px;
}
.card-footer-note {
    font-family: var(--font-body);
    font-size: .7rem;
    color: rgba(247,242,232,.35);
    font-style: italic;
    margin-bottom: 18px;
    line-height: 1.4;
}
.calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px 22px;
    border: 1.5px solid var(--gold);
    border-radius: 100px;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    transition: all .3s ease;
}
.calendar-btn:hover {
    background: var(--gold);
    color: var(--bg-deep);
}

/* ====================================================
   WIN ANIMATION (Reels flash)
   ==================================================== */
.reels-viewport.win {
    animation: winFlash .4s ease 3;
}
@keyframes winFlash {
    0%, 100% { box-shadow: inset 0 0 0 rgba(212,168,67,0); }
    50%      { box-shadow: inset 0 0 20px rgba(212,168,67,.5), 0 0 30px rgba(212,168,67,.3); }
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-height: 700px) {
    .slot-header { margin-bottom: 10px; }
    .slot-title { font-size: 1.4rem; }
    :root { --reel-h: 60px; --reel-w: 60px; }
    .neon-arch { width: 170px; }
    .neon-text { font-size: .7rem; }
}
@media (max-width: 350px) {
    .slot-container { padding: 20px 10px 14px; }
    :root { --reel-w: 56px; }
    .lever-system { right: -24px; }
}