*{
    color: white;
    user-select: none;
}

body{
    background: rgb(88, 79, 78) url("./template/felt_tile_magenta_128.png") repeat;
    background-attachment: fixed;
}

p>span{
    color: red;
}

img, .green{
    background-color: rgb(9, 96, 9);
}

#recap{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
    #recapLeft, #recapRight{
        margin-top: 20px;
        width: 400px;
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        /* justify-content: space-between; */
        align-items: flex-end;
    }
        #recapLeft>div, #recapRight>div{
            width: 50%;
            min-width: 170px;
            border: groove rgb(95, 44, 6) 12px;
        }        
            #recapLeft>div>button, #recapRight>div>button{
                width: 100%;
                height: 100%;
                background-color: #794305;
                font-size: 1.4rem;
            }        
            #recapLeft>div>button:hover, #recapRight>div>button:hover{
                background-color: #a57f53;
            }
    #recapCenter{
        width: 400px;
        /* border: solid black 2px; */
    }
        #money{
            display: inline-block;
            width: 100%;
            text-align: center;
        }
        #bonus{
            display: inline-block;
            width: 100%;
            text-align: center;
        }


#recap{
    background-color: transparent;

}

.enabled{
    cursor: grab;
}

.disabled{
    cursor: no-drop;
}

#playGround{
    margin-top: 15px;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: space-evenly;
}
    #infosActif>h2{
        text-decoration: underline;
    }

    div:has(> #informationRefreshButton){
        width: 150px;
        height: 200px;
        background-color: #794305;
        display: flex;
        border: groove rgb(95, 44, 6) 12px;
    }
        #informationRefreshButton{
            width: 100%;
            height: 100%;
            background-color: #794305;
            font-size: 1.4rem;
        }

        #informationRefreshButton:hover{
            background-color: #a57f53;
        }

    #actif, #infosActif{
        background-color: rgb(9, 96, 9);
        /* background: rgb(88, 79, 78) url("./template/wood_table_512_v2.png") repeat; */


        background-image:
        /* ombre douce pour casser l'effet papier peint */
        radial-gradient(1200px 600px at 50% -200px, rgba(0,0,0,0.10), transparent 60%),
        /* micro-bandes pour donner du relief */
        linear-gradient(180deg, rgba(0,0,0,0.04), rgba(255,255,255,0.02)),
        image-set("./template/wood_table_512_dark.webp" type("image/webp"), "./template/wood_table_512_dark.png" type("image/png"));
        background-repeat: no-repeat, no-repeat, repeat;
        /* Échelle : une “planche” ~350–450px visuelle */
        /* background-attachment: fixed, fixed, scroll; */


        /* background-attachment: fixed; */
        width: 400px;
        height: 100%;
        overflow-y: auto;
        scrollbar-color: rgb(95, 44, 6) #b79b10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        /* border: inset rgb(116, 15, 15) 12px; */
        /* border: outset rgb(116, 15, 15) 12px; */        
        border: groove rgb(95, 44, 6) 12px;
    }
        #range, #review, #autoDealer, #rakeBack{
            display: flex;
            width: 300px;
            height: 100px;
            align-items: center;
        }
            #rangePic, #reviewPic, #autoDealerPic, #rakeBackPic{
                width: 200px;
                height: 100%;
                border: solid rgb(103, 4, 24) 2px;
                border-radius: 50% / 10%;
            }
            #rangeButton, #reviewButton, #autoDealerButton, #rakeBackButton{
                width: 80px;
                height: 80%;
                background-color: rgb(182, 19, 60);
                border-radius: 50% / 10%;
                margin-left: 20px;
            }
            #rangeButton:hover, #reviewButton:hover, #autoDealerButton:hover, #rakeBackButton:hover{
                width: 80px;
                height: 80%;
                background-color: rgb(48, 7, 211);
                border-radius: 50% / 10%;
                margin-left: 20px;
            }
            .enabled{
                background-color: rgb(182, 19, 60) !important;
            }
            .disabled{
                background-color: rgba(130, 15, 32, 0.733) !important;
                color: transparent;
            }

    #middle{
        background-color: rgb(9, 96, 9);
        width: 400px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: ridge rgb(116, 15, 15) 12px;
        border-radius: 50%/ 30%;
        box-shadow: 4px 4px 2000px 0px rgba(255, 0, 0, 0.349);
    }    
        #divAutoSaveMsg{
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            padding-top: 50px;
        }
        div:has(#boutonBonus){
            /* border: groove rgb(187, 184, 32) 5px; */
        }
        #boutonBonus{
            font-size: 2rem;
            width: 150px;
            height: 70px;
            background-color: #d1c51c;
            color: black;
        }
        #boutonBonus:hover{
            background-color: #a57f53;
        }
        #dollarPerClick{
            background: transparent !important;
            text-align: center;
        }
        div:has(> #clicker){
            width: 150px;
            height: 150px;
            margin: 50px;
        }
        #clicker{
            width: 150px;
            height: 150px;
            border: solid black 2px;
            border-radius: 50%;
            cursor: grab;
        }

        #clicker:active{
            transform: translateY(5px);
            box-shadow: 0px 0px 10px 5px rgba(117, 5, 5, 0.58);
            width: 140px;
            height: 140px;
        }

        .radiantMoving{
            background-image: radial-gradient(circle,
            rgba(241,239,226,0.62) 0%,
            rgba(255,251,199,1) 49%,
            rgba(237,189,57,1) 100%);
            background-repeat: no-repeat;
            background-size: 200% 200%;   /* >100% pour voir le mouvement */
            background-position: 50% 50%;
            will-change: background-position;
            animation: pulseGlow 6s linear infinite;
        }

        @keyframes radiant-move {
            0% { background-position: 0% 0%;}
            50% { background-position: 100% 100%;}
            100% { background-position: 0% 0%;}
        }
        @keyframes pulseGlow{
            0%,20%,40%,60%,80%,100% { 
                filter: brightness(1);   
                background-size: 100% 100%;
                background-image: radial-gradient(circle,
                rgba(241,239,226,0.62) 0%,
                rgba(255,251,199,1) 49%,
                rgba(237,189,57,1) 100%);
                }
            10%,30%,50%,70%,90% { 
                filter: brightness(1.25); 
                background-size: 150% 150%;
                background-image: radial-gradient(circle,
                rgb(176, 102, 37) 0%,
                rgba(255,251,199,1) 49%,
                rgb(199, 148, 10) 100%); 
                }
        }
    #passif{
        background-color: rgb(9, 96, 9);


        background-image:
        /* ombre douce pour casser l'effet papier peint */
        radial-gradient(1200px 600px at 50% -200px, rgba(0,0,0,0.10), transparent 60%),
        /* micro-bandes pour donner du relief */
        linear-gradient(180deg, rgba(0,0,0,0.04), rgba(255,255,255,0.02)),
        image-set("./template/wood_table_512_v2.webp" type("image/webp"), "./template/wood_table_512_v2.png" type("image/png"));
        background-repeat: no-repeat, no-repeat, repeat;
        /* Échelle : une “planche” ~350–450px visuelle */
        /* background-attachment: fixed, fixed, scroll; */



        width: 400px;
        height: 100%;
        overflow-y: auto;
        scrollbar-color: rgb(95, 44, 6) #b79b10;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        /* justify-content: center; */
        border: groove rgb(95, 44, 6) 12px;
        /* border: ridge rgb(116, 15, 15) 12px; */
    }
        #scene01, #detailsAppartment, #detailsHotel, #detailsCasino, #detailsStore{
            width: 98%;
            height: 1000px;
            /* border: solid black 2px; */
            border: solid black 2px;
        }
            #vallee{
                position: relative;
                width: 380px;
                height: 600px;
                border: solid black 2px;
                left: 5px;
                top: 5px;
                background: url("./template/vallee.png") center/cover no-repeat;
            }


                #passifApartment{
                    position: absolute;
                    width: 97px;
                    height: 100px;
                    top: 69px;
                    left: 64px;
                }
                #passifHotel{
                    position: absolute;
                    width: 90px;
                    height: 90px;
                    top: 76px;
                    left: 213px;
                }
                #passifCasino{
                    position: absolute;
                    width: 96px;
                    height: 120px;
                    top: 274px;
                    left: 64px;
                    
                }
                #passifStore{
                    position: absolute;
                    width: 99px;
                    height: 77px;
                    top: 354px;
                    left: 209px;
                }

                
                #passifApartment:hover,
                #passifHotel:hover,
                #passifCasino:hover,
                #passifStore:hover {
                    cursor: pointer;
                }

                .borderPassif{
                    border: ridge black 5px;
                }
        detailsAppartment{
            background-color: transparent;
        }
            #buyAppartment, #buyHotel, #buyCasino, #buyStore{
                margin-top: 25px;
                width: 150px;
                height: 50px;
                background-color: rgb(182, 19, 60);
                border-radius: 50% / 10%;
            }
            #buyAmeliorationAppartment, #buyAmeliorationHotel, #buyAmeliorationCasino, #buyAmeliorationStore{
                margin-top: 25px;
                width: 150px;
                height: 50px;
                background-color: rgb(182, 19, 60);
                border-radius: 50% / 10%;
            }
            #btnClaimLoyerAppartment, #btnClaimLoyerHotel, #btnClaimLoyerCasino, #btnClaimLoyerStore{
                margin-top: 25px;
                width: 150px;
                height: 50px;
                background-color: rgb(182, 19, 60);
                border-radius: 50% / 10%;
            }








            #buyAppartment:hover, 
            #btnClaimLoyerAppartment:hover, 
            #buyAmeliorationAppartment:hover, 
            #buyHotel:hover, 
            #btnClaimLoyerHotel:hover, 
            #buyAmeliorationHotel:hover, 
            #buyCasino:hover, 
            #btnClaimLoyerCasino:hover, 
            #buyAmeliorationCasino:hover, 
            #buyStore:hover, 
            #btnClaimLoyerStore:hover, 
            #buyAmeliorationStore:hover{
                background-color: rgb(48, 7, 211);
            }

