/* ÉCLAT — Mode Vivant : Nœuds de récolte vivants et impact tactile dans le Domaine.
 * S'applique lorsque data-style-mode="vivant" est actif.
 * Préserve l'intégrité du moteur, des timers et des sauvegardes. */

/* Cartes de gisement manuel en mode Vivant */
[data-style-mode="vivant"] .gis.gis-vivant {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center;
  min-height: 86px;
  padding: 8px 12px !important;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, var(--acc) 6%);
  border: 1px solid color-mix(in srgb, var(--line2) 80%, var(--acc) 20%);
  margin-block: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-style-mode="vivant"] .gis.gis-vivant .gis-ic {
  grid-column: 1 !important;
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  margin: 0 !important;
  justify-self: center;
}

[data-style-mode="vivant"] .gis.gis-vivant .gis-body {
  grid-column: 2 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

[data-style-mode="vivant"] .gis.gis-vivant .gis-b {
  grid-column: 3 !important;
}

[data-style-mode="vivant"] .gis.gis-vivant:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line2));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* Le bouton d'entité vivante (l'arbre, le roc, la source...) */
[data-style-mode="vivant"] .gis-ic.gis-ic-vivant {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--bg) 60%, transparent), var(--panel));
  border: 2px solid color-mix(in srgb, var(--acc) 50%, var(--line2));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: visible;
  outline: none;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[data-style-mode="vivant"] .gis-ic.gis-ic-vivant:hover {
  transform: scale(1.03);
  border-color: var(--acc);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-style-mode="vivant"] .gis-ic.gis-ic-vivant:active,
[data-style-mode="vivant"] .gis-ic.gis-ic-vivant.hit {
  transform: scale(0.91);
  border-color: #ffd36b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Onde de choc lumineuse à l'impact */
[data-style-mode="vivant"] .gis-ic.gis-ic-vivant::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0;
}

[data-style-mode="vivant"] .gis-ic.gis-ic-vivant.hit::after {
  animation: vivant-ripple 0.36s cubic-bezier(0.2, 0.8, 0.4, 1);
}

@keyframes vivant-ripple {
  0% {
    inset: 0px;
    border-color: #ffd36b;
    opacity: 0.95;
    box-shadow: 0 0 12px rgba(255, 211, 107, 0.7);
  }
  100% {
    inset: -14px;
    border-color: rgba(255, 211, 107, 0);
    opacity: 0;
    box-shadow: 0 0 0px transparent;
  }
}

/* SVG de l'entité vivante */
.living-svg {
  width: 68px;
  height: 68px;
  overflow: visible;
  display: block;
  pointer-events: none;
}

/* ------------------------------------------------------------ Animations de repos (Idle) */
@media (prefers-reduced-motion: no-preference) {
  .anim-tree {
    transform-origin: 50% 88%;
    animation: vivant-tree-breathe 4.5s ease-in-out infinite;
  }
  @keyframes vivant-tree-breathe {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.4deg) scaleY(1.01); }
  }

  .anim-fiber {
    transform-origin: 50% 92%;
    animation: vivant-fiber-sway 3.4s ease-in-out infinite;
  }
  @keyframes vivant-fiber-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2.2deg); }
  }

  .anim-water {
    transform-origin: 50% 50%;
    animation: vivant-water-pulse 2.8s ease-in-out infinite;
  }
  @keyframes vivant-water-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
  }

  .anim-sand {
    transform-origin: 50% 80%;
    animation: vivant-sand-breathe 4s ease-in-out infinite;
  }
  @keyframes vivant-sand-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }

  .anim-clay {
    transform-origin: 50% 80%;
    animation: vivant-clay-breathe 3.8s ease-in-out infinite;
  }
  @keyframes vivant-clay-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scaleY(1.03) scaleX(0.98); }
  }
}

