/* TFI BANISA — responsive layers.
   Mobile (360–430px) is the base; these rules only add room as it appears. */

/* very small phones */
@media (max-width: 359px) {
  .shell { padding-inline: 12px; }
  .hero__title { font-size: 3rem; }
  .game-card { grid-template-columns: 40px 1fr; padding-inline: 12px; }
  .share-buttons { grid-template-columns: 1fr; }
}

/* large phones */
@media (min-width: 412px) {
  .clue-grid { gap: var(--sp-3); }
}

/* tablet */
@media (min-width: 768px) {
  :root { --shell: 40rem; }

  .hero { padding: var(--sp-8) 0 var(--sp-7); }
  .hero__title { font-size: 7rem; }
  .hero__lede { font-size: var(--step-2); }

  .games { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .game-card { grid-template-columns: 1fr; }
  .game-card__icon { font-size: 2.25rem; }

  .clue-grid__cell { aspect-ratio: 2 / 3; }

  .result__ticket { padding: var(--sp-7) var(--sp-6); }
  .share-buttons { grid-template-columns: repeat(2, 1fr); }
}

/* desktop */
@media (min-width: 1024px) {
  :root { --shell: 44rem; }

  .site-header__inner { min-height: 64px; }
  .hero { padding: var(--sp-8) 0; }
  .hero__title { font-size: 8rem; }

  .game-card { padding: var(--sp-5); }
  .game-card__name { font-size: var(--step-2); }
}

/* wide desktop — keep the game column narrow, it is a phone-shaped game */
@media (min-width: 1440px) {
  :root { --shell: 46rem; }
  .hero__title { font-size: 9rem; }
}

/* admin tables get more room than the public shell */
@media (min-width: 900px) {
  .admin-shell { padding-inline: var(--sp-6); }
  .admin-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-form-grid { grid-template-columns: 1fr 1fr; }
}