/* Clean Minimal 2025 Design — Club Lotto participant play flow.
   HTMX-loaded into the club hub's Lotto tab (public page → flat BLUE --accent, NOT org-context teal).
   Tokens only (tokens.css); identity colour never on interactive states; flat, mobile-first.
   Two Alpine steps: choose your ticket → play (numbers).

   NB: every <button> rule is scoped under .c-lotto on purpose. The legacy main-bundled.css styles
   `button[type="button"]` (specificity 0,1,1: transparent bg, primary-600 text), which would beat a
   single-class rule and turn our filled/card buttons into ghost links. Scoping under .c-lotto raises
   specificity to (0,2,0) so our styles win — the same approach _c-org-profile-page.css uses for tabs. */

.c-lotto {
    max-width: 30rem;
    /* Reclaim most of the hub's top chrome (shared .c-hub-nav margin-bottom + .c-hub-body padding-top
       stack to ~44px above every panel). On the lotto tab the content starts with a small "Change
       ticket" link / eyebrow, so that gap reads as wasted space — the clean reference sits tight to
       the tabs. Scoped to .c-lotto (only ever this fragment) so the other hub tabs are untouched. */
    margin: -1.5rem auto 0;
}

/* ===== heading row: section title on the left, the Share control on the right =====
   Replaces the old eyebrow and the hub's separate "Club lotto" share row. share()/nativeShare
   resolve up to the hub's Alpine scope (this fragment is nested inside it); the button is scoped
   under .c-lotto so it beats the global button[type=...] reset (0,2,0 > 0,1,1), same as the deal
   and frequency buttons below. */
.c-lotto__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.c-lotto .c-lotto__share-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--accent);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.85rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.c-lotto .c-lotto__share-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    /* Pin the accent text on hover: the global button[type="button"]:hover (0,2,1) would win. */
    color: var(--accent);
}

/* ===== opening-soon (heading row above, body text in a soft panel) ===== */
.c-lotto__soon {
    background: var(--accent-soft);
    border-radius: var(--r-md);
    padding: 1.25rem;
    margin-top: 0.75rem;
}
.c-lotto__soon-text {
    font-size: 0.92rem;
    color: var(--body);
    margin: 0;
}

/* ===== step headings ===== */
.c-lotto__h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}
.c-lotto__lead {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 1.25rem;
}

/* ===== step-1 jackpot hero (the expected prize, surfaced on the first screen, not just step 2) ===== */
/* Prize block: the label sits on its own line; then the amount (left) and the draw
   date/time + Share (right) share one baseline-aligned row. The label is out of the
   amount's horizontal track so it never wraps, and the row stays balanced at every
   width (reference lotto-entry frame). */
.c-lotto__prizerow {
    margin: 0 0 1.5rem;
}
.c-lotto__jackpot-label {
    display: block;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.c-lotto__jackpot-amount {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-4xl);
    line-height: 1;
    color: var(--ink);
    margin-top: 2px;
}
.c-lotto__jackpot-amount--building {
    font-size: var(--font-size-2xl);
    color: var(--accent);
}

/* Meta line under the jackpot: draw date/time (left) and the Share link (right). */
.c-lotto__prizemeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}
.c-lotto__drawmeta {
    font-size: var(--font-size-sm);
    color: var(--body);
    line-height: 1.4;
    margin: 0;
}
.c-lotto__drawmeta strong {
    color: var(--ink);
    font-weight: 600;
}
/* Share is a plain text link (navy + 3-circle glyph), never a bordered button (reference).
   Scoped under .c-lotto to beat the global button[type=...] reset. */
.c-lotto .c-lotto__share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.c-lotto .c-lotto__share:hover {
    color: var(--accent-strong);
}

/* Inline fine print (e.g. "prepaid runs are non-refundable") shown as a prepaid run is picked. */
.c-lotto__finehint {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 1rem;
}

/* ===== deal cards ===== */
.c-lotto-deals {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}
.c-lotto .c-lotto-deal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1rem 1.125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    /* The organiser setup page reuses .c-lotto-deal__* with its own flex-wrap + order rules
       (deal editor) and, bundled later, those unscoped rules leak onto these play cards and wrap
       them on narrow screens (best-value pill jammed left, price dropped to its own line). Keep
       the play card a single tidy row; the .c-lotto scope below re-asserts source order without
       touching the setup page (which roots at .c-lotto-setup, never .c-lotto). */
    flex-wrap: nowrap;
}
.c-lotto .c-lotto-deal:hover {
    border-color: var(--accent);
}
.c-lotto .c-lotto-deal.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.c-lotto-deal__radio {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.c-lotto-deal__radio svg {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0;
}
.c-lotto-deal.is-selected .c-lotto-deal__radio {
    background: var(--accent);
    border-color: var(--accent);
}
.c-lotto-deal.is-selected .c-lotto-deal__radio svg {
    opacity: 1;
}
.c-lotto-deal__main {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    margin-right: auto;
}
.c-lotto-deal__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--ink);
}
.c-lotto-deal__save {
    font-size: 0.82rem;
    color: var(--muted);
}
.c-lotto-deal__price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--ink);
    flex: none;
}
/* Neutralise the setup page's leaked deal-editor order/flex rules on the play cards (see the
   flex-wrap note above): natural source order — radio, label, pill, price — with the label growing
   to push the pill + price to the right edge. Scoped to .c-lotto so the setup page is untouched. */
