/* Love Colors — responsive.css
 * Mobile / tablet / compact layouts, orientation handling and safe areas.
 */

/* Fallback default (before JS chooses): treat as mobile rows grid */
.game-main {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage" "panel";
}

/* ---------------- mobile portrait / small screens ---------------- */

@media (max-width: 760px), (max-height: 620px) {
  .hud {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-bottom: 6px;
  }

  .hud-progress { order: 4; flex-basis: 100%; }

  .hud-stars .star { --sw: 18px; }

  .hud-title { font-size: 13px; }

  #btn-full { display: none; }

  .progress-text { min-width: 32px; font-size: 12px; }

  .hud-score { font-size: 12.5px; }
}

/* mobile: bottom palette panel keeps controls compact */
body[data-layout="mobile"] .palette-wrap {
  overflow-y: auto;
  max-height: 46vh;
}

body[data-layout="mobile"] .panel-inner { gap: 10px; padding: 12px; }

body[data-layout="mobile"] .sw { width: 34px; height: 34px; border-radius: 10px; }

body[data-layout="mobile"] .action-row .btn { min-width: 76px; padding: 9px 10px; font-size: 11.5px; }

body[data-layout="mobile"] .btn-pause-lg { min-width: 0; }

body[data-layout="mobile"] .hint { display: none; }

body[data-layout="mobile"] .tool-btn { padding: 9px 4px; }
body[data-layout="mobile"] .tool-btn svg { width: 18px; height: 18px; }

/* ---------------- compact landscape (small height) ---------------- */

@media (max-height: 480px) and (orientation: landscape) {
  body[data-layout="desktop"] .game-main { grid-template-columns: minmax(0, 1fr) 236px; }

  body[data-layout="desktop"] .panel-inner { gap: 8px; padding: 10px; }

  .tool-row .tool-btn svg { width: 16px; height: 16px; }

  .action-row .btn { min-height: 36px; min-width: 70px; font-size: 10.5px; }

  .sw { width: 30px; height: 30px; }

  .btn-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }

  .hud { padding-top: 6px; }
}

/* ---------------- very narrow phones ---------------- */

@media (max-width: 360px) {
  .hud { gap: 8px; }

  .hud-actions { gap: 6px; }

  .star { --sw: 20px; }
  .hud-stars .star { --sw: 16px; }

  .menu-btns .btn { min-height: 44px; }

  .lvl-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .palette { gap: 6px; }
  body[data-layout="mobile"] .sw { width: 30px; height: 30px; }
}

/* ---------------- tablets ---------------- */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body[data-layout="mobile"] .game-main { grid-template-rows: minmax(0, 1fr) auto; }
  body[data-layout="mobile"] .palette-wrap { max-height: 34vh; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .hud-timer.warning,
  .btn { transition: none; }
}

/* ---------------- safe areas ---------------- */

.overlay { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }

.page { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

.toast { bottom: max(18px, env(safe-area-inset-bottom)); }

/* prevent accidental text selection & dragging inside the game screen */
#screen-game,
#screen-game button,
#screen-game canvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------------- tall thin game screen (portrait phone landscape flip) ---------------- */

@media (min-width: 900px) and (min-height: 700px) {
  body[data-layout="desktop"] .game-main { grid-template-columns: minmax(0, 1fr) 300px; }
}