/* mobile.css - mobile layout for CHAMP MC (only screens up to 900px) */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* smaller side padding */
  .nav-in { padding-left: 16px; padding-right: 16px; }
  [style*="max-width:1200px"], [style*="max-width: 1200px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* grids: stack columns one under another */
  [style*="repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"][style*="1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* search field: full width */
  div:has(> input[placeholder="Search nickname"]) { width: 100%; }
  input[placeholder="Search nickname"] { width: auto !important; flex: 1 1 0; min-width: 0; }

  /* leaderboard rows: long nicknames get shortened with ... */
  .row { gap: 10px; padding: 10px; }
  .row > span:nth-child(3) {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 16px !important;
  }
  .row > span:nth-child(4) { font-size: 11px !important; white-space: nowrap; }
}

/* ---- mobile v2 ---- */
@media (max-width: 900px) {
  /* hero: columns may shrink, rows may wrap */
  .hero-in { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-in > * { min-width: 0; }
  .hero-in p { overflow-wrap: anywhere; }
  .hero-in [style*="display:flex"] { flex-wrap: wrap; }

  /* top menu: logo + STORE on the first line, links below */
  .nav-in { gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
  .nav-in .brand { order: 1; }
  .nav-in > a.btn { order: 2; margin-left: auto; font-size: 10px !important; padding: 12px 14px !important; }
  .nav-links { order: 3; width: 100%; gap: 6px 18px; font-size: 14px; }
  .nav-in .wm { font-size: 18px !important; }

  /* stats strip: 2 x 2 */
  [style*="padding:28px 32px"][style*="justify-content:space-between"] {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px !important;
  }
  [style*="padding:28px 32px"][style*="justify-content:space-between"] .px { font-size: 12px !important; }
  [style*="padding:28px 32px"][style*="justify-content:space-between"] span:not(.px) { font-size: 13px !important; }
}

/* ---- mobile v3: IP box ---- */
@media (max-width: 900px) {
  div:has(> button[style*="min-width:104px"]) {
    display: flex !important; flex-wrap: wrap; align-items: center;
    max-width: 100%; box-sizing: border-box; gap: 10px 14px !important;
  }
  div:has(> button[style*="min-width:104px"]) > * { min-width: 0; }
  div:has(> button[style*="min-width:104px"]) span { font-size: 14px !important; overflow-wrap: anywhere; }
  div:has(> button[style*="min-width:104px"]) > button { flex: 1 1 100%; }
}

/* ---- mobile v4 ---- */
@media (max-width: 900px) {
  /* IP box: address on the first line, COPY button below */
  .ip-box { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; gap: 10px 14px !important; }
  .ip-box span { font-size: 13px !important; }
  .ip-box button { flex: 1 1 100%; }

  /* stats strip: 2 x 2 */
  .stats-strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px !important; }
  .stats-strip .px { font-size: 12px !important; }
  .stats-strip span:not(.px) { font-size: 13px !important; }
}

/* ---- mobile v4 ---- */
@media (max-width: 900px) {
  /* IP box: address on the first line, COPY button below */
  .ip-box { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; gap: 10px 14px !important; }
  .ip-box span { font-size: 13px !important; }
  .ip-box button { flex: 1 1 100%; }

  /* stats strip: 2 x 2 */
  .stats-strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px !important; }
  .stats-strip .px { font-size: 12px !important; }
  .stats-strip span:not(.px) { font-size: 13px !important; }
}

/* ---- mobile v5: compact menu ---- */
@media (max-width: 900px) {
  .nav-in > a.btn {
    min-height: 36px !important; padding: 10px 12px !important;
    font-size: 9px !important; box-shadow: 0 4px 0 #B8860B;
  }
  .nav-links {
    flex-wrap: nowrap; justify-content: space-between; gap: 0 12px;
    font-size: 14px; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a[href*="tebex"] { display: none; }
}

/* ---- mobile v6: 3 links in the menu ---- */
@media (max-width: 900px) {
  .nav-links a[href$="#modes"] { display: none; }
}