/* =====================================================================
   Alvéoles — styles propres au jeu (préfixe alv-)
   La barre, le plein écran et les infobulles sont dans css/games.css.
   ===================================================================== */

.alv-jeu {
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px : ne pas changer */
  --mgb-fond: linear-gradient(115deg, #2b1405, #6b3a0c 55%, #a8650f);
  --mgb-accent: #ffd257;
  --mgb-titre: linear-gradient(100deg, #fff6d8, #ffc93c);
  --mgb-police-titre: "Fredoka", "Outfit", sans-serif;
  --mg-stat-largeur: 4.2em;
  --mg-fs-fond: #1c0d03;
  --mg-bulle-fond: #3a1d06;

  --alv-ambre: #f6b93b;
  --alv-ambre-fonce: #b9690a;
  --alv-creme: #fff4d6;
  --alv-brun: #2a1505;
}

.alv-jeu [hidden] {
  display: none !important;
}

/* Zone de jeu : même largeur que la barre, hauteur posée par game.js */
.alv-zone {
  position: relative;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  gap: 14px;
  padding: 14px;
  color: var(--alv-creme);
  font-family: "Fredoka", "Outfit", sans-serif;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 180, 40, 0.22), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33M0 16L-28 0M56 16l28-16' fill='none' stroke='%23ffb84a' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #3a1c06, #1c0d03 70%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
}

.alv-jeu.mg-fs .alv-zone {
  align-self: stretch;
  width: auto;
  flex: 1;
  min-height: 0;
}

.alv-zone * {
  font-family: inherit;
}

/* ---------- Panneaux latéraux ---------- */
.alv-panneau {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.alv-ptitre {
  margin: 4px 2px 0;
  font: 600 0.82rem/1 "Fredoka", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffcf6b;
  opacity: 0.85;
}

.alv-niveaux {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alv-niv {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 200, 90, 0.18);
  background: rgba(255, 190, 70, 0.06);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.alv-niv:hover {
  background: rgba(255, 190, 70, 0.14);
  transform: translateX(3px);
}
.alv-niv.actif {
  background: linear-gradient(120deg, rgba(255, 196, 60, 0.32), rgba(255, 150, 20, 0.12));
  border-color: #ffc23d;
  box-shadow:
    0 0 0 1px rgba(255, 194, 61, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.35);
}
.alv-niv svg {
  grid-row: span 2;
  width: 38px;
  height: 38px;
}
.alv-niv-nom {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
}
.alv-niv-detail {
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.3;
}
.alv-niv-detail b {
  color: #ffd257;
  font-weight: 600;
}

/* Enfumoir */
.alv-enfumoir {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  border-radius: 18px;
  border: 1px solid rgba(255, 200, 90, 0.22);
  background: radial-gradient(circle at 50% 35%, rgba(255, 210, 120, 0.2), rgba(255, 190, 70, 0.04));
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
}
.alv-enfumoir svg {
  width: 76px;
  height: 76px;
  overflow: visible;
}
.alv-enfumoir:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.alv-enfumoir:disabled {
  opacity: 0.4;
  cursor: default;
}
.alv-fum {
  stroke: #e9dcc6;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
}
.alv-jeu.alv-mode-fumee .alv-enfumoir {
  border-color: #ffd257;
  box-shadow:
    0 0 0 2px #ffd257,
    0 0 26px rgba(255, 210, 87, 0.5);
}
.alv-jeu.alv-mode-fumee .alv-fum {
  opacity: 1;
  animation: alv-fumer 1.4s ease-in-out infinite;
}
@keyframes alv-fumer {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.alv-charges {
  position: absolute;
  bottom: 9px;
  display: flex;
  gap: 5px;
}
.alv-charges i {
  width: 10px;
  height: 11px;
  background: #ffd257;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.alv-charges i.vide {
  background: rgba(255, 210, 87, 0.22);
}

.alv-aide {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.72;
}
.alv-aide b {
  color: #ffd257;
  font-weight: 600;
}

.alv-carnet {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.9rem;
}
.alv-carnet dt {
  opacity: 0.7;
}
.alv-carnet dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: #ffd257;
  font-variant-numeric: tabular-nums;
}

/* ---------- Plateau ---------- */
.alv-plateau {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alv-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}

.alv-c {
  cursor: pointer;
}
.alv-fond {
  fill: url(#alv-g-miel);
  stroke: #d9a440;
  stroke-width: 0.9;
}
.alv-num {
  font: 700 10.5px "Fredoka", "Outfit", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  opacity: 0;
}
.alv-c.ouverte .alv-num {
  opacity: 1;
}
.alv-num.n1 { fill: #2f6fd6; }
.alv-num.n2 { fill: #2e8b3a; }
.alv-num.n3 { fill: #d33a24; }
.alv-num.n4 { fill: #7a32c0; }
.alv-num.n5 { fill: #a3480f; }
.alv-num.n6 { fill: #0e7f88; }

/* Opercule de cire (au-dessus du miel) */
.alv-cap {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.32s cubic-bezier(0.5, -0.4, 0.7, 1),
    opacity 0.32s;
}
.alv-cap-hex {
  fill: url(#alv-g-cire);
  stroke: var(--alv-ambre-fonce);
  stroke-width: 0.9;
}
.alv-cap-reflet {
  fill: url(#alv-g-reflet);
  pointer-events: none;
}
.alv-c:hover .alv-cap-hex {
  filter: brightness(1.12) saturate(1.1);
}
.alv-c.ouverte .alv-cap {
  transform: scale(0.15) rotate(40deg);
  opacity: 0;
  pointer-events: none;
}
.alv-c.ouverte {
  cursor: default;
}
.alv-c.ouverte.chiffre {
  cursor: pointer;
}

/* Marque */
.alv-mq {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: scale(0.2) translateY(-6px);
  transition:
    transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1),
    opacity 0.15s;
}
.alv-c.marquee .alv-mq {
  opacity: 1;
  transform: none;
}
.alv-mq-aile {
  fill: rgba(235, 248, 255, 0.85);
  stroke: rgba(60, 90, 120, 0.55);
  stroke-width: 0.45;
}

/* Frelon */
.alv-fr {
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.alv-aile {
  fill: rgba(220, 240, 255, 0.75);
  stroke: rgba(60, 80, 100, 0.6);
  stroke-width: 0.4;
}
.alv-c.frelon .alv-fr {
  opacity: 1;
  animation: alv-surgir 0.4s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
.alv-c.frelon .alv-fond {
  fill: #5c2a0b;
  stroke: #2c1203;
}
.alv-c.boum .alv-fond {
  fill: url(#alv-g-boum);
  stroke: #8c1406;
}
.alv-c.boum .alv-fr {
  animation:
    alv-surgir 0.4s cubic-bezier(0.3, 1.7, 0.5, 1) both,
    alv-bourdon 0.12s linear 0.4s infinite;
}
.alv-c.faux .alv-mq {
  opacity: 0.85;
}
.alv-c.faux .alv-fond {
  fill: #ffd8cf;
}
.alv-c.faux .alv-cap-hex {
  fill: #e98a7a;
  stroke: #9c2a18;
}
.alv-c.frelon .alv-cap,
.alv-c.capture .alv-cap,
.alv-c.endormi .alv-cap {
  transform: scale(0.15) rotate(40deg);
  opacity: 0;
  pointer-events: none;
}
.alv-c.endormi .alv-fond {
  fill: #e9e0d0;
  stroke: #b8a68a;
}
.alv-c.endormi .alv-fr {
  opacity: 1;
  filter: grayscale(0.55) brightness(1.05);
  animation: alv-dodo 2.6s ease-in-out infinite;
}
.alv-zz {
  font: 700 5px "Fredoka", sans-serif;
  fill: #6b5a43;
  opacity: 0;
  pointer-events: none;
}
.alv-c.endormi .alv-zz {
  opacity: 1;
}
.alv-c.capture .alv-fr {
  opacity: 1;
  animation: alv-surgir 0.4s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
.alv-c.capture .alv-fond {
  fill: #ffe9a8;
}

@keyframes alv-surgir {
  from {
    transform: scale(0.1) rotate(-60deg);
  }
  to {
    transform: none;
  }
}
@keyframes alv-bourdon {
  0% { transform: translate(0.5px, 0) rotate(4deg); }
  50% { transform: translate(-0.5px, 0.3px) rotate(-4deg); }
  100% { transform: translate(0.5px, 0) rotate(4deg); }
}
@keyframes alv-dodo {
  0%,
  100% { transform: rotate(-6deg) scale(0.96); }
  50% { transform: rotate(6deg) scale(1); }
}

/* Rosette survolée (chiffre) et visée de l'enfumoir */
.alv-c.voisin .alv-cap-hex {
  filter: brightness(1.25) saturate(1.2);
}
.alv-c.voisin.ouverte .alv-fond {
  fill: #fff;
}
.alv-c.vise .alv-cap-hex,
.alv-c.vise .alv-fond {
  filter: brightness(1.15) drop-shadow(0 0 2px #fff);
}
.alv-jeu.alv-mode-fumee .alv-c {
  cursor: crosshair;
}

/* Effets : fumée, éclats, abeilles */
.alv-bouffee {
  fill: #f3ece0;
  opacity: 0;
  animation: alv-bouffee 1.3s ease-out forwards;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes alv-bouffee {
  0% { opacity: 0; transform: scale(0.3); }
  25% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(2.4) translateY(-6px); }
}
.alv-eclat {
  fill: #ffcf4a;
  transform-box: fill-box;
  transform-origin: center;
  animation: alv-eclat 0.6s ease-out forwards;
}
@keyframes alv-eclat {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(140deg);
    opacity: 0;
  }
}

.alv-plateau.secoue {
  animation: alv-secoue 0.45s ease-out;
}
@keyframes alv-secoue {
  20% { transform: translate(-7px, 3px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(2px, -1px); }
}

.alv-abeille {
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 3;
  offset-rotate: auto 90deg;
  animation: alv-vol var(--duree, 3s) ease-in-out forwards;
}
@keyframes alv-vol {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.alv-abeille .alv-aile {
  animation: alv-battre 0.06s linear infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes alv-battre {
  to { transform: scaleY(0.4); }
}

/* Message d'accueil sur le plateau */
.alv-invite {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 170px;
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.85rem;
  color: #ffe6a6;
  pointer-events: none;
  transition: opacity 0.4s;
}

/* ---------- Fin de partie (dans la zone, sous la barre) ---------- */
.alv-fin {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(20, 8, 1, 0.55);
  backdrop-filter: blur(2px);
  animation: alv-apparait 0.4s ease-out;
}
.alv-fin-boite {
  width: min(360px, calc(100% - 32px));
  padding: 24px 26px 22px;
  border-radius: 22px;
  text-align: center;
  color: var(--alv-brun);
  background: linear-gradient(170deg, #fff7df, #ffe29a);
  box-shadow:
    0 0 0 4px rgba(255, 210, 87, 0.5),
    0 24px 60px rgba(0, 0, 0, 0.5);
  animation: alv-boite 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.alv-fin-embleme svg {
  width: 84px;
  height: 84px;
  margin-top: -64px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
}
.alv-fin-boite h2 {
  margin: 6px 0 6px;
  font: 700 1.7rem/1.1 "Fredoka", sans-serif;
  color: #7a3d05;
}
.alv-fin-boite p {
  margin: 0 0 18px;
  line-height: 1.45;
  white-space: pre-line;
}
.alv-fin-boutons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@keyframes alv-apparait {
  from { opacity: 0; }
}
@keyframes alv-boite {
  from { transform: scale(0.6) translateY(30px); opacity: 0; }
}

/* ---------- Écrans plus petits ---------- */
@media (max-width: 1000px) {
  .alv-panneau {
    display: none;
  }
}
@media (max-width: 600px) {
  .alv-zone {
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alv-cap,
  .alv-mq,
  .alv-c .alv-fr {
    transition: none;
    animation: none !important;
  }
}