/* =====================================================================
   Zoo des Merveilles
   ===================================================================== */

#zoo-root {
  --vert: #2f8f4e;
  --vert-fonce: #1f6b39;
  --vert-clair: #e3f3d6;
  --sable: #f7f0dc;
  --sable-fonce: #e6d6ad;
  --bois: #7a4e2a;
  --bois-fonce: #4f3118;
  --encre: #24301f;
  --or: #f2b632;
  --rouge: #d64541;
  --orange: #e8912d;
  --carte: #fffdf6;

  /* Barre commune (css/games.css) aux couleurs du parc */
  --mg-jeu-largeur: 1360px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(242, 182, 50, 0.25), transparent 55%),
    linear-gradient(120deg, #1f6b39, #2f8f4e);
  --mgb-texte: #f6fbef;
  --mgb-doux: #cfe8c0;
  --mgb-accent: #f2b632;
  --mgb-titre: linear-gradient(100deg, #fff6d8, #ffe08a);
  --mgb-police-titre: "Fredoka", "Nunito", sans-serif;
  --mg-fs-fond: linear-gradient(#f8f2df, #efe4c3);
  --mg-bulle-fond: #24301f;
  margin: 10px auto 30px;
  padding: 10px;
  background: linear-gradient(#f8f2df, #efe4c3);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(40, 60, 20, 0.2);
  color: var(--encre);
  position: relative;
}
#zoo-root *,
#zoo-root *::before,
#zoo-root *::after {
  box-sizing: border-box;
}
#zoo-root,
#zoo-root button {
  font-family: "Nunito", "Segoe UI", sans-serif;
}
#zoo-root h1,
#zoo-root h2,
#zoo-root h3,
#zoo-root .zb-title {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  margin: 0;
  color: var(--vert-fonce);
}
#zoo-root button {
  cursor: pointer;
  color: inherit;
}
#zoo-root button:disabled {
  cursor: not-allowed;
}
/* games.css colore tous les <b> en bleu */
#zoo-root b {
  color: inherit;
}

/* ---------- Barre du haut ---------- */
/* Deux lignes : titre et commandes, puis les statistiques sur toute la largeur */
/* Titre dans la barre commune : le dégradé l'emporte sur la couleur des h1 du jeu */
#zoo-root .mg-barre-titre {
  flex: 0 1 auto;
  font-weight: 600;
  color: transparent;
}
#zoo-root .zb-logo {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a3, #f2b632);
  box-shadow: 0 3px 0 #c98d1b;
  font-size: 1.45rem;
}
#zoo-root .zb-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
#zoo-root .zb-stat {
  color: var(--encre); /* cartes claires dans la barre sombre */
  background: var(--carte);
  border: 2px solid var(--sable-fonce);
  border-radius: 12px;
  padding: 7px 14px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  line-height: 1.2;
}
#zoo-root .zb-stat .lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b7458;
  font-weight: 800;
}
#zoo-root .zb-stat b {
  font-size: 1.12rem;
  font-weight: 800;
  white-space: nowrap;
}
#zoo-root .zb-stat small {
  font-size: 0.75rem;
  color: #6c6650;
  white-space: nowrap;
}
#zoo-root #money {
  color: var(--vert-fonce);
}
#zoo-root #money.negatif {
  color: var(--rouge);
}
#zoo-root .jauge {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #eadfbf;
  overflow: hidden;
  margin-top: 3px;
}
#zoo-root .jauge i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f7d26a, var(--or));
  transition: width 0.4s;
}
#zoo-root .price-ctl {
  display: flex;
  align-items: center;
  gap: 5px;
}
#zoo-root .price-ctl button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--vert);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 0 var(--vert-fonce);
}
#zoo-root .price-ctl button:active {
  transform: translateY(1px);
  box-shadow: none;
}
#zoo-root .verdict.ok {
  color: var(--vert);
}
#zoo-root .verdict.moyen {
  color: var(--orange);
}
#zoo-root .verdict.mauvais {
  color: var(--rouge);
  font-weight: 800;
}
#zoo-root .mg-barre-outils {
  margin-left: auto;
}
#zoo-root .speed {
  display: flex;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  color: var(--mgb-texte);
}
#zoo-root .speed button {
  border: none;
  background: none;
  padding: 7px 9px;
  font-weight: 800;
  font-size: 0.85rem;
}
#zoo-root .speed button.actif {
  background: var(--vert);
  color: #fff;
}
#zoo-root .speed button:not(.actif):hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ---------- Disposition : carte + panneau ---------- */
#zoo-root .zb-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 10px;
}
#zoo-root .map-wrap {
  position: relative;
  aspect-ratio: 1600 / 940;
  border-radius: 14px;
  overflow: hidden;
  border: 4px solid #6e9a45;
  background: #83c162;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
