:root{
    --bg-top:#0a1535;
    --bg-bottom:#060b22;
    --gold:#f4b526;
    --gold-light:#ffd76a;
    --green-potion:#acd393;
    --slot-border: #a76305;
    --slot-bg:rgba(20,40,80,.35);
    --plus:#ffffff;
    --txt:#ffffff;
    --err:#c0392b;
    --font-display:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}

body{
    -webkit-user-select:none;
    touch-action:manipulation;
}

/* ============================================================
   WRAPPER ENCART : confine le moteur du jeu dans un bloc
   ============================================================ */
#game_wrapper{
    position:relative;            /* référentiel local ; PAS de transform/filter ici */
    width:100%;
    margin:0 auto;                /* centré horizontalement sans flex sur le body */
    overflow:hidden;              /* clippe la grille + chaudron dans l'encart */
}
/* champ d'étoiles propre à l'encart */
#game_wrapper::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
            radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7), transparent),
            radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.5), transparent),
            radial-gradient(2px 2px at 85% 40%, rgba(170,200,255,.6), transparent),
            radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,.4), transparent),
            radial-gradient(2px 2px at 10% 55%, rgba(255,255,255,.3), transparent);
    opacity:.9;
}

.game_stage{position:relative;z-index:1;margin:0 auto;
    display:flex;flex-direction:column;justify-content:center;}

/* ---------- grille d'ingrédients ---------- */
.game_tray{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(8px,1.8vw,24px);
    width:100%;
    max-width:1096px;
    margin: 0 auto 0;
    align-self:center;
}
/* 5 par rangée : chaque slot = 1/5 de la largeur moins les gaps */
.game_slot{
    flex:0 0 calc((100% - 4 * clamp(8px,1.8vw,24px)) / 5);
    margin-bottom: 5px;
}

.game_slot{position:relative;aspect-ratio:1;min-height:0;overflow:visible;
    border:2px solid var(--slot-border);
    border-radius:16px;background:var(--slot-bg);display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(2px);}
.game_slot .game_plus{
    cursor: pointer;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index: 2;
    width:26px;
    height:26px;
    bottom: -13px;
    font-size:30px;
    border-radius:50%;
    background:var(--plus);
    color:#00031f;
    line-height: 1;
    padding-right: 0;
    padding-bottom: 3px;
    display:flex;align-items:center;justify-content:center;font-weight:900;
    font-family: 'UderzoTiTR';
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    transition:transform .2s, background .2s;
}
.game_slot .game_plus {
}
.game_slot.game_filled .game_plus,
.game_slot .game_plus:first-child:last-child{opacity: 0; transition:all .3s ease-in;}

.game_tray.game_done .game_slot:not(.game_filled) .game_ingredient{opacity:.35;filter:grayscale(.7) drop-shadow(0 2px 3px rgba(0,0,0,.4));cursor:default;pointer-events:none;}
.game_tray.game_done .game_slot:not(.game_filled) .game_plus{opacity:.3;pointer-events:none;}

/* l'ingrédient draggable : fond image via data-id */
.game_ingredient{width:100%;height:100%;
    background-repeat:no-repeat;background-position:center;background-size:contain;
    cursor:grab;touch-action:none;
    transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));will-change:transform;}
/* mapping data-id → PNG (placeholders à remplacer par les vrais visuels) */
.game_ingredient[data-id="ailes"]   {
    background-image:url('assets/ingredient-ailes.png');
    filter: drop-shadow(0 0 clamp(16px, 4vw, 43px) rgba(70, 130, 255, 0.43));
}
.game_ingredient[data-id="roses"]   {background-image:url('assets/ingredient-roses.png');}
.game_ingredient[data-id="lyre"]    {background-image:url('assets/ingredient-lyre.png');}
.game_ingredient[data-id="fleur"]   {background-image:url('assets/ingredient-fleur.png');}
.game_ingredient[data-id="poisson"] {background-image:url('assets/ingredient-glaive.png');}
.game_ingredient[data-id="maillet"] {background-image:url('assets/ingredient-maillet.png');}
.game_ingredient[data-id="pierre"]  {background-image:url('assets/ingredient-pierre.png');}
.game_ingredient[data-id="fleurs2"] {background-image:url('assets/ingredient-fleurs2.png');}
.game_ingredient[data-id="fiole"]   {background-image:url('assets/ingredient-fiole.png');}
.game_ingredient:active{cursor:grabbing;}
.game_ingredient.game_dragging{transition:none;z-index:999;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));}
.game_ingredient.game_return{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.game_ingredient.game_consumed{opacity:0;transform:scale(0);transition:all .3s ease-in;}
/* [ASSET : ici tu mets background-image du PNG de chaque ingrédient,
   et tu retires l'emoji texte] */

/* ---------- scène basse ---------- */
.game_scene{position:relative;display:flex;align-items:start;justify-content:center;
    margin-top:10vw;min-height:clamp(220px,38vw,360px);}

.game_cauldron_wrap{position:relative;display:flex;flex-direction:column;align-items:center;
    margin:0 clamp(4px,3vw,40px);}
.game_cauldron{
    position:relative;width:40vw;height:40vw;}
/* le liquide vert et le rebord sont DANS le PNG, on n'a plus besoin du .brew CSS */
.game_cauldron .game_brew{display:none;}
.game_cauldron.game_hot{animation:wobble .4s ease;}
.game_cauldron.game_over{transform:translateY(-4px) scale(1.03);}
.game_cauldron.game_over .game_glow{opacity:1;}
/*.game_glow{position:absolute;inset:-20% -10% 30%;border-radius:50%;*/
/*    background:radial-gradient(circle, rgba(156,212,69,.55), transparent 70%);*/
/*    opacity:.5;filter:blur(8px);transition:opacity .25s;pointer-events:none;}*/
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}