.c-lotto .c-lotto-deal__main {
    order: 0;
    flex: 1 1 auto;
}
.c-lotto .c-lotto-deal__price {
    order: 0;
}

/* neutral promo pill — never accent (accent means interaction), never peach */
.c-lotto-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* ===== toggles (auto-renew, buying for someone else) ===== */
.c-lotto .c-lotto-toggle {
    display: flex;
    align-items: flex-start;
    /* Override the legacy global button{justify-content:center}, which otherwise centres the
       track+text group and misaligns toggles with short content. */
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.875rem 1rem;
    margin-bottom: 0.625rem;
    cursor: pointer;
}
.c-lotto-toggle__track {
    width: 2.6rem;
    height: 1.5rem;
    flex: none;
    border-radius: 100px;
    background: var(--line);
    position: relative;
    transition: background-color 0.15s ease;
    margin-top: 0.1rem;
}
.c-lotto-toggle__thumb {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}
.c-lotto-toggle.is-on .c-lotto-toggle__track {
    background: var(--accent);
}
.c-lotto-toggle.is-on .c-lotto-toggle__thumb {
    transform: translateX(1.1rem);
}
.c-lotto-toggle__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.c-lotto-toggle__label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--ink);
}
.c-lotto-toggle__hint {
    font-size: var(--font-size-xs);
    color: var(--muted);
}

/* ===== "playing for someone else" name field (revealed when the toggle is on) =====
   NB: named c-lotto-beneficiary, NOT c-lotto-recipient - the setup page already owns c-lotto-recipient
   for its report-email rows, and that class would otherwise collide and leak styles both ways. */
.c-lotto-beneficiary {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: -0.25rem 0 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.c-lotto-beneficiary__label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}
.c-lotto-beneficiary__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.c-lotto-beneficiary__input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.c-lotto-beneficiary__input.is-error {
    border-color: #dc2626;
}
.c-lotto-beneficiary__hint {
    font-size: 0.8rem;
    color: var(--muted);
}
.c-lotto-beneficiary__error {
    font-size: 0.8rem;
    color: #dc2626;
}

/* ===== play-frequency selector (recurring vs one-time; active choice, never pre-ticked) =====
   Full-width stacked cards (matching the deal ladder rhythm in this 30rem panel, no cramped
   side-by-side). Recurring leads and is visually dominant; one-time sits below, quieter but
   equal-clickable. Flat accent only (identity colour never touches it), no gradient. */
.c-lotto-freq {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.c-lotto-freq__prompt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--ink);
}
.c-lotto .c-lotto-freq__card {
    display: flex;
    align-items: flex-start;
    /* Override the legacy global button{justify-content:center}, which would centre the content. */
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1rem 1.125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.c-lotto .c-lotto-freq__card:hover {
    border-color: var(--accent);
}
.c-lotto .c-lotto-freq__card.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
/* The recommended card carries a standing accent hairline so it reads as dominant before any pick,
   without being pre-selected. */
.c-lotto .c-lotto-freq__card--renew {
    border-color: var(--accent);
}
.c-lotto-freq__radio {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 0.1rem;
}
.c-lotto-freq__radio svg {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0;
}
.c-lotto-freq__card.is-selected .c-lotto-freq__radio {
    background: var(--accent);
    border-color: var(--accent);
}
.c-lotto-freq__card.is-selected .c-lotto-freq__radio svg {
    opacity: 1;
}
.c-lotto-freq__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    line-height: 1.3;
}
.c-lotto-freq__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.c-lotto-freq__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--ink);
}
/* The "Recommended" badge inherits the neutral c-lotto-pill (grey), matching its sibling deal pills
   (best value / popular). The card's standing accent border already marks it as the recommended
   choice, so the accent stays reserved for interaction (selected state), never an identity pill. */
.c-lotto-freq__sub {
    font-size: var(--font-size-xs);
    color: var(--muted);
}
.c-lotto-freq__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.c-lotto-freq__benefits li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--body);
}
.c-lotto-freq__benefits svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    color: var(--accent);
}
/* Disclosure inside the recurring card: a hairline-separated note so it reads on both the white
   (unselected) and accent-soft (selected) card background. */
.c-lotto-freq__note {
    font-size: var(--font-size-xs);
    line-height: 1.45;
    color: var(--body);
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
}

/* ===== buttons ===== */
.c-lotto .c-lotto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    border-radius: var(--r-md);
    padding: 0.95rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
/* The lotto entry's Continue/pay action IS the single red conversion button on the
   page (reference lotto-entry frame). */
