/* CSS du jeu du logo (accueil) : boite #logo-explosion, outils, tresors, cartes, ecran de fin.
   Charge seulement sur la page d'accueil (voir spora_enqueue_styles dans functions.php). */

.logo-explosion-hero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4vh 0;
    width: 100%;
}
/* Titre principal de la page : toujours visible (pas de d-none, pas de JS), reste
   en place apres l'explosion. Lisible mais plus discret que le wordmark. */
.logo-explosion-tagline{
    margin: 16px 0 0;
    padding: 0 1rem;
    max-width: 640px;
    color: rgba(33, 37, 41, .85);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 500;
    text-align: center;
}
/* Message dans la scene, facon Kingdom Two Crowns : petite banniere en bas de la boite,
   qui apparait puis s'efface toute seule (voir setCaption dans jeu/messages.js). */
.logo-explosion-caption{
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    max-width: min(90%, 34rem);
    margin: 0;
    padding: 8px 18px;
    border-radius: 6px;
    background: rgba(58, 42, 24, .78);
    border: 2px solid rgba(212, 175, 55, .85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 12px rgba(212, 175, 55, .4);
    color: #f6e9c9;
    font-size: .9rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .5s ease, transform .5s ease;
}
.logo-explosion-caption.is-visible{
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Explications du jeu (haut-gauche, vert mousse) et "Le saviez-vous ?" (bas-droite, note de
   carnet) : deux canaux distincts de la legende brune, geres par showExplain/showFact dans
   jeu/messages.js (jamais affiches en meme temps). */
.logo-explosion-explain,
.logo-explosion-fact{
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.logo-explosion-explain.is-visible,
.logo-explosion-fact.is-visible{
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .5s ease, transform .5s ease;
}
.logo-explosion-explain p,
.logo-explosion-fact p{ margin: 0; }
.logo-explosion-explain{
    top: 12px;
    left: 12px;
    max-width: min(60%, 20rem);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(52, 84, 48, .88);
    border: 1px solid rgba(190, 230, 170, .4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    color: #eef8e6;
    font-size: .82rem;
    line-height: 1.35;
    pointer-events: none;
    transform: translateY(-8px);
}
.logo-explosion-explain-locate{ display: none; margin-top: 6px; padding: 3px 12px; border-radius: 6px; border: 1px solid rgba(190, 230, 170, .6); background: rgba(190, 230, 170, .18); color: #eef8e6; font: inherit; font-size: .78rem; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.logo-explosion-explain.has-locate .logo-explosion-explain-locate{ display: inline-block; }
.logo-explosion-explain-locate:hover{ background: rgba(190, 230, 170, .32); }
.logo-explosion-explain-ack{ display: none; margin-top: 6px; padding: 3px 12px; border-radius: 6px; border: 1px solid rgba(190, 230, 170, .6); background: rgba(190, 230, 170, .18); color: #eef8e6; font: inherit; font-size: .78rem; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.logo-explosion-explain.has-ack .logo-explosion-explain-ack{ display: inline-block; }
.logo-explosion-explain-ack:hover{ background: rgba(190, 230, 170, .32); }
.logo-explosion-explain-icon{ flex: none; margin-top: 1px; color: #bfe6a8; }
.logo-explosion-explain-title{ display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #bfe6a8; }
.logo-explosion-explain-close{ flex: none; margin: -4px -6px 0 0; padding: 0 6px; border: 0; background: none; color: #bfe6a8; font: 1.3rem/1.2 sans-serif; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.logo-explosion-explain-close:hover,
.logo-explosion-explain-close:focus-visible{ color: #fff; }
/* Accueil : la carte se pose juste au-dessus de la pastille des defis (meme colonne). */
body.home .logo-explosion-explain{ top: var(--home-header-h); left: 16px; transform: translateY(calc(-100% - 8px)); }
body.home .logo-explosion-explain.is-visible{ transform: translateY(-100%); }
.logo-explosion-fact{
    right: 12px;
    bottom: 56px; /* au-dessus de l'engrenage */
    max-width: min(46%, 19rem);
    padding: 10px 12px;
    border-radius: 3px 3px 3px 12px;
    background: #f7efd9;
    border: 1px solid #d9c9a0;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .3);
    color: #4a3a22;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: .85rem;
    line-height: 1.4;
    transform: translateY(8px);
}
.logo-explosion-fact-badge{
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #8a5a2b;
    color: #fff6e0;
    font: 700 .85rem/22px Georgia, serif;
    text-align: center;
}
.logo-explosion-fact-title{ display: block; font-size: .72rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #8a5a2b; }
.logo-explosion-fact-close{
    flex: none;
    margin: -4px -4px 0 0;
    padding: 0 6px;
    border: 0;
    background: none;
    color: #8a5a2b;
    font: 1.3rem/1.2 Georgia, serif;
    cursor: pointer;
}
.logo-explosion-fact-close:hover,
.logo-explosion-fact-close:focus-visible{ color: #4a3a22; }
@media (max-width: 767.98px){
    /* Trois zones sans chevauchement : explication en haut, legende tout en bas,
       note de carnet juste au-dessus de la legende. */
    .logo-explosion-explain{ top: 8px; left: 8px; max-width: calc(100% - 16px); font-size: .78rem; }
    .logo-explosion-fact{ right: 8px; left: 8px; bottom: 64px; max-width: none; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce){
    .logo-explosion-explain, .logo-explosion-fact{ transition: none; }
}
.logo-explosion-inner{
    position: relative;
    width: 100%;
    /* Pas de selection de texte (bleu) en jouant : clics rapides et glisses sur les bulles. */
    -webkit-user-select: none;
    user-select: none;
    /* Zone bien plus haute que le wordmark lui-meme : l'explosion et le creusage
       ont de la place pour se disperser sans se faire couper net par le bord de
       la boite (avant, la boite collait au ratio serre du wordmark). */
    height: clamp(280px, 45vh, 560px);
    /* Le monde (terre + tresors) deborde horizontalement de la boite ; le canvas se
       clippe tout seul (taille fixe), mais les overlays HTML des tresors doivent
       l'etre aussi quand ils sont hors du champ visible actuel. */
    overflow: hidden;
}
/* Avant l'explosion, rien n'a besoin d'etre coupe (le canvas du jeu est encore cache) :
   ca laisse la zone du badge "play" deborder sous le logo sans se faire tronquer par le
   bord de la boite. */
.logo-explosion-inner:has(#logo-explosion-fallback:not(.d-none)){
    overflow: visible;
}
body.home .logo-explosion-inner{
    /* Sur l'accueil le header est en position fixed et flotte par-dessus (voir
       body.home .header) : plutot que de pousser la boite sous lui avec du padding
       vide (l'espace perdu d'avant), elle remonte carrement jusque sous le header
       transparent, avec la hauteur gagnee ajoutee a la boite plutot que jetee. */
    height: clamp(430px, calc(45vh + var(--home-header-h)), 710px);
}
/* Plein ecran "sur place" : la boite prend 100vh dans le flux normal de la page,
   pas une vraie Fullscreen API ni position fixed. Le reste du site n'est pas touche,
   on peut toujours defiler pour voir la suite en dessous. */
.logo-explosion-inner.is-fullscreen,
body.home .logo-explosion-inner.is-fullscreen{
    height: 100vh;
}
.logo-explosion-layer{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#logo-explosion-fallback-wrap{
    /* Porte la position/taille du wordmark (jeu/terrain.js mesure #logo-explosion-fallback
       lui-meme au clic : l'image doit donc rester a 100% de cette boite, sans marge). */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(48%, 640px);
    cursor: pointer;
    /* Curseur "play" rouge special : le pointeur seul se remarque a peine sur un wordmark,
       ce bouton play rend le clic evident des le survol. */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='16' fill='%239A2C19'/%3E%3Cpath d='M14 10l13 8-13 8z' fill='white'/%3E%3C/svg%3E") 18 18, pointer;
}
/* Une fois explose, jeu/physique.js met #logo-explosion-fallback en d-none : la boite
   (et son badge) disparaissent avec, sans code JS supplementaire. */
#logo-explosion-fallback-wrap:has(#logo-explosion-fallback.d-none){
    display: none;
}
#logo-explosion-fallback{
    display: block;
    width: 100%;
    height: auto;
}
/* Zone de detection fixe (jamais deplacee) : un vrai :hover CSS dessus ne papillote pas,
   contrairement au badge qu'il contient qui suit le curseur (voir jeu/amorce.js). Des
   qu'on l'atteint, elle affiche le meme curseur "play" que le logo et cache le badge. */
.logo-explosion-play-zone{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 28px);
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='16' fill='%239A2C19'/%3E%3Cpath d='M14 10l13 8-13 8z' fill='white'/%3E%3C/svg%3E") 18 18, pointer;
}
.logo-explosion-play-badge{
    /* Decale par --mx/--my (magnetisme vers le curseur, pilote en JS) autour du centre
       de la zone. Purement decoratif : la zone au-dessus gere le clic/hover reel. */
    position: relative; /* ancre l'anneau de maintien (.logo-explosion-play-ring) */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    border-radius: 50%;
    background: var(--color-red);
    opacity: .55;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    pointer-events: none;
    transition: opacity .175s ease, scale .2s ease-out;
    /* Propriete "translate" a part, pas dans transform : elle s'applique avant "scale",
       donc le grossissement pendant l'appui ne multiplie pas le decalage. */
    translate: var(--mx, 0px) var(--my, 0px);
    animation: logo-explosion-badge-pulse 2.4s ease-in-out infinite;
}
/* Seulement avec une vraie souris : au doigt le :hover reste colle apres un tap et
   ferait disparaitre le badge pendant qu'on le maintient. */
@media (hover: hover){
    #logo-explosion-fallback-wrap:hover .logo-explosion-play-badge,
    .logo-explosion-play-zone:hover .logo-explosion-play-badge{
        opacity: 0;
    }
}
/* Anneau autour du badge : se remplit pendant l'appui maintenu au doigt (.is-holding,
   pose par jeu/amorce.js qui fournit aussi la duree --hold-ms). */
.logo-explosion-play-ring{
    position: absolute;
    inset: -9px;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    transform: rotate(-90deg); /* le remplissage part du haut */
}
.logo-explosion-play-ring circle{
    fill: none;
    stroke: var(--color-red);
    stroke-width: 3;
}
.logo-explosion-play-ring-track{
    opacity: 0; /* visible au doigt seulement, voir plus bas */
}
.logo-explosion-play-ring-fill{
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .2s ease-out;
}
/* Tap trop court : le badge sursaute et le mot "Maintenez" apparait dessous (.is-hint,
   pose ~2 s par jeu/amorce.js). Rien d'affiche au repos. */
.logo-explosion-play-hint{
    position: absolute;
    top: calc(50% + 46px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-red);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
#logo-explosion-fallback-wrap.is-hint .logo-explosion-play-hint{
    opacity: 1;
}
#logo-explosion-fallback-wrap.is-hint .logo-explosion-play-badge{
    opacity: 1;
    animation: logo-explosion-badge-nudge .45s ease-out;
}
@keyframes logo-explosion-badge-nudge{
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.3); }
    70% { transform: scale(.94); }
}
/* Des l'appui le badge grossit d'un coup (bien avant la fin de l'anneau). */
#logo-explosion-fallback-wrap.is-holding .logo-explosion-play-badge{
    opacity: 1;
    animation: none;
    scale: 1.6;
    transition: opacity .175s ease, scale .18s ease-out;
}
#logo-explosion-fallback-wrap.is-holding .logo-explosion-play-ring-fill{
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--hold-ms, 800ms) linear;
}
@media (hover: none){
    /* Au doigt : badge plus gros (le doigt le cache sinon) et piste de l'anneau deja
       visible, pour annoncer qu'il faut maintenir. Pas de menu "enregistrer l'image"
       ni de selection pendant l'appui long. */
    #logo-explosion-fallback-wrap,
    #logo-explosion-fallback{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        /* Le badge suit le doigt pendant l'appui : sans ca, bouger le doigt fait defiler
           la page ou declenche le "tirer pour rafraichir" du telephone. Contrepartie :
           un glissement qui part du logo ou du badge ne fait plus defiler la page. */
        touch-action: none;
    }
    .logo-explosion-play-badge{
        width: 52px;
        height: 52px;
        opacity: .8;
    }
    .logo-explosion-play-icon{
        width: 24px;
        height: 24px;
    }
    .logo-explosion-play-ring-track{
        opacity: .3;
    }
}
@keyframes logo-explosion-badge-pulse{
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@media (max-width: 767.98px){
    #logo-explosion-fallback-wrap{
        width: 82%;
    }
}
#logo-explosion-canvas{
    cursor: pointer;
    /* Le canvas n'est visible qu'apres l'explosion : glisser le doigt dessus sert
       alors a pelleter, pas a faire defiler la page. */
    touch-action: none;
}
.logo-explosion-inner.is-tool-cursor #logo-explosion-canvas{
    cursor: none; /* la pelle ou le sac dessine remplace le curseur */
}
.logo-explosion-inner.is-planting #logo-explosion-canvas{
    cursor: crosshair; /* aucun outil dessine : indique juste ou le clic va planter */
}
.logo-explosion-rebuild{
    /* En haut a droite : zone vide une fois le logo tombe en terre. */
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-red);
    opacity: .6;
    transition: opacity .2s, transform .3s;
}
/* Barre d'outils (pelle / mycelium), en haut a gauche, en miroir du bouton ↻. */
.logo-explosion-tools{
    position: absolute;
    top: 8px;
    left: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.home .logo-explosion-rebuild,
body.home .logo-explosion-tools{
    /* La boite remonte sous le header fixe (voir body.home .logo-explosion-inner) :
       ces controles doivent rester sous sa ligne, sinon ils sont caches derriere lui
       (le pointer-events:none du header laisse passer le clic, mais pas la visibilite). */
    top: calc(var(--home-header-h) + 8px);
}
/* Engrenage : ouvre le panneau de parametres de simulation (voir DEBUG_FIELDS dans
   jeu/config.js). Outil de debug/experimentation, comme .logo-explosion-speed. */
.logo-explosion-debug-toggle{
    position: absolute;
    bottom: 8px;
    right: 16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    opacity: .7;
    transition: opacity .2s, transform .3s;
}
.logo-explosion-debug-toggle:hover,
.logo-explosion-debug-toggle:focus-visible{
    opacity: 1;
}
.logo-explosion-debug-toggle.is-active{
    opacity: 1;
    transform: rotate(45deg);
}
/* Panneau d'options : sections repliables generees par JS (meteo, reglages, monde),
   largeur et hauteur bornees, defilement interne. */
.logo-explosion-debug-panel{
    position: absolute;
    bottom: 48px; /* s'ouvre vers le haut, au-dessus de l'engrenage (en bas a droite) */
    right: 16px;
    z-index: 2;
    width: min(50%, calc(100% - 32px));
    min-width: min(360px, calc(100% - 32px));
    max-height: min(70vh, calc(100% - 64px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(20, 14, 8, .88);
    color: #fff;
    font-size: .85rem;
}
.logo-explosion-debug-section{
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.logo-explosion-debug-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--color-red, #e07856);
    font-size: .75rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.logo-explosion-debug-head::after{
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}
.logo-explosion-debug-head[aria-expanded="true"]::after{
    transform: rotate(-135deg);
}
.logo-explosion-debug-head:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.logo-explosion-debug-body{
    padding: 0 0 8px;
}
.logo-explosion-debug-body[hidden]{
    display: none;
}
.logo-explosion-debug-panel .logo-explosion-debug-row{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.logo-explosion-debug-panel .logo-explosion-debug-row label{
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logo-explosion-debug-panel .logo-explosion-debug-row input[type="range"]{
    flex: 1 1 90px;
    width: 90px;
}
.logo-explosion-debug-panel .logo-explosion-debug-row output{
    flex: 0 0 auto;
    min-width: 3.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.logo-explosion-debug-panel .logo-explosion-debug-reset{
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 5px 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: .72rem;
}
.logo-explosion-debug-panel .logo-explosion-debug-reset:hover{
    background: rgba(255, 255, 255, .1);
}
.logo-explosion-tool{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    opacity: .7;
    transition: opacity .2s, border-color .2s;
}
.logo-explosion-tool:hover,
.logo-explosion-tool:focus-visible{
    opacity: 1;
}
.logo-explosion-tool.is-active{
    opacity: 1;
    border-color: var(--color-red);
    background: rgba(58, 42, 24, .6);
}
/* Solde accumule en recoltant les champignons a la main : n'apparait qu'a la
   premiere vente (voir earn() dans jeu/economie.js), pas de "0 $" avant. */
.logo-explosion-money{
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: rgba(58, 42, 24, .55);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Vitesse, meteo et nutriments du gazon : vivent dans la section "Meteo et rythme" du
   panneau d'options (deplaces par buildDebugPanel dans jeu/debug.js). */
.logo-explosion-speed{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 10px;
    color: #fff;
    font-size: .72rem;
}
.logo-explosion-speed input[type="range"]{
    width: 100%;
    min-width: 0;
}
.logo-explosion-speed span[id$="-indicator"]{
    grid-column: 1 / -1;
}
/* Toujours visible (pas lie a l'explosion, contrairement aux autres controles) : coin
   bas-droit, seul emplacement libre (bas-gauche = vitesse, bas-centre = fleche mobile). */
.logo-explosion-fullscreen{
    position: absolute;
    bottom: 8px;
    right: 56px; /* a gauche de l'engrenage (en bas a droite) */
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    opacity: .7;
    transition: opacity .2s;
}
.logo-explosion-fullscreen:hover,
.logo-explosion-fullscreen:focus-visible{
    opacity: 1;
}
.logo-explosion-fullscreen.is-active{
    opacity: 1;
    background: rgba(58, 42, 24, .6);
}
.logo-explosion-drought-indicator{
    color: #e8b04d;
    font-weight: 600;
}
.logo-explosion-storm-indicator{
    color: #6fb2e8;
    font-weight: 600;
}
/* Fleches de defilement du monde, mobile seulement (desktop defile au survol du bord). */
.logo-explosion-scroll{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    opacity: .85;
    touch-action: none;
}
.logo-explosion-scroll-left{ left: 8px; }
.logo-explosion-scroll-right{ right: 8px; }
/* Haut/bas : recentrees horizontalement plutot que verticalement (axe different des
   fleches gauche/droite). Le bas sert a descendre creuser plus profond. */
.logo-explosion-scroll-up,
.logo-explosion-scroll-down{
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}
.logo-explosion-scroll-up{ top: 8px; }
.logo-explosion-scroll-down{ bottom: 8px; }
body.home .logo-explosion-scroll-up{
    /* Meme raison que les outils : reste sous la ligne du header remonte par-dessus. */
    top: calc(var(--home-header-h) + 8px);
}
@media (min-width: 768px){
    .logo-explosion-scroll{
        display: none;
    }
}
/* Tresor enfoui : petite facette doree qui scintille a la surface de la terre. */
.logo-explosion-glint{
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    box-shadow: 0 0 10px 4px rgba(255, 214, 110, .8);
    background: linear-gradient(135deg, #fff4cf 50%, #e8b94a 50%);
    pointer-events: none;
    opacity: 0;
    transform: rotate(45deg) scale(.6);
    transition: opacity .4s;
}
.logo-explosion-glint.is-visible{
    animation: logo-explosion-glint 1.6s ease-in-out infinite;
}
@keyframes logo-explosion-glint{
    0%, 100% { opacity: .5; transform: rotate(45deg) scale(.7); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.1); }
}
/* Eclats qui pulsent sur la pepite doree d'un tresor deterre (la pepite elle-meme est
   dessinee dans le canvas) : en CSS pour ne pas forcer la boucle de rendu a tourner. */
.logo-explosion-spark{
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: #fff4cf;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    pointer-events: none;
    opacity: 0;
    animation: logo-explosion-spark 1.8s ease-in-out infinite;
}
.logo-explosion-spark + .logo-explosion-spark{
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    animation-delay: .9s;
}
@keyframes logo-explosion-spark{
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    45% { opacity: 1; transform: scale(1) rotate(45deg); }
}
/* Repere de chaque tresor, pose a la surface : halo dore + poing ou pelle fantome qui montrent ou creuser. */
.logo-explosion-hint{
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
}
.logo-explosion-hint.is-visible{
    opacity: 1;
}
.logo-explosion-hint-halo{
    position: absolute;
    left: 50%;
    top: 18px;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,226,140,.85) 0%, rgba(255,226,140,0) 70%);
    animation: logo-explosion-hint-halo 1.6s ease-in-out infinite;
}
/* Poing fantome qui martele le sol (SVG pose par setupTreasures, memes facettes que le poing du
   jeu). Retourne jointures vers le bas ; le pivot est le centre de la paume, et a l'impact
   (translateY 0) les jointures touchent la surface, 34 px sous l'origine du repere. */
.logo-explosion-hint-hand{
    position: absolute;
    left: 50%;
    top: -2px;
    width: 39px;
    height: 62px;
    margin-left: -19px;
    opacity: .7;
    filter: drop-shadow(0 0 3px rgba(255, 226, 140, .95));
    transform-origin: 50% 31.7%;
    animation: logo-explosion-hint-hand 1s ease-in infinite, logo-explosion-hint-swap 6s linear infinite;
}
/* Pelle fantome, en alternance avec le poing (3 s chacun) : le pivot est la pointe de la lame,
   posee a la surface ; elle plonge, fait levier, ressort. */
.logo-explosion-hint-shovel{
    position: absolute;
    left: -1px;
    top: 25px;
    width: 85px;
    height: 17px;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(255, 226, 140, .95));
    transform-origin: 1.3% 53%;
    animation: logo-explosion-hint-shovel 1.5s ease-in-out infinite, logo-explosion-hint-swap 6s linear -3s infinite;
}
.logo-explosion-hint-hand svg,
.logo-explosion-hint-shovel svg{
    display: block;
    width: 100%;
    height: 100%;
}
@keyframes logo-explosion-hint-halo{
    0%, 100% { transform: scale(.8); opacity: .5; }
    50% { transform: scale(1.15); opacity: .9; }
}
@keyframes logo-explosion-hint-hand{
    0%, 100% { transform: translateY(-46px) rotate(140deg); }
    45%, 58% { transform: translateY(0) rotate(180deg); }
}
@keyframes logo-explosion-hint-shovel{
    0%, 100% { transform: translateY(-36px) rotate(-66deg); }
    40% { transform: translateY(9px) rotate(-82deg); }
    62% { transform: translateY(6px) rotate(-56deg); }
}
/* Visible la premiere moitie du cycle ; la pelle le joue decale d'un demi-cycle. */
@keyframes logo-explosion-hint-swap{
    0%, 46% { opacity: .7; }
    50%, 96% { opacity: 0; }
    100% { opacity: .7; }
}
.logo-explosion-tip{
    position: absolute;
    z-index: 2;
    display: flex;
    gap: 10px;
    align-items: center;
    width: 250px;
    padding: 10px 24px 10px 12px;
    background: #fffaf2;
    border-top: 3px solid var(--color-red);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(58, 42, 24, .18);
    font-size: .85rem;
    line-height: 1.3;
    transform: translate(-50%, calc(-100% + 6px));
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
/* Bulle "creusez..." qui s'ouvre au clic sur un tresor pas encore deterre. */
.logo-explosion-digtip{
    position: absolute;
    z-index: 2;
    width: 210px;
    padding: 8px 10px;
    background: #fffaf2;
    border-top: 3px solid #e8b94a;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(58, 42, 24, .18);
    color: #3a2a18;
    font-size: .85rem;
    line-height: 1.3;
    text-align: center;
    transform: translate(-50%, calc(-100% + 4px));
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.logo-explosion-digtip.is-open{
    opacity: 1;
    transform: translate(-50%, -100%);
}
.logo-explosion-tip-close{
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #8a7a63;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.logo-explosion-tip-close:hover,
.logo-explosion-tip-close:focus-visible{
    background: rgba(58, 42, 24, .1);
    color: #3a2a18;
}
.logo-explosion-tip.is-open{
    transform: translate(-50%, -100%);
    opacity: 1;
    pointer-events: auto;
}
/* Delai a la sortie de terre seulement : laisse le champignon pousser avant l'infobulle. */
.logo-explosion-tip.is-open.is-reveal{
    transition-delay: .5s;
}
.logo-explosion-tip::after{
    content: "";
    position: absolute;
    left: calc(50% + var(--arrow-dx, 0px));
    bottom: -6px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #fffaf2;
    transform: rotate(45deg);
}
.logo-explosion-tip.is-clamped::after{
    display: none;
}
.logo-explosion-tip img{
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
/* Carte d'un tresor deterre (.has-img, voir buildTip) : l'image domine, le titre reste dessous ;
   le texte et le lien se deplient au survol, au focus ou au clic (.is-details). La carte
   grandit vers le haut (ancree par le bas sur le champignon). */
.logo-explosion-tip.has-img{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 220px;
    padding: 0;
    cursor: pointer;
    transition: opacity .25s, transform .25s, width .25s;
}
.logo-explosion-tip-media{
    position: relative;
}
/* Repere discret "la photo s'agrandit" : petite icone pale dans le coin haut gauche (la croix
   est a droite, le credit et le compteur en bas) ; fleches inversees une fois agrandie.
   Decorative : le tap traverse jusqu'a la photo. */
.logo-explosion-tip-media::after{
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(42, 32, 24, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10V4h6M20 14v6h-6M4 4l6 6M20 20l-6-6'/%3E%3C/svg%3E") center / 12px no-repeat;
    opacity: .8;
    pointer-events: none;
}
.logo-explosion-tip.is-zoom .logo-explosion-tip-media::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4v6H4M14 20v-6h6M10 10L4 4M14 14l6 6'/%3E%3C/svg%3E");
}
/* Plusieurs photos (img en tableau dans $spora_treasures) : fleches et compteur poses sur la photo. */
.logo-explosion-tip-nav{
    position: absolute;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 250, 242, .85);
    color: #3a2a18;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.logo-explosion-tip-nav.is-prev{ left: 6px; }
.logo-explosion-tip-nav.is-next{ right: 6px; }
.logo-explosion-tip-nav:hover,
.logo-explosion-tip-nav:focus-visible{
    background: #fffaf2;
}
.logo-explosion-tip-count{
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(58, 42, 24, .6);
    color: #fff;
    font-size: .7rem;
    pointer-events: none;
}
/* Mobile (tactile ou ecran etroit) : pas de compteur, les fleches suffisent sur une petite photo. */
@media (hover: none), (max-width: 767.98px){
    .logo-explosion-tip-count{
        display: none;
    }
}
.logo-explosion-tip.has-img img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 4px 4px 0 0;
    cursor: zoom-in;
}
/* Clic sur la photo (tapTip) : la carte s'elargit, la photo grossit avec elle. */
.logo-explosion-tip.has-img.is-zoom{
    width: 360px;
    max-width: calc(100vw - 24px);
}
.logo-explosion-tip.has-img.is-zoom img{
    cursor: zoom-out;
}
.logo-explosion-tip.has-img .logo-explosion-tip-body{
    padding: 8px 12px 10px;
}
.logo-explosion-tip-more{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s;
}
.logo-explosion-tip-more > div{
    min-height: 0;
    overflow: hidden;
}
.logo-explosion-tip.is-details .logo-explosion-tip-more,
.logo-explosion-tip.is-zoom .logo-explosion-tip-more,
.logo-explosion-tip:focus-within .logo-explosion-tip-more{
    grid-template-rows: 1fr;
}
@media (hover: hover){
    .logo-explosion-tip:hover .logo-explosion-tip-more{
        grid-template-rows: 1fr;
    }
}
/* La croix est posee sur la photo : pastille claire pour rester lisible. */
.logo-explosion-tip.has-img .logo-explosion-tip-close{
    background: rgba(255, 250, 242, .85);
    color: #3a2a18;
}
.logo-explosion-tip.has-img .logo-explosion-tip-close:hover,
.logo-explosion-tip.has-img .logo-explosion-tip-close:focus-visible{
    background: #fffaf2;
}
/* Ecran tactile (pas de survol) : le texte et le lien restent toujours visibles, les boutons
   grossissent pour le doigt, et la carte agrandie (.is-zoom) prend toute la boite du jeu sous
   le header (left / top en !important : positionTipOverMushroom les pose en ligne). */
@media (hover: none){
    .logo-explosion-tip-more{
        grid-template-rows: 1fr;
    }
    .logo-explosion-tip.has-img img{
        aspect-ratio: 3 / 2;
    }
    .logo-explosion-tip.has-img .logo-explosion-tip-close{
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
    }
    .logo-explosion-tip-nav{
        width: 36px;
        height: 36px;
        margin-top: -18px;
        font-size: 1.5rem;
    }
    .logo-explosion-tip.has-img.is-zoom{
        left: 8px !important;
        right: 8px;
        top: calc(var(--game-ui-top, 0px) + 8px) !important;
        bottom: 8px;
        z-index: 3;
        width: auto;
        max-width: none;
        transform: none;
        transition: opacity .25s;
    }
    .logo-explosion-tip.has-img.is-zoom::after{
        display: none;
    }
    .logo-explosion-tip.has-img.is-zoom .logo-explosion-tip-media{
        flex: 1;
        min-height: 0;
        border-radius: 4px 4px 0 0;
        background: #2a2018;
    }
    .logo-explosion-tip.has-img.is-zoom img{
        height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
    }
}
/* Essai mobile : boite sous le bouton de la boutique (#logo-explosion-shelf, ecran etroit) qui
   garde la carte du dernier tresor selectionne (deplacee la par openTip). La carte y est posee
   a plat, photo a gauche ; un tap sur la photo la passe en grand (photo au-dessus du texte). */
.logo-explosion-shelf{
    width: 100%;
    max-width: 420px;
    margin-top: 16px;
    padding: 0 16px;
}
.logo-explosion-shelf:empty{
    display: none;
}
/* Tant qu'une carte y est rangee, elle prend la place du titre et du bouton de la boutique
   (elle a son propre lien produit) : elle arrive juste sous le jeu, sans avoir a defiler. Le
   titre reste dans le HTML (h1 de la page), il n'est que masque ; la croix de la carte le ramene. */
.logo-explosion-hero:has(.logo-explosion-shelf .logo-explosion-tip) > .logo-explosion-tagline,
.logo-explosion-hero:has(.logo-explosion-shelf .logo-explosion-tip) > .btn{
    display: none;
}
.logo-explosion-shelf .logo-explosion-tip.has-img{
    position: static;
    flex-direction: row;
    width: auto;
    max-width: none;
    overflow: hidden;
    transform: none;
    transition: none;
    pointer-events: auto;
    /* La carte reste affichee meme "fermee" dans le jeu (plus de .is-open) : seule sa croix la
       retire (voir buildTip). Poses en ligne pour le jeu, donc !important ici : left / top
       (positionTipOverMushroom), le fondu hors ecran, et touch-action none (la page doit defiler). */
    position: relative;
    left: auto !important;
    top: auto !important;
    opacity: 1 !important;
    touch-action: pan-y !important;
}
.logo-explosion-shelf .logo-explosion-tip::after{
    display: none;
}
/* La croix est sur le texte ici, pas sur la photo : le titre lui laisse la place. */
.logo-explosion-shelf .logo-explosion-tip-body{
    padding-right: 38px;
}
.logo-explosion-shelf .logo-explosion-tip-media{
    flex: 0 0 42%;
    min-height: 130px;
}
.logo-explosion-shelf .logo-explosion-tip.has-img img{
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
}
.logo-explosion-shelf .logo-explosion-tip-more{
    grid-template-rows: 1fr;
}
.logo-explosion-shelf .logo-explosion-tip-nav{
    width: 28px;
    height: 28px;
    margin-top: -14px;
    font-size: 1.2rem;
}
.logo-explosion-shelf .logo-explosion-tip.has-img.is-zoom{
    flex-direction: column;
    /* Annule le plein cadre tactile de .is-zoom (la carte est en position relative ici). */
    right: auto;
    bottom: auto;
}
.logo-explosion-shelf .logo-explosion-tip.has-img.is-zoom .logo-explosion-tip-media{
    flex: none;
    min-height: 0;
    background: none;
}
.logo-explosion-shelf .logo-explosion-tip.has-img.is-zoom img{
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
}
/* Pastille de l'essai mobile (shelfCue) : surgit au-dessus du champignon, reste un instant,
   puis tombe sous le bord de la boite (qui la coupe) vers la carte rangee dessous. */
.logo-explosion-shelf-cue{
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 210px;
    padding: 4px 12px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: #fffaf2;
    box-shadow: 0 6px 18px rgba(58, 42, 24, .25);
    color: #3a2a18;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    animation: logo-explosion-shelf-cue 2s .35s both;
}
.logo-explosion-shelf-cue img{
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.logo-explosion-shelf-cue::after{
    content: "↓";
    color: var(--color-red);
    font-size: 1rem;
}
@keyframes logo-explosion-shelf-cue{
    0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); }
    10% { opacity: 1; transform: translate(-50%, -100%) scale(1.06); }
    16%, 62% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, calc(-100% + var(--drop, 200px))) scale(.8); }
}
/* La carte rangee s'illumine (or des tresors) quand la pastille arrive. */
.logo-explosion-shelf .logo-explosion-tip.is-fresh{
    animation: logo-explosion-shelf-fresh 1.2s 1.6s;
}
@keyframes logo-explosion-shelf-fresh{
    0% { box-shadow: 0 0 0 0 rgba(232, 185, 74, .9), 0 6px 18px rgba(58, 42, 24, .18); }
    100% { box-shadow: 0 0 0 14px rgba(232, 185, 74, 0), 0 6px 18px rgba(58, 42, 24, .18); }
}
@media (prefers-reduced-motion: reduce){
    .logo-explosion-shelf-cue{ --drop: 0px !important; } /* pose en ligne par shelfCue */
    .logo-explosion-shelf .logo-explosion-tip.is-fresh{ animation: none; }
}
.logo-explosion-tip-body p{
    margin: 2px 0 4px;
}
.logo-explosion-tip-body a{
    font-weight: 600;
}
/* Credit d'une photo sous licence libre (credit dans $spora_treasures) : en pale dans le coin
   bas gauche de la photo, le compteur garde le coin droit. */
.logo-explosion-tip-credit{
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 64px);
    color: #fff;
    font-size: .6rem;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    opacity: .7;
}
.logo-explosion-tip-credit:hover{
    opacity: 1;
}
/* Seulement sur la photo agrandie : en petit, il encombre la photo et se lit mal. */
.logo-explosion-tip:not(.is-zoom) .logo-explosion-tip-credit{
    display: none;
}
.logo-explosion-tip-credit a{
    color: inherit;
    text-decoration: none;
}
.logo-explosion-tip-body .logo-explosion-tip-strain{
    color: #8a6418;
    font-weight: 600;
}
@media (max-width: 767.98px){
    .logo-explosion-tip{
        width: 210px;
    }
    .logo-explosion-tip.has-img{
        width: 190px;
    }
}
.logo-explosion-rebuild:hover,
.logo-explosion-rebuild:focus-visible{
    opacity: 1;
    transform: rotate(-90deg);
}

/* Barre d'outils repliee : seule la bulle de l'outil actif reste visible ; les autres
   (et le solde) se deroulent en dessous au survol/focus et se referment quand on s'eloigne. */
.logo-explosion-tools{
    gap: 0;
}
.logo-explosion-tools .logo-explosion-tool,
.logo-explosion-tools .logo-explosion-money{
    overflow: hidden;
    transition: opacity .2s, border-color .2s, max-height .25s ease, margin-top .25s ease;
}
.logo-explosion-tools .logo-explosion-tool.is-active{
    order: -1;
}
.logo-explosion-tools .logo-explosion-tool:not(.is-active),
.logo-explosion-tools .logo-explosion-money{
    max-height: 0;
    margin-top: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
}
.logo-explosion-tools:hover .logo-explosion-tool:not(.is-active),
.logo-explosion-tools:has(:focus-visible) .logo-explosion-tool:not(.is-active){
    max-height: 40px;
    margin-top: 6px;
    border-width: 2px;
    opacity: .7;
    pointer-events: auto;
}
.logo-explosion-tools:hover .logo-explosion-money,
.logo-explosion-tools:has(:focus-visible) .logo-explosion-money{
    max-height: 28px;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
}
.logo-explosion-tools .logo-explosion-tool:not(.is-active):hover,
.logo-explosion-tools .logo-explosion-tool:not(.is-active):focus-visible{
    opacity: 1;
}

/* Menu des souches de mycelium : rangee de pastilles juste a droite de la barre d'outils
   (qui est en colonne, large de 40px a left:16px), visible seulement avec l'outil
   mycelium (voir updateStrainBar). Meme style que les bulles d'outils. */
.logo-explosion-strains{
    position: absolute;
    top: 8px;
    left: 64px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
}
body.home .logo-explosion-strains{
    top: calc(var(--home-header-h) + 8px);
}
.logo-explosion-strain{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    opacity: .8;
    transition: opacity .2s, border-color .2s;
}
.logo-explosion-strain:hover:not(:disabled),
.logo-explosion-strain:focus-visible{
    opacity: 1;
}
.logo-explosion-strain.is-active{
    opacity: 1;
    border-color: var(--color-red);
    background: rgba(58, 42, 24, .6);
}
.logo-explosion-strain-dot{
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}
.logo-explosion-strain.is-locked{
    opacity: .45;
    cursor: not-allowed;
}
.logo-explosion-strain.is-locked .logo-explosion-strain-dot{
    background: rgba(255, 255, 255, .12);
    border-style: dashed;
}
.logo-explosion-grass{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    opacity: .8;
    font-size: 1.4rem;
    cursor: pointer;
    transition: opacity .2s, border-color .2s;
}
.logo-explosion-grass:hover,
.logo-explosion-grass:focus-visible{
    opacity: 1;
}
.logo-explosion-grass.is-active{
    opacity: 1;
    border-color: #4ade80;
    background: rgba(58, 42, 24, .6);
}
/* Compteur de tresors, en haut a droite a gauche du bouton reconstruire ; devient un lien
   vers la boutique quand tout est trouve. */
.logo-explosion-treasures{
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 240px);
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 10px;
    border-radius: 14px;
    text-align: center;
    background: rgba(58, 42, 24, .55);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}
/* Range dans le panneau de parametres : plus de position flottante. */
.logo-explosion-debug-panel .logo-explosion-treasures{
    position: static;
    transform: none;
    max-width: none;
    margin: 0 0 8px;
    justify-content: center;
}
.logo-explosion-treasures.is-complete{
    background: rgba(140, 100, 20, .85);
}
.logo-explosion-treasures a{
    color: #fff4cf;
    text-decoration: none;
}
.logo-explosion-treasures a:hover,
.logo-explosion-treasures a:focus-visible{
    text-decoration: underline;
}

/* Fleche d'invite vers le menu d'outils (remplace l'ancien texte "Creusez...") : rebondit
   a cote de la bulle jusqu'a la premiere interaction avec les outils. */
.logo-explosion-tools-arrow{
    position: absolute;
    top: 8px;
    left: 64px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    /* Meme or que la facette des tresors (.logo-explosion-glint). */
    color: #e8b94a;
    pointer-events: none;
    transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--rot, 0deg));
}
.logo-explosion-tools-arrow svg{
    animation: logo-explosion-arrow-bounce .8s ease-in-out infinite;
}
body.home .logo-explosion-tools-arrow{
    top: calc(var(--home-header-h) + 8px);
}
@keyframes logo-explosion-arrow-bounce{
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(14px); }
}

