/* Favi matematici — solo il favo e le sue celle.
   La veste comune sta in giochi-comune.css, da caricare prima. */
.gioco{--cella:60px}
.gioco .albero{margin:16px auto 0;display:inline-block;max-width:100%}
.gioco .ramo{line-height:0;width:calc(100% + var(--cella) * 2.2);
  margin-left:calc(var(--cella) * -1.1)}
.gioco .ramo svg{display:block;width:100%;height:auto;max-height:56px}
/* il nido pende dal ramo e tiene dentro il favo */
.gioco .nido{position:relative;display:inline-block;
  margin-top:calc(var(--cella) * -0.34);
  padding:calc(var(--cella) * 0.92) calc(var(--cella) * 0.34) calc(var(--cella) * 1.55);
  filter:drop-shadow(0 10px 16px rgba(31,45,20,.26))}
.gioco .sagoma{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.gioco .favo{position:relative;z-index:1;display:inline-block}
.gioco .riga{display:flex;justify-content:center}
.gioco .riga+.riga{margin-top:calc(var(--cella) * -0.26)}
.gioco .cella{width:var(--cella);height:calc(var(--cella) * 1.155);border:0;padding:0;margin:0 2px;
  background:transparent;cursor:pointer;position:relative;font:inherit}
.gioco .cella .esa{position:absolute;inset:0;background:#F0E4C4;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:flex;align-items:center;justify-content:center;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:calc(var(--cella) * 0.4);font-weight:800;color:var(--inch);transition:background .15s}
.gioco .cella:focus-visible .esa{box-shadow:0 0 0 3px var(--inch)}
.gioco .cella.scelta .esa{background:var(--miele);color:var(--cera)}
.gioco .cella.vuota .esa{background:#F3C33F;color:transparent;opacity:.5}
.gioco .cella.vuota{cursor:default}
.gioco .cella.sbaglio .esa{background:#C05A46;color:var(--cera)}
@media (max-width:420px){.gioco{--cella:46px}}
@media (prefers-reduced-motion:reduce){.gioco .cella .esa{transition:none}}