body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    color: #0b1220;
    /* Festive background: deep green gradient */
    background: linear-gradient(180deg, #073B2A 0%, #0b5a3f 60%, #063827 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Google Fonts for heading samples */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lobster&family=Playfair+Display:wght@600;700&family=Pacifico&family=Quicksand:wght@500;700&family=Montserrat:wght@600;700&family=Mountains+of+Christmas:wght@400;700&display=swap');

/* Heading sample container */
.h-samples {
    margin-bottom: 16px;
    padding: 6px 0;
    background: transparent;
    border-radius: 0;
    text-align: center;
}

.h-samples .sample {
    display: block;
    margin: 8px 0;
}

.h-samples .sample small {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 0.75rem;
    text-align: center;
}

/* Individual heading styles */
.h-sample-1 {
    font-family: 'Great Vibes', cursive;
    font-size: 2.2rem;
    color: #0b3f2a;
}

.h-sample-2 {
    font-family: 'Lobster', cursive;
    font-size: 2rem;
    color: #b91c1c;
}

.h-sample-3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #0b3f2a;
    font-weight: 700
}

.h-sample-4 {
    font-family: 'Pacifico', cursive;
    font-size: 1.9rem;
    color: #0b3f2a;
}

.h-sample-5 {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.9rem;
    color: #0b3f2a;
    font-weight: 700
}

.h-sample-6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem;
    color: #0b3f2a;
    font-weight: 600
}

.h-sample-moc {
    font-family: 'Mountains of Christmas', cursive;
    font-size: 2.1rem;
    color: #0b3f2a;
}

/* Message shown on login (errors, info) — center and match H1 font */
.message {
    text-align: center;
    font-family: 'Mountains of Christmas', cursive;
    font-size: 1.15rem;
    color: #b91c1c;
    /* keep a visible error color */
    margin: 10px 0 0;
}

/* Banned panel styling: center heading and message */
.banned-panel {
    text-align: center;
    margin-top: 8px;
}

.banned-panel h2 {
    margin: 0 0 6px;
    font-size: 1.4rem;
    color: #b91c1c;
}

/* Utility classes for Mountains of Christmas variants */
.mountains-of-christmas-regular {
    font-family: 'Mountains of Christmas', serif;
    font-weight: 400;
    font-style: normal;
}

.mountains-of-christmas-bold {
    font-family: 'Mountains of Christmas', serif;
    font-weight: 700;
    font-style: normal;
}

/* Snow layer using repeating radial gradients + animation */
.snow {
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: radial-gradient(#ffffff33 1px, transparent 1px), radial-gradient(#ffffff22 1px, transparent 1px);
    background-size: 20px 20px, 40px 40px;
    opacity: 0.9;
    animation: drift 14s linear infinite;
}

@keyframes drift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 1200px 900px, -900px 1400px;
    }
}

main {
    position: relative;
    z-index: 7;
    /* increase card width so longer headings fit, but remain responsive */
    width: min(92vw, 820px);
    max-width: 820px;
    margin: 6vh auto;
    padding: 28px;
    /* Simple warm card background (confetti removed) */
    background: linear-gradient(180deg, #fff7f3 0%, #fffef8 35%, #f7fff8 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.06);
    box-shadow: 0 12px 36px rgba(2, 6, 23, 0.35), inset 0 2px 10px rgba(255, 255, 255, 0.65);
}

/* Card sparkle overlay */
main::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    pointer-events: none;
    z-index: 1;
    width: 1px;
    height: 1px;
    /* many tiny sparkle dots via box-shadow */
    box-shadow:
        12px 10px 2px rgba(255, 255, 255, 0.95),
        64px 18px 2px rgba(255, 255, 255, 0.85),
        180px 28px 3px rgba(255, 255, 255, 0.9),
        120px 64px 2px rgba(255, 255, 255, 0.8),
        320px 40px 3px rgba(255, 255, 255, 0.88),
        400px 12px 2px rgba(255, 255, 255, 0.9),
        80px 120px 3px rgba(255, 255, 255, 0.75),
        240px 96px 2px rgba(255, 255, 255, 0.8),
        16px 160px 3px rgba(255, 255, 255, 0.78),
        360px 140px 2px rgba(255, 255, 255, 0.86),
        280px 180px 3px rgba(255, 255, 255, 0.8),
        460px 200px 2px rgba(255, 255, 255, 0.82);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    opacity: 0.85;
    transform-origin: center;
    animation: sparkle 3600ms linear infinite;
}

