:root {
    --navy: #071126;
    --midnight: #101f58;
    --ridge: #326db7;
    --sky: #9bd8ee;
    --peak: #29aee3;
    --sun: #f8c529;
    --snow: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--navy);
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--snow);
    background:
        radial-gradient(circle at 76% 24%, rgba(248, 197, 41, 0.32) 0 9rem, transparent 9.25rem),
        linear-gradient(145deg, rgba(41, 174, 227, 0.34), transparent 34rem),
        linear-gradient(180deg, var(--midnight) 0%, var(--navy) 62%, #030713 100%);
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(140deg, transparent 0 40%, rgba(155, 216, 238, 0.14) 40.1% 46%, transparent 46.1%),
        linear-gradient(220deg, transparent 0 48%, rgba(50, 109, 183, 0.24) 48.1% 55%, transparent 55.1%);
}

.landing {
    display: grid;
    min-height: 100vh;
    padding: 2rem;
    place-items: center;
}

.hero {
    width: min(100%, 52rem);
    text-align: center;
}

.logo {
    display: block;
    width: min(78vw, 27rem);
    height: auto;
    margin: 0 auto 1.6rem;
    filter: drop-shadow(0 1.4rem 2.5rem rgba(0, 0, 0, 0.42));
}

.kicker {
    margin: 0 0 0.65rem;
    color: var(--sky);
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: var(--snow);
    font-size: clamp(2.25rem, 8vw, 5.8rem);
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 0 0.22rem 0 var(--navy), 0 1rem 2.2rem rgba(0, 0, 0, 0.36);
}

.status {
    margin: 1.25rem 0 0;
    color: var(--sun);
    font-size: clamp(1.45rem, 4vw, 3.15rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.season {
    display: inline-block;
    margin: 0.9rem 0 0;
    padding: 0.62rem 1rem;
    border: 0.14rem solid rgba(155, 216, 238, 0.72);
    color: var(--sky);
    font-size: clamp(1rem, 2.5vw, 1.55rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    background: rgba(7, 17, 38, 0.62);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
}

@media (max-width: 520px) {
    .landing {
        padding: 1.25rem;
    }

    .logo {
        width: min(88vw, 22rem);
        margin-bottom: 1.2rem;
    }
}

.lottery-list {
    align-items: start;
}

.winner-table {
    display: grid;
    gap: 0.4rem;
    width: min(100%, 46rem);
    margin: 1.4rem auto 0;
    text-align: left;
}

.winner-row {
    display: grid;
    grid-template-columns: 6.5rem 9rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.72rem 0.85rem;
    border: 0.08rem solid rgba(155, 216, 238, 0.42);
    background: rgba(7, 17, 38, 0.62);
}

.winner-row span {
    color: var(--sky);
    font-weight: 800;
}

.winner-row strong {
    color: var(--snow);
}

@media (max-width: 680px) {
    .winner-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}