/* ===================================================================
   CLASH CHRONICLES — RESPONSIVE OVERRIDES
   Mobile is a re-composition, not a shrink.
   =================================================================== */

@media (max-width: 1080px){
  .origin-grid{ grid-template-columns:repeat(3, 1fr); }
  .gallery-grid{ grid-template-columns:repeat(4, 1fr); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
}

@media (max-width: 880px){
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .continents{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; top:66px; left:0; right:0; bottom:0;
    background:rgba(18,15,10,0.98);
    flex-direction:column; align-items:flex-start;
    padding:14px 24px 40px;
    gap:0;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    overflow-y:auto;
  }
  .nav.is-open .nav-links{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ width:100%; padding:14px 4px; border-bottom:1px solid var(--line-soft); font-size:0.8rem; }
  .nav-toggle{ display:inline-flex; }

  .hero{ padding-top:120px; padding-bottom:60px; min-height:92vh; }
  .section{ padding:64px 0; }

  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .origin-grid{ grid-template-columns:repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .stat-strip{ grid-template-columns:1fr 1fr; }

  .score-row{ grid-template-columns:120px 1fr 34px; gap:10px; }
  .score-label{ font-size:0.76rem; }

  table{ min-width:520px; }
  .chain-node{ font-size:0.7rem; padding:8px 12px; }
}

@media (max-width: 460px){
  .container{ padding:0 18px; }
  .origin-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
  h1{ font-size:2.4rem; }
  .btn-row{ flex-direction:column; }
  .btn{ justify-content:center; }
}