/* Daily Coin Memory Match — themed to WebStories cyan/pink palette */
.coin-game-wrap {
    max-width: 760px;
    margin: 30px auto 40px;
    padding: 18px 18px 60px;
    font-family: 'Open Sans', sans-serif;
    color: #e9f2ff;
}

.cg-hero { text-align: center; margin-bottom: 26px; }
.cg-title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin: 0 0 6px;
    color: transparent;
    background: linear-gradient(135deg, #6bf7ff 0%, #ff79f2 50%, #ffd700 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: cg-title-sweep 6s ease-in-out infinite;
    letter-spacing: 0.03em;
}
@keyframes cg-title-sweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.cg-sub { color: #c5d4ee; margin: 0 auto 18px; max-width: 460px; line-height: 1.55; }
.cg-sub strong { color: #ffd700; }

.cg-stats {
    display: inline-flex;
    gap: 10px; flex-wrap: wrap;
    padding: 12px 18px;
    background: rgba(15, 24, 60, 0.6);
    border: 1px solid rgba(107, 247, 255, 0.22);
    border-radius: 999px;
}
.cg-stat {
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 70px;
}
.cg-stat-label {
    font-size: 0.65em; color: #9aa6c0; letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 700;
}
.cg-stat-val {
    font-family: 'Montserrat', sans-serif;
    color: #6bf7ff; font-weight: 800; font-size: 1.05em;
    letter-spacing: 0.04em;
}

/* ----- Board ----- */
.cg-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 auto;
    max-width: 600px;
    perspective: 1000px;
}
@media (max-width: 540px) {
    .cg-board { grid-template-columns: repeat(2, 1fr); max-width: 320px; gap: 12px; }
}

.cg-card {
    position: relative;
    aspect-ratio: 3 / 4;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1.1);
    border-radius: 14px;
    user-select: none;
}
.cg-card:not(.is-flipped):hover { transform: translateY(-3px) scale(1.02); }
.cg-card.is-flipped { transform: rotateY(180deg); }
.cg-card.is-matched .cg-face-front { box-shadow: 0 0 0 3px #ffd700, 0 0 30px rgba(255, 215, 0, 0.6); }
.cg-card.is-locked { pointer-events: none; }

.cg-face {
    position: absolute; inset: 0;
    border-radius: 14px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.cg-face-back {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 121, 242, 0.35), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(107, 247, 255, 0.35), transparent 55%),
        linear-gradient(135deg, #1a0a30 0%, #050614 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Fredoka One', cursive;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    border: 1px solid rgba(107, 247, 255, 0.3);
}
.cg-face-back::before {
    content: '★';
    background: linear-gradient(135deg, #6bf7ff, #ff79f2, #ffd700);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px rgba(255, 121, 242, 0.5);
    filter: drop-shadow(0 0 8px rgba(107, 247, 255, 0.6));
}

.cg-face-front {
    transform: rotateY(180deg);
    border: 1px solid rgba(107, 247, 255, 0.35);
    background: #0a0f1e;
}
.cg-face-front img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.cg-face-front .cg-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 6px 8px;
    background: linear-gradient(180deg, transparent, rgba(5, 6, 20, 0.85));
    color: #fff;
    font-size: 0.78em; font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    font-family: 'Montserrat', sans-serif;
}

/* ----- Actions ----- */
.cg-actions {
    margin-top: 26px;
    text-align: center;
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.coin-game-wrap .btn-primary, .coin-game-wrap .btn-ghost {
    width: auto;
}

/* ----- Locked / Anon states ----- */
.cg-locked {
    text-align: center;
    padding: 36px 24px;
    background: rgba(15, 24, 60, 0.6);
    border: 1px solid rgba(107, 247, 255, 0.25);
    border-radius: 18px;
    margin: 24px auto 0;
    max-width: 460px;
}
.cg-locked h2 {
    margin: 0 0 8px;
    font-family: 'Montserrat', sans-serif; letter-spacing: 0.03em;
    color: transparent;
    background: linear-gradient(135deg, #6bf7ff, #ff79f2);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cg-locked p { color: #c5d4ee; margin: 6px 0; line-height: 1.55; }
.cg-locked-sub { color: #9aa6c0; font-size: 0.9em; margin-top: 14px !important; }
#cg-countdown {
    display: inline-block;
    padding: 3px 14px; border-radius: 999px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700; font-family: 'Montserrat', sans-serif;
    font-weight: 800; letter-spacing: 0.06em;
}

/* ----- Win overlay ----- */
.cg-win-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(5, 6, 20, 0.78);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: cg-overlay-in 0.4s ease-out;
}
@keyframes cg-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.cg-win-card {
    text-align: center;
    padding: 36px 28px 28px;
    background: rgba(13, 18, 34, 0.96);
    border: 1px solid rgba(107, 247, 255, 0.4);
    border-radius: 22px;
    color: #fff;
    max-width: 380px;
    box-shadow: 0 24px 64px rgba(255, 121, 242, 0.32), 0 0 80px rgba(107, 247, 255, 0.18);
    font-family: 'Open Sans', sans-serif;
}
.cg-win-coin {
    width: 110px; height: 110px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff5cc, #ffd700 55%, #c79b00 100%);
    box-shadow: inset -8px -10px 24px rgba(0,0,0,0.35), inset 6px 8px 18px rgba(255,255,255,0.45), 0 14px 30px rgba(255, 215, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    color: #6b4d00; font-family: 'Fredoka One', cursive; font-size: 3rem;
    animation: cg-coin-pop 0.9s cubic-bezier(0.2, 0.7, 0.3, 1.4);
}
@keyframes cg-coin-pop {
    0% { opacity: 0; transform: scale(0.2) rotate(-60deg); }
    60% { opacity: 1; transform: scale(1.15) rotate(15deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.cg-win-card h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 1.8rem;
    margin: 0 0 6px;
    color: transparent;
    background: linear-gradient(135deg, #6bf7ff, #ff79f2, #ffd700);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cg-win-card p { color: #c5d4ee; margin: 4px 0 12px; }
.cg-win-actions {
    display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}

/* Confetti dots */
.cg-confetti {
    position: absolute; pointer-events: none;
    inset: 0; overflow: hidden; border-radius: 22px;
}
.cg-confetti span {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    animation: cg-confetti-fall 2.4s ease-in forwards;
}
@keyframes cg-confetti-fall {
    from { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 1; }
    to   { transform: translate3d(var(--dx, 0), 120vh, 0) rotate(540deg); opacity: 0; }
}