.c-lotto .c-lotto-btn--primary {
    background: var(--red);
    color: var(--red-ink);
}
.c-lotto .c-lotto-btn--primary:hover {
    background: var(--red-strong);
    /* Pin the label colour on hover: the legacy global button[type="button"]:hover
       (specificity 0,0,2,1) sets color:var(--color-primary-700) and would otherwise
       beat the base scoped rule (0,0,2,0). */
    color: var(--red-ink);
}
.c-lotto .c-lotto-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ===== step 2: play ===== */
/* Back link + cause pill share one row: space-between so they never collide, wrapping to two
   lines on a narrow screen (pill drops below the link) instead of overlapping. */
.c-lotto-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}
.c-lotto .c-lotto__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.c-lotto__back svg {
    width: 1.05rem;
    height: 1.05rem;
}
.c-lotto-jackpot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0.25rem 0 1.125rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.125rem;
}
.c-lotto-jackpot__col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.c-lotto-jackpot__col--end {
    text-align: right;
}
.c-lotto-jackpot__label {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.c-lotto-jackpot__amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-4xl);
    line-height: 1;
    color: var(--ink);
}
.c-lotto-jackpot__amount--building {
    font-size: 1.6rem;
    color: var(--accent);
}
.c-lotto-jackpot__close {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--ink);
}

.c-lotto-pick {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
/* Left group: the pick instruction + the live progress pill sit together, so the
   Quick pick action gets the right side to itself (was cramped three-across). */
.c-lotto-pick__status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
/* "Pick 4 from 30" reads as one weight + one colour (muted), at the same small size (sm/14px) as the
   draw line above it — the reference keeps this whole meta block quiet, not competing with the balls. */
.c-lotto-pick__prompt {
    font-size: var(--font-size-sm);
    color: var(--muted);
}
/* Counter demoted to a plain inline figure — no pill chrome, same small size as the prompt.
   Neutral (--muted) while incomplete, --accent (navy) once all picks are in, mirroring the
   "selected" convention. NOT --red: red is reserved for the single conversion CTA and is never a
   status figure (design-system non-negotiable), and two reds on one screen dilute the CTA. */
.c-lotto-pick__counter {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--muted);
}
.c-lotto-pick__counter.is-done {
    color: var(--accent);
}

/* per-line tabs */
.c-lotto-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.875rem;
}
.c-lotto .c-lotto-lines__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--body);
    cursor: pointer;
}
.c-lotto .c-lotto-lines__tab.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}
.c-lotto .c-lotto-lines__tab.is-done {
    color: var(--accent);
}
.c-lotto-lines__tick {
    width: 0.85rem;
    height: 0.85rem;
}

/* quick pick: a quiet ghost text-button sat with the counter on the right of the pick row.
   Scoped >=2 classes so it beats the legacy global button[type=button] (and :hover) reset that
   would otherwise repaint the accent label dark. */
.c-lotto-pick__right {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}
.c-lotto .c-lotto-quickpick {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.c-lotto .c-lotto-quickpick:hover {
    color: var(--accent-strong);
}
.c-lotto-quickpick__icon {
    width: 0.95rem;
    height: 0.95rem;
}

/* Deterministic number grid: 6-across on mobile (10-across on desktop, see the media query at the
   foot of this file). Fixed columns keep every ball the same diameter — the old auto-fill stretched
   them to inconsistent sizes, which read as messy. Pool-agnostic (varies rows, not ball size). */
.c-lotto-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.c-lotto .c-lotto-num {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 50%;
    /* Faint lift so the white balls read off the warm cream page; selected drops it (flat navy). */
    box-shadow: var(--shadow);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}
.c-lotto .c-lotto-num:hover {
    border-color: var(--accent);
}
.c-lotto .c-lotto-num.is-picked {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--card);
    box-shadow: none;
}

.c-lotto-ready {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.c-lotto-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.875rem;
}
.c-lotto-total__label {
    font-size: 0.95rem;
    color: var(--body);
}
.c-lotto-total__amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
}

/* ===== footer ===== */
.c-lotto__foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    text-align: center;
}
.c-lotto__results {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    cursor: default;
    margin-bottom: 0.75rem;
}
.c-lotto__soonchip {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
}
.c-lotto__compliance {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
}

/* ===== 18+ age-verification modal overlay =====
   The .c-age-verification card itself is globally bundled (06-components/_c-age-verification.css);
   we only need the full-screen backdrop, scoped to the lotto play page (the competition page's
   .entry-modal-overlay isn't loaded on the club hub). Hidden by default; Alpine x-show toggles it. */
.c-lotto-age-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-modal);
    padding: var(--space-4);
    box-sizing: border-box;
}

/* ===== desktop ===== */
/* On desktop the content sits in a wider centred column (reference 640px), which lets the number
   grid run 10-across in tidy rows (a 6-across grid stretched too wide otherwise). Mobile keeps the
   single ~30rem column above. The wider column is shared with step 1, so its deal/frequency cards
   are QA'd at this width too. */
@media (min-width: 48rem) {
    .c-lotto {
        max-width: 40rem;
    }
    .c-lotto-grid {
        grid-template-columns: repeat(10, 1fr);
        gap: 0.625rem;
    }
    .c-lotto .c-lotto-num {
        font-size: var(--font-size-lg);
    }
}