:root {
  --color-bg: #f7f6ee;
  --color-grid: #e0e9df;
  --color-water: #c6e7f7;
  --color-beach: #f7ecc6;
  --color-grass1: #dde2cf;
  --color-grass2: #b0c9a0;
  --color-dirt: #e5c3a6;
  --color-stone: #aacccc;
  --color-player: #ffc896;
  --color-arbre: #95b5a6;
  --color-rocher: #a2bbc4;
  --color-menu: rgba(255,255,255,0.98);
  --color-btn: #bde1c6;
  --color-btn-hov: #8ccba1;
  --color-minimap-bg: #fffefd;
  --color-minimap-border: #adcecb;
  --color-popup-bg: #bde1c6cc;
  --color-popup-text: #405d47;
  --color-hp-bar-bg: #90b783;
  --color-hp-bar-fill: #346f2f;
  --color-inventory-bg: #dde6d7cc;
  --color-inventory-border: #b0c9a0;

    --color-health-bg: #d9e7d3;
  --color-health-fill: #56a02c;
  --color-health-heart: #ff5555;
  --color-health-heart-bad: #ff9999;
  --color-health-heart-worst: #ff3333;
}

/* NOUVEAU : Désactiver le zoom et les gestes problématiques sur mobile */
html, body, #game-root, #game-canvas {
  touch-action: manipulation;
  /* Empêche le double-tap zoom et le pinch zoom */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Empêche la sélection de texte sur les boutons */
button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* NOUVEAU : Forcer certains styles sur mobile */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

#game-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}

#game-canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  cursor: pointer;
  outline: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Empêche le flou sur mobile */
}

#btn-minimap {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 10;
  padding: 0.9rem 2rem;
  font-size: 1.2rem;
  border-radius: 8px;
  border: none;
  background: var(--color-btn);
  transition: background 0.2s;
  cursor: pointer;
}
#btn-minimap:hover {
  background: var(--color-btn-hov);
}

#minimap-container {
  position: absolute;
  top: 70px;
  right: 22px;
  background: var(--color-minimap-bg);
  border: 3px solid var(--color-minimap-border);
  border-radius: 14px;
  box-shadow: 0 0 16px #adc5cd33;
  padding: 10px;
  z-index: 20;
}
#minimap-canvas {
  display: block;
  border-radius: 5px;
  background: var(--color-bg);
  max-width: 35vw;
  max-height: 25vw;
  width: 240px;
  height: 160px;
}
#btn-mini-close {
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 2rem;
  position: absolute;
  right: 0.1em;
  top: 0.1em;
  line-height: 1;
}

/* Popup interaction au-dessus de la case */
#popup-interaction {
  position: absolute;
  background: var(--color-popup-bg);
  border-radius: 12px;
  padding: 1rem 1.6rem;
  z-index: 30;
  box-shadow: 0 0 16px #aacbb166;
  min-width: 180px;
  max-width: 220px;
  user-select: none;
  color: var(--color-popup-text);
  font-weight: 600;
  font-size: 1rem;
}

#popup-text {
  margin-bottom: 0.6rem;
}

#btn-harvest,
#btn-close-popup {
  background: var(--color-btn);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  margin-right: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

#btn-harvest:hover,
#btn-close-popup:hover {
  background: var(--color-btn-hov);
}

/* Barre de vie */
#hp-bar {
  background: var(--color-hp-bar-bg);
  border-radius: 6px;
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  width: 100%;
}
#hp-bar-fill {
  background: var(--color-hp-bar-fill);
  height: 100%;
  width: 0%;
  transition: width 0.3s ease-in-out;
}



#health-container {
  position: absolute;
  top: 80px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  z-index: 31;
}

#health-heart {
  font-size: 2.1rem;
  color: var(--color-health-heart);
  transition: color 0.3s;
}

#health-bar {
  background: var(--color-health-bg);
  border-radius: 12px;
  width: 140px;
  height: 22px;
  box-shadow: inset 0 0 6px #a5d176;
  overflow: hidden;
}
#health-bar-fill {
  background: var(--color-health-fill);
  width: 100%;
  height: 100%;
  transition: width 0.4s ease-in-out;
  border-radius: 12px;
}


/* Inventaire en haut à gauche */
#inventory {
  position: absolute;
  top: 12px;
  left: 14px;
  background: var(--color-inventory-bg);
  border: 2px solid var(--color-inventory-border);
  border-radius: 14px;
  padding: 10px 18px;
  font-weight: 600;
  color: #405d47;
  user-select: none;
  z-index: 30;
}
#inventory h3 {
  margin: 0 0 6px 0;
  font-size: 1.2rem;
}
#inventory ul {
  margin: 0;
  list-style: none;
  padding-left: 0;
}
#inventory li {
  margin-bottom: 3px;
  font-size: 1rem;
}