/* ScoreNet v1.3w-r10 — mobile experience.
   Scope: viewports <= 700px only. Desktop layout is untouched.

   Measured on the live homepage at 375x812 before packaging:
     page height     15,739px (19.4 screens)  ->  14,233px (17.5 screens)
     Google sign-in   8,006px (10 screens down) -> 3,374px (~4 screens)
     Arcade Pulse ticker height unchanged at 98px (regression guarded)
     horizontal overflow: none, before and after

   No content is removed from the DOM. Descriptions are clamped, card grids
   use both columns of the phone, and sections are reordered so the Passport
   and Google sign-in arrive early instead of ten screens down. */

@media (max-width: 700px) {

  /* ---- 1. Reading order -------------------------------------------------
     main becomes a flex column so sections can be reordered with no markup
     change. Anything unmatched keeps order 50 and holds its document
     position, so a future markup change degrades quietly instead of
     scrambling the page. */
  main { display: flex; flex-direction: column; }
  main > * { order: 50; min-width: 0; }

  main > section.hero                            { order: 1; }
  main > section.sn13t-quick-start               { order: 2; }
  main > section#legacy                          { order: 3; }  /* Passport + Google */
  main > nav.sn13s-journey-rail                  { order: 4; }
  main > section#discover                        { order: 5; }
  main > div.sn-growth-ribbon                    { order: 6; }
  main > section.sn-growth-section:nth-child(4)  { order: 7; }  /* monthly championship */
  main > section.sn13s-network                   { order: 8; }
  main > section.activity-bar                    { order: 9; }
  main > section.sn13t-pulse-intro               { order: 10; }
  main > section#compete                         { order: 11; }
  main > section.sn-growth-section:nth-child(8)  { order: 12; } /* follow the network */
  main > section.sn13s-section:nth-child(10)     { order: 13; } /* integrity */
  main > section.feature-panel                   { order: 14; }
  main > section.sn13s-stats                     { order: 15; }

  /* ---- 2. Section padding ----------------------------------------------
     Reduced only on sections that already carry 20-24px. Sections with no
     padding are deliberately left alone; a blanket rule would add height. */
  main > section.sn13s-section,
  main > section.sn-growth-section,
  main > section.sn13t-quick-start,
  main > section.feature-panel,
  main > section.sn13t-pulse-intro {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* ---- 3. Two-column card grids ----------------------------------------
     The single largest win. Every one of these rendered as a single 323px
     column, wasting half the phone's width:
       .sn13t-game-picks        1,153px -> 569px
       .sn13s-choice-grid         984px -> 610px
       .sn13s-benefits            682px -> 497px
       .sn13s-tournament-actions  462px -> 405px
       .sn13s-use-grid            442px -> 331px */
  .sn13t-game-picks,
  .sn13s-choice-grid,
  .sn13s-benefits,
  .sn13s-tournament-actions,
  .sn13s-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .sn13s-choice { padding: 10px; }

  /* ---- 4. Clamp supporting copy ----------------------------------------
     Text stays in the DOM for desktop, search engines and assistive tech. */
  .sn13s-choice small,
  .sn13s-choice p,
  .sn13s-benefits > * > small,
  .sn13s-benefits > * > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sn13t-pick-copy p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  main > section > p,
  .sn13s-tournament-copy > p,
  .sn13s-passport-card > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- 5. Arcade Pulse ---------------------------------------------------
     Guard against a row exceeding the viewport. Deliberately no
     white-space override: the pulse is a horizontal ticker and forcing wrap
     grew the bar from 98px to 248px during testing. */
  .activity-bar, .activity-list { min-width: 0; }

  /* ---- 6. Duplicate call to action --------------------------------------
     The hero already carries Play HOPWAY Now. */
  #discover a.cta[href*="hopway"] { display: none; }

  /* ---- 7. Tap targets ---------------------------------------------------- */
  main a.cta { min-height: 44px; }
}