/* ══════════════════════════════════════════════════════════════════
   FYM Casino — «Le Tirage» (lottery SCREEN)
   2026-07-29 identity pass — the overview as a lodge EVENT.

   Scope: storefront + settlement desk only. lottery-ceremony.css owns
   the cinematic draw. Loaded eagerly by index.html (and defensively at
   runtime by lottery.js _ensureCss), after style.css, so the marquee
   restyles the .lottery-pot base without an index.html edit.

   Reused from style.css ON PURPOSE: the .lottery-pot data-state
   urgency system (calm → soon → urgent → critical → live glow/pulse
   keyframes) — the room still warms up as 21:00 approaches.

   Perf: transform/opacity motion only (plus the inherited style.css
   box-shadow glows on ONE element), no canvas, ~≤40 animated nodes.
   ══════════════════════════════════════════════════════════════════ */

#lottery-screen.active {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 16px;
}
/* The screen is a flex column inside a height-constrained shell; the
   marquee must never be compressed (the old layout let flex shrink
   swallow the countdown entirely). */
#lottery-screen.active > * { flex: 0 0 auto; }

/* ── 1. Header — the house name over the door ──────────────────── */

#lottery-screen .game-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#lottery-screen .lot-title {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
}
#lottery-screen .lot-title-eyebrow {
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}
#lottery-screen .lot-title h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.05;
    margin: 0;
    color: var(--text);
    text-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}
.lot-fair-slot {
    display: inline-flex;
    align-items: center;
}

/* ── 2. The Marquee — pot, clock, podium, seal ─────────────────── */
/* Base card chrome comes from style.css .lottery-pot (radial sheen,
   data-state borders + animations). Here: compaction + new rows. */

#lottery-screen .lottery-pot {
    padding: 12px 14px 10px;
    margin-bottom: 0;
    border-radius: var(--r-3);
}
/* Recessed inner hairline — the carved double-border of the lodge. */
#lottery-screen .lottery-pot::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: calc(var(--r-3) - 3px);
    pointer-events: none;
}

.lot-marquee-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
    white-space: nowrap;
    overflow: hidden;
}
.lot-marquee-eyebrow i {
    flex: 0 1 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent));
}
.lot-marquee-eyebrow i:last-child {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
}

#lottery-screen .pot-amount {
    font-size: clamp(30px, 9.6vw, 40px);
    margin-bottom: 2px;
    transition: transform 200ms cubic-bezier(0.25, 1, 0.32, 1);
    will-change: transform;
}
#lottery-screen .pot-amount.is-bump { transform: scale(1.04); }
#lottery-screen .pot-label {
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.22em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

#lottery-screen .pot-timer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-height: 52px;
}
#lottery-screen .timer-label {
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
}
#lottery-screen .timer-digits {
    font-size: clamp(24px, 7vw, 30px);
}
/* renderTimerDigits() hides the whole digit block at T-0 and the hours
   unit below one hour with the `hidden` ATTRIBUTE. style.css gives
   `.pot-timer .timer-digits` display:flex and `.pot-timer .timer-unit`
   display:inline-flex — author `display` out-ranks the UA `[hidden]`
   rule, so without these the closed clock keeps showing stale digits
   and a bare "H" with no number beside it. */
#lottery-screen .pot-timer .timer-digits[hidden],
#lottery-screen .pot-timer .timer-unit[hidden],
#lottery-screen .pot-timer .timer-sep[hidden] {
    display: none;
}

/* Label crossfade on urgency change — digits never animate. */
.lot-label-out { animation: lot-label-out 120ms ease-out both; }
.lot-label-in  { animation: lot-label-in  120ms ease-out both; }
@keyframes lot-label-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes lot-label-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 2b. Prize podium — 2nd · 1ST (raised) · 3rd ───────────────── */

