/* La tubulure : le plateau du jeu. Chaque état se lit par la forme autant que par la couleur :
   un tuyau relié à la cabane est plein, à la couleur de la famille ; un tuyau qui ne l'est pas est creux
   (paroi grise, cœur sombre). Un érable relié a une pastille pleine ; sinon, un simple anneau. */

/* L'érablière : un creux sombre où les cases se touchent, pour que les tuyaux se raccordent d'une case à l'autre. */
.tubulure-erabliere {
  display: grid;
  grid-template-columns: repeat(var(--c), minmax(0, 1fr));
  /* Des cases de 80 px au plus et de 46 px au moins. Sur un écran bas, le plateau rétrécit pour laisser voir les outils :
     340 px, c'est la hauteur du reste de l'écran de jeu (en-tête, compteur, indice, outils et marges). */
  width: min(100%, calc(var(--c) * 80px + 16px));
  width: min(
    100%,
    calc(var(--c) * 80px + 16px),
    max(calc((100dvh - 340px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--c) / var(--r)), calc(var(--c) * 46px + 16px))
  );
  padding: var(--e-2);
  border-radius: var(--r-moyen);
  background: var(--studio-950);
  box-shadow: inset 0 0 0 1px var(--studio-800), inset 0 14px 28px -18px rgb(0 0 0 / 0.9);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tubulure-case {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
}

/* La tuile d'un tuyau qu'on peut tourner : en relief, un peu en retrait du bord pour laisser passer le tuyau. */
.tubulure-tuyau::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 9px;
  background: var(--studio-850);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 4px 8px -5px rgb(0 0 0 / 0.8);
  transition: transform var(--d-appui) var(--ease-out);
}

.tubulure-erabliere:not(.tubulure-mini) .tubulure-tuyau:not(.tubulure-fixe):active::before {
  transform: scale(0.93);
}

@media (hover: hover) and (pointer: fine) {
  .tubulure-erabliere:not(.tubulure-mini) .tubulure-tuyau:not(.tubulure-fixe):hover::before {
    background: var(--studio-800);
  }
}

/* Un tuyau boulonné est posé à plat, sans relief : il ne bouge pas. */
.tubulure-fixe::before {
  background: var(--studio-900);
  box-shadow: inset 0 0 0 1px var(--studio-800);
}

.tubulure-tuyau:focus-visible {
  outline-offset: -3px;
  border-radius: 11px;
}

/* Le dessin déborde d'un pixel de chaque côté : deux tuyaux voisins se chevauchent, sans fente entre les cases.
   Ce pixel tombe dans l'espace entre les tuiles ou dans la marge du plateau : rien ne sort de l'érablière. */
.tubulure-dessin {
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: hidden;
  pointer-events: none;
  transition: transform 150ms var(--ease-out);
}

/* Le tuyau : une paroi épaisse et un cœur fin, aux bouts arrondis. */
.tubulure-paroi {
  fill: none;
  stroke: var(--studio-500);
  stroke-width: 22;
  stroke-linecap: round;
  transition: stroke var(--d-court) ease;
}

.tubulure-seve {
  fill: none;
  stroke: var(--studio-950);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke var(--d-court) ease;
}

/* Relié à la cabane : le tuyau se remplit, paroi et cœur de la couleur de la famille. */
.tubulure-relie .tubulure-paroi,
.tubulure-relie .tubulure-seve {
  stroke: var(--fam);
}

/* Là où un érable relié alimente la cabane, la sève coule : des gouttes claires qui descendent vers la cabane.
   Les bouts arrondis allongent chaque tiret de 9 : « 2 18 » donne des gouttes rondes, bien séparées. */
.tubulure-relie .tubulure-seve.tubulure-coule {
  stroke: color-mix(in oklab, var(--fam), white 55%);
  stroke-dasharray: 2 18;
  animation: tubulure-coulee 700ms linear infinite;
}

.tubulure-relie .tubulure-seve.tubulure-entrant {
  animation-direction: reverse;
}

@keyframes tubulure-coulee {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* La cabane et les érables : une pastille posée au bout du tuyau, avec son dessin. */
.tubulure-badge {
  transform-box: fill-box;
  transform-origin: center;
}

.tubulure-cabane-fond {
  fill: var(--fam);
}

.tubulure-arbre-fond {
  fill: var(--studio-900);
  stroke: var(--studio-500);
  stroke-width: 3;
  transition: fill var(--d-court) ease, stroke var(--d-court) ease;
}

.tubulure-icone {
  color: var(--studio-300);
  transition: color var(--d-court) ease;
}

/* Un érable relié s'allume : pastille pleine, dessin à l'encre. La cabane l'est toujours. */
.tubulure-arbre.tubulure-relie .tubulure-arbre-fond {
  fill: var(--fam);
  stroke: var(--fam);
}

.tubulure-relie .tubulure-icone {
  color: var(--studio-950);
}

/* Les roches : des cases vides, sans tuile, où rien ne passe. */
.tubulure-roche-forme {
  fill: var(--studio-800);
  stroke: var(--studio-500);
  stroke-width: 3;
  stroke-linejoin: round;
}

.tubulure-roche-facette {
  fill: none;
  stroke: var(--studio-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Les boulons d'un tuyau fixé, dans deux coins opposés. */
.tubulure-boulon {
  fill: var(--studio-800);
  stroke: var(--studio-300);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.tubulure-boulon-centre {
  fill: var(--studio-300);
}

/* On touche un tuyau boulonné : une courte secousse, et l'indice explique pourquoi.
   Elle s'applique au bouton entier : le dessin garde sa rotation (posée en ligne), la secousse ne l'écrase pas. */
.tubulure-refus {
  animation: secousse 220ms var(--ease-out);
}

/* Érablière reliée : la sève accélère et les érables s'allument un à un, de la cabane vers le haut. */
.tubulure-resolue .tubulure-relie .tubulure-seve.tubulure-coule {
  animation-duration: 400ms;
}

.tubulure-resolue .tubulure-arbre .tubulure-badge {
  animation: tubulure-fete 520ms var(--ease-out) both;
  animation-delay: calc(var(--rang, 0) * 50ms);
}

@keyframes tubulure-fete {
  45% {
    transform: scale(1.16);
  }
}

/* L'aperçu de la fiche : une petite érablière immobile. */
.tubulure-erabliere.tubulure-mini {
  width: 150px;
  padding: 6px;
  border-radius: 14px;
}

.tubulure-mini .tubulure-seve.tubulure-coule {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .tubulure-dessin,
  .tubulure-tuyau::before,
  .tubulure-paroi,
  .tubulure-seve,
  .tubulure-arbre-fond,
  .tubulure-icone {
    transition: none;
  }

  .tubulure-relie .tubulure-seve.tubulure-coule,
  .tubulure-resolue .tubulure-arbre .tubulure-badge,
  .tubulure-refus {
    animation: none;
  }
}