/* Mobile-first tweaks. Base styles in style.css already flex/wrap
   reasonably; this file handles the breakpoints that need real changes. */

/* Small phones */
@media (max-width: 380px) {
  .logo-title { font-size: 2.2rem; }
  .hud-value { font-size: 1rem; }
  .letter-tile { min-width: 42px; min-height: 42px; font-size: 1.1rem; }
  .gameover-panel { padding: 20px 16px; }
}

/* Tablet and up */
@media (min-width: 640px) {
  .menu-buttons { flex-direction: row; flex-wrap: wrap; }
  .menu-buttons .btn { flex: 1 1 45%; }
  .screen-game { padding: 16px 24px 22px; max-width: 720px; margin: 0 auto; width: 100%; }
  .letter-tile { min-width: 56px; min-height: 56px; font-size: 1.5rem; }
  .controls-row .btn { min-width: 140px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .screen-game { max-width: 820px; }
  .tower-area { min-height: 380px; }
  .gameover-actions { flex-direction: row; }
  .gameover-actions .btn { flex: 1; }
}

/* Landscape phones: gameplay area needs to be short and wide */
@media (max-height: 480px) and (orientation: landscape) {
  .screen-game { flex-direction: row; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .hud, .bars { width: 100%; }
  .tower-area { flex: 1 1 55%; min-height: 160px; }
  .word-preview, .letters-row, .controls-row { flex: 1 1 40%; }
}

/* Respect reduced-motion preference: keep essential feedback, drop decorative motion */
@media (prefers-reduced-motion: reduce) {
  .floating-letter, .tower-area.wobble .tower-stack, .timer-bar.warn { animation: none !important; }
  .btn, .letter-tile { transition: none !important; }
}

/* Ensure touch targets never shrink below the concept's 44x44 minimum */
.letter-tile, .btn, .icon-btn, .lb-tab { min-height: 44px; }