/* Ogni miele nel suo vasetto — la scena, i vasetti e la colata.
   La veste comune sta in giochi-comune.css, da caricare prima. */
.gioco{--vaso:62px;--altezzaVaso:87px}

/* ---------- la scena: cielo, stelle, astro, banco ---------- */
.gioco .scena{position:relative;margin:18px auto 0;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 24px rgba(31,45,20,.22)}
.gioco .cielo{position:absolute;inset:0;background:linear-gradient(180deg,#BFDCEE,#EFE3C4);
  transition:background .5s linear}
.gioco .stelle{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s linear;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 28% 9%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 44% 22%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 61% 12%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 77% 25%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 88% 14%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 20% 34%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 69% 38%,#fff,transparent)}
.gioco .astro{position:absolute;width:38px;height:38px;border-radius:50%;margin:-19px 0 0 -19px;
  background:radial-gradient(circle at 36% 30%,#FFF3C4,#FFD86B);pointer-events:none}
/* Il ripiano non è uno solo in fondo: ogni vasetto porta il suo pezzo di
   legno, e i pezzi si toccano fra loro formando la fila. */
.gioco .posto::before{content:"";position:absolute;left:50%;bottom:0;z-index:-1;
  width:calc(100% + var(--spazioVaso,14px));height:30px;transform:translateX(-50%);
  background:linear-gradient(180deg,#D2A76C,#B0803F 42%,#8E6636);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28)}
.gioco .banco{position:relative;z-index:2;padding:104px 10px 0}

/* ---------- lo scaffale dei vasetti ---------- */
/* La fila dei vasetti non va MAI a capo: se lo spazio manca di un pelo i
   vasetti si stringono un filo, invece di mandarne uno da solo sulla riga
   sotto con mezzo pezzo di mensola. Il conto in misuraVasetti() lascia
   comunque qualche pixel di margine. */
.gioco .scaffale{position:relative;display:flex;flex-wrap:nowrap;justify-content:center;
  align-items:flex-end;gap:0 var(--spazioVaso,14px);padding-bottom:6px}
.gioco .scaffale > .posto{flex:0 1 auto;min-width:0}
.gioco .posto .vasetto{max-width:100%}
.gioco .posto{position:relative;display:flex;flex-direction:column;align-items:center;
  padding-bottom:30px}
.gioco .posto::after{content:"";position:absolute;left:50%;bottom:24px;width:112%;height:8px;
  transform:translateX(-50%);border-radius:50%;background:rgba(70,44,12,.32);filter:blur(3px)}

/* La sagoma di un vasetto di miele: bocca larga, collo corto, spalla che si
   allarga, corpo dritto e FONDO PIATTO. È il fondo piatto che lo distingue da
   una provetta. */
/* Il vasetto è disegnato in SVG (vedi gioco-mieli.js): qui resta solo la
   scatola che lo contiene e come si muove. */
.gioco .vasetto{position:relative;width:var(--vaso);height:var(--altezzaVaso);
  border:0;padding:0;margin:0;background:transparent;cursor:pointer;font:inherit;
  transition:transform .26s cubic-bezier(.34,.75,.4,1);transform-origin:50% 50%;
  filter:drop-shadow(0 2px 3px rgba(60,40,12,.28))}
.gioco .vasoSvg{display:block;width:100%;height:100%;overflow:visible}
.gioco .strato{transition:transform .18s ease,opacity .3s ease}
.gioco .stratoSu{transform:translateY(-6px)}
.gioco .strato.svuota{opacity:0}

.gioco .vasetto.preso{transform:translateY(-9px)}
.gioco .vasetto.libero .vasoSvg{filter:drop-shadow(0 0 3px #E9A924) drop-shadow(0 0 6px rgba(233,169,36,.7))}
.gioco .vasetto.aposto .vasoSvg{filter:drop-shadow(0 0 2px #5E7F3B) drop-shadow(0 0 5px rgba(94,127,59,.55))}
.gioco .vasetto.indizio .vasoSvg{filter:drop-shadow(0 0 3px #C24B2C) drop-shadow(0 0 6px rgba(194,75,44,.7))}
.gioco .vasetto:focus-visible{outline:3px solid var(--inch);outline-offset:2px;border-radius:6px}
.gioco .vasetto.nega{animation:negaVaso .34s ease}
@keyframes negaVaso{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Il vasetto si corica e va a bocca in giù SOPRA quello che riceve: dove
   esattamente lo calcola il gioco, che sa quanto sono distanti. */
.gioco .vasetto.versa{z-index:6}

/* La targhetta sta sotto il vasetto, sul legno. Nomi come «Millefiori» sono
   più larghi del vasetto: le do un filo di respiro e la lascio andare a capo. */
.gioco .targhetta{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:calc(var(--vaso) + var(--spazioVaso,14px));
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.01em;line-height:1.15;color:#F8F0E0;text-align:center;
  text-shadow:0 1px 2px rgba(60,38,10,.6)}

/* ---------- la colata ---------- */
.gioco .colata{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;
  pointer-events:none;overflow:visible}
/* Il colore lo mette il gioco, strato per strato: qui c'è solo il ripiego.
   L'ombra serve a far leggere anche i mieli chiarissimi sul cielo chiaro. */
.gioco .filoMiele{fill:none;stroke:#E9A924;stroke-width:7;stroke-linecap:round;
  filter:drop-shadow(0 1px 1.5px rgba(90,60,10,.55))}
.gioco .gocciaMiele{fill:#E9A924;filter:drop-shadow(0 1px 1.5px rgba(90,60,10,.55))}

/* ---------- la legenda dei mieli ---------- */
.gioco .legenda{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:6px 14px;padding:0;margin:14px 0 0;list-style:none;font-size:13.5px;text-align:left}
.gioco .legenda li{display:flex;align-items:baseline;gap:8px}
.gioco .legenda .pallino{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(31,39,24,.28);transform:translateY(2px)}
.gioco .legenda b{font-weight:800}
.gioco .legenda span:last-child{color:var(--inchS)}

@media (prefers-reduced-motion:reduce){
  .gioco .vasetto,.gioco .strato,.gioco .cielo,.gioco .stelle{transition:none}
  .gioco .vasetto.nega{animation:none}
}