main::after {
    /* subtle sheen across the top-left of the card */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 65%);
    border-radius: 10px 10px 0 0;
    mix-blend-mode: screen;
    opacity: 0.9;
    transform: translateY(-6px) rotate(-2deg);
    animation: sheen 4800ms ease-in-out infinite;
}

/* ensure card content sits above sparkles */
main>* {
    position: relative;
    z-index: 3;
}

@keyframes sparkle {
    0% {
        opacity: 0.7;
        transform: scale(1) translateY(0);
    }

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

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

@keyframes sheen {
    0% {
        opacity: 0.75;
        transform: translateY(-6px) rotate(-2deg);
    }

    50% {
        opacity: 0.95;
        transform: translateY(-2px) rotate(-1deg);
    }

    100% {
        opacity: 0.75;
        transform: translateY(-6px) rotate(-2deg);
    }
}

/* Dancing Santa GIF container */
.santa-gif-container {
    text-align: center;
    margin-bottom: 16px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.santa-gif {
    height: 200px;
    width: auto;
    max-width: 100%;
}

h1 {
    margin-top: 0;
    color: #0b3f2a;
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 400;
    text-align: center;
}

label {
    display: block;
    margin-top: 12px;
    font-weight: 600
}

select,
input {
    display: block;
    width: 100%;
    max-width: 200px;
    /* cap width so name/password inputs don't grow beyond this */
    box-sizing: border-box;
    padding: 10px;
    margin: 6px auto;
    border: 1px solid #d7dce6;
    border-radius: 6px;
}

/* Style the name dropdown to be green with white text */
select {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: 1px solid rgba(5, 150, 105, 0.3);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    /* leave space for the default caret */
}

select:focus {
    outline: 3px solid rgba(16, 185, 129, 0.18);
    outline-offset: 2px;
}

/* Option styling — support varies across browsers */
select option {
    /* default option appearance (dark green) */
    background: linear-gradient(180deg, #059669 0%, #047857 100%);
    color: #ffffff;
    background-color: #059669;
}

/* Lighter green for already-claimed options (and disabled ones) */
select option.claimed,
select option[disabled] {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    color: #000000;
    background-color: #34d399;
}

button {
    display: block;
    width: 100%;
    max-width: 200px;
    /* match inputs */
    margin: 16px auto 0;
    padding: 10px 14px;
    /* festive green */
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.18);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(5, 150, 105, 0.22);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(5, 150, 105, 0.16);
}

button:focus {
    outline: 3px solid rgba(16, 185, 129, 0.18);
    outline-offset: 2px;
}

/* Snowflake visuals */
.snow-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -40px;
    transform: translateY(0);
    will-change: transform, opacity;
    background: transparent;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

/* inner element holds the SVG and is rotated independently */
.flake-inner {
    position: absolute;
    inset: 0;
    background: transparent center/contain no-repeat;
    background-size: contain;
    transform-origin: 50% 50%;
}

.flake-inner {
    color: #fff
}

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

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

/* Ground line that flakes will stop against */
.snow-ground {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: #ffffff;
    opacity: 0.95;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
}

/* Keep main content above decorations (declared above) */

.recipient {
    font-size: 1.6rem;
    margin: 8px 0
}

/* Center content on the assigned card (reveal page) */
main .reveal,
main .recipient,
main .note,
main .selfdestruct {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

main .recipient strong {
    display: inline-block;
    font-size: 1.8rem;
    color: #0b3f2a;
}

.note {
    color: #333;
    font-size: 0.9rem
}

/* Falling snow removed per request. */

/* Ensure inputs and selects are above decorative layers */
select,
input,
button {
    position: relative;
    z-index: 8;
}