/* ============================================================
   FIND THE DIFFERENCE — responsive rules
   ============================================================ */

/* Portrait / small screens: stack scenes vertically, show mobile controls */
@media (max-width: 768px), (orientation: portrait) {
  .game-root { scrollbar-width: none; }

  #scenes {
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    padding: 4px 10px;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
  }

  #scenes .scene {
    flex: none;
    width: 100%;
    max-width: none;
    max-height: 48vh;
    aspect-ratio: 4 / 3;
  }

  .mobile-controls { display: flex; }

  .game-hud { gap: 6px 12px; padding: 8px 6px; }
  .hud-value { font-size: clamp(16px, 4.4vw, 24px); }
  .hud-buttons { margin-left: 0; }
  .hud-buttons .btn-hud {
    padding: 7px 9px;
    min-height: 38px;
  }

  .howto-body { grid-template-columns: 1fr; }

  .menu-buttons { width: min(100%, 300px); }
}

/* Small phones */
@media (max-width: 480px) {
  .game-hud .hud-cell { min-width: 48px; }
  .game-hud .hud-score { display: none; }
  .hud-label { font-size: 8px; letter-spacing: 1.4px; }
  .hud-stars { display: none; }

  .panel { width: 96vw; padding: 12px; }
  .level-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .level-cell { min-height: 60px; padding: 8px 4px; font-size: 15px; }

  .game-footer .hint-text { font-size: 11px; }
}

/* Landscape phones / small landscape : keep scenes side by side but compact */
@media (max-height: 520px) and (orientation: landscape) {
  .game-hud { gap: 6px 10px; padding: 6px 8px; }
  .hud-value { font-size: 17px; }
  .hud-label { font-size: 8px; }
  #scenes { gap: 8px; padding: 4px; }
  #scenes .scene { max-height: calc(100vh - 120px); }
  .game-footer { display: none; }
}

/* Large desktop: allow controls tidy row */
@media (min-width: 1200px) {
  #scenes { padding: 10px clamp(18px, 3vw, 40px); gap: 16px; }
  .game-hud { padding: 12px clamp(18px, 3vw, 40px); }
}

/* Keep scenes from overflowing on tiny landscape screens */
@media (max-width: 640px) and (orientation: landscape) {
  .hud-cell.hud-score { display: none; }
  .hud-buttons .btn-hud svg { width: 16px; height: 16px; }
  #scenes { gap: 6px; padding: 3px; }
}

/* Very tall narrow: cap intro / panels */
@media (max-height: 640px) {
  .modal-card { max-height: 88vh; overflow-y: auto; }
  .level-grid { max-height: 74vh; overflow-y: auto; }
}

/* Respect safe areas on notched phones */
@supports (padding: max(0px)) {
  .game-hud { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .mobile-controls { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}