/* Экран «Есть промокод?» новому игроку при первом входе; разметку рисует js/ui/promo-screen.js.
   Слой 68 — над меню игр (65): вопрос задаётся до выбора игры. Под ним приглашение за стол (70) и объявление (80).
   Фон — тот же, что у меню игр: экран — часть прибора. Золото подарка — цвета бонусной клавиши (--bonus-*). */
.promo-screen {
    position: fixed;
    inset: 0;
    z-index: 68;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:
        calc(var(--safe-top) + var(--s4))
        calc(var(--safe-right) + 16px)
        calc(var(--safe-bottom) + var(--s4))
        calc(var(--safe-left) + 16px);
    background-color: var(--ink-0);
    background-image: var(--bg-film), var(--bg-light), var(--bg-vignette);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 128px 128px, 100% 760px, 100% 100%;
    background-position: 0 0, 50% 0, 50% 0;
}

.promo-screen[hidden] { display: none; }

.promo-card {
    position: relative;
    width: min(380px, 100%);
    padding: var(--s5) var(--s4) var(--s4);
    border: 1px solid var(--bonus-line);
    border-radius: var(--radius);
    background-color: var(--surf-1-mid);
    background-image: linear-gradient(180deg, var(--surf-1-top) 0%, var(--surf-1-bot) 100%);
    box-shadow: 0 0 40px var(--bonus-glow), inset 0 1px 0 rgba(255, 255, 255, .04);
    text-align: center;
    animation: promo-in 360ms cubic-bezier(.2, .8, .2, 1) both;
}

/* Мягкий свет под коробкой: подарок — главное на экране. */
.promo-card::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 220px;
    height: 160px;
    transform: translate(-50%, -30%);
    background: radial-gradient(closest-side, var(--bonus-glow), transparent);
    pointer-events: none;
}

.promo-ico {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--s3);
    filter: drop-shadow(0 4px 14px var(--bonus-glow));
}
.promo-ico-box { fill: var(--bonus-bot); }
.promo-ico-lid { fill: var(--bonus-line); }
.promo-ico-band { fill: var(--bonus-ink); opacity: .55; }
.promo-ico-bow { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }

.is-won .promo-ico { animation: promo-bounce 900ms cubic-bezier(.3, 1.6, .5, 1) both; }

.promo-cap {
    position: relative;
    margin: 0 0 var(--s2);
    font-size: var(--fs-cap);
    letter-spacing: 0.18em;
    color: var(--txt-3);
}

.promo-h {
    position: relative;
    margin: 0 0 var(--s2);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--txt);
}

.promo-sub {
    margin: 0 0 var(--s4);
    font-size: 14px;
    line-height: 1.45;
    color: var(--txt-2);
}

.promo-form {
    display: grid;
    gap: var(--s2);
}

.promo-in {
    width: 100%;
    height: 56px;
    padding: 0 var(--s3);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    background: var(--ink-0);
    color: var(--txt);
    font-family: var(--font-code);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.promo-in::placeholder { color: var(--txt-off); letter-spacing: 0.16em; }
.promo-in:focus { border-color: var(--bonus-line); box-shadow: 0 0 0 3px var(--bonus-glow); }
.promo-in.is-bad { border-color: var(--risk); animation: promo-shake 300ms linear 1; }

.promo-go { width: 100%; height: 56px; }

.promo-err {
    min-height: 1.4em;
    margin: var(--s2) 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--risk);
}
.promo-err:empty { min-height: 0; margin: 0; }

.promo-skip {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: var(--s3);
    border: 0;
    background: none;
    color: var(--txt-3);
    font-family: var(--font-ui);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.promo-skip:active { color: var(--txt-2); }

.promo-gifts {
    margin: var(--s3) 0 var(--s3);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--s2);
}
.promo-gift {
    padding: var(--s3);
    border: 1px solid var(--bonus-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bonus-mid) 18%, transparent);
    color: var(--bonus-ink);
    font-size: 16px;
    font-weight: 600;
}

@keyframes promo-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes promo-bounce { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes promo-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (prefers-reduced-motion: reduce) {
    .promo-card, .is-won .promo-ico, .promo-in.is-bad { animation: none; }
}