/* ============================================================================
   Scratch-card + winner modal styles.
   Additive only — does not touch the wheel, spin button, gold frame, or
   pointer styling in styles.css / spin-wheel-original.css.
   ============================================================================ */

/* ─── Shared modal shell (scratch modal + winner modal) ─────────────────── */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow-y: auto;
}

.app-modal-overlay.hidden {
    display: none !important;
}

.app-modal-card {
    position: relative;
    width: 100%;
    max-width: 34rem;
    background: #050b14;
    border-radius: 2rem;
    border: 4px solid #facc15;
    box-shadow: 0 0 150px rgba(250, 204, 21, 0.3);
    padding: 2.25rem 1.5rem 2rem;
    text-align: center;
    margin: auto;
    animation: bounceIn 0.5s ease-out;
}

.app-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    transition: background 0.2s;
}
.app-modal-close:hover { background: rgba(255, 255, 255, 0.25); }
.app-modal-close:focus-visible,
.scratch-card:focus-visible,
.collect-btn:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 2px;
}

/* ─── "Already played" banner ────────────────────────────────────────────── */
.already-played-banner {
    display: none;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto 1rem;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 52, 148, 0.15), rgba(65, 33, 109, 0.3));
    border: 1.5px solid rgba(250, 204, 21, 0.4);
    color: #fde68a;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-align: center;
}
.already-played-banner.visible { display: block; animation: fadeInDown 0.35s ease both; }

.spin-error-banner {
    display: none;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto 1rem;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.45);
    color: #fecaca;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}
.spin-error-banner.visible { display: block; animation: fadeInDown 0.35s ease both; }

/* ─── Scratch modal ───────────────────────────────────────────────────────── */
.scratch-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.scratch-desc {
    color: #9ca3af;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
}

.scratch-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
}

@media (max-width: 640px) {
    .scratch-grid {
        flex-direction: column;
        align-items: center;
    }
}

.scratch-card {
    position: relative;
    width: 148px;
    height: 184px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2639, #0d1420);
    border: 2px solid rgba(250, 204, 21, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 640px) {
    .scratch-card { width: 100%; max-width: 220px; height: 150px; }
}

.scratch-card.selected {
    border-color: #facc15;
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
    transform: translateY(-2px);
}

.scratch-card.disabled {
    opacity: 0.32;
    filter: grayscale(65%);
    pointer-events: none;
}

.scratch-card-reward {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(236, 52, 148, 0.25), rgba(65, 33, 109, 0.55));
    padding: 8px;
}

.scratch-card-reward .icon { font-size: 1.9rem; line-height: 1; }

.scratch-card-reward .value {
    font-size: 1.35rem;
    font-weight: 900;
    color: #facc15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.01em;
}

.scratch-card canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: pointer;
}

.scratch-card .scratch-hint {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
}

/* Small flying particles spawned while scratching */
.scratch-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff9c4 0%, #facc15 70%);
    pointer-events: none;
    z-index: 6;
    animation: scratchParticleFade 0.55s ease-out forwards;
}

@keyframes scratchParticleFade {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 6px), var(--dy, 6px)) scale(0.3); }
}

.scratch-reveal-pop {
    animation: scratchRevealPop 0.4s ease-out;
}
@keyframes scratchRevealPop {
    0%   { transform: scale(0.94); }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ─── Winner modal ────────────────────────────────────────────────────────── */
.winner-title {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    line-height: 1.15;
}

.winner-title .winner-reward-highlight {
    color: #facc15;
}

.winner-desc {
    color: #d1d5db;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

.winner-reward-pill {
    display: inline-block;
    margin: 0 auto 1.75rem;
    padding: 14px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(236, 52, 148, 0.2), rgba(65, 33, 109, 0.4));
    border: 2px solid #ec3494;
    color: #ec3494;
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(236, 52, 148, 0.3);
}

.collect-btn {
    position: relative;
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #facc15 0%, #a16207 100%);
    box-shadow: 0 10px 0 #854d0e;
    overflow: hidden;
}
.collect-btn:active { transform: translateY(4px); box-shadow: 0 6px 0 #854d0e; }

@media (max-width: 640px) {
    .winner-title { font-size: 1.4rem; }
    .winner-reward-pill { font-size: 1.3rem; padding: 10px 20px; }
    .collect-btn { font-size: 1.05rem; padding: 16px; }
}

/* Lock background scroll while any modal is open */
body.modal-open { overflow: hidden !important; }

/* ─── Bomb-shake safety (referenced by app.js triggerBombShake) ──────────── */
@keyframes bombShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px) rotate(-1deg); }
    40% { transform: translateX(8px) rotate(1deg); }
    60% { transform: translateX(-6px) rotate(-0.5deg); }
    80% { transform: translateX(6px) rotate(0.5deg); }
}
.bomb-shake { animation: bombShake 0.5s ease; }

/* ============================================================================
   FIX: popup logo visibility on small screens after scrolling.
   The main-page .site-logo is position:fixed and picks up .active/.scrolled
   state from page scroll, so it can sit hidden behind the popup overlay or
   render as a dark bar. Each popup already contains its own logo copy
   (.logo-pop, #siteLogoScratch / #siteLogoWinner) but it was only forced
   visible inside a 1024–1164px media query. Show it inside every open modal,
   on all screen sizes, and hide the shared fixed logo while a modal is open.
   ============================================================================ */

/* Show each popup's own logo, on every screen size, whenever its modal
   is open. Overrides the base `.site-logo .logo-pop { display:none }`. */
.app-modal-overlay:not(.hidden) .logo-pop {
    display: block !important;
    position: static !important;
    margin: 0 auto 1rem !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    z-index: 210 !important;
    pointer-events: auto;
}

.app-modal-overlay:not(.hidden) .logo-pop .site-logo-img {
    height: 58px !important;
    opacity: 1 !important;
    margin: 0 auto !important;
}

/* Keep the popup logo pinned at the top of the (scrollable) overlay so it
   stays with the card instead of vanishing off-screen. */
.app-modal-overlay {
    flex-direction: column;
}
.app-modal-overlay:not(.hidden) .logo-pop {
    flex: 0 0 auto;
}

/* While any modal is open, neutralize the shared fixed main-page logo so its
   scrolled/active state can't overlap or bleed through the popup. */
body.modal-open .site-logo:not(.logo-pop) {
    display: none !important;
}
/* .logo-pop img {
    border: 1px solid #f9cb1563 !important;
    flex: 0 0 auto;
    border-radius: 100px;
    padding: 10px !important;
    background: #00000063 !important;
} */

@media screen and (min-width: 1099px) and (max-width: 1450px) {
.app-modal-overlay:not(.hidden) .logo-pop .site-logo-img {
    height: 42px !important;
}
}
@media screen and (min-width: 1024px) and (max-width: 1098px) {
.app-modal-overlay:not(.hidden) .logo-pop .site-logo-img {
    height: 32px !important;
}
}
@media screen and (max-width: 640px) {
    .app-modal-overlay:not(.hidden) .logo-pop {
        margin: 0 auto 0.75rem !important;
    }
    .app-modal-overlay:not(.hidden) .logo-pop .site-logo-img {
        height: 45px !important;
    }

}