/* ============================================================
   TANK BATTLE — responsive rules
   Landscape desktop → compact HUD; portrait phones → vertical
   composition with big touch controls.
   ============================================================ */

/* ---------------- Tablets & small laptops ---------------- */
@media (max-width: 900px) {
  .hint-key {
    display: none;
  }

  #footer-bar {
    justify-content: flex-end;
    padding: 6px 12px;
  }
}

@media (max-width: 768px) {
  #hud {
    gap: 8px;
  }

  .hp-plate {
    padding: 5px 8px;
    border-radius: 10px;
  }

  .score-chip,
  .round-chip {
    min-width: 58px;
    padding: 3px 8px;
  }

  /* stack HUD into a tight grid: row 1 = score+round+pause, row 2 = health bars */
  #hud {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "player center pause"
      "enemy  center pause";
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
  }

  .plate-player {
    grid-area: player;
    max-width: none;
  }

  .plate-enemy {
    grid-area: enemy;
    max-width: none;
  }

  .hud-center {
    grid-area: center;
    flex-direction: column;
    gap: 4px;
  }

  #btn-pause {
    grid-area: pause;
    align-self: center;
  }

  .score-chip,
  .round-chip {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
    padding: 1px 10px;
  }

  .chip-value {
    font-size: 15px;
  }

  .enemy-count {
    display: inline;
  }

  #stage {
    border-width: 3px;
    border-radius: 10px;
  }
}

/* ---------------- Phones (portrait-first) ---------------- */
@media (max-width: 540px),
(pointer: coarse) and (max-height: 500px) {
  #touch-controls.touch-on~#footer-bar {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  /* phones use the joystick for driving — pad would crowd the dock */
  #drive-pad {
    display: none;
  }
}

@media (pointer: coarse) {
  body {
    touch-action: none;
  }

  #game-canvas {
    cursor: default;
  }

  #footer-bar {
    display: none;
  }

  /* hints are useless on touch; dock shows controls */
  #dock {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* Very short landscape phones: slim HUD + dock so battlefield keeps room */
@media (max-height: 480px) and (orientation: landscape) {
  #hud {
    padding: 3px 10px;
  }

  .hp-plate {
    padding: 2px 8px;
  }

  .hp-bar {
    height: 13px;
  }

  .plate-head {
    margin-bottom: 2px;
  }

  .chip-label {
    display: none;
  }

  #touch-controls {
    padding-top: 4px;
    padding-bottom: 0;
  }

  #joy-zone {
    height: clamp(86px, 22vh, 120px);
  }

  #joy-base {
    width: clamp(84px, 20vh, 104px);
    bottom: 0;
    left: 10px;
  }

  #btn-fire {
    width: clamp(72px, 18vh, 92px);
  }
}

/* Ultra-narrow screens */
@media (max-width: 360px) {
  .logo-tank {
    font-size: 46px;
  }

  .logo-battle {
    font-size: 52px;
  }

  .menu-buttons {
    width: 100%;
  }

  .stat {
    min-width: 90px;
    padding: 8px 12px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

  .cloud,
  .sun,
  .logo,
  .result-emblem {
    animation: none !important;
  }

  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}