/* ==========================================================================
   Grade 8 Portal — Responsive helpers
   Most breakpoints live next to their components in style.css; this file
   holds cross-cutting spacing / density adjustments for small screens.
   ========================================================================== */

@media (max-width: 900px) {
  .wrap { padding: 0 18px; }
  .page-head { padding: 28px 0 18px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .header-inner { padding: 12px 16px; gap: 10px; }
  .brand span.brand-text { display: none; }
  h1 { font-size: 1.6rem; }
  .btn { padding: 9px 14px; font-size: .87rem; }
  .modal { padding: 20px; }
  .hero-date-stamp { position: static; margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: baseline; transform: rotate(-2deg); }
  .toast-stack { left: 12px; right: 12px; max-width: none; bottom: 12px; }
  .lb-row { grid-template-columns: 36px 44px 1fr; }
  .lb-score { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
}

@media (max-width: 480px) {
  .arcade-card { padding: 16px; }
  table, th, td { font-size: .78rem; }
  th, td { padding: 8px 8px; }
}

@media (min-width: 1400px) {
  .wrap { max-width: 1320px; }
}

@media print {
  .site-header, .site-footer, .btn, .sound-toggle, .nav-toggle { display: none !important; }
}