/* On-screen controls panel - lives BELOW the game screen (Game Boy style),
   in normal document flow, never overlapping the canvas or HUD. Only shown
   on touch devices (body.touch, set by touch-controls.js after feature
   detection). Desktop/keyboard play is completely unaffected.

   Sizes use vmin (the smaller of viewport width/height) so the whole panel
   scales down together on narrow phones and on short landscape screens,
   instead of a fixed px layout that can overflow on either axis. */

#controls-panel {
  display: none;
}

body.touch #controls-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: clamp(190px, 32vh, 300px);
  padding: 10px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  background: linear-gradient(#14141f, #0a0a12);
  border-top: 3px solid #000;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.4) inset;
}

.tc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-family: var(--pixel-font);
  font-size: clamp(9px, 3vmin, 16px);
  line-height: 1;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tc-btn.pressed {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.94);
}

/* D-pad - 3x3 grid cross, scales as one block via vmin */
.tc-dpad {
  flex: 0 0 auto;
  width: clamp(118px, 32vmin, 180px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}

.tc-dpad .tc-btn {
  font-size: clamp(12px, 4vmin, 18px);
}

.tc-dpad .tc-up    { grid-column: 2; grid-row: 1; border-radius: 10px 10px 3px 3px; }
.tc-dpad .tc-down  { grid-column: 2; grid-row: 3; border-radius: 3px 3px 10px 10px; }
.tc-dpad .tc-left  { grid-column: 1; grid-row: 2; border-radius: 10px 3px 3px 10px; }
.tc-dpad .tc-right { grid-column: 3; grid-row: 2; border-radius: 3px 10px 10px 3px; }
.tc-dpad-center    { grid-column: 2; grid-row: 2; }

/* Select/Start-style small buttons, centered between the d-pad and the
   action buttons */
.tc-mid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.tc-mid-btn {
  width: clamp(48px, 15vmin, 76px);
  height: clamp(26px, 8vmin, 40px);
  border-radius: 20px;
  font-size: clamp(7px, 2.4vmin, 9px);
}

/* Action buttons - B (pular) / A (atirar) / Y (trocar arma), triangle
   layout: B primary bottom-right, A upper-right, Y off to the left where it
   doesn't compete with the other two for thumb space. */
.tc-actions {
  position: relative;
  flex: 0 0 auto;
  width: clamp(118px, 32vmin, 180px);
  aspect-ratio: 1;
}

.tc-actions .tc-btn {
  position: absolute;
  border-radius: 50%;
  text-align: center;
  padding: 4px;
}

.tc-jump {
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1;
  background: rgba(79, 233, 133, 0.2);
  border-color: var(--accent-green);
}

.tc-shoot {
  right: 0;
  top: 0;
  width: 46%;
  aspect-ratio: 1;
  background: rgba(233, 79, 79, 0.22);
  border-color: var(--accent-red);
}

.tc-switch-y {
  left: 0;
  top: 27%;
  width: 46%;
  aspect-ratio: 1;
  background: rgba(255, 176, 32, 0.22);
  border-color: var(--accent-gold);
}

/* Very short landscape (phone rotated sideways) - the panel's own height
   still needs to shrink beyond what vh-based clamp() catches on its own. */
@media (max-height: 420px) {
  body.touch #controls-panel {
    height: clamp(150px, 38vh, 190px);
    padding-top: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}