/* Bálatologató – eszközgombok, irány-nyilak, oktató kéz */
#tools {
  position: fixed; z-index: 10;
  left: calc(var(--gap) + var(--safe-l)); bottom: calc(var(--gap) * 1.5 + var(--safe-b));
  display: grid; grid-template-columns: repeat(3, var(--btn)); gap: calc(var(--gap) * 1.4) var(--gap);
}
#btnRotL { grid-column: 1; }
#btnRotR { grid-column: 2; }
.btn.hint { background: #fff7c7; }

#dpad {
  position: fixed; z-index: 10;
  right: calc(var(--gap) + var(--safe-r)); bottom: calc(var(--gap) * 1.5 + var(--safe-b));
  display: grid;
  grid-template-columns: repeat(3, calc(var(--btn) * 1.05));
  grid-template-rows: repeat(3, calc(var(--btn) * 1.05));
  gap: 4px;
}
.btn.dir { width: 100%; height: 100%; border-radius: 26%; background: #ffe3ea; color: var(--pink-dark); box-shadow: 0 5px 0 var(--pink-dark), 0 8px 14px rgba(0,0,0,.18); }
.btn.dir:active, .btn.dir.down { box-shadow: 0 1px 0 var(--pink-dark), 0 3px 6px rgba(0,0,0,.18); }
.dir.up { grid-area: 1 / 2; }
.dir.left { grid-area: 2 / 1; transform: rotate(-90deg); }
.dir.right { grid-area: 2 / 3; transform: rotate(90deg); }
.dir.down { grid-area: 3 / 2; transform: rotate(180deg); }
.dir.left:active, .dir.left.down { transform: rotate(-90deg) translateY(4px); }
.dir.right:active, .dir.right.down { transform: rotate(90deg) translateY(4px); }
.dir.down:active, .dir.down.down { transform: rotate(180deg) translateY(4px); }
.btn.dir.glow { animation: glow 1s ease-in-out infinite; }

/* keskeny, álló kijelzőn kisebb nyilak */
@media (max-aspect-ratio: 3/4) {
  #dpad { grid-template-columns: repeat(3, var(--btn)); grid-template-rows: repeat(3, var(--btn)); }
  #tools { grid-template-columns: repeat(2, var(--btn)); }
  #btnHint { grid-column: 1; }
  #btnRotL { grid-column: 2; }
  #btnRotR { grid-column: 1; }
}
/* alacsony, fekvő kijelzőn egymás mellett */
@media (max-height: 460px) and (orientation: landscape) {
  #tools { grid-template-columns: repeat(5, var(--btn)); }
  #btnRotL, #btnRotR { grid-column: auto; }
}

/* elakadás: a visszavonás gomb finoman billeg */
.btn.nudge { animation: wiggle 1.4s ease-in-out infinite; background: #ffe9a8; }
.btn.nudge-soft { background: #fff3cf; }

#hand {
  position: fixed; z-index: 20; width: calc(var(--btn) * 1.1); height: calc(var(--btn) * 1.1);
  pointer-events: none; opacity: 0; transform: translate(-55%, 0);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.3));
  transition: opacity .3s, left .3s, top .3s;
}
#hand.show { opacity: 1; animation: press 1.1s ease-in-out infinite; }

@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } }
@keyframes glow { 50% { box-shadow: 0 5px 0 var(--pink-dark), 0 0 0 6px rgba(255,225,77,.9), 0 8px 18px rgba(0,0,0,.2); } }
@keyframes press { 0%, 100% { transform: translate(-55%, 18%) scale(1); } 45% { transform: translate(-55%, -8%) scale(.92); } }