/* fourmis.css */
html, body { height: 100%; margin: 0; padding: 0; }

#canvasDiv {
    position: relative;
    width: 100vw;
    height: 100vh;        /* hauteur explicite */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2;
}

/* Meilleur support mobile (évite les barres d’adresse) */
@supports (height: 100dvh) {
    #canvasDiv { height: 100dvh; }
}

canvas { 
    /* supprime l’espace inline par défaut */
    display: block; 
    /* crucial sur mobile */
    touch-action: none;  
} 

#canvasDiv canvas, canvas {
    touch-action: none;           /* allow us to prevent scrolling/zoom */
    -webkit-touch-callout: none;  /* no iOS text/image callout */
    -webkit-user-select: none;
    user-select: none;
}





/* **************************************************** */
/* INFO DIV ****************************************** */
/* **************************************************** */

#infoAndTitle {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: auto;
    height: auto;
    border-radius: 30px;
    border: 1px solid;
    border-color: black;
    background-color: #ceefcdea;
    justify-content: space-evenly;
    padding: 30px;
    margin: 20px 0px 0px 0px;
    z-index: 5;
    box-shadow:inset 0px 0px 10px 0px black;
}

#infoAndTitle.hidden { 
    display: none; 
}

#controlsCont {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    margin: 0px 0px 0px 0px;
}

#title {
    font-size: 1.4em;
    color:black;
    text-align: center;
    margin : 0px 0px 5px 0px;
}



/* **************************************************** */
/* INFO BUTT ****************************************** */
/* **************************************************** */

#infoButtContainer {
    display: flex;
    position: absolute;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0px 0px 0px 0px;
    z-index: 100;
}

#infoButtDiv {
    display: flex;
    position: relative;
    align-items: flex-start;
    margin: 1% 100px 0px 0px;
}

#infoButt {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
    white-space: nowrap;
    padding : 10px 30px;
}

#infoButt:active:hover {
    transform: translateY(1px);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

#infoButt:hover {
    transform: scale(1.07);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 1px 1px 3px black, 1px 1px 8px rgba(192, 188, 188, 0.3);
}

#infoButt.infoIsShowing {
    transform: scale(1.07);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 1px 1px 3px black, 1px 1px 8px rgba(192, 188, 188, 0.3);
}

#infoButt:focus {
    outline: none;           /* supprime l’anneau par défaut */
    /* box-shadow: none;        certains navigateurs ajoutent un shadow */
}

/* Optionnel : garder un focus pour la navigation clavier uniquement */
#infoButt:focus-visible {
    outline: 2px solid transparent;  /* ou mets une couleur/anneau custom si tu veux */
    box-shadow: none;
}

/* Firefox historique (évite un padding bleu interne) */
#infoButt::-moz-focus-inner {
    border: 0;
}



/* **************************************************** */
/* BUTTONS ******************************************** */
/* **************************************************** */

/* #buttonsDiv {
    display: flex;
    flex-direction: column;
    margin: 4px 0px 14px 0px;
} */

.gvgButton{
    background: white;
    color: black;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    padding: 3px 15px 3px 15px;
    border-radius: 8px;
    border: 0px solid white;
    /* box-shadow: 1px 1px 3px black; */
    transition: all 0.03s ease;
    margin: 2px 3px 3px 3px;
    cursor: pointer;
}

.gvgButton:active:hover {
    transform: translateY(1px);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

.gvgButton:hover {
    transform: scale(1.07);
    box-shadow: 1px 1px 3px black, 1px 1px 8px rgba(192, 188, 188, 0.3);
    
}


/* **************************************************** */
/* MOBILE INTERFACE  ********************************** */
/* **************************************************** */

/* #fab {
    position: fixed; right: 12px; bottom: 12px;
    width: 56px; height: 56px; border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

#sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(20,20,24,.96); color: #fff; padding: 12px;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}

#sheet[hidden] { 
    display: none; 
} */

#createBar {
    position: fixed; left: 8px; bottom: 8px; display: flex; gap: 8px;
}
#createBar button { padding: 8px 10px; border-radius: 10px; }

/* État actif (toggle) */
#createBar button.active {
    box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}
#createBar button[data-mode="ant"].active {
    background: #ffe1e1; color: #1d257f; border: 1px solid #1278d1;
}
#createBar button[data-mode="food"].active {
    background: #e7ffe7; color: #065f46; border: 1px solid #10b981;
}
#createBar button[data-mode="redAnt"].active {
    background: #fee2e2; color: #7f1d1d; border: 1px solid #dc2626;
}

#fab, #createBar, #sheet {
    position: fixed; /* ou absolute si tu préfères */
    z-index: 10;     /* > canvas */
}

/* RADIAL MENU  ********************************** */
.radial-menu {
    position: fixed;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    z-index: 99999;            /* au-dessus du canvas */
    display: none;             /* on l’ouvre via la classe .open */
    pointer-events: auto;
    user-select: none;
}

.radial-menu.open { display: block; }

/* Exemple de style rapide (si tu n’en as pas déjà) */
.radial-menu .ring {
    position: relative;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
    /* backdrop-filter: blur(3px); */
}

.radial-menu .item{
    position: absolute;
    width: 50px; height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* centre le bouton sur sa position */
    display: grid; place-items: center;
    color: #111; background: #f3f4f6; /* neutre */
    border: 1px solid #d1d5db;
    font: 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    cursor: pointer;
}

.radial-menu .item:hover { 
    filter: brightness(1.15); 
}

/* thème par action */
.radial-menu .item[data-action="addAnt"]  { background:#ffe4e6; border-color:#fb7185; color:#7f1d1d; }
.radial-menu .item[data-action="addFood"] { background:#dcfce7; border-color:#34d399; color:#064e3b; }
.radial-menu .item[data-action="home"]    { background:#f2e0ff; border-color:#818cf8; color:#1e40af; }
.radial-menu .item[data-action="lift"]    { background:#e0f2fe; border-color:#38bdf8; color:#0c4a6e; }
.radial-menu .item[data-action="pause"]   { background:#efedf1; border-color:#f59e0b; color:#7c2d12; }


/* Bouton actif dans le radial */
/* état actif (ex: lift ON) */
.radial-menu .item.active{
  box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset;
  filter: saturate(1.1) brightness(1.02);
}

.radial-menu .item.active{
    background: #fde68a;           /* jaune pâle par défaut */
    border: 1px solid #f59e0b;
    box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset;
}