/* ---------- responsive base (all pages, all widths) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
button, input, textarea, select { max-width: 100%; font: inherit; }
p, h1, h2, h3, h4, a, label, li { overflow-wrap: anywhere; }
/* page CSS zeroes the header bar's side padding (.nav padding shorthand
   overrides .wrap in source order) - keep the logo off the screen edge
   at every width, including the shrunken "mini" header state */
header .nav, header.mini .nav { padding-left: 18px; padding-right: 18px; }

/* AGCYBORG — shared mobile layer (loaded AFTER each page's own
   styles). Fixes small-screen layout without changing the
   black-and-grey cyberpunk identity: hamburger navigation,
   boot screen, hero, whitelist form, dashboard/points cards.
   Breakpoint: 768px and below. */

/* ---------- global guards (all widths) ---------- */
img, video { max-width: 100%; }
.addr, .linkTxt, .mono, #appStatus, #okMsg, #errMsg { overflow-wrap: anywhere; }
.mnavBtn { display: none; }
body.mnav-lock { overflow: hidden; }

/* ---------- hamburger navigation ---------- */
@media (max-width: 768px) {
  .mnavBtn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; min-height: 44px; flex: none;
    background: #141419; border: 1px solid #33333b; border-radius: 10px;
    cursor: pointer; padding: 0 11px; margin-left: auto;
  }
  .mnavBtn span { display: block; height: 2px; background: #e6e6e6; border-radius: 2px; }
  .mnavBtn:focus-visible { outline: 2px solid #d9d9de; outline-offset: 2px; }

  /* one-row header bar: logo + pill/connect + hamburger */
  header .hbar { flex-wrap: nowrap; }
  header .nav { flex-wrap: nowrap; }
  header .logo { white-space: nowrap; }
  header nav, header .navlinks { display: none; }

  /* the opened menu: full-width panel under the sticky header */
  header.mnav-open nav, header.mnav-open .navlinks {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 900;
    background: #0a0a0d; border-bottom: 1px solid #2c2c33;
    padding: 10px 16px 14px; box-shadow: 0 18px 30px rgba(0, 0, 0, .55);
  }
  header.mnav-open nav a, header.mnav-open .navlinks a {
    min-height: 44px; display: flex; align-items: center;
    padding: 0 10px; border-radius: 8px; font-size: .95rem;
  }
  header.mnav-open .navlinks .ptsPill { display: none; } /* menu already has a Dashboard link */
  header.mnav-open .navlinks a[href="https://x.com/AGCyborg_BNB"] { display: none; } /* X lives in the footer */
  header .socials { display: none; } /* mobile bar = logo + Connect Wallet + hamburger only */
  /* in-content Connect/Disconnect buttons duplicate the header
     wallet button on mobile — hide them, the header one remains */
  #connBtn, #discBtn, #wConn, #refConn, #lbConn { display: none !important; }
  header .ptsPill { flex: none; }
  /* sub-page bar: logo + Connect Wallet + hamburger stay on one
     row; the points pill moves out of the bar (Dashboard in the
     menu covers it, and the balance lives on the Dashboard) */
  header .hbar .ptsPill { display: none; }
  header .agcWSlot { flex: none; margin-left: auto; order: 2; }
  header .agcWBtn, header .agcWDisc { min-height: 44px; font-size: .78rem; padding: 8px 9px; }
  .mnavBtn { margin-left: 6px; order: 3; }
  header .hbar { padding: 10px 12px; gap: 8px; }
  header .logo { font-size: .92rem; letter-spacing: .08em; }
  .footLinks { flex-wrap: wrap; }
  header .nav { padding-left: 16px; padding-right: 16px; }
}

/* ---------- spacing / typography / tap targets ---------- */
@media (max-width: 768px) {
  main { padding-left: 16px; padding-right: 16px; }
  input, select, textarea { font-size: 16px; } /* stops iOS auto-zoom */
  .btn { min-height: 44px; }
  .btn.small { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .card { padding: 16px; }
  h1 { overflow-wrap: break-word; }
}

/* ---------- dashboard & points pages ---------- */
@media (max-width: 768px) {
  .dash { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat .v { font-size: 1.55rem; }
  /* 7-day check-in rewards stack vertically */
  .days { grid-template-columns: 1fr; gap: 8px; }
  .day { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 12px 14px; }
  /* leaderboard: the table scrolls inside its box, the page never scrolls sideways */
  #lbBody { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #lbBody table { min-width: 540px; }
  .badgeBox { flex-wrap: wrap; }
  .linkBox { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- homepage boot / intro screen ---------- */
@media (max-width: 768px) {
  #boot .bootIn { width: 100%; max-width: 100vw; padding: 18px 16px; box-sizing: border-box; }
  #boot .bootLogo { font-size: clamp(26px, 9vw, 34px); }
  #boot .bootTitle { letter-spacing: .18em; font-size: 11px; margin: 16px 0 12px; }
  #boot .bootBarWrap { width: min(420px, 84vw); }
  #boot .bootPct { font-size: 19px; margin-top: 10px; position: static; }
  #boot .bootStatus { letter-spacing: .14em; font-size: 11px; margin: 12px 0 16px; }
  #boot #enterBtn, #boot #bootSkip {
    width: min(420px, 84vw); min-height: 48px;
    margin: 10px auto 0; position: relative; z-index: 3;
  }
  #boot #enterBtn:not([style*="none"]) { display: block; }
  #boot #bootSkip { display: block; margin-left: auto !important; margin-right: auto !important; }
  #boot .bootStrips { z-index: 0; }
}

/* ---------- homepage hero ---------- */
@media (max-width: 768px) {
  .hero { padding-top: 22px; }
  .hero h1 { font-size: clamp(33px, 11vw, 52px); line-height: 1.06; }
  .heroArtWrap { width: 148px; height: 148px; }
  .heroShade { background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .38) 38%, rgba(0, 0, 0, .9)); }
  .hero > .btn, .hero .btn-main, .hero .btn-ghost {
    display: block; width: 100%; max-width: 430px; margin: 10px auto 0; min-height: 48px;
  }
  .hero .cards { max-width: 430px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .hero .cards { grid-template-columns: 1fr; }
}

/* ---------- whitelist form ---------- */
@media (max-width: 768px) {
  #wlForm input[type="text"] { width: 100%; min-height: 48px; font-size: 16px; box-sizing: border-box; }
  #wlForm .check { min-height: 44px; padding: 8px 0; align-items: flex-start; }
  #wlForm .check input { width: 22px; height: 22px; min-width: 22px; }
  #xVerifyBtn { width: 100%; min-height: 48px; }
  #wlForm .btn { min-height: 48px; }
  #wlForm label { display: block; }
}

/* ---------- reduced motion: calm everything down ---------- */
@media (prefers-reduced-motion: reduce) {
  .heroArtWrap, .heroArt, .float { animation: none !important; }
}

/* ---------- very small phones (<=360px): header metrics ---------- */
@media (max-width: 360px) {
  header .hbar { gap: 6px; padding: 10px; }
  header .logo { font-size: .84rem; letter-spacing: .05em; }
  header .agcWBtn, header .agcWDisc { font-size: .72rem; padding: 8px 7px; }
  header .nav { gap: 6px; }
}