/* Tile action menu — the icons that pop up above a tapped tile.
   Positioned from script every frame (see placeMenu): left/top are the tile's
   anchor point on screen and the transform hangs the row above it. */

#tileMenu {
  position:fixed; left:0; top:0; display:flex; gap:8px;
  transform:translate(-50%,-100%); pointer-events:auto;
  /* Above the fullscreen touch control pad, which would otherwise swallow
     taps meant for these icons. */
  z-index:2;
}

#tileMenu button {
  width:44px; height:44px; display:grid; place-items:center; padding:0;
  border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:rgba(12,20,28,.72); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#eef3f7; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.35);
  animation:tactPop .16s ease-out both;
}
/* Icons stagger in left to right, so the row reads as one gesture. */
#tileMenu button:nth-child(2) { animation-delay:.05s; }
#tileMenu button:nth-child(3) { animation-delay:.10s; }
#tileMenu button:active { background:rgba(214,90,90,.30); }
/* One SVG file per action, painted with the button's own colour through a
   mask, so the icons stay legible against the translucent panel. */
#tileMenu .ic {
  width:24px; height:24px; display:block; background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
          mask:var(--icon) center/contain no-repeat;
}

@keyframes tactPop {
  from { opacity:0; transform:translateY(7px) scale(.75); }
  to   { opacity:1; transform:none; }
}

/* An action the pack cannot pay for. Still tappable — tapping it says what is
   missing, which is more use than a dead button. */
#tileMenu button.poor { opacity:.42; }