/* ------------------------------------------------------------ Animations de frappe (Impact Recoil) */
@media (prefers-reduced-motion: no-preference) {
  /* Recul de frappe sur l'Arbre */
  .hit .anim-tree {
    animation: vivant-tree-chop 0.38s cubic-bezier(0.25, 1.4, 0.5, 1) !important;
  }
  @keyframes vivant-tree-chop {
    0% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-7deg) scaleY(0.86) scaleX(1.12); }
    45% { transform: rotate(4deg) scaleY(1.05) scaleX(0.97); }
    70% { transform: rotate(-2deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
  }

  /* Choc sur le Roc */
  .hit .anim-rock {
    animation: vivant-rock-smash 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) !important;
  }
  @keyframes vivant-rock-smash {
    0% { transform: scale(1); }
    25% { transform: scale(0.86) translateY(5px); }
    50% { transform: scale(1.08) translateY(-3px); }
    75% { transform: scale(0.98); }
    100% { transform: scale(1); }
  }

  /* Éclat et frappe sur le Silex */
  .hit .anim-flint {
    animation: vivant-flint-strike 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) !important;
  }
  @keyframes vivant-flint-strike {
    0% { transform: scale(1); filter: brightness(1); }
    20% { transform: scale(0.88); filter: brightness(1.9); }
    45% { transform: scale(1.06); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
  }

  /* Moisson sur la Fibre */
  .hit .anim-fiber {
    animation: vivant-fiber-reap 0.4s cubic-bezier(0.25, 1.3, 0.5, 1) !important;
  }
  @keyframes vivant-fiber-reap {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg) scaleX(0.85); }
    50% { transform: rotate(9deg) scaleX(1.05); }
    75% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
  }

  /* Clapotis sur la Source */
  .hit .anim-water {
    animation: vivant-water-splash 0.35s ease-out !important;
  }
  @keyframes vivant-water-splash {
    0% { transform: scale(1); }
    30% { transform: scale(1.18); filter: brightness(1.4); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
  }

  /* Pelletée sur le Sable */
  .hit .anim-sand {
    animation: vivant-sand-dig 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) !important;
  }
  @keyframes vivant-sand-dig {
    0% { transform: scale(1); }
    25% { transform: scale(0.9) translateY(4px); }
    50% { transform: scale(1.06) translateY(-2px); }
    100% { transform: scale(1); }
  }

  /* Malaxage sur l'Argile */
  .hit .anim-clay {
    animation: vivant-clay-squish 0.34s cubic-bezier(0.2, 1.3, 0.4, 1) !important;
  }
  @keyframes vivant-clay-squish {
    0% { transform: scale(1); }
    25% { transform: scaleY(0.82) scaleX(1.15) translateY(4px); }
    50% { transform: scaleY(1.1) scaleX(0.95); }
    100% { transform: scale(1); }
  }
}

/* ------------------------------------------------------------ Particules et copeaux dans #fx */
.vivant-particle {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  user-select: none;
  will-change: transform, opacity;
  line-height: 1;
}

/* Compteur de frappe flottant en mode Vivant : centré au-dessus du nœud */
[data-style-mode="vivant"] .gis > .hcount {
  font-size: 14.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--panel) 92%, #ffd36b 12%);
  border: 1.5px solid #ffd36b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  top: -10px;
  left: 53px;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

[data-style-mode="vivant"] .gis > .hcount.bump {
  animation: vivant-hbump 0.24s cubic-bezier(0.18, 1.4, 0.4, 1);
}

@keyframes vivant-hbump {
  0% { transform: translateX(-50%) scale(0.85); }
  50% { transform: translateX(-50%) scale(1.16) translateY(-4px); }
  100% { transform: translateX(-50%) scale(1) translateY(0); }
}

[data-style-mode="vivant"] .gis > .hcount.crit {
  background: #ffd36b;
  color: #1a1e24;
  border-color: #fff;
  box-shadow: 0 0 16px rgba(255, 211, 107, 0.7);
}