@font-face {
    font-family: "RedBerry";
    src: url("../fonts/11528.ttf") format("truetype");
    font-display: swap;
}

:root {
    --promo-ink: #21181c;
    --promo-muted: #74686d;
    --promo-berry: #9f163d;
    --promo-berry-dark: #76102d;
    --promo-cream: #fff8f1;
    --promo-gold: #f5c56c;
}

* { box-sizing: border-box; }

.promo-body {
    min-height: 100vh;
    margin: 0;
    color: var(--promo-ink);
    font-family: RedBerry, "Century Gothic", Arial, sans-serif;
    background:
        radial-gradient(circle at 14% 8%, rgba(245, 197, 108, .24), transparent 30%),
        radial-gradient(circle at 88% 70%, rgba(159, 22, 61, .13), transparent 32%),
        var(--promo-cream);
}

.promo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1040px;
    margin: 0 auto;
    padding: 18px 24px;
}

.promo-brand img { display: block; width: 148px; max-height: 54px; object-fit: contain; }
.promo-back, .promo-text-link { color: var(--promo-berry); font-size: 14px; font-weight: 700; }
.promo-main { width: 100%; padding: 12px 16px 42px; }

.promo-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 34px;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(159, 22, 61, .12);
    border-radius: 26px;
    box-shadow: 0 22px 70px rgba(78, 36, 47, .12);
}

.promo-card--login { max-width: 510px; }
.promo-kicker { margin-bottom: 8px; color: var(--promo-berry); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.promo-card h1 { margin: 0 0 12px; font-size: 32px; line-height: 1.12; }
.promo-lead { max-width: 460px; margin: 0 auto 26px; color: var(--promo-muted); font-size: 15px; line-height: 1.55; }
.promo-offline-notice {
    margin: -8px auto 22px;
    padding: 11px 13px;
    color: #6e4d18;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    background: #fff8e7;
    border: 1px solid #edd596;
    border-radius: 11px;
}
.promo-form { text-align: left; }
.promo-form label { display: block; margin: 17px 0 7px; font-size: 13px; font-weight: 800; }
.promo-form input {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    color: var(--promo-ink);
    font: inherit;
    font-size: 16px;
    background: #fff;
    border: 1px solid #dbcfd2;
    border-radius: 12px;
    outline: none;
}
.promo-form input:focus { border-color: var(--promo-berry); box-shadow: 0 0 0 3px rgba(159, 22, 61, .1); }
.promo-field-hint { margin-top: 6px; color: var(--promo-muted); font-size: 11px; }

.promo-button {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 22px;
    padding: 13px 20px;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--promo-berry), var(--promo-berry-dark));
    border: 0;
    border-radius: 14px;
    box-shadow: 0 9px 24px rgba(159, 22, 61, .24);
    cursor: pointer;
}
.promo-button:hover { filter: brightness(1.05); }
.promo-button:disabled { cursor: wait; opacity: .66; }
.promo-note { margin: 16px 0 8px; color: var(--promo-muted); font-size: 12px; line-height: 1.45; }
.promo-text-link { display: inline-block; margin-top: 12px; }
.promo-register-note { margin: 8px 0 0; color: var(--promo-muted); font-size: 13px; }
.promo-register-note a { color: var(--promo-berry); font-weight: 800; }

.promo-register-callout {
    margin: 18px 0;
    padding: 16px;
    text-align: left;
    background: #fff8e7;
    border: 1px solid #edd596;
    border-radius: 14px;
}
.promo-register-callout strong,
.promo-register-callout span { display: block; }
.promo-register-callout strong { margin-bottom: 5px; font-size: 14px; }
.promo-register-callout span { color: var(--promo-muted); font-size: 12px; line-height: 1.45; }
.promo-register-callout a {
    display: inline-block;
    margin-top: 11px;
    color: var(--promo-berry);
    font-size: 13px;
    font-weight: 900;
}

.promo-alert { margin: 18px 0; padding: 13px 15px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.promo-alert--error { color: #7e1731; background: #fff0f3; border: 1px solid #f2c5d0; }

.promo-user-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; text-align: left; }
.promo-user-row .promo-kicker { display: block; margin-bottom: 2px; }
.promo-link-button { padding: 0; color: var(--promo-muted); font: inherit; font-size: 12px; text-decoration: underline; background: none; border: 0; cursor: pointer; }

.promo-wheel-wrap { position: relative; width: min(100%, 420px); margin: 8px auto 0; aspect-ratio: 1; }
.promo-wheel {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 13px 18px rgba(51, 20, 29, .2));
    transition: transform 5.4s cubic-bezier(.12, .63, .08, 1);
}
.promo-pointer {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: -7px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 35px solid var(--promo-berry-dark);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.18));
}
.promo-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .08em;
    background: var(--promo-berry-dark);
    border: 7px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(0,0,0,.2);
}
.promo-button--spin { max-width: 350px; margin: 25px auto 0; }

.promo-result { display: none; margin-top: 24px; padding: 23px 16px; background: #fff8e7; border: 1px solid #edd596; border-radius: 18px; }
.promo-result.is-visible { display: block; animation: promo-pop .45s ease both; }
.promo-result__eyebrow { color: var(--promo-berry); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.promo-result__prize { margin: 8px 0 15px; font-size: 27px; font-weight: 900; }
.promo-footer { padding: 0 16px 24px; color: var(--promo-muted); font-size: 11px; text-align: center; }

@keyframes promo-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
    .promo-topbar { padding: 14px 16px; }
    .promo-brand img { width: 124px; }
    .promo-main { padding: 6px 9px 30px; }
    .promo-card { padding: 25px 17px; border-radius: 20px; }
    .promo-card h1 { font-size: 27px; }
    .promo-lead { font-size: 14px; }
    .promo-wheel-wrap { width: min(100%, 370px); }
    .promo-wheel-center { width: 62px; height: 62px; border-width: 6px; }
    .promo-result__prize { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-wheel { transition-duration: .01s; }
    .promo-result.is-visible { animation: none; }
}