/* Bouton muet des effets sonores (injecte par spora-sfx.js) */
.spora-sfx-toggle {
  position: absolute;
  right: 56px;
  bottom: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s;
}
.spora-sfx-toggle:hover,
.spora-sfx-toggle:focus-visible { opacity: 1; }

/* Plein ecran et son : sortent a cote de l'engrenage (en bas a droite) quand on le survole,
   comme la barre d'outils. Le petit delai a la disparition laisse le temps d'y aller. */
.logo-explosion-inner .logo-explosion-fullscreen,
.logo-explosion-inner .spora-sfx-toggle{
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s .4s, visibility 0s .6s;
}
.logo-explosion-inner .spora-sfx-toggle{ right: 96px; }
.logo-explosion-inner:has(.logo-explosion-debug-toggle:hover, .logo-explosion-debug-toggle:focus-visible, .logo-explosion-debug-toggle.is-active, .logo-explosion-fullscreen:hover, .spora-sfx-toggle:hover) .logo-explosion-fullscreen,
.logo-explosion-inner:has(.logo-explosion-debug-toggle:hover, .logo-explosion-debug-toggle:focus-visible, .logo-explosion-debug-toggle.is-active, .logo-explosion-fullscreen:hover, .spora-sfx-toggle:hover) .spora-sfx-toggle{
    opacity: .7;
    visibility: visible;
    transition-delay: 0s;
}

