/* Phone overrides for chrome that is inline on every static page (header bar and
   cookie banner). The base styles live in each page's own <style>, so these sit
   in one shared file and use !important where an inline rule is more specific. */
@media (max-width: 640px) {
  /* header: the wordmark was taking the row and squeezing "Play Free" onto two lines */
  .page-nav { gap: 0.75rem; }
  .nav-logo { font-size: 1rem !important; white-space: nowrap; }
  .nav-cta { white-space: nowrap; padding: 0.5rem 1rem !important; font-size: 0.85rem !important; flex: none; }

  /* cookie banner: about two text lines plus one row of buttons */
  #cookie-consent { padding: 0.6rem 0.9rem !important; font-size: 0.76rem !important; }
  #cookie-consent > div { gap: 0.5rem !important; }
  #cookie-consent p { line-height: 1.35 !important; }
  #cookie-consent button { min-height: 44px; padding: 0.35rem 1rem !important; font-size: 0.82rem !important; }
}

/* Phone menu: the toggle lives in the header on every page that uses .page-nav */
.nav-toggle { display: none; }
@media (max-width: 640px) {
  .page-nav { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-left: 0.5rem; padding: 0;
    background: transparent; color: var(--text, #e0e0e0);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 8px; cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle { margin-left: auto; }
  /* the wordmark and the toggle fill the row, so the links (Play Free included) live in the menu */
  .page-nav:not(.nav-open) .nav-links { display: none; }
  .page-nav.nav-open .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 1rem 1rem; background: var(--bg, #0a0a0f);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  }
  .page-nav.nav-open .nav-links a:not(.nav-cta) { display: block !important; padding: 0.8rem 0.25rem; font-size: 1rem; }
  .page-nav.nav-open .nav-links .nav-cta { margin-top: 0.5rem; text-align: center; padding: 0.8rem 1rem !important; }
}
/* roomy hit areas for footer links on touch screens */
@media (pointer: coarse) {
  .page-footer a, .menu-footer a { display: inline-block; padding: 0.55rem 0.35rem; }
}