#infoBulle{
    background-color: rgb(6, 75, 6);
    width: 260px;
    height: 90px;
    z-index: 0;
    position: relative;
    bottom: -10px;
    border: ridge rgb(116, 15, 15) 5px;
    border-radius: 20% / 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .infoBulleTexte{
        margin: 0;
        padding: 2px;
    }

    .hidden{
        display: none !important;
    }


/* code par chatGPT */
.fly{
  background: transparent !important;
  position: fixed;
  z-index: 9999;
  transform: translate(-50%,0);
  font: 800 18px/1 system-ui, sans-serif;
  color: #eaffea;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  pointer-events: none;
  opacity: 0;
  animation: flyUp .9s ease-out forwards;
}
@keyframes flyUp{
  0%   { transform: translate(-50%,0) translateY(6px) scale(.92); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%,0) translateY(-60px) scale(1.06); opacity: 0; }
}
/* code par chatGPT */


/* limite avant que ça soit moche */
@media (max-width:1020px){
    /* Toujours compter les bordures dans les largeurs pour éviter le débordement */
*,
*::before,
*::after { box-sizing: border-box; }

/* Desktop : centrer vraiment le contenu de #middle */
#middle{
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;         /* << ajouté */
  border: ridge rgb(116, 15, 15) 12px;
}

