/* This file applies ONLY on small screens via the <link media="(max-width: 820px)"> */
@media (max-width: 820px){
  html{ font-size: clamp(14px, 2.8vw, 18px); -webkit-text-size-adjust: 100%; }
  body{ line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }

  /* Media scale to container */
  img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

  /* Layout helpers */
  .container, .wrap, main, section, .section, .content{
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    padding-inline: 16px;
  }

  button, .btn, a.button{ min-height: 44px; padding: .6em 1em; border-radius: 12px; }

  h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.15; }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  h3 { font-size: clamp(1.2rem, 4.2vw, 1.6rem); }

  /* Overlay intro */
  #intro{
    position: fixed; inset: 0; display: grid; place-items: center;
    padding: 2rem 1rem; background: rgba(0,0,0,.9); z-index: 9999;
  }
  #intro .spooky-title{ text-align: center; margin-bottom: 1.2rem; padding-inline: 1rem; }

  /* Social links rows */
  #social, .social, .social-links { display:flex; flex-wrap:wrap; gap:.75rem; }
  #social a, .social a, .social-links a{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55em .85em; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  }

  /* Script-injected contract button */
  #contract-button{
    font-size: clamp(.95rem, 3.7vw, 1rem); white-space: normal !important;
    max-width: 92vw; line-height:1.2; padding:.5em .8em !important;
    z-index: 2147483647 !important; pointer-events:auto;
  }

  /* Generic grid collapsing */
  .grid, .columns, .row{ display:grid; gap: .75rem; }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .table-wrap{ overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; }
  th, td{ padding:.6em; }
}


/* === Mobile-only refinements for index page & nav === */
@media (max-width: 820px){
  /* Move the hero image further down so it doesn't clash with header */
  body.is-index .page-background{
    top: 72px !important; /* adjust if you want even lower: 96px */
  }

  /* Smaller PumpQueen logo in header */
  header .logo{
    font-size: 1.25rem !important;
    line-height: 1.1;
    letter-spacing: .02em;
  }

  /* Clearer category bar (characters, roadmap, gallery...) */
  header nav, nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    margin: 6px auto 12px;
  }
  nav a{
    display: inline-flex;
    align-items: center;
    padding: .55em .95em;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.35);
    text-decoration: none;
    line-height: 1.1;
  }
  /* Ensure nav chips are above background image */
  nav, header{ z-index: 20; position: relative; }

  /* Prevent accidental overlap; add safe top spacing for main content */
  main, #mainContent, .content, section:first-of-type{
    margin-top: 10px;
  }
}



  /* Readable "button" styling; no overlapping letters */
  header nav a, nav a{
    display: block;
    padding: .6em .9em;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.45);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;        /* keep one line per item */
    letter-spacing: normal !important;
    text-shadow: none !important;
    transform: none !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Remove decorative drip pseudo-elements on tiny screens for clarity */
  header nav a::before, header nav a::after,
  nav a::before, nav a::after{
    content: none !important;
    display: none !important;
  }

  /* Ensure the page content can scroll under the fixed nav */
  body{ padding-right: 0; }
}


/* === Mobile-only: vertical nav on the right (INDEX ONLY) === */
@media (max-width: 820px){
  body.is-index header nav,
  body.is-index nav{
    position: fixed !important;
    right: 8px;
    top: 84px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    z-index: 9990;
    width: auto;
    max-width: 70vw;
    pointer-events: auto;
  }

  body.is-index header nav a,
  body.is-index nav a{
    display: block;
    padding: .6em .9em;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.45);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: normal !important;
    text-shadow: none !important;
    transform: none !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.is-index header nav a::before, body.is-index header nav a::after,
  body.is-index nav a::before, body.is-index nav a::after{
    content: none !important;
    display: none !important;
  }
}