/* Hidden in the source: no promotion flashes before the UTC date check. */
.giveaway-promotion[hidden] { display: none !important; }

.giveaway-promotion {
    color: #fff4dc;
    border: 1px solid #ad8541;
    background: linear-gradient(135deg, #391218, #150e13);
    box-shadow: 0 12px 40px #0008;
}

.giveaway-promotion .primary-button {
    color: #fff4dc;
    border-color: #c49b50;
    background: linear-gradient(135deg, #6a2025, #391218);
    min-width: 0;
    height: auto;
    min-height: 48px;
    padding: 12px 18px;
    text-align: center;
}

.giveaway-promotion :is(a, button):focus-visible {
    outline: 3px solid #ffe3a1;
    outline-offset: 4px;
}

.giveaway-promotion-card {
    position: fixed;
    z-index: 90; /* Keep the site's navigation above the card. */
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    width: min(340px, calc(100% - 40px));
    max-height: calc(100dvh - 120px);
    overflow: auto;
    border-radius: 10px;
    animation: giveaway-promotion-appear 350ms ease-out;
}

.giveaway-promotion-card img { display: block; width: 100%; height: auto; }
.giveaway-promotion-copy { padding: 16px; }
.giveaway-promotion-copy p { margin-bottom: 12px; line-height: 1.5; }
.giveaway-promotion-copy a { width: 100%; }

.giveaway-promotion-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    border: 1px solid #c49b50;
    border-radius: 50%;
    background: #150e13;
    color: #fff4dc;
    font: 28px/1 sans-serif;
    cursor: pointer;
}

/* Extra scroll space lets every section clear the floating card. */
body:has(.giveaway-promotion-card:not([hidden])) { padding-bottom: 360px; }

.giveaway-promotion-banner {
    max-width: 1200px;
    margin: 28px auto;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.giveaway-promotion-label { color: #f1c778; font-weight: 700; letter-spacing: 2px; }
.giveaway-promotion-banner h2 { font-family: Georgia, serif; font-size: clamp(26px, 4vw, 38px); margin: 8px 0; }
.giveaway-promotion-banner p { line-height: 1.6; }

@keyframes giveaway-promotion-appear {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .giveaway-promotion-card { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(300px, calc(100% - 24px)); }
    .giveaway-promotion-copy { padding: 12px; }
    .giveaway-promotion-banner { margin: 20px 16px; padding: 24px 20px; flex-direction: column; text-align: center; }
    .giveaway-promotion-banner a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .giveaway-promotion, .giveaway-promotion .primary-button { animation: none; transition: none; }
    .giveaway-promotion .primary-button:hover { transform: none; }
}