#zoo-root #map {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#zoo-root #map.glisse {
  cursor: grabbing;
}
#zoo-root .panel {
  background: var(--carte);
  border: 2px solid var(--sable-fonce);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  /* Le panneau prend la hauteur de la carte sans l'agrandir */
  height: 0;
  min-height: 100%;
  overflow: hidden;
}

/* ---------- Éléments de la carte ---------- */
#zoo-root svg text {
  font-family: "Nunito", "Segoe UI", sans-serif;
}
#zoo-root svg .emoji {
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}
#zoo-root svg .deco,
#zoo-root svg .ani,
#zoo-root svg .dechet,
#zoo-root #lyAnimaux,
#zoo-root #lyGens,
#zoo-root #lyStatuts,
#zoo-root #lyFx,
#zoo-root #lyDechets {
  pointer-events: none;
}
#zoo-root .teinte-blanc {
  filter: grayscale(1) brightness(1.75) contrast(0.95);
}
#zoo-root .al-bord,
#zoo-root .al,
#zoo-root .se-bord,
#zoo-root .se {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#zoo-root .al-bord {
  stroke: #c2a067;
  stroke-width: 30;
}
#zoo-root .al {
  stroke: #f1e2b8;
  stroke-width: 23;
}
#zoo-root .se-bord {
  stroke: #c9a970;
  stroke-width: 15;
}
#zoo-root .se {
  stroke: #f5e9c8;
  stroke-width: 10;
}
#zoo-root .rondpoint {
  fill: #f1e2b8;
  stroke: #c2a067;
  stroke-width: 3;
}
#zoo-root .parvis {
  fill: #eadcb6;
  stroke: #c8b182;
  stroke-width: 3;
}
#zoo-root .zone-sol {
  cursor: pointer;
}
#zoo-root .zone-sol.sel path:first-child {
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: 14 9;
}

/* Enclos */
#zoo-root .enc {
  cursor: pointer;
}
#zoo-root .enc .cloture {
  fill: none;
  stroke: #8a5a2b;
  stroke-width: 2.2;
}
#zoo-root .enc .cloture-poteaux {
  fill: none;
  stroke: #6b4220;
  stroke-width: 5;
  stroke-dasharray: 1.5 9;
  stroke-linecap: round;
}
#zoo-root .enc .hit {
  fill: transparent;
  stroke: none;
}
#zoo-root .enc:hover .cloture,
#zoo-root .enc.sel .cloture {
  stroke: #fff;
  stroke-width: 4;
}
#zoo-root .enc.sel .hit {
  stroke: #ffd24a;
  stroke-width: 3;
  stroke-dasharray: 7 5;
  animation: zoo-tourne 1.2s linear infinite;
}
@keyframes zoo-tourne {
  to {
    stroke-dashoffset: -24;
  }
}
#zoo-root .enc .fantome {
  opacity: 0.32;
  filter: grayscale(1);
}
#zoo-root .enc .plus circle {
  fill: var(--vert);
  stroke: #fff;
  stroke-width: 2;
}
#zoo-root .enc .plus text {
  fill: #fff;
  font-weight: 800;
  font-size: 17px;
  text-anchor: middle;
}
#zoo-root .enc:hover .plus circle {
  fill: #37b060;
}
#zoo-root .enc .cadenas circle {
  fill: rgba(255, 255, 255, 0.85);
  stroke: #b5a58a;
}
#zoo-root .plaque {
  font-size: 11px;
  font-weight: 800;
  text-anchor: middle;
  fill: #3d2a14;
  stroke: rgba(255, 250, 235, 0.9);
  stroke-width: 3.5px;
  paint-order: stroke;
  pointer-events: none;
}

/* Snacks */
#zoo-root .snack {
  cursor: pointer;
}
#zoo-root .snack .hit {
  fill: transparent;
  stroke: none;
}
#zoo-root .snack.sel .hit {
  stroke: #ffd24a;
  stroke-width: 3;
  stroke-dasharray: 7 5;
  animation: zoo-tourne 1.2s linear infinite;
}
#zoo-root .snack .terrain {
  fill: rgba(234, 220, 182, 0.75);
  stroke: #b89c64;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}