.lot-podium {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: end;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lot-podium-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    padding: 4px 2px 2px;
}
.lot-podium-tier .lot-medal-svg {
    width: 26px;
    height: 26px;
    color: color-mix(in srgb, var(--accent) 62%, var(--muted));
}
.lot-podium-amt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
    color: color-mix(in srgb, var(--accent) 75%, var(--text));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lot-podium-sub {
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--faint);
    white-space: nowrap;
}
/* The first prize is the tallest thing on the podium. */
.lot-podium-tier.is-t1 {
    padding-bottom: 6px;
    border-inline: 1px solid rgba(255, 255, 255, 0.05);
}
.lot-podium-tier.is-t1 .lot-medal-svg {
    width: 38px;
    height: 38px;
    color: var(--accent);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 35%, transparent));
}
.lot-podium-tier.is-t1 .lot-podium-amt {
    font-size: 19px;
    color: var(--accent-hi, #f2ca50);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lot-podium-tier.is-t1 .lot-podium-sub { color: var(--muted); }

.lot-rollover-note {
    margin-top: 6px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 10.5px;
    color: var(--warn);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lot-rollover-note[hidden] { display: none; }

/* ── 2c. The seal line — honest fairness, in the room ──────────── */

.lot-fair-line {
    margin: 8px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-height: 24px;
    padding: 2px 10px;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 0.05em;
    color: var(--faint);
    cursor: pointer;
}
.lot-fair-line[hidden] { display: none; }
.lot-fair-line svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: color-mix(in srgb, var(--accent) 60%, var(--faint));
}
.lot-fair-line span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lot-fair-line:active { color: var(--muted); }

/* ── 3. Stat strip ─────────────────────────────────────────────── */

.lot-strip {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    border-block: var(--border-default);
    border-inline: 0;
    overflow: hidden;
    white-space: nowrap;
}
.lot-strip b {
    color: var(--accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.lot-strip .lot-strip-sep { color: var(--faint-deco); }

/* ── 4. The Billetterie — buy cockpit as a guichet ─────────────── */

.lot-buy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 10px;
    border: var(--border-default);
    border-radius: var(--r-3);
    background:
        radial-gradient(120% 80% at 50% -20%,
            color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
        var(--surface);
    position: relative;
}
/* Brass counter edge along the top of the guichet. */
.lot-buy::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--r-3) var(--r-3) 0 0;
    background: linear-gradient(90deg,
        transparent 4%,
        color-mix(in srgb, var(--accent) 55%, transparent) 30%,
        color-mix(in srgb, var(--accent-hi) 70%, transparent) 50%,
        color-mix(in srgb, var(--accent) 55%, transparent) 70%,
        transparent 96%);
    pointer-events: none;
}
.lot-buy .fym-ck-chips {
    display: flex;
    gap: 6px;
    height: 40px;
}
.lot-buy .fym-ck-chip {
    flex: 1 1 0;
    min-width: 40px;
    height: 40px;
    border: var(--border-default);
    border-radius: var(--r-3);
    background: var(--raised);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease;
}
.lot-buy .fym-ck-chip:active,
.lot-buy .fym-ck-chip.is-hot {
    border-color: var(--accent);
    transform: scale(0.97);
}
.lot-buy .fym-ck-chip.fym-ck-max { color: var(--accent); }
.lot-buy .fym-ck-chip.fym-ck-repeat { color: var(--accent); }

.lot-buy .fym-ck-betrow {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
}
.lot-buy .fym-ck-adj {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: var(--border-default);
    border-radius: var(--r-3);
    background: var(--raised);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lot-buy .fym-ck-adj:active { border-color: var(--accent); }
.lot-buy .fym-ck-input {
    width: 68px;
    height: 44px;
    flex: 0 0 68px;
    text-align: center;
    border: var(--border-default);
    border-radius: var(--r-3);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 800;
}
.lot-cost {
    flex: 1 1 auto;
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.25;
    min-width: 0;
}
.lot-cost b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.lot-cost.is-blocked {
    font-size: 11px;
    color: var(--loss);
}

.lot-buy .fym-ck-cta {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--r-3);
    background: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, color-mix(in srgb, var(--accent) 78%, #6d5220));
    color: #17130a;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform 120ms ease;
}
.lot-buy .fym-ck-cta:active { transform: scale(0.985); }
/* The blocked CTA keeps its click so it can answer with lotBuyError —
   it signals state through aria-disabled, not the disabled attribute
   (which would swallow the tap entirely). */
.lot-buy .fym-ck-cta:disabled,
.lot-buy .fym-ck-cta[aria-disabled="true"] {
    background: var(--raised);
    color: var(--faint);
    cursor: not-allowed;
    box-shadow: none;
}
.lot-buy .fym-ck-cta svg { width: 16px; height: 16px; }

/* ── 5. Section heads ──────────────────────────────────────────── */

.lot-section-head {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lot-section-head.is-pulse { transform: scale(1.06); }
.lot-section-head svg { width: 16px; height: 16px; color: var(--accent); }
.lot-section-head::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    margin-left: 4px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 25%, transparent), transparent);
}
.lot-section-head .lot-section-count {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 11px;
    color: var(--faint);
    order: 3;
}

/* ── 6. The ticket wall — tickets as OBJECTS ───────────────────── */

#lottery-my-tickets-list {
    contain: content;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.lot-ticket {
    position: relative;
    display: flex;
    min-height: 88px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--r-2);
    background:
        radial-gradient(120% 90% at 30% 0%,
            color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
        linear-gradient(160deg, #1a1610 0%, #12100a 60%, #0c0a07 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 14px -8px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
/* Punched notches at the stub line (transparent holes via mask would
   cost a rule per corner — a radial "shadow hole" reads the same). */
.lot-ticket::before,
.lot-ticket::after {
    content: '';
    position: absolute;
    left: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    transform: translateX(-50%);
    z-index: 1;
}
.lot-ticket::before { top: -6px; }
.lot-ticket::after  { bottom: -6px; }

.lot-ticket-stub {
    flex: 0 0 24px;
    border-right: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lot-ticket-stub span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--faint-deco);
    white-space: nowrap;
}
.lot-ticket-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 6px;
    text-align: center;
}
.lot-ticket-marque { display: flex; }
.lot-ticket-marque svg {
    width: 44px;
    height: 30px;
    color: color-mix(in srgb, var(--accent) 55%, var(--faint-deco));
}
.lot-ticket-serial {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--text);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lot-ticket-state {
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
    white-space: nowrap;
}
.lot-ticket-win {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-hi, #f2ca50);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lot-ticket-luck {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 10px;
    color: var(--faint);
}

/* Won — the ticket turns to gold. */
.lot-ticket.is-won {
    border-color: color-mix(in srgb, var(--accent) 80%, var(--border));
    background:
        radial-gradient(120% 90% at 30% 0%,
            color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
        linear-gradient(160deg, #241c0d 0%, #171208 60%, #0e0b06 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.lot-ticket.is-won .lot-ticket-state { color: var(--accent); }
.lot-ticket.is-won .lot-ticket-marque svg { color: var(--accent); }
.lot-ticket.is-won.is-fresh .lot-ticket-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
        transparent 40%,
        color-mix(in srgb, var(--accent) 40%, transparent) 50%,
        transparent 60%);
    background-size: 250% 250%;
    animation: lot-shimmer 1.8s ease-in-out 2;
    pointer-events: none;
}
.lot-ticket.is-won .lot-ticket-body { position: static; }

/* Lost — dignified dim, never mocking. */
.lot-ticket.is-lost {
    opacity: 0.55;
    border-color: var(--border);
    color: var(--faint);
}
.lot-ticket.is-lost .lot-ticket-state { color: var(--faint); letter-spacing: 0.3em; }
.lot-ticket.is-lost .lot-ticket-serial { color: var(--muted); }
.lot-ticket.is-lost .lot-ticket-marque svg { color: var(--faint-deco); }

@keyframes lot-shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}

/* Empty wall — a quiet invitation, not a shrug. */
.lot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 12px;
    border: 1px dashed color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: var(--r-3);
    text-align: center;
}
.lot-empty-marque svg {
    width: 52px;
    height: 36px;
    color: var(--faint-deco);
}
.lot-empty p {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--muted);
}
.lot-empty .lot-empty-sub {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 11px;
    color: var(--faint);
    max-width: 30ch;
}

