/* 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;
    max-width: 350px;
    font-size: 0.9em;
    border-radius: 30px;
    border: 1px solid;
    border-color: black;
    background-color: #ceefcddf;
    justify-content: space-evenly;
    padding: 20px;
    margin: 10px;
    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;
}


/* Slider "Max spider size" dans la create-bar (corrigé) */


#infoDiv .size-slider {
  display: inline-flex;     /* même “flow” qu’un bouton */
  align-items: center;
  gap: 10px;
  padding: 8px 10px;        /* ≈ boutons (#createBar button a 8px 10px) */
  border-radius: 10px;      /* pour se fondre visuellement si besoin */
  border-left: 1px solid rgba(0,0,0,0.08);
  font: inherit;            /* même police que les boutons */
  color: inherit;
  white-space: nowrap;      /* évite les retours à la ligne du label */
  background: transparent;  /* pas de fond, comme les boutons par défaut */
}

#infoDiv .size-slider label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Le nombre garde une largeur constante (3 chiffres max) */
#maxSpiderSizeVal {
  display: inline-block;
  min-width: 3ch;             /* réserve: 3 caractères (ex: "100") */
  text-align: right;
  font-variant-numeric: tabular-nums; /* largeur fixe des chiffres (si dispo) */
}

/* Le slider garde sa largeur, ne “pompille” pas quand le label bouge */
#infoDiv .size-slider input[type="range"] {
  flex: 0 0 100px;            /* base fixe; ajuste si tu veux 120/180px */
  width: 90px;               /* par sécurité pour vieux navigateurs */
  min-width: 120px;           /* évite de trop se compresser sur mobile */
  margin: 0;
}

/* WebKit */
#infoDiv .size-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
}
#infoDiv .size-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;       /* centre la bulle sur la piste (14/2 - 3/2) */
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset;
  cursor: pointer;
}

/* Firefox */
#infoDiv .size-slider input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
}
#infoDiv .size-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset;
  cursor: pointer;
}


#chksDiv {
    display: flex;
    width: 40%;
    margin-left: 4%;
}

/* checks à côté des compteurs */
#countsAndChecksCont {
    display: flex;
    flex-direction: row;
    /* gap: 16px; */
    align-items: center;
}

/* container des checkboxes */
#chksDiv {
    display: flex;
    flex-direction: column;
    /* gap: 14px; */
    align-items: flex-start;
}

/* chaque checkbox + label */
#chksDiv .chk {
  user-select: none;
  white-space: nowrap;
}

/* la case en elle-même (supporte accent-color) */
#chksDiv input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ui-accent, #58a);
  cursor: pointer;
}
#chksDiv .chk span {
  cursor: pointer;
}




/* **************************************************** */
/* 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;
    touch-action: manipulation; 
    -webkit-tap-highlight-color: transparent;
}

#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 ******************************************** */
/* **************************************************** */


.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  ********************************** */
/* **************************************************** */


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

#createBar { touch-action: manipulation; }  /* taps rapides, pas de double-tap zoom */
#createBar button { -webkit-tap-highlight-color: transparent; }

/* É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: #e1e7ff; 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;
}
#createBar button[data-mode="spider"].active {
    background: #f6e2fe; color: #5d1d7f; border: 1px solid #9326dc;
}
#createBar button[data-mode="ladybug"].active {
    background: #fef1e2; color: #7f4e1d; border: 1px solid #dc8426;
}

#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:#d3e8eb; border-color:#b3cef9; color:#57716c; }
.radial-menu .item[data-action="addSpider"]  { background:#ffe4e6; border-color:#fb7185; color:#7f1d1d; }
.radial-menu .item[data-action="addLadybug"]  { background:#fff4e4; border-color:#fbc471; color:#7f491d; }
.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;
}

/* Radial menu: no text selection / no callout on iOS */
#radialMenu,
#radialMenu * {
    -webkit-user-select: none;   /* iOS Safari */
    -webkit-touch-callout: none; /* disable long-press callout */
    user-select: none;           /* modern browsers */
    -webkit-tap-highlight-color: transparent; /* no tap flash */
    touch-action: manipulation;  /* improves tap responsiveness */
}