#zoo-root .snack:hover .terrain {
  stroke: #fff;
}
#zoo-root .snack .fantome {
  opacity: 0.4;
  filter: grayscale(1);
}
#zoo-root .snack .plus circle {
  fill: var(--vert);
  stroke: #fff;
  stroke-width: 2;
}
#zoo-root .snack .plus text {
  fill: #fff;
  font-weight: 800;
  font-size: 17px;
  text-anchor: middle;
}
#zoo-root .snack:hover .plus circle {
  fill: #37b060;
}
#zoo-root .snack .cadenas circle {
  fill: rgba(255, 255, 255, 0.85);
  stroke: #b5a58a;
}
#zoo-root .snack .mur {
  fill: #f4ecd8;
  stroke: #9c7443;
  stroke-width: 2;
}
#zoo-root .snack .comptoir {
  fill: #6b4a2b;
}
#zoo-root .snack .tablette {
  fill: #c79a5b;
  stroke: #8a6230;
  stroke-width: 1;
}
#zoo-root .snack .auvent {
  fill: #e0513f;
  stroke: #a83626;
  stroke-width: 0.8;
}
#zoo-root .snack .auvent.blanc {
  fill: #fff6e6;
}
#zoo-root .snack .toit {
  fill: #b5533c;
  stroke: #8a3b29;
  stroke-width: 1.5;
}
#zoo-root .snack .table {
  fill: #fff6e6;
  stroke: #9c7443;
  stroke-width: 1.2;
}
#zoo-root .snack .ferme {
  font-size: 8px;
  font-weight: 800;
  text-anchor: middle;
  fill: #fff;
  stroke: var(--rouge);
  stroke-width: 2.5px;
  paint-order: stroke;
}
#zoo-root .snack:hover .mur,
#zoo-root .snack.sel .mur {
  stroke: #fff;
}

/* Zones non achetées */
#zoo-root .voile {
  cursor: pointer;
}
#zoo-root .voile > path {
  fill: rgba(250, 246, 232, 0.5);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 3;
  stroke-dasharray: 10 8;
}
#zoo-root .voile.bientot > path {
  fill: rgba(70, 80, 70, 0.4);
}
/* Verrouillée par le prestige : grisée, pour contraster avec les zones achetables */
#zoo-root .voile.verrou > path {
  fill: rgba(95, 100, 95, 0.42);
  stroke: rgba(255, 255, 255, 0.45);
}
#zoo-root .voile:hover > path {
  fill: rgba(250, 246, 232, 0.35);
}
/* Achetable : voile doré léger et liseré qui défile autour de la zone */
#zoo-root .voile.achetable > path:first-child {
  fill: rgba(255, 226, 130, 0.22);
  stroke: none;
}
#zoo-root .voile.achetable:hover > path:first-child {
  fill: rgba(255, 226, 130, 0.08);
}
#zoo-root .voile .liseret {
  fill: none;
  stroke: #ffc62e;
  stroke-width: 6;
  stroke-dasharray: 18 12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 200, 40, 0.8));
  animation: zoo-liseret 1.6s linear infinite;
}
#zoo-root .voile.abordable .liseret {
  stroke: #ffd84a;
  stroke-width: 7;
  animation:
    zoo-liseret 1.1s linear infinite,
    zoo-lueur 1.4s ease-in-out infinite alternate;
}
@keyframes zoo-liseret {
  to {
    stroke-dashoffset: -60;
  }
}
@keyframes zoo-lueur {
  from {
    filter: drop-shadow(0 0 3px rgba(255, 200, 40, 0.6));
  }
  to {
    filter: drop-shadow(0 0 12px rgba(255, 210, 60, 1));
  }
}
#zoo-root .pancarte rect {
  fill: #fff8e6;
  stroke: var(--bois);
  stroke-width: 2.5;
}
#zoo-root .pancarte.dispo {
  transform-box: fill-box;
  transform-origin: center;
  animation: zoo-pancarte 1.4s ease-in-out infinite;
}
#zoo-root .pancarte.dispo rect {
  fill: #ffe89a;
  stroke: #c98d1b;
  stroke-width: 3;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
}
#zoo-root .pancarte.dispo text {
  font-size: 15px;
}
#zoo-root .voile.abordable .pancarte.dispo rect {
  fill: #4cc27a;
  stroke: var(--vert-fonce);
}
#zoo-root .voile.abordable .pancarte.dispo text {
  fill: #fff;
}
@keyframes zoo-pancarte {
  50% {
    transform: scale(1.08);
  }
}
#zoo-root .pancarte text {
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
  fill: var(--bois-fonce);
}
#zoo-root .portique {
  cursor: pointer;
}
#zoo-root .portique rect {
  fill: var(--bois);
  stroke: var(--bois-fonce);
  stroke-width: 2;
}
#zoo-root .portique text {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  fill: #fff6dc;
}
#zoo-root .portique.sel rect {
  fill: #a86b37;
  stroke: #ffd24a;
}