.lot-show-all,
.lot-more-chip {
    grid-column: 1 / -1;
    min-height: 36px;
    border: 1px dashed var(--border);
    border-radius: var(--r-3);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}
.no-draws-msg {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--faint);
    padding: 10px 2px;
}

/* ── 7. Past Draws — the ledger ────────────────────────────────── */

#lottery-history-list { contain: content; }
.draw-entry {
    border: var(--border-default);
    border-radius: var(--r-2);
    margin-bottom: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.draw-entry.is-yours { border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); }
.draw-header {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
}
.draw-header-left,
.draw-header-right {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
/* A jackpot row carries date + pool + ROLLOVER + YOU, which at 375px
   is wider than the header — the badges used to ride straight over
   the winners preview. The left group wraps instead (nothing is worth
   dropping there), and the preview is the one thing allowed to
   ellipsize, since the chevron already says "there is more inside". */
.draw-header-left {
    flex: 1 1 auto;
    flex-wrap: wrap;
    row-gap: 4px;
}
.draw-header-right { flex: 0 0 auto; }
.draw-date-badge {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}
.draw-pool {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.draw-pool.is-jackpot {
    font-family: var(--font-display);
    font-size: 16px;
}
.draw-rollover-tag {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
    border-radius: var(--r-1);
    padding: 1px 4px;
    white-space: nowrap;
}
.draw-you-badge {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #17130a;
    background: var(--accent);
    border-radius: var(--r-1);
    padding: 1px 5px;
    white-space: nowrap;
}
.draw-winners-preview {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 96px;
    font-size: 11px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.draw-chevron {
    font-size: 10px;
    color: var(--faint);
    transition: transform 200ms ease-out;
}
.draw-entry.is-open .draw-chevron { transform: rotate(180deg); }

.draw-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 220ms cubic-bezier(0.25, 0.8, 0.35, 1),
                opacity 120ms ease-out 100ms;
}
.draw-entry.is-open .draw-detail { opacity: 1; }
.draw-detail-inner { padding: 0 10px 10px; }
.draw-winner-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 5px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.draw-winner-tier {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.draw-winner-row.tier-1 .draw-winner-tier { color: var(--accent); }
.draw-winner-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12.5px;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.draw-winner-amount {
    margin-left: auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}
.draw-your-line {
    font-size: 11px;
    color: var(--muted);
    padding: 6px 0 0;
}
.draw-no-winners {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    color: var(--faint);
    padding: 6px 0;
}
.draw-fair-line {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    color: var(--faint);
    padding-top: 7px;
}
.draw-fair-line svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    color: color-mix(in srgb, var(--accent) 55%, var(--faint));
}
.draw-fair-line span {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.draw-entry.is-shimmer .draw-detail-inner {
    background: linear-gradient(45deg,
        transparent 40%,
        color-mix(in srgb, var(--accent) 22%, transparent) 50%,
        transparent 60%);
    background-size: 250% 250%;
    animation: lot-shimmer 1.8s ease-in-out 1;
}

/* ── 8. Live-window hold card ──────────────────────────────────── */
/* Base overlay from style.css (.lottery-drawing-overlay) — retinted
   from casino-red panic to lodge walnut-and-brass patience. */

#lottery-drawing-overlay {
    background:
        radial-gradient(ellipse 90% 55% at 50% 30%,
            rgba(46, 34, 12, 0.92) 0%, rgba(10, 8, 5, 0.97) 60%, rgba(0, 0, 0, 0.99) 100%);
    padding-top: max(24px, var(--tg-content-safe-area-inset-top, 0px));
    gap: 14px;
    justify-content: center;
}
#lottery-drawing-overlay .lottery-drawing-eyebrow {
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
    letter-spacing: 0.3em;
}
#lottery-drawing-overlay .lottery-drawing-title {
    font-style: italic;
    font-size: clamp(26px, 7vw, 40px);
    animation: none;
    max-width: 22ch;
    color: #f5ecd8;
    text-shadow: 0 2px 20px rgba(242, 202, 80, 0.3);
}
.lot-hold-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    max-width: 30ch;
    min-height: 34px;
    transition: opacity 200ms ease-out;
}
.lot-hold-sub.is-fading { opacity: 0; }
.lot-hold-dots {
    display: flex;
    gap: 10px;
}
.lot-hold-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.4;
    animation: lot-dot 900ms ease-in-out infinite;
}
.lot-hold-dots i:nth-child(2) { animation-delay: 160ms; }
.lot-hold-dots i:nth-child(3) { animation-delay: 320ms; }
@keyframes lot-dot {
    0%, 100% { transform: scale(0.6); opacity: 0.4; }
    50%      { transform: scale(1);   opacity: 1; }
}