/* bulles ambiance */
.game_bubble{position:absolute;top:24%;width:8px;height:8px;border-radius:50%;
    background:rgba(192,222,171,.9);animation:rise 2s ease-in infinite;}
@keyframes rise{0%{transform:translateY(6px) scale(.4);opacity:0}
    25%{opacity:1}100%{transform:translateY(-40px) scale(1);opacity:0}}

.game_counter{margin-top:14px;font-size:14px;opacity:.85;text-align:center;}
.game_counter b{color:var(--gold-light);}

/* ---------- zone supérieure (tray + compteur OU titre de fin) ---------- */
/* Hauteur figée en JS au chargement pour empêcher tout reflow vertical
   lorsque la tray disparaît : la scène en dessous reste rigoureusement immobile. */
.game_topzone{position:relative;}
.game_play{display:flex;flex-direction:column;align-items:center;width:100%;}

/* titre de résultat : superposé dans la zone, centré verticalement */
.game_result_inline{
    position:absolute;inset:0;
    display:flex;

    gap:30px;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    /*text-align:center;line-height:.95;padding:0 12px;*/
    /*font-weight:900;font-variant:small-caps;letter-spacing:2px;*/
    /*font-size:clamp(56px,14vw,140px);*/
    /*!* lettres dorées avec contour rouge-orange épais comme la maquette *!*/
    /*color:#ffd042;*/
    /*-webkit-text-stroke:3px #b1310f;*/
    /*text-shadow:*/
    /*        0 0 0 #b1310f,*/
    /*        4px 4px 0 #6e1c08,*/
    /*        0 0 22px rgba(255,170,40,.55),*/
    /*        0 4px 8px rgba(0,0,0,.6);*/
    /*filter:drop-shadow(0 0 18px rgba(255,180,40,.5));*/
    /*opacity:0;pointer-events:none;*/
    opacity:0;
    transform:scale(0) rotate(-8deg);
}

.game_result_inline.animation_completed .btn{
    opacity: 1;
}
.game_result_inline .btn {
    opacity: 0;
    transition:all .15s ease-in;
    padding-left: 50px;
    padding-right: 50px;
}
.game_result_inline.game_show{
    animation:pop .55s cubic-bezier(.34,1.7,.5,1) forwards;
}
@keyframes pop{
    0%{transform:scale(0) rotate(-8deg);opacity:0}
    60%{transform:scale(1.12) rotate(2deg);opacity:1}
    100%{transform:scale(1) rotate(0);opacity:1}
}

/* en fin de partie : on masque la tray + compteur, le titre prend leur place */
.game_stage.game_finished .game_play{visibility:hidden;}

/* ---------- overlay léger : juste le CTA en bas ---------- */
.game_overlay{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
    flex-direction:column;align-items:center;justify-content:flex-end;
    padding:24px 24px 36px;pointer-events:none;
    /* léger dégradé en bas pour faire ressortir le bouton sans masquer la scène */
    background:linear-gradient(to top, rgba(6,11,34,.85), rgba(6,11,34,0) 100%);
    animation:slideUp .5s cubic-bezier(.2,.8,.3,1) both;}
.game_overlay.game_show{display:flex;}
.game_overlay .game_cta{pointer-events:auto;}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

.game_cta{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:bold;
    font-variant:small-caps;letter-spacing:1px;font-size:clamp(15px,3.6vw,20px);
    padding:14px 34px;border-radius:40px;color:#1a1a1a;
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    box-shadow:0 6px 0 #b67d10,0 10px 18px rgba(0,0,0,.4);transition:transform .1s;}
.game_cta:active{transform:translateY(3px);box-shadow:0 3px 0 #b67d10,0 6px 10px rgba(0,0,0,.4);}

/* canvas particules (feu d'artifice victoire) : au-dessus des overlays
   pour rester visible quand l'écran GAGNÉ s'affiche */
#game_fx{position:fixed;inset:0;z-index:60;pointer-events:none;display:none;}
#game_fx.game_show{display:block;}

/* couche de drag : conteneur fixe plein écran, hors flux.
   pointer-events:none pour ne pas gêner ; l'ingrédient dedans les réactive. */
#game_drag_layer{position:fixed;inset:0;z-index:55;pointer-events:none;}
#game_drag_layer .game_ingredient{pointer-events:auto;}

@media(max-width:767px){
    .game_tray{
        max-width:85%;
        gap:14px;
    }
    /* 3 par rangée sur mobile */
    .game_slot{flex:0 0 calc((100% - 2 * 14px) / 3);
    }
}
@media(min-width:768px) {
    .game_slot{
        margin-bottom: 10px;
    }
    .game_slot .game_plus {
        width: 36px;
        height: 36px;
        bottom: -18px;
        font-size:35px;
    }

    .game_cauldron{
        /*background:url('assets/cauldron.png') no-repeat center;*/
        /*background-size:contain;*/
        position:relative;
        width:25vw;height:25vw;
    }
    .game-page .game_scene {
        aspect-ratio: 6 / 2;
        min-height: auto;
        margin-top: 5vw;
    }

    .game_tray {
        max-width: 65%;
    }
}

@media(min-width:1200px){
    .game_slot .game_plus{
        width:50px;
        height:50px;
        bottom: -25px;
        font-size: 44px;
    }
    .game_tray {
        max-width: 1096px;
    }
}

@media(min-width:1400px){

    /*.game_tray {*/
    /*    max-width:1096px;*/
    /*}*/
}