/* ============================================================
   Il percorso dell'ape Pea — foglio di stile del solo gioco.
   La veste comune (titolo, cruscotto, pulsanti, velo) sta in
   giochi-comune.css: qui c'è solo la scena e le tessere.
   Le misure vere le calcola lo script: qui ci sono solo i valori
   di partenza, perché su un telefono il tavolo deve rimpicciolirsi.
   ============================================================ */
#gioco-percorso{
  --cella:82px;      /* lato di una tessera */
  --fuga:5px;        /* spazio fra una tessera e l'altra */
  --erba:32px;       /* l'altezza del prato in fondo alla scena */
}
#gioco-percorso .tavola{display:flex;justify-content:center;padding:14px 0 2px}

#gioco-percorso .scena{
  position:relative;display:flex;align-items:flex-end;gap:3px;
  padding:12px 10px calc(var(--erba) - 2px);border-radius:16px;
  background:linear-gradient(#EFF5E4 0%,#E6F0D6 62%,#DCE9C6 100%);
}
#gioco-percorso .scena::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--erba);
  border-radius:0 0 16px 16px;
  background:linear-gradient(#93AC60 0 34%,#7B954C 34% 100%);
}
#gioco-percorso .lato{flex:0 0 auto;position:relative;z-index:1}
/* arnia e fiori affondano un poco nell'erba, il tavolo resta appoggiato sopra */
#gioco-percorso #arnia,#gioco-percorso #prato{margin-bottom:calc(var(--erba) * -0.5)}
#gioco-percorso .lato svg{display:block;width:100%;height:auto}

#gioco-percorso .tavolo{
  position:relative;z-index:1;flex:0 0 auto;
  background:#EFE6CE;border-radius:12px;touch-action:manipulation;
}
#gioco-percorso .slot{
  position:absolute;border-radius:8px;background:#E6DAB9;
  box-shadow:inset 0 0 0 2px rgba(140,110,50,.16);
}
#gioco-percorso .slot.bersaglio{
  background:#FBEBB4;box-shadow:inset 0 0 0 2.5px var(--miele);cursor:pointer;
}
#gioco-percorso .cas{
  position:absolute;cursor:pointer;background:#F8F2E2;border-radius:8px;
  box-shadow:inset 0 0 0 1.5px rgba(140,110,50,.18);
  transition:left .17s ease,top .17s ease;
}
#gioco-percorso .cas svg{display:block;overflow:visible}
#gioco-percorso .cas .bordo{stroke:#BE8C22;transition:stroke .25s}
#gioco-percorso .cas .dentro{stroke:#F0C453;transition:stroke .25s}
#gioco-percorso .cas.viva .bordo{stroke:#8E6512}
#gioco-percorso .cas.viva .dentro{stroke:#FFDE7C}
#gioco-percorso .cas.scelto{box-shadow:inset 0 0 0 3px var(--miele)}

#gioco-percorso .segno{position:absolute;pointer-events:none}
/* il volo lo guida il percorso dei tubi, non una transizione */
#gioco-percorso .ape{position:absolute;pointer-events:none;z-index:5}
#gioco-percorso .ape .corpo{display:block;animation:apeOndeggia 1.7s ease-in-out infinite alternate}
@keyframes apeOndeggia{from{transform:translateY(-2.5px)}to{transform:translateY(2.5px)}}
@keyframes apeAli{from{transform:scaleY(1)}to{transform:scaleY(.62)}}
#gioco-percorso .ape .ala{transform-box:fill-box;transform-origin:50% 100%;
  animation:apeAli .16s ease-in-out infinite alternate}
#gioco-percorso .ape .ala.b{animation-delay:.05s}

/* il profumo che sale dal prato */
@keyframes profumo{
  0%{opacity:0;transform:translateY(10px) scale(.85)}
  22%{opacity:.9}
  100%{opacity:0;transform:translateY(-30px) scale(1.15)}
}
#gioco-percorso .odore{transform-box:fill-box;transform-origin:50% 100%;
  animation:profumo 4.6s ease-out infinite}
#gioco-percorso .odore.b{animation-delay:1.6s}
#gioco-percorso .odore.c{animation-delay:3.1s}
@keyframes apettaVolo{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#gioco-percorso .apetta{transform-box:fill-box;transform-origin:50% 50%;
  animation:apettaVolo 2.4s ease-in-out infinite}
#gioco-percorso .apetta.b{animation-delay:.9s}

/* la dispensa: le tessere messe da parte */
#gioco-percorso .dispensa{
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:14px auto 0;max-width:34em;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--inchS);
}
#gioco-percorso .dispensa .chip{
  width:44px;height:44px;border-radius:9px;background:#fff;cursor:pointer;padding:0;border:0;
  box-shadow:inset 0 0 0 1.5px rgba(140,110,50,.25);
}
#gioco-percorso .dispensa .chip.scelto{box-shadow:inset 0 0 0 3px var(--miele)}
#gioco-percorso .dispensa .chip svg{display:block}
#gioco-percorso .dispensa .vuoto{
  color:var(--inchS);text-transform:none;letter-spacing:0;font-weight:400;opacity:.75;
}

@media (prefers-reduced-motion:reduce){
  #gioco-percorso .odore{animation:none;opacity:.55}
  #gioco-percorso .apetta{animation:none}
  #gioco-percorso .ape .ala,#gioco-percorso .ape .corpo{animation:none}
  #gioco-percorso .cas{transition:none}
}

/* l'aiuto acceso: il prossimo tocco fa quello, non una mossa normale */
#gioco-percorso .comandi button.armato{background:var(--miele);border-color:var(--miele);color:var(--inch)}
#gioco-percorso .comandi button.armato:hover:not(:disabled){background:var(--miele);color:var(--inch)}