/* Ficha Math — 3D fold game styles, shared by index.html and play.html */
.simhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.simhead .status{flex:1; font-size:14px; min-width:180px}
.status b{font-family:var(--num); font-size:18px}
.scene{perspective:1500px; display:flex; justify-content:center; padding:14px 0 6px; overflow:hidden}
.stage{
  position:relative; width:calc(var(--R)*5.3); height:calc(var(--R)*5.5);
  transform-style:preserve-3d; transform:rotateX(14deg);
}
.stage .wrap{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d}
.stage .petal{
  position:absolute; transform-style:preserve-3d; transform-origin:0 50%; cursor:pointer;
  transition:transform 1s cubic-bezier(.5,.05,.25,1);
}
.stage .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; pointer-events:none}
.stage .face svg{width:100%; height:100%; display:block; overflow:visible}
/* Only the hexagons take clicks. The stage and the petals lie in the same 3D plane, so if they
   could be hit the browser sometimes picks the stage and a tap on a petal is lost. */
.stage, .stage *{pointer-events:none}
.stage .petal:not(.folded) .front .hit{pointer-events:all}
.stage .back{transform:rotateY(180deg)}
.stage .petal:not(.folded):hover .front{filter:brightness(1.04) drop-shadow(0 0 6px rgba(255,140,60,.45))}
.stage .petal.folded{cursor:default}
.stage .center{position:absolute; left:50%; top:50%}
.stage .center svg{width:100%;height:100%;display:block;overflow:visible}
.petal.wrong{animation:shake .45s}
@keyframes shake{0%,100%{translate:0 0}20%{translate:0 -7px}40%{translate:0 7px}60%{translate:0 -5px}80%{translate:0 4px}}
.petal.wrong .front{filter:drop-shadow(0 0 8px rgba(229,72,77,.9))}
.shadow{position:absolute; left:50%; top:50%; width:calc(var(--R)*5); height:calc(var(--R)*5); transform:translate(-50%,-46%) translateZ(-2px);
  background:radial-gradient(closest-side, rgba(60,40,120,.16), transparent); border-radius:50%; pointer-events:none}