/* Entrée du zoo */
#zoo-root .guichet rect {
  fill: #f4ecd8;
  stroke: #9c7443;
  stroke-width: 2;
}
#zoo-root .guichet .toit {
  fill: #b9b0a0;
  stroke: #8d8474;
  stroke-width: 1.5;
}
#zoo-root .guichet.ouvert .toit {
  fill: #e0513f;
  stroke: #a83626;
}
#zoo-root .guichet .ferme {
  font-size: 7px;
  font-weight: 800;
  text-anchor: middle;
  fill: #8d8474;
}
#zoo-root .portail rect {
  fill: var(--bois);
  stroke: var(--bois-fonce);
  stroke-width: 2;
}
#zoo-root .portail .bandeau {
  fill: var(--vert-fonce);
  stroke: #ffd24a;
}
#zoo-root .portail text {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #ffe9a8;
}
#zoo-root .etiquette {
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
  fill: #5a4222;
}

/* Statuts, bulles, déchets */
#zoo-root .badge rect {
  fill: #fff;
  stroke: #d64541;
  stroke-width: 1.5;
}
#zoo-root .flot {
  text-anchor: middle;
  font-weight: 800;
  animation: zoo-flot 1.6s ease-out forwards;
}
#zoo-root .flot.argent {
  font-size: 11px;
  fill: #1f7a3b;
  stroke: #fff;
  stroke-width: 3px;
  paint-order: stroke;
}
#zoo-root .flot.reaction {
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 13px;
}
@keyframes zoo-flot {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-24px);
    opacity: 0;
  }
}
#zoo-root #pluie .gouttes {
  animation: zoo-pluie 0.5s linear infinite;
}
@keyframes zoo-pluie {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(8px, 40px);
  }
}

/* ---------- Surcouches de la carte ---------- */
#zoo-root .banner {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
}
#zoo-root .banner span {
  background: rgba(255, 253, 246, 0.92);
  border-radius: 20px;
  padding: 3px 10px;
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#zoo-root .banner .ev {
  background: #fff3c4;
  pointer-events: auto;
}
#zoo-root .banner .pause {
  background: var(--rouge);
  color: #fff;
}
#zoo-root .map-ctl {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#zoo-root .map-ctl button {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 2px solid var(--sable-fonce);
  background: rgba(255, 253, 246, 0.94);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}
#zoo-root .map-ctl button:hover {
  background: var(--vert-clair);
}
#zoo-root .toasts {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(440px, 70%);
  pointer-events: none;
}
#zoo-root .toast {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 253, 246, 0.96);
  border-left: 5px solid #5aa9d0;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  animation: zoo-entre 0.3s ease-out;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
#zoo-root .toast .ic {
  font-size: 1.2rem;
}
#zoo-root .toast.ok {
  border-color: var(--vert);
}
#zoo-root .toast.alerte {
  border-color: var(--orange);
}
#zoo-root .toast.grave {
  border-color: var(--rouge);
}
#zoo-root .toast.reussite {
  border-color: var(--or);
  background: #fff6d6;
}
#zoo-root .toast.sort {
  opacity: 0;
  transform: translateX(-20px);
}
@keyframes zoo-entre {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Panneau latéral ---------- */
#zoo-root .tabs {
  display: flex;
  border-bottom: 2px solid var(--sable-fonce);
  flex-shrink: 0;
}
#zoo-root .tabs button {
  flex: 1;
  border: none;
  background: #f3ead0;
  padding: 9px 4px;
  font-weight: 800;
  font-size: 0.85rem;
}
#zoo-root .tabs button + button {
  border-left: 2px solid var(--sable-fonce);
}
#zoo-root .tabs button.actif {
  background: var(--carte);
  color: var(--vert-fonce);
}
#zoo-root .panel-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#zoo-root .panel-body h2 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}
#zoo-root .panel-body h3 {
  font-size: 1rem;
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#zoo-root .panel-body p {
  margin: 4px 0;
}
#zoo-root .petit {
  font-size: 0.85rem;
  color: #555041;
}
#zoo-root .centre {
  text-align: center;
  margin-top: 16px;
}
#zoo-root .kpis,
#zoo-root .stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
#zoo-root .kpis > div,
#zoo-root .stats > div {
  background: var(--sable);
  border-radius: 10px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#zoo-root .kpis span,
