/* Ogni ape a casa sua - solo quello che e' suo: apiario, api, arnie, paesaggio.
   La veste comune sta in giochi-comune.css, da caricare prima. */
.gioco{--ape:32px; --gap:8px; --hcol:220px; --prato:52px}
.gioco .scena{position:relative;margin:14px auto 0;border-radius:20px;overflow:hidden;
  background:linear-gradient(#B9DEF2 0%,#D9EEF6 38%,#EDF4E0 60%,#EDF4E0 100%);
  box-shadow:inset 0 0 0 1px rgba(31,39,24,.08),0 12px 26px rgba(31,45,20,.13);
  padding:16px 8px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gioco .sole{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFF6C4,#FFD749);box-shadow:0 0 30px rgba(255,215,73,.75)}
.gioco .nube{position:absolute;background:rgba(255,255,255,.75);border-radius:100px;height:14px}
.gioco .nube::before,.gioco .nube::after{content:"";position:absolute;background:inherit;border-radius:50%}
.gioco .nube::before{width:22px;height:22px;left:10px;top:-11px}
.gioco .nube::after{width:16px;height:16px;left:32px;top:-8px}
.gioco .n1{width:64px;left:18px;top:26px}
.gioco .n2{width:48px;left:44%;top:14px;opacity:.75}
.gioco .paesaggio{position:absolute;left:0;right:0;bottom:calc(var(--prato) - 10px);height:46%;min-height:120px}
.gioco .paesaggio svg{width:100%;height:100%;display:block}
.gioco .prato{position:absolute;left:0;right:0;bottom:0;height:var(--prato);
  background:linear-gradient(#8FBE6A,#6BA04B);box-shadow:inset 0 3px 0 rgba(255,255,255,.18)}
.gioco .prato::after{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(78deg,rgba(255,255,255,.28) 0 2px,transparent 2px 9px)}
.gioco .fiore{position:absolute;bottom:6px}

.gioco .apiario{position:relative;z-index:3;display:flex;justify-content:center;align-items:flex-start;
  gap:var(--gap);padding-bottom:calc(var(--prato) - 4px);min-height:calc(var(--hcol) + var(--prato))}

.gioco .trave{position:absolute;z-index:2;left:6px;right:6px;height:calc(var(--ape)*.22);border-radius:4px;
  top:calc(16px + var(--ape)*1.74);background:linear-gradient(#CFA265,#9E7238);
  box-shadow:0 5px 7px rgba(31,45,20,.26)}
.gioco .palo{position:absolute;z-index:1;width:calc(var(--ape)*.24);border-radius:3px;
  top:calc(16px + var(--ape)*1.9);bottom:16px;background:linear-gradient(90deg,#BC8C4E,#8A6432)}
.gioco .palo.sx{left:calc(var(--ape)*.45)}
.gioco .palo.dx{right:calc(var(--ape)*.45)}
.gioco .colonna{position:relative;width:calc(var(--ape)*2);height:var(--hcol);
  display:flex;flex-direction:column;justify-content:flex-start;align-items:center;cursor:pointer;transition:transform .12s}
.gioco .colonna:focus-visible{outline:3px solid var(--inch);outline-offset:4px;border-radius:10px}
.gioco .catena{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:0 0 auto;margin-top:calc(var(--ape)*.24)}
.gioco .arnia{width:calc(var(--ape)*2);flex:0 0 auto;position:relative;transition:transform .14s,filter .2s}
.gioco .arnia svg{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(31,45,20,.22))}
.gioco .colonna:hover .arnia{transform:translateY(-2px)}

.gioco .ape{width:var(--ape);height:calc(var(--ape)*1.16);display:block;flex:0 0 auto;
  margin-bottom:calc(var(--ape)*-.14);transition:transform .16s,filter .16s}
.gioco .ape svg{width:100%;height:100%;display:block;overflow:visible}
.gioco .ala{transform-origin:50px 42px}
.gioco .ape.presa{filter:drop-shadow(0 0 6px rgba(255,214,77,.95)) drop-shadow(0 5px 6px rgba(31,45,20,.3))}
.gioco .ape.presa,.gioco .colonna:hover .ape:last-child{transform:translateY(calc(var(--ape)*.22))}
.gioco .ape.presa .alaS,.gioco .colonna:hover .ape:last-child .alaS,.gioco #volo .alaS{animation:battitoS .16s infinite alternate}
.gioco .ape.presa .alaD,.gioco .colonna:hover .ape:last-child .alaD,.gioco #volo .alaD{animation:battitoD .16s infinite alternate}
@keyframes battitoS{from{transform:rotate(0)}to{transform:rotate(-15deg)}}
@keyframes battitoD{from{transform:rotate(0)}to{transform:rotate(15deg)}}
.gioco .ape.fantasma{opacity:.22}

.gioco .colonna.bersaglio .arnia{animation:respiro 1.1s ease-in-out infinite}
.gioco .colonna.bersaglio .arnia svg{filter:drop-shadow(0 0 7px rgba(255,214,77,1)) drop-shadow(0 4px 6px rgba(31,45,20,.22))}
@keyframes respiro{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.gioco .colonna.spenta{filter:saturate(.55) opacity(.7)}
.gioco .colonna.sopra .arnia{transform:translateY(-6px) scale(1.04)}
.gioco .colonna.no{animation:nono .34s}
@keyframes nono{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.gioco .colonna.suggerita .arnia svg{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 16px var(--miele))}
.gioco .spunta{position:absolute;top:calc(var(--ape)*.12);right:calc(var(--ape)*.02);width:22px;height:22px;
  border-radius:50%;background:var(--cera);border:2px solid var(--inch);color:var(--inch);
  font-size:13px;font-weight:700;line-height:19px;z-index:4;animation:pop .3s}

.gioco .caricamento{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;
  background:rgba(237,244,224,.86);font-weight:700;color:var(--inchS);font-size:15px}
.gioco .caricamento.on{display:flex}

.gioco .ape.invisibile{visibility:hidden}

#volo{position:absolute;left:0;top:0;z-index:60;display:none;flex-direction:column;align-items:center;pointer-events:none}
#volo .ape{filter:drop-shadow(0 10px 10px rgba(31,45,20,.4))}