/* Responsive */
@media (max-width:1020px){
        #playGround{
            width: 100%;
            height: auto;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas:
            "middle"
            "actif"
            "passif";
            row-gap: 12px;
            justify-items: center;     /* centre horizontalement chaque zone */
            align-items: start;        /* laisse la hauteur s’adapter proprement */
        } 

        /* Même largeur pour chaque bloc en mobile + centrage interne propre */
        #actif, #middle, #passif{
            width: min(800px, 90vw);
            height: auto;
            padding: 20px;
        }

        #actif{
            grid-area: actif;
            display: flex;             /* auto -> flex */
            flex-direction: column;    /* auto -> column */
            align-items: center;
        }

        /* ATTENTION : correcteur sur le sélecteur (midlle -> middle) */
        #middle{
            height: 400px;
            grid-area: middle;
            display: flex;             /* auto -> flex */
            flex-direction: column;    /* auto -> column (ou garde en row si tu veux) */
            align-items: center;
            justify-content: center;
        }

        #infoBulle{
            bottom: 30px;
        }

        #passif{
            grid-area: passif;
            display: flex;             /* auto -> flex */
            flex-direction: column;    /* auto -> column */
            align-items: center;
        }
    }

}



/* span pas rouge */
.pasRouge{
    color: white;
}
/* span pas rouge */












/* test  */

/* 
#vallee01{
    width: 15px;
    height: 20px;
    background-color: black;
    position: absolute;
    top: 75px;
    left: 70px;
    z-index: 10;
}
#vallee01{
    width: 15px;
    height: 20px;
    background-color: rgb(156, 31, 31);
    position: absolute;
    top: 75px;
    left: 70px;
    z-index: 11;
} */



.divCenter{
    display: flex;
    width: 100%;
    justify-content: center;
}
.center{
    text-align: center;
}

.margin{
    margin-left: 1rem;
}