#zoo-root .stats span:first-child {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7b7458;
  font-weight: 800;
}
#zoo-root .kpis b,
#zoo-root .stats b {
  font-size: 1.05rem;
}
#zoo-root .stats small {
  font-size: 0.75rem;
  color: #6c6650;
}
#zoo-root .barre {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 120px;
  height: 8px;
  border-radius: 4px;
  background: #e7dcc0;
  overflow: hidden;
}
#zoo-root .stats .barre {
  max-width: none;
}
#zoo-root .barre i {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
#zoo-root .barre.bon i {
  background: #3cb36a;
}
#zoo-root .barre.moyen i {
  background: #f0a52d;
}
#zoo-root .barre.mauvais i {
  background: var(--rouge);
}
#zoo-root .barre.or i {
  background: linear-gradient(90deg, #f7d26a, var(--or));
}
#zoo-root .palier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  margin: 4px 0;
}
#zoo-root .palier .barre {
  max-width: 110px;
}
#zoo-root .vert {
  color: var(--vert);
}
#zoo-root .rouge {
  color: var(--rouge);
}
#zoo-root .etoiles {
  color: var(--or);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 #b98014;
}
#zoo-root .etoiles .vide {
  color: #d8ccab;
  text-shadow: none;
}
#zoo-root .note {
  position: relative;
  display: inline-block;
  color: #d8ccab;
  letter-spacing: 1px;
  white-space: nowrap;
}
#zoo-root .note .pleine {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--or);
}
#zoo-root .alertes,
#zoo-root .suite,
#zoo-root .faits,
#zoo-root .aide-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#zoo-root .alertes li {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 9px;
  background: #eef5fb;
}
#zoo-root .alertes li.alerte {
  background: #fff1dc;
}
#zoo-root .alertes li.grave {
  background: #fde3e1;
  color: #8e211d;
}
#zoo-root .liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 10px 10px 0;
}
#zoo-root .ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 2px solid transparent;
  background: var(--sable);
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 0.9rem;
}
#zoo-root .ligne:hover {
  border-color: var(--vert);
  background: var(--vert-clair);
}
#zoo-root .ligne .ic {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
}
#zoo-root .ligne .nom {
  flex: 1;
  font-weight: 800;
}
#zoo-root .ligne .st {
  font-size: 0.8rem;
  color: #6c6650;
  white-space: nowrap;
}
#zoo-root .retour {
  border: none;
  background: none;
  color: var(--vert);
  font-weight: 800;
  padding: 0 0 8px;
  font-size: 0.9rem;
}
#zoo-root .retour:hover {
  text-decoration: underline;
}
#zoo-root .fiche {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
#zoo-root .fiche .grand {
  font-size: 3rem;
  line-height: 1;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--sable-fonce));
  flex-shrink: 0;
}
#zoo-root .anecdote {
  font-size: 0.85rem;
  font-style: italic;
  background: #fff8e0;
  border-radius: 10px;
  padding: 7px 10px;
}
#zoo-root .encart {
  background: var(--sable);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
