*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CSS variables for theming */
:root {
    --bg-page:        #f5f5f3;
    --bg-card:        #ffffff;
    --bg-chip:        #f5f5f3;
    --text-primary:   #1a1a1a;
    --text-secondary: #666666;
    --text-muted:     #888888;
    --text-faint:     #aaaaaa;
    --border-card:    #e0dfd8;
    --border-row:     #f0efe8;
    --badge-bg:       #E1F5EE;
    --badge-color:    #0F6E56;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page:        #0f0f0f;
        --bg-card:        #1a1a1a;
        --bg-chip:        #242424;
        --text-primary:   #e8e8e6;
        --text-secondary: #999999;
        --text-muted:     #777777;
        --text-faint:     #555555;
        --border-card:    #2a2a2a;
        --border-row:     #222222;
        --badge-bg:       #0a2e22;
        --badge-color:    #4ecda4;
    }
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: system-ui, sans-serif;
    color: var(--text-primary);
    background: var(--bg-page);
    padding: 1.5rem 1rem;
}

.container {
    max-width: 760px;
    margin: 0 auto;
}

.header {
    margin-bottom: 1.5rem;
}

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--badge-bg);
    color: var(--badge-color);
    margin-bottom: 8px;
}

h1 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.3;
    word-break: break-word;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 1.5rem;
}

.summary-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 14px 16px;
    border: 0.5px solid var(--border-card);
    min-width: 0;
}

.summary-card .label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.summary-card .value {
    font-size: 18px;
    font-weight: 500;
    word-break: break-word;
}

.prize-table {
    background: var(--bg-card);
    border-radius: 12px;
    border: 0.5px solid var(--border-card);
    padding: 1rem 1.25rem;
}

.col-headers {
    display: grid;
    grid-template-columns: 130px 1fr 110px;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--border-card);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prize-row {
    display: grid;
    grid-template-columns: 130px 1fr 110px;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--border-row);
}

.prize-row:last-child {
    border-bottom: none;
}

.prize-name {
    font-weight: 500;
    font-size: 14px;
    padding-top: 3px;
}

.ticket-chip {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    background: var(--bg-chip);
    border: 0.5px solid var(--border-card);
    border-radius: 6px;
    padding: 3px 10px;
    margin: 2px 3px 2px 0;
    word-break: break-word;
}

.ticket-location {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.all-series {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.prize-amount {
    font-size: 14px;
    font-weight: 500;
    padding-top: 3px;
    text-align: right;
    white-space: nowrap;
}

/* Two copies of the amount exist in markup: one inline next to
   the prize name (used on mobile), one in the desktop amount
   column (used on desktop). Each breakpoint shows one and hides
   the other, so no JS is needed to reposition it. */
.prize-amount-inline {
    display: none;
}

.disclaimer {
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
    margin-top: 1rem;
}

/* ---------------------------------------------------- */
/* Mobile layout                                          */
/* Below 600px the 3-column prize table becomes a list   */
/* of stacked cards: name + amount on one line, tickets   */
/* below, so chips get full width to wrap freely.        */
/* ---------------------------------------------------- */
@media (max-width: 600px) {
    body {
        padding: 1rem 0.75rem;
    }

    h1 {
        font-size: 19px;
    }

    .meta {
        font-size: 12.5px;
        gap: 8px 14px;
    }

    .summary {
        grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
        gap: 8px;
    }

    .summary-card {
        padding: 10px 12px;
    }

    .summary-card .value {
        font-size: 16px;
    }

    .prize-table {
        padding: 0.875rem 1rem;
        border-radius: 10px;
    }

    /* Column headers become redundant once rows stack
       into cards (each value gets its own implicit label
       via layout position), so hide them on mobile. */
    .col-headers {
        display: none;
    }

    .prize-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 0;
    }

    .prize-name {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding-top: 0;
        font-size: 14px;
    }

    .prize-amount-desktop {
        display: none;
    }

    .prize-amount-inline {
        display: inline-block;
        font-size: 15px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ticket-chip {
        font-size: 12.5px;
        padding: 3px 9px;
    }
}

@media (max-width: 360px) {
    .summary {
        grid-template-columns: 1fr 1fr;
    }
}