/* ============================================================
   HEXA STACK — responsive.css
   Device adaptation. The mobile control bar (Restart + Full
   Screen) is shown ONLY on touch / small-screen devices and is
   completely hidden on desktop and laptop pointers.
   ============================================================ */

/* ---- touch devices: show the mobile control bar in a run ---- */
@media (hover: none) and (pointer: coarse) {
  #mobile-controls.in-run { display: flex; }
}
/* ---- very narrow windows (portrait phones) ---- */
@media (max-width: 600px) {
  #mobile-controls.in-run { display: flex; }
}

@media (max-width: 700px) {
  .hud-logo { display: none; }
  .hud-center { max-width: 200px; }
  .hud-lines { padding: 4px 10px; font-size: 9px; }
  .hud-lines b { font-size: 13px; }
  .scores { gap: 10px; }
  .score-block .val { font-size: 16px; }
  .icon-btn { width: 36px; height: 36px; }
  #hud { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 480px) {
  .panel { padding: 22px 18px 20px; border-radius: 14px; }
  .btn { padding: 13px 20px; font-size: 13px; }
  .stat-grid { gap: 6px; }
  .stat .v { font-size: 16px; }
  .tagline { letter-spacing: 0.4em; text-indent: 0.4em; font-size: 10.5px; }
  #toast { bottom: 110px; }
}

/* ---- short landscape screens (phones rotated) ---- */
@media (max-height: 520px) {
  .panel { padding: 16px 22px 14px; }
  .hex-logo { display: none; }
  .game-title { font-size: 30px; }
  .tagline { margin-top: 4px; }
  .chip { margin-top: 8px; padding: 5px 12px; }
  .btn-col, .row-btns { margin-top: 12px; }
  .btn { padding: 10px 18px; font-size: 12px; }
  .steps div { font-size: 12px; }
  .steps li { padding: 4px 0; }
  .score-row { padding: 5px 10px; margin-bottom: 4px; }
  .screen { align-items: flex-start; padding-top: 10px; }
  .stat-grid { margin: 10px 0 4px; }
  .stat { padding: 8px 4px; }
  .stat .v { font-size: 15px; }
}