#zoo-root .encart.alerte {
  background: #fff1dc;
}
#zoo-root .encart.ok {
  background: var(--vert-clair);
}
#zoo-root .boutons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
#zoo-root .zbtn {
  border: 2px solid #b9a77c;
  background: linear-gradient(#fffdf6, #efe4c3);
  border-radius: 11px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 #b9a77c;
  transition:
    transform 0.08s,
    box-shadow 0.08s,
    filter 0.15s;
}
#zoo-root .zbtn:hover:not(:disabled) {
  filter: brightness(1.05);
}
#zoo-root .zbtn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b9a77c;
}
#zoo-root .zbtn.primaire {
  background: linear-gradient(#4cc27a, var(--vert));
  border-color: var(--vert-fonce);
  color: #fff;
  box-shadow: 0 3px 0 var(--vert-fonce);
}
#zoo-root .zbtn.danger {
  background: linear-gradient(#ea6a5e, var(--rouge));
  border-color: #9e2c28;
  color: #fff;
  box-shadow: 0 3px 0 #9e2c28;
}
#zoo-root .zbtn.discret {
  font-size: 0.8rem;
  padding: 5px 10px;
}
#zoo-root .zbtn.large {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
}
#zoo-root .zbtn.mini {
  width: 32px;
  height: 30px;
  padding: 0;
  font-size: 1.1rem;
  margin-left: 4px;
}
/* Bouton du bilan : la jauge se remplit pendant le décompte */
#zoo-root .zbtn.auto {
  position: relative;
  overflow: hidden;
}
#zoo-root .zbtn.auto .decompte {
  position: absolute;
  inset: 0;
  width: 0;
  background: rgba(255, 255, 255, 0.25);
  animation: zoo-decompte 5s linear forwards;
}
#zoo-root .zbtn.auto span {
  position: relative;
}
@keyframes zoo-decompte {
  to {
    width: 100%;
  }
}
#zoo-root .zbtn:disabled {
  opacity: 0.45;
}
#zoo-root .carte-role {
  background: var(--sable);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
#zoo-root .carte-role .tete {
  display: flex;
  align-items: center;
  gap: 8px;
}
#zoo-root .carte-role .tete .ic {
  font-size: 1.4rem;
}
#zoo-root .carte-role .tete b {
  flex: 1;
}
#zoo-root .carte-role .compteur {
  font-family: "Fredoka", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--vert-fonce);
}
#zoo-root .carte-role .pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}
#zoo-root .carte-role .max {
  display: inline-grid;
  place-items: center;
  height: 30px;
  min-width: 42px;
  padding: 0 8px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 11px;
  background: linear-gradient(#ffe9a0, var(--or));
  color: var(--bois-fonce);
  font-weight: 800;
  font-size: 0.85rem;
}
#zoo-root .conseil {
  color: var(--orange);
  font-weight: 800;
}
#zoo-root .objectif {
  background: linear-gradient(#fff8dc, #fdefc0);
  border: 2px solid #efcd6c;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#zoo-root .objectif .barre {
  max-width: 180px;
}
#zoo-root .suite li,
#zoo-root .faits li {
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--sable);
}
#zoo-root .suite li {
  color: #6c6650;
}

/* ---------- Info-bulle ---------- */
#zoo-root .tip {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  background: rgba(34, 44, 30, 0.95);
  color: #fdf8e8;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
#zoo-root .tip[hidden] {
  display: none;
}
#zoo-root .tip b {
  color: #ffe08a;
}
#zoo-root .tip .tip-l {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
#zoo-root .tip .tip-l.alerte {
  color: #ffb3a8;
}
#zoo-root .tip .barre {
  width: 90px;
  background: rgba(255, 255, 255, 0.2);
}

/* ---------- Fenêtres ---------- */
#zoo-root .dlg {
  border: none;
  border-radius: 18px;
  padding: 0;
  /* games.css remet toutes les marges à 0 : sans ceci, la fenêtre se colle en haut à gauche */
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  background: var(--carte);
  color: var(--encre);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