/* Boussole des tresors : badge "?" cliquable (teleporte la pelle) + pointe detachee vers le tresor. */
.logo-explosion-compass{
    position: absolute;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s;
    outline: none;
}
.logo-explosion-compass.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity .4s;
}
.logo-explosion-compass-badge{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transition: transform .15s;
}
.logo-explosion-compass-core{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2b1d10;
    border: 3px solid #f3c94a;
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.logo-explosion-compass-core svg{ display: block; }
.logo-explosion-compass.is-visible .logo-explosion-compass-core{
    animation: logo-explosion-compass 1.6s ease-in-out infinite;
}
.logo-explosion-compass:focus-visible .logo-explosion-compass-badge{
    outline: 3px solid #f3c94a;
    outline-offset: 3px;
}
.logo-explosion-compass.is-pressed .logo-explosion-compass-badge{
    transform: scale(.85);
}
/* Onde qui s'etend depuis le badge. */
.logo-explosion-compass-wave{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #f3c94a;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
}
.logo-explosion-compass.is-visible .logo-explosion-compass-wave{
    animation: logo-explosion-compass-wave 1.8s ease-out infinite;
}
/* Pointe detachee : le conteneur tourne, le badge (le "?") reste droit. */
.logo-explosion-compass-arrow{
    position: absolute;
    inset: 0;
    transform: rotate(var(--ang, 0rad));
    pointer-events: none;
}
.logo-explosion-compass-arrow svg{
    position: absolute;
    left: 100%;
    top: 50%;
    margin: -9px 0 0 7px;
    display: block;
}
.logo-explosion-compass.is-visible .logo-explosion-compass-arrow svg{
    animation: logo-explosion-compass-slide 1s ease-in-out infinite;
}
/* Bulle explicative (survol/focus, et ~5 s a la toute premiere apparition). */
.logo-explosion-compass-tip{
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    width: 190px;
    padding: 8px 10px;
    background: #fffaf2;
    border-top: 3px solid #e8b94a;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(58, 42, 24, .18);
    color: #3a2a18;
    font-size: .85rem;
    line-height: 1.3;
    text-align: center;
    transform: translate(calc(-50% + var(--lx, 0px)), 4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.logo-explosion-compass.is-below .logo-explosion-compass-tip{
    bottom: auto;
    top: calc(100% + 10px);
}
.logo-explosion-compass:hover .logo-explosion-compass-tip,
.logo-explosion-compass:focus-visible .logo-explosion-compass-tip,
.logo-explosion-compass.show-tip .logo-explosion-compass-tip{
    opacity: 1;
    transform: translate(calc(-50% + var(--lx, 0px)), 0);
}
@keyframes logo-explosion-compass{
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes logo-explosion-compass-wave{
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.7); opacity: 0; }
}
@keyframes logo-explosion-compass-slide{
    0%, 100% { translate: 0 0; }
    50% { translate: 5px 0; }
}
@media (prefers-reduced-motion: reduce){
    .logo-explosion-compass.is-visible .logo-explosion-compass-core,
    .logo-explosion-compass.is-visible .logo-explosion-compass-wave,
    .logo-explosion-compass.is-visible .logo-explosion-compass-arrow svg{
        animation: none;
    }
}

/* Bouton de vitesse (bas gauche) : boucle normal -> x3 -> x10, meme style que les outils.
   Les chevrons allumes montrent le niveau (voir speedBtn dans jeu/evenements.js). */
.logo-explosion-speed-btn{
    position: absolute;
    bottom: 8px;
    left: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 12px 0 10px;
    border: 2px solid transparent;
    border-radius: 20px;
    background: rgba(58, 42, 24, .35);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    opacity: .7;
    transition: opacity .2s, border-color .2s;
}
.logo-explosion-speed-btn:hover,
.logo-explosion-speed-btn:focus-visible{
    opacity: 1;
}
.logo-explosion-speed-btn.is-fast{
    opacity: 1;
    border-color: var(--color-red);
    background: rgba(58, 42, 24, .6);
}

/* Pastille des defis dans la barre d'outils (sous l'argent) ; la liste sort a droite au survol. */
.logo-explosion-challenges-badge{
    /* Fixe (ne suit pas la barre d'outils qui se deplie), 2e rangee a droite des outils,
       sous la rangee des souches ; discret tant qu'on n'est pas pres. */
    position: absolute;
    top: 8px;
    left: 16px;
    z-index: 2;
    opacity: .4;
    transition: opacity .2s;
    display: grid;
    place-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: rgba(58, 42, 24, .55);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
body.home .logo-explosion-challenges-badge{
    top: calc(var(--home-header-h) + 8px);
}
/* La pastille prend la place du haut : la barre d'outils et la rangee des souches descendent d'un cran. */
.logo-explosion-tools,
.logo-explosion-strains{
    top: 44px;
}
body.home .logo-explosion-tools,
body.home .logo-explosion-strains{
    top: calc(var(--home-header-h) + 8px + 36px);
}
/* Mobile : le header replie pendant le jeu est bien plus court que --home-header-h (header
   deplie du desktop), les controles du haut flottaient donc trop bas. Ils se calent sur sa
   vraie hauteur, mesuree par jeu/evenements.js (--game-ui-top). Pose sur les enfants, pas
   sur la boite : sa hauteur a elle continue d'utiliser --home-header-h. */
@media (max-width: 767.98px){
    body.home .logo-explosion-inner > *{
        --home-header-h: var(--game-ui-top, 150px);
    }
    /* La carte d'explication se posait au-dessus des controles : plus de place la-haut,
       elle passe sous la pastille des defis et l'outil actif. */
    body.home .logo-explosion-explain{
        top: calc(var(--home-header-h) + 8px + 36px + 40px + 14px);
        left: 8px;
        transform: translateY(-8px);
    }
    body.home .logo-explosion-explain.is-visible{
        transform: none;
    }
    /* La boite du jeu part du haut de l'ecran (plus de padding au-dessus) : sans ca la
       fleche "monter" ne peut pas entrer dans la bande du header, la boite la coupe. */
    body.home .logo-explosion-hero{
        padding-top: 0;
    }
    /* Fleche "monter" : dans la bande du header replie, centree en hauteur (position mesuree
       par jeu/evenements.js), au lieu de la ligne sous le header pensee pour le desktop.
       z-index au-dessus du .z-3 du header, sinon son flou la brouille. Menu mobile ouvert
       (header deplie) : elle reste sous le header. */
    body.home:has(.header.is-compact) .logo-explosion-scroll-up{
        top: calc(var(--game-arrow-top, 8px) + 25px); /* + 25px : regle a l'oeil sur telephone */
        z-index: 4;
    }
}
.logo-explosion-challenges-badge:hover,
.logo-explosion-challenges-badge.is-open,
.logo-explosion-challenges-badge:focus-visible,
.logo-explosion-inner:has(.logo-explosion-tools:hover) .logo-explosion-challenges-badge{
    opacity: 1;
}
.logo-explosion-challenges-pop{
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    z-index: 3;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(20, 14, 8, .92);
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s .2s;
}
/* S'ouvre au clic (classe is-open, voir buildChallengeBadge), plus au survol. */
.logo-explosion-challenges-badge.is-open .logo-explosion-challenges-pop{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.logo-explosion-challenges{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
/* Pont invisible sur l'ecart de 8px : sans lui, le survol se perd en allant de la pastille a la liste. */
.logo-explosion-challenges-pop::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    width: 8px;
}
.logo-explosion-challenges-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 4px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    color: #fff;
    font-size: .8rem;
    opacity: .8;
}
.logo-explosion-challenges-toggle:hover,
.logo-explosion-challenges-toggle:focus-visible{
    opacity: 1;
}
.logo-explosion-challenges-chevron{
    transition: transform .2s;
}
.logo-explosion-challenges-toggle.is-open .logo-explosion-challenges-chevron{
    transform: rotate(180deg);
}
.logo-explosion-challenges-done{
    margin-top: 4px;
    opacity: .7;
}
.logo-explosion-challenges-pop.is-empty .logo-explosion-challenges:not(.logo-explosion-challenges-done)::after{
    content: 'Tous les défis sont réussis !';
    font-size: .85rem;
}
.logo-explosion-challenges li{
    padding: 2px 0;
}
.logo-explosion-challenges li.is-done{
    opacity: 0.6;
    text-decoration: line-through;
}

.logo-explosion-challenges-done{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.logo-explosion-challenges-done li{
    padding: 2px 0;
}

/* Mode demo (accueil) : ce qui est coupe par rapport au jeu complet. Retirer une ligne pour la garder. */
.logo-explosion-inner.is-demo .logo-explosion-challenges-badge,
.logo-explosion-inner.is-demo .logo-explosion-money,
.logo-explosion-inner.is-demo .logo-explosion-tool[data-tool="tree"],
.logo-explosion-inner.is-demo .logo-explosion-tool[data-tool="fertilizer"],
.logo-explosion-inner.is-demo .logo-explosion-strains,
.logo-explosion-inner.is-demo .logo-explosion-speed-btn,
.logo-explosion-inner.is-demo .logo-explosion-scroll-left,
.logo-explosion-inner.is-demo .logo-explosion-scroll-right,
.logo-explosion-inner.is-demo .logo-explosion-debug-toggle,
.logo-explosion-inner.is-demo .logo-explosion-debug-panel{
    display: none !important;
}

/* Ecran de fin de la demo */
.logo-explosion-end{
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(30, 20, 10, .45);
}
.logo-explosion-end-box{
    position: relative;
    max-width: 24rem;
    padding: 24px;
    border-radius: 12px;
    background: #f7efd9;
    border: 1px solid #d9c9a0;
    box-shadow: 2px 3px 14px rgba(0, 0, 0, .35);
    color: #4a3a22;
    text-align: center;
}
.logo-explosion-end-title{
    display: block;
    margin-bottom: 6px;
    font-size: 1.35rem;
}
.logo-explosion-end-box p{ margin: 0 0 16px; }
.logo-explosion-end-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}