/* Static results card — the fallback when the ceremony cannot run. */
.lot-results-card {
    width: min(340px, 90vw);
    border: 1px solid color-mix(in oklch, var(--accent) 55%, var(--border));
    border-radius: var(--r-3);
    background: var(--surface);
    padding: 14px;
}
.lot-results-card h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
    margin: 0 0 8px;
    color: var(--accent);
}
.lot-results-row {
    display: flex;
    gap: 8px;
    font-size: 12px;
    padding: 5px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.lot-results-row b {
    margin-left: auto;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.lot-results-dismiss {
    margin-top: 10px;
    width: 100%;
    min-height: 44px;
    border: var(--border-default);
    border-radius: var(--r-3);
    background: var(--raised);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

/* ── 9. Purchase drop — tickets off the press ──────────────────── */

#lottery-new-ticket-anim {
    position: fixed;
    inset: 0;
    z-index: 4100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(6, 5, 3, 0.82);
    contain: content;
    pointer-events: auto;
}
.lot-ticket--drop {
    width: min(240px, 70vw);
    min-height: 104px;
    animation: lot-drop-in 480ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 150ms ease-out 300ms;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 30px -8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lot-ticket--drop .lot-ticket-serial { font-size: 13px; }
.lot-ticket--drop .lot-ticket-marque svg { width: 56px; height: 38px; }
@keyframes lot-drop-in {
    from { opacity: 0; transform: translateY(-48px) rotate(-4deg) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
.lot-ticket--drop.is-flying { opacity: 0; }
#lottery-new-ticket-anim .lot-more-chip {
    flex: 0 0 auto;
    grid-column: auto;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    background: rgba(10, 8, 5, 0.7);
}
#lottery-new-ticket-anim.is-dismissing {
    opacity: 0;
    transition: opacity 180ms ease-out;
}

/* ── 10. Post-draw settlement seal ─────────────────────────────── */

.lot-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-3);
    border: var(--border-default);
    background: var(--raised);
    font-size: 13px;
    color: var(--text);
    animation: lot-banner-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    cursor: pointer;
}
.lot-banner i { color: var(--faint); }
.lot-banner .lot-medal-svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: var(--accent);
}
.lot-banner.is-win {
    border-color: color-mix(in oklch, var(--accent) 60%, var(--border));
    background:
        radial-gradient(120% 100% at 20% 0%,
            color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        var(--raised);
    color: var(--accent);
    font-family: var(--font-display);
}
.lot-banner.is-out { animation: lot-banner-out 200ms ease-in both; }
@keyframes lot-banner-in {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lot-banner-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}

/* ── 11. Short-viewport compaction (≤660px content) ────────────── */

@media (max-height: 660px) {
    #lottery-screen .pot-amount { font-size: 28px; }
    #lottery-screen .pot-timer { min-height: 44px; margin-top: 5px; padding-top: 5px; }
    #lottery-screen .timer-digits { font-size: 22px; }
    .lot-podium { margin-top: 6px; padding-top: 5px; }
    .lot-podium-tier .lot-medal-svg { width: 22px; height: 22px; }
    .lot-podium-tier.is-t1 .lot-medal-svg { width: 30px; height: 30px; }
    .lot-podium-tier.is-t1 .lot-podium-amt { font-size: 16px; }
    .lot-fair-line { margin-top: 4px; min-height: 20px; }
    .lot-buy .fym-ck-chips { height: 36px; }
    .lot-buy .fym-ck-chip { height: 36px; }
}

/* ── 12. Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    #lottery-screen .pot-amount.is-bump { transform: none; }
    .lot-hold-dots i { animation: none; opacity: 0.8; }
    .lot-ticket.is-won.is-fresh .lot-ticket-body::after,
    .draw-entry.is-shimmer .draw-detail-inner { animation: none; }
    .lot-ticket--drop { animation: none; }
    .lot-section-head.is-pulse { transform: none; }
}