/* ===== responsive.css — 360 / 390 / 412 / 768 / 1024 / desktop, portrait + landscape ===== */

/* Small phones (≤360px): tighten paddings, keep 48px+ touch targets */
@media (max-width: 380px) {
  .screen { padding: .8rem .8rem 2.5rem; }
  .category-card__emoji { width: 72px; height: 72px; font-size: 2.3rem; }
  .category-card__name { font-size: 1.02rem; }
  .quiz-prompt__text { font-size: 1.25rem; }
  .learn-card__name { font-size: 1.45rem; }
  .mode-card__title { font-size: 1.1rem; }
  .item-strip { gap: .5rem; }
  .pin-pad { grid-template-columns: repeat(3, 76px); }
  .pin-pad__key { min-width: 76px; min-height: 60px; }
}

/* Landscape phones (short height): compress vertical chrome */
@media (max-height: 480px) and (orientation: landscape) {
  .category-card { padding: .7rem .6rem; }
  .category-card__emoji { width: 56px; height: 56px; font-size: 1.9rem; }
  .greeting { margin: .3rem 0 .6rem; }
  .learn-cardbox { min-height: 240px; }
  .learn-card__img { width: min(38vw, 170px); }
  .result-card { padding: 1rem; }
  .result-card__emoji { font-size: 2.6rem; }
  .screen { padding-bottom: 1.5rem; }
}

/* Tablets (≥768px) */
@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .category-card { padding: 1.6rem 1rem; }
  .category-card__emoji { width: 96px; height: 96px; font-size: 3.1rem; }
  .topbar__title { font-size: 1.25rem; }
  .screen { padding: 1.4rem 1.5rem 3rem; }
  .quiz-prompt__text { font-size: 1.7rem; }
  .option-grid { gap: 1.3rem; }
  .learn-card__img { width: min(100%, 340px); }
  .learn-card__name { font-size: 2rem; }
  .mode-grid { gap: 1.3rem; }
  .item-strip { grid-template-columns: repeat(6, 1fr); }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .screen { max-width: 860px; }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .item-strip { grid-template-columns: repeat(8, 1fr); }
  .option-grid { max-width: 720px; }
  .learn-cardbox { min-height: 380px; }
}

/* Very wide / desktop XL */
@media (min-width: 1440px) {
  .screen { max-width: 940px; }
}

/* Hover-capable devices: subtle lift instead of scale-press */
@media (hover: hover) {
  .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-big); }
  .option-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-big); }
  .btn:hover { filter: brightness(1.04); }
}

/* Reduced motion: honor user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}