#zoo-root .dlg::backdrop {
  background: rgba(20, 35, 15, 0.55);
}
#zoo-root .dlg[open] {
  animation: zoo-pop 0.25s ease-out;
}
@keyframes zoo-pop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
}
#zoo-root #dlgBody {
  padding: 18px 20px;
}
#zoo-root #dlgBody h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
#zoo-root #dlgBody h3 {
  font-size: 1rem;
  margin: 12px 0 4px;
}
#zoo-root #dlgBody p {
  margin: 6px 0;
  line-height: 1.45;
}
#zoo-root .actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
#zoo-root .bilan {
  width: 100%;
  border-collapse: collapse;
}
#zoo-root .bilan td {
  padding: 6px 4px;
  border-bottom: 1px solid #ece2c6;
}
#zoo-root .bilan td:last-child {
  text-align: right;
  font-weight: 800;
  white-space: nowrap;
}
#zoo-root .bilan .total td {
  border-bottom: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding-top: 10px;
}
#zoo-root .demain {
  background: #eaf4fb;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
}
#zoo-root .celebration {
  text-align: center;
}
#zoo-root .celebration .gros {
  font-size: 2.6rem;
}
#zoo-root .grosses-etoiles {
  font-size: 2.6rem;
  animation: zoo-brille 1.4s ease-in-out infinite alternate;
}
@keyframes zoo-brille {
  to {
    filter: drop-shadow(0 0 10px #ffd24a);
    transform: scale(1.05);
  }
}
#zoo-root .debloques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
#zoo-root .debloques span {
  background: var(--sable);
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 0.9rem;
}
#zoo-root .debloques i {
  font-style: normal;
  display: inline-block;
}
#zoo-root .aide-liste {
  text-align: left;
  margin-top: 10px;
}
#zoo-root .aide-liste li {
  background: var(--sable);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.9rem;
}
/* Aide : fenêtre large, rubriques en cartes sur deux colonnes (une sur mobile) */
#zoo-root .dlg.large {
  width: min(900px, calc(100vw - 32px));
}
#zoo-root .aide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.9rem;
}
#zoo-root .aide section {
  background: var(--sable);
  border-radius: 12px;
  padding: 8px 12px;
}
#zoo-root #dlgBody .aide h3 {
  margin: 0 0 3px;
}
#zoo-root #dlgBody .aide p {
  margin: 0;
  line-height: 1.4;
}
#zoo-root .aide section:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 700px) {
  #zoo-root .aide {
    grid-template-columns: 1fr;
  }
}

/* ---------- Plein écran ---------- */
#zoo-root.mg-fs {
  border-radius: 0;
  overflow: hidden;
}
#zoo-root.mg-fs .zb-main {
  flex: 1;
  min-height: 0;
}
#zoo-root.mg-fs .map-wrap {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 980px) {
  #zoo-root .zb-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #zoo-root .zb-main {
    grid-template-columns: 1fr;
  }
  #zoo-root .panel {
    height: auto;
    min-height: 0;
    max-height: 520px;
  }
  #zoo-root.mg-fs .zb-main {
    grid-template-rows: minmax(0, 1fr) 40%;
  }
}
@media (max-width: 600px) {
  #zoo-root {
    padding: 6px;
    border-radius: 12px;
  }
  #zoo-root .zb-logo {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
  }
  #zoo-root .zb-stats {
    gap: 6px;
  }
  #zoo-root .zb-stat {
    min-height: 54px;
    padding: 5px 8px;
  }
  #zoo-root .zb-stat b {
    font-size: 0.92rem;
  }
  #zoo-root .map-wrap {
    border-width: 3px;
  }
  #zoo-root .toasts {
    max-width: 90%;
  }
}
#zoo-root .aide-etoile {
  margin-top: 8px;
  background: #fff8e0;
  border-radius: 10px;
  padding: 7px 10px;
}
/* Fontaine de la place d'entrée */
#zoo-root .fontaine .jet {
  fill: none;
  stroke: #d8f2ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 3 3.5;
  animation: zoo-jet 0.6s linear infinite;
}
#zoo-root .fontaine .onde {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: zoo-onde 1.6s ease-out infinite;
}
@keyframes zoo-jet {
  to {
    stroke-dashoffset: -13;
  }
}
@keyframes zoo-onde {
  from {
    transform: scale(0.4);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
#zoo-root .teinte-sable {
  filter: sepia(0.55) saturate(0.75) brightness(1.18);
}
/* Fenêtre de victoire */
#zoo-root .victoire {
  position: relative;
  overflow: hidden;
}
#zoo-root .victoire .gros {
  font-size: 3.4rem;
  animation: zoo-brille 1.4s ease-in-out infinite alternate;
}
#zoo-root .confettis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#zoo-root .confettis i {
  position: absolute;
  top: -40px;
  font-style: normal;
  font-size: 1.3rem;
  opacity: 0.85;
  animation: zoo-confetti linear infinite;
}
@keyframes zoo-confetti {
  to {
    transform: translateY(560px) rotate(360deg);
    opacity: 0;
  }
}
#zoo-root .victoire > :not(.confettis) {
  position: relative;
  z-index: 1;
}
#zoo-root .victoire .bilan td:first-child {
  text-align: left;
}