/* ============================================================
   The Lost Codex — mobile optimization. Loaded last; uses !important
   so it beats inline grid styles baked into templates + page media rules.
   ============================================================ */

/* tablet (<=1000px): dense 3-4 col grids drop to 2 col, side-by-side blocks stack */
@media (max-width: 1000px) {
  .world-grid, .class-grid, .install-grid, .req-grid, .soon-grid, .qtype-grid,
  .feat-grid, .tips-grid, .ev-feed, .kruma-grid, .tribe-grid, .ph-grid,
  .issue-grid, .bug-grid, .acct-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .comm-grid, .donate .d-grid, .ev-layout, .dl-grid, .hero-inner {
    grid-template-columns: 1fr !important;
  }
}

/* phone (<=640px): everything stacks to a single column */
@media (max-width: 640px) {
  .world-grid, .class-grid, .comm-grid, .donate .d-grid, .dl-grid, .feat-grid,
  .install-grid, .issue-grid, .kruma-grid, .ph-grid, .qtype-grid, .req-grid,
  .soon-grid, .tips-grid, .tribe-grid, .ev-feed, .ev-layout, .acct-grid,
  .bug-grid, .foot-top, .hero-inner {
    grid-template-columns: 1fr !important;
  }
  .z-wide, .z-tall, .z-third { grid-column: auto !important; min-height: 200px; }
  body { overflow-x: hidden; }

  /* scale down oversized display elements on phones */
  .hero-logo { width: 270px !important; max-width: 80% !important; }
  .hero-tag { font-size: 18px !important; }
  .sec { padding: 52px 0 !important; }
  .band-inner, .pi-inner, .page-intro .pi-inner { padding: 60px 0 !important; }
  .sec-head, .band-copy h2, .finaldl h2 { font-size: clamp(26px, 8vw, 34px) !important; }

  /* comfortable tap targets */
  .nav-links.open a { padding: 14px 16px !important; font-size: 14px !important; }
  .btn, .btn-gold, .btn-ghost { padding: 14px 22px !important; }
  .sticky-play { right: 12px !important; bottom: 12px !important; padding: 12px 18px !important; }

  /* tame any band that right-aligns text on desktop */
  .band-copy.right { text-align: left !important; margin-left: 0 !important; }
  .factions, .pvp-feats { justify-content: flex-start !important; }
}