/* ═══════════════════════════════════════════════════
   NETRIGO GAME STUDIOS — Mobile Override Sheet
   Pure @media additions — desktop never modified.
   Load order: AFTER all other CSS (incl. inline <style>)
   Breakpoints: pointer:coarse | 768 | 580 | 480 | 400
═══════════════════════════════════════════════════ */

/* ────────────────────────────────────
   GLOBAL — Overflow prevention
   (applies on all screen sizes; harmless on desktop)
──────────────────────────────────── */

/* Long unbreakable strings (file paths, hashes) inside code/pre
   overflow horizontally without these two properties           */
code {
  overflow-wrap: break-word;
  word-break: break-word;
}
pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ────────────────────────────────────
   TOUCH DEVICES — cursor & hover
──────────────────────────────────── */

/* Custom cursor is meaningless on touch */
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring,
  .cursor-trail-dot { display: none !important; }
}

/* Hover-lift effects flicker on tap — disable on touch */
@media (hover: none) {
  .card:hover,
  .need-card:hover,
  .hub-card:hover          { transform: none !important; box-shadow: none !important; }
  .btn-primary:hover,
  .btn-secondary:hover     { transform: none !important; }
  .gallery-item:hover img  { transform: none !important; }
  .tag:hover               { transform: none !important; box-shadow: none !important; }
}

/* ════════════════════════════════════════════════
   768px — Tablet / Mobile landscape
════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero sections: trim oversized padding ── */
  .about-hero    { padding-top:   4rem; padding-bottom: 3rem; }
  .careers-hero  { padding-top:   3.5rem; padding-bottom: 3rem; min-height: auto; }
  .comm-hero     { padding-top:   4rem;   padding-bottom: 3rem; min-height: auto; }
  .page-hero     { padding-top:   3.5rem; padding-bottom: 2.5rem; }
  .press-hero    { padding-top:   4rem;   padding-bottom: 3rem; min-height: auto; }
  .support-hero  { padding-top:   4rem;   padding-bottom: 3rem; min-height: auto; }
  .bs-hero       { min-height: auto; padding-top: 4rem; padding-bottom: 3.5rem; align-items: flex-start; }

  /* ── Games flagship card info ── */
  .flagship-info { padding: 2rem; }

  /* ── Newsletter: let the input grow instead of fixed 280px ── */
  .newsletter-wrap                        { flex-direction: column; gap: 2rem; }
  .newsletter-form                        { width: 100%; }
  .newsletter-form input[type="email"]    { width: auto; flex: 1; min-width: 0; }

  /* ── Community hub cards ── */
  .hub-card-body   { padding: 1.5rem; }
  .hub-card-footer { padding: 0 1.5rem 1.5rem; }
}

/* ════════════════════════════════════════════════
   580px — Mobile portrait
════════════════════════════════════════════════ */
@media (max-width: 580px) {

  /* ── Release banner (index) — allow wrapping on narrow screens ── */
  .release-banner {
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  /* ── Hero sections: further reduction ── */
  .about-hero    { padding-top: 3rem;   padding-bottom: 2rem; }
  .careers-hero  { padding-top: 2.5rem; padding-bottom: 2rem; }
  .press-hero    { padding-top: 3rem;   padding-bottom: 2rem; }
  .support-hero  { padding-top: 3rem;   padding-bottom: 2rem; }
  .comm-hero     { padding-top: 3rem;   padding-bottom: 2rem; }
  .page-hero     { padding-top: 2.5rem; padding-bottom: 2rem; }
  .bs-hero       { padding-top: 3rem;   padding-bottom: 2.5rem; }

  /* ── Blood & Silence: lower the min-clamp so title fits ── */
  /* Original clamp(5rem, 12vw, 12rem) → 5rem minimum is too wide at 320px */
  .bs-hero-title { font-size: clamp(2.8rem, 14vw, 8rem); }

  /* ── Newsletter: full stacked layout ── */
  .newsletter-form                     { flex-direction: column; }
  .newsletter-form input[type="email"] { width: 100%; }
  .newsletter-form .btn-primary        { width: 100%; justify-content: center; }

  /* ── Card padding reduction ── */
  .card-inner { padding: 1.3rem; }

  /* ── Flagship info ── */
  .flagship-info { padding: 1.5rem; }

  /* ── Section heading margin ── */
  .section-heading { margin-bottom: 2.5rem; }

  /* ── Back-to-top: smaller + closer to edge ── */
  #back-to-top { width: 40px; height: 40px; bottom: 1.5rem; right: 1.5rem; }

  /* ── Community chat: no forced tall min-height on mobile ── */
  .chat-section  { min-height: auto; }

  /* ── Legal sidebar already collapses at 860px (inline style) ──
     Extra: reduce content vertical padding on small screens      */
  .legal-content { padding-top: 2rem; padding-bottom: 2rem; }

  /* ── Careers info panel (inline padding: 2rem) ── */
  .need-card { padding: 1.5rem; }
}

/* ════════════════════════════════════════════════
   480px — Small phones
════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Status board: collapse 3-col grid to single column ── */
  .status-board-header { flex-wrap: wrap; gap: 0.5rem; padding: 1rem; }
  .status-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.8rem 1rem;
  }
  .build-label { display: none; }

  /* ── Diag card padding ── */
  .diag-card { padding: 1.5rem; }

  /* ── Action button groups: stack & full-width ── */
  .hero-actions,
  .prelaunch-actions,
  .bs-hero-actions     { flex-direction: column; align-items: stretch; }

  .hero-actions     > *,
  .prelaunch-actions > *,
  .bs-hero-actions  > * { width: 100%; justify-content: center; }

  /* ── Countdown widget: tighter numbers ── */
  .countdown-widget  { gap: 0.3rem; }
  .countdown-num     { min-width: 54px; padding: 0.4rem 0.6rem; }
  .countdown-sep     { font-size: 2rem; padding-top: 0.4rem; }

  /* ── Index hero meta row ── */
  .hero-meta-row { gap: 0.8rem; }
  .hero-meta-val { font-size: 1.6rem; }

  /* ── Footer social: allow wrap ── */
  .footer-social { flex-wrap: wrap; }

  /* ── About value cells: smaller padding ── */
  .value-cell { padding: 1.8rem 1.5rem; }
}

/* ════════════════════════════════════════════════
   400px — Ultra-small (iPhone SE, 320px screens)
════════════════════════════════════════════════ */
@media (max-width: 400px) {

  /* ── Mobile nav links: slightly smaller so they fit without clipping ── */
  .mobile-nav a { font-size: 1.7rem; }

  /* ── Countdown: even tighter ── */
  .countdown-num     { min-width: 46px; font-size: 2rem; }
  .countdown-widget  { gap: 0.2rem; }
  .countdown-sep     { font-size: 1.6rem; }

  /* ── Container padding further reduced ── */
  :root { --container-pad: 0.9rem; }
}