/* ============================================================
 * WSP Puzzle Overrides
 *
 * Surcharges CSS minimales pour ne pas casser le rendu d'origine.
 * - Couleur unifiee titre + hints (lisibilite contre le bg)
 * - Marges mobile pour boutons et nav
 *
 * Charge automatiquement par wsp-shortcodes.php.
 * Ne touche jamais style.css du theme parent.
 * Ne touche PAS .pgr-game / .pgr-board / .pgr-bg / bonus-cloud (rendu original).
 * ============================================================ */

/* ---- 1. Titre + sous-titre (bleu marine fonce uniforme, sans ombre) ---- */
.pgr-game .pgr-lvl {
    color: #0B0B63 !important;
    text-shadow: none !important;
    font-weight: 700;
}
.pgr-game .pgr-pack {
    color: #0B0B63 !important;
    text-shadow: none !important;
    font-weight: 600;
}

/* ---- 2. Hints (Tap a word / Play audio / Found extra word) ---- */
.pgr-game .pgr-interactive-hint,
.pgr-game .pgr-audio-hint,
.pgr-game .pgr-bonus-title {
    color: #0B0B63 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* ---- 3. Mode sombre : meme couleur (l'utilisateur veut #0B0B63 partout) ---- */
.dark-mode .pgr-game .pgr-lvl,
.dark-mode .pgr-game .pgr-pack,
.dark-mode .pgr-game .pgr-interactive-hint,
.dark-mode .pgr-game .pgr-audio-hint,
.dark-mode .pgr-game .pgr-bonus-title {
    color: #0B0B63 !important;
    text-shadow: none !important;
}

/* ---- 4. HUD : juste eviter la superposition avec la grille ---- */
.pgr-game .pgr-hud {
    position: relative !important;
    z-index: 5;
    margin-bottom: 4px !important;
    padding: 0 !important;
}
.pgr-game .pgr-level-title {
    position: relative !important;
    text-align: center;
}
.pgr-game .pgr-lvl {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}
.pgr-game .pgr-pack {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}
.pgr-game .pgr-board-wrap {
    position: relative;
    margin-top: 0 !important;
    clear: both;
}
@media (max-width: 600px) {
    .pgr-game .pgr-hud {
        margin-bottom: 6px !important;
    }
}

/* ---- 5. Boutons NAV PREV/NEXT - marges des bords sur mobile ---- */
@media (max-width: 600px) {
    .pgr-game .pgr-nav {
        padding-left: 20px;
        padding-right: 20px;
        gap: 10px;
        box-sizing: border-box;
    }
    .pgr-game .pgr-nav-btn {
        flex: 1;
        text-align: center;
        max-width: 200px;
    }
}

/* ---- 6. Boutons reponses (mots tappables) sur mobile ---- */
@media (max-width: 600px) {
    .pgr-game .pgr-seo-answers-list {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    .pgr-game .pgr-word-buttons {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ---- 7. Bouton deeplink "Go Back to Wordscapes App" sur mobile ---- */
@media (max-width: 600px) {
    .ws-deeplink-wrap {
        padding: 16px 20px;
        text-align: center;
        box-sizing: border-box;
    }
    .ws-deeplink-btn {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ---- 10. Masquer l'icone decorative ::before du titre H1 ---- */
/* Cette icone chargeait un favicon.png de 486 KB juste pour faire ~32px a l'ecran. */
/* Gain LCP enorme en la retirant. Reversible : supprimer ce bloc et vider le cache. */
.entry-title::before,
.entry-title:before,
h1.entry-title::before,
h1.entry-title:before {
    content: none !important;
    background-image: none !important;
    display: none !important;
}