.raffle-page {
    --stage-bg: #121923;
    --stage-surface: #1b2431;
    --stage-text: #f8f1e5;
    --stage-muted: #c2c8d4;
    --stage-gold: #efc984;
    --stage-line: #ecd09b36;
    width: 100%;
    max-width: 1080px;
    margin: 26px auto 42px;
    font-family: var(--pva-font);
}

html[data-theme=light] .raffle-page {
    --stage-bg: #fff9ed;
    --stage-surface: #fffdf7;
    --stage-text: #222b38;
    --stage-muted: #536173;
    --stage-gold: #865319;
    --stage-line: #aa764e47;
}

.raffle-page .raffle-page-heading {
    position: static;
    margin-bottom: 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: center;
}

.raffle-page-heading h1 {
    margin: 0 0 7px;
    color: var(--text);
    font: 800 clamp(27px, 4vw, 40px)/1.12 var(--pva-font);
    letter-spacing: -.035em;
}

.raffle-page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.raffle-page [hidden] { display: none !important; }

.raffle-feature, .raffle-empty {
    overflow: hidden;
    border: 1px solid var(--stage-line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 18px 44px #0002;
}

.raffle-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(26px, 5vw, 48px) 20px;
    text-align: center;
    color: var(--stage-text);
    background:
        radial-gradient(ellipse at 50% 0%, #d79c4540, transparent 57%),
        radial-gradient(ellipse at 50% 100%, #586d8c29, transparent 65%),
        var(--stage-bg);
}

.raffle-stage-content {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    margin-inline: auto;
}

.raffle-stage-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.raffle-ring {
    position: absolute;
    top: 47%;
    left: 50%;
    width: min(84%, 790px);
    aspect-ratio: 2.6;
    border: 1px solid var(--stage-line);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
}

.raffle-ring-outer {
    width: min(97%, 930px);
    transform: translate(-50%, -50%) rotate(12deg);
}

.raffle-ticket {
    --ticket-angle: -20deg;
    position: absolute;
    top: 35%;
    left: 7%;
    display: grid;
    place-items: center;
    width: clamp(53px, 13vw, 128px);
    aspect-ratio: 1.85;
    border: 1px solid #e1af5b99;
    border-radius: 8px;
    background: linear-gradient(140deg, #f1c87745, #a86e1c18);
    box-shadow: inset 0 0 15px #efbc5c2c, 0 12px 30px #0002;
    transform: rotate(var(--ticket-angle));
    animation: raffle-ticket-arrive 3.6s cubic-bezier(.18,.64,.25,1) both;
}

.raffle-ticket-right {
    --ticket-angle: 20deg;
    top: 51%;
    right: 7%;
    left: auto;
    animation-delay: .25s;
}

.raffle-ticket::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed #e2b36495;
    border-radius: 4px;
}

.raffle-ticket span { color: var(--stage-gold); font-size: clamp(15px, 4vw, 33px); opacity: .72; }

@keyframes raffle-ticket-arrive {
    0% { opacity: 0; transform: translateY(30px) rotate(calc(var(--ticket-angle) - 16deg)) scale(.78); }
    48% { opacity: 1; transform: translateY(-10px) rotate(calc(var(--ticket-angle) + 5deg)); }
    100% { opacity: .8; transform: translateY(0) rotate(var(--ticket-angle)); }
}

.raffle-feature-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px 13px;
    margin-bottom: 19px;
}

.raffle-server { font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.raffle-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid var(--stage-line);
    border-radius: 20px;
    color: var(--stage-muted);
    font-size: 10px;
    font-weight: 700;
}
.raffle-state.live { color: #8be6b0; border-color: #47b47a63; background: #47b47a1c; }
html[data-theme=light] .raffle-state.live { color: #216244; }
.raffle-state.live::before, .raffle-participant-dot {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

.raffle-emblem {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 0 13px;
    border: 1px solid var(--stage-line);
    border-radius: 50%;
    background: var(--stage-surface);
    color: var(--stage-gold);
    box-shadow: 0 6px 20px #0002;
}
.raffle-emblem svg { width: 30px; height: 30px; }
.raffle-stage h2 {
    margin: 0;
    color: var(--stage-text);
    font-size: clamp(22px, 3.5vw, 37px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.raffle-prize { margin: 19px 0 20px; }
.raffle-prize-label { display: block; color: var(--stage-muted); font-size: 11px; font-weight: 650; }
.raffle-prize strong {
    display: block;
    margin-top: 2px;
    color: var(--stage-gold);
    font-size: clamp(32px, 7vw, 58px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
}

.raffle-clock-area {
    width: min(100%, 440px);
    margin-inline: auto;
}

.raffle-clock-label { color: var(--stage-muted); font-size: 12px; font-weight: 750; }
.raffle-clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(4px, 1.4vw, 10px);
    margin: 9px 0 10px;
}

.raffle-clock > div {
    padding: clamp(8px, 1.8vw, 16px) 2px;
    border: 1px solid var(--stage-line);
    border-radius: 10px;
    background: var(--stage-surface);
    box-shadow: 0 8px 18px #0002;
}
.raffle-clock b {
    display: block;
    font-size: clamp(20px, 5vw, 42px);
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.raffle-clock small { display: block; margin-top: 7px; color: var(--stage-muted); font-size: 10px; }
.raffle-closes { color: var(--stage-muted); font-size: 11px; margin: 0; }
.raffle-description {
    max-width: 520px;
    margin: 19px auto 0;
    color: var(--stage-muted);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.raffle-actions { margin-top: 23px; }
.raffle-action-buttons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.raffle-join, .raffle-site {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 10px 15px;
    border-radius: 8px;
    font: 750 12px/1.3 var(--pva-font);
    text-decoration: none;
}

.raffle-join {
    padding-inline: 21px;
    border: 1px solid #efca83;
    background: linear-gradient(135deg, #f6d697, #d6a554);
    color: #291c0b !important;
    box-shadow: 0 5px 15px #bd802843;
    cursor: pointer;
}
.raffle-join svg { width: 20px; height: 20px; flex: 0 0 20px; }
.raffle-join:hover { filter: brightness(1.06); }
.raffle-join:disabled, .raffle-join[aria-disabled=true] { opacity: .7; cursor: default; filter: none; }
.raffle-site { border: 1px solid var(--stage-line); background: var(--stage-surface); color: var(--stage-text) !important; }
.raffle-site:hover { border-color: var(--stage-gold); }
.raffle-join:focus-visible, .raffle-site:focus-visible { outline: 2px solid var(--stage-gold); outline-offset: 3px; }

.raffle-participants {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    color: var(--stage-muted);
    font-size: 12px;
}
.raffle-participant-dot { color: #36a871; }
.raffle-participants strong { color: var(--stage-text); }
.raffle-members-note { margin: 6px 0 0; color: var(--stage-muted); font-size: 11px; }
.raffle-message { min-height: 18px; margin: 12px 0 5px; text-align: center; color: var(--gold); font-size: 12px; }

.raffle-results { padding: 22px clamp(14px, 4vw, 27px) 0; border-top: 1px solid var(--stage-line); }
.raffle-results-heading, .raffle-ended-footer, .raffle-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 11px;
}
.raffle-results-heading { margin-bottom: 13px; }
.raffle-results-heading > span { font-weight: 800; }
.raffle-results .sample-notice { margin: 0 0 14px; }
.raffle-winners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.raffle-winner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--stage-line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--gold) 7%, var(--panel));
}
.raffle-winner.reserve { border-color: color-mix(in srgb, var(--blue) 25%, var(--line)); background: var(--panel2); }
.raffle-winner-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 13%, var(--panel));
    color: var(--gold);
}
.raffle-winner-icon svg { width: 22px; height: 22px; }
.raffle-winner.reserve .raffle-winner-icon { background: var(--panel); color: var(--blue); }
.raffle-winner small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.raffle-winner a, .raffle-winner b { display: block; color: var(--text); font-weight: 750; overflow-wrap: anywhere; }
.raffle-winner div > span, .raffle-result-note, .raffle-delivered { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.raffle-delivered { color: var(--easy); }
.raffle-ended-footer { margin: 14px clamp(14px, 4vw, 27px) 19px; }

.raffle-history-heading { margin: 14px 0; }
.raffle-history-heading h2 { margin: 0; font-size: 19px; font-weight: 800; }
.raffle-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 13px; }
.raffle-history-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--stage-line);
    border-radius: 11px;
    background: var(--panel);
}
.raffle-history-top strong { color: var(--gold); font-size: 14px; }
.raffle-history-card h3 { margin: 10px 0 5px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.raffle-history-card > time { display: block; margin-bottom: 12px; color: var(--muted); font-size: 10px; }
.raffle-history-result { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; font-size: 12px; }
.raffle-history-result small { flex: 0 0 38px; color: var(--muted); font-size: 9px; }
.raffle-history-result a, .raffle-history-result > span { overflow-wrap: anywhere; }
.raffle-history-card footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin: 13px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-size: 10px;
}
.raffle-more { margin-top: 13px; }
.raffle-empty p, .raffle-loading, .raffle-history-empty { color: var(--muted); font-size: 13px; }
.raffle-empty p { color: var(--stage-muted); }
.raffle-history-empty { grid-column: 1/-1; padding: 16px; border: 1px dashed var(--line); border-radius: 8px; }

@media (max-width: 650px) {
    .raffle-page { margin-top: 18px; }
    .raffle-stage { padding-inline: 12px; }
    .raffle-ticket { top: 24%; left: -10px; }
    .raffle-ticket-right { top: 27%; right: -10px; left: auto; }
    .raffle-winners { grid-template-columns: 1fr; }
    .raffle-action-buttons > * { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .raffle-ticket { animation: none; }
}