/* Container */
#ctp-container {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Game Area */
#game-area {
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    background-image: url('https://games.seliivitali.co.uk/wp-content/uploads/2025/10/game-image-Photoroom.jpg');
    background-size: cover;
    background-position: center;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 14px;
    transition: opacity 0.6s ease;
}

/* Fade-out while starting */
#game-area.fade-out {
    opacity: 0;
}

#game-area.playing {
    opacity: 1;
    background-image: none;
    background-color: #fafafa;
}

/* Title: Cormorant Garamond loaded via PHP enqueue */
.ctp-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 2.2rem;
    margin-bottom: 8px;
    color: #222;
}

/* Button */
.ctp-btn {
    display: inline-block;
    background-color: #ff69b4;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
    margin-bottom: 12px;
}
.ctp-btn:hover { transform: translateY(-3px); background-color: #ff85c1; }

/* Scoreboard */
#scoreboard {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}

/* Product items (smaller, clickable) */
.product {
    position: absolute;
    width: 45px;
    height: 45px;
    cursor: pointer;
    user-select: none;
    transition: transform .08s ease;
}
.product:active { transform: scale(.92); }

/* Inputs & form */
#email-form input[type="text"],
#email-form input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    margin-bottom: 10px;
    box-sizing: border-box;
}
#email-form button {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    border-radius: 8px;
    background: #ff69b4;
    color: #fff;
    border: none;
}

/* Message */
#ctp-message { margin-top: 10px; font-weight: 700; }

/* Reward section */
#reward-section {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #fff7fb;
    border: 1px solid #ffdff0;
}
#reward-section .voucher-code { color: #c81b63; font-weight: 800; font-size: 1.05em; }

/* Leaderboard */
.ctp-leaderboard-wrap { margin-top: 16px; text-align: center; }
.ctp-leaderboard-wrap h3 { margin-bottom: 8px; font-size: 1.05rem; }
.ctp-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 14px;
}
.ctp-leaderboard-table th,
.ctp-leaderboard-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}
.ctp-leaderboard-table tbody tr:nth-child(odd) { background: #fbfbfb; }