/* ============================================================
   AHA — mobile-only layer. Loaded AFTER the page's own styles.
   Nothing in here is edited into an existing rule: delete the one
   <link> that pulls this file and the site is exactly as it was.
   Everything is inside a max-width query, so desktop never sees it.
   ============================================================ */

/* Base state: desktop keeps the staircase, Contest markup stays out of the
   flow. This MUST come before the media query — same specificity, so whichever
   is last wins. */
.contest-m{display:none}

@media (max-width: 760px){

  /* Station 3 swaps the four-across staircase for the Contest. The staircase
     grid demanded 514px inside a 390px viewport, which pushed the whole
     document sideways and hid the A step. */
  .stairs, .station#s3 .delta { display: none; }
  .contest-m { display: block; }

  .contest-m .arena{
    display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;min-height:236px;
  }
  .contest-m .col{display:flex;flex-direction:column;align-items:center}
  .contest-m .role{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-4);margin-bottom:8px}
  .contest-m .bar{width:100%;max-width:104px;border-radius:10px 10px 0 0;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    transition:height .7s cubic-bezier(.16,1,.3,1)}
  .contest-m .bar .num{font-weight:900;font-size:26px;letter-spacing:-.04em;padding:10px 0;color:#fff}
  .contest-m .bar--you{background:linear-gradient(180deg,var(--accent),rgba(43,87,240,.45))}
  .contest-m .bar--lead{background:linear-gradient(180deg,var(--positive),rgba(52,211,153,.4))}
  .contest-m .bar--rival{background:linear-gradient(180deg,#3A3C46,#26272E)}

  /* the +10 drawn as its own hatched block — earned and awarded never merge */
  .contest-m .bonus{width:100%;max-width:104px;border-radius:10px 10px 0 0;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--positive);
    background:repeating-linear-gradient(-45deg,rgba(52,211,153,.16),rgba(52,211,153,.16) 5px,transparent 5px,transparent 10px);
    border:1px dashed rgba(52,211,153,.55);border-bottom:0}
  .contest-m .base{width:100%;max-width:104px;text-align:center;padding-top:11px;border-top:1px solid var(--line-2)}
  .contest-m .grade{font-weight:900;font-size:20px;letter-spacing:-.03em}
  .contest-m .who{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-4);margin-top:4px;line-height:1.5}

  .contest-m .verdict{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}
  .contest-m .verdict .big{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
  .contest-m .verdict .big em{font-style:normal;color:var(--positive)}
  .contest-m .verdict .big s{text-decoration:none;color:var(--accent-bright)}
  .contest-m .verdict p{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.6}

  .contest-m .badgewarn{margin-top:13px;border-left:2px solid var(--positive);padding:9px 12px;
    background:rgba(52,211,153,.07);border-radius:0 8px 8px 0}
  .contest-m .badgewarn p{font-size:12px;color:var(--ink-2);line-height:1.6}

  .contest-m .deltas{margin-top:16px;border-top:1px solid var(--line);padding-top:18px}
  .contest-m .d{margin-bottom:20px}
  .contest-m .d:last-of-type{margin-bottom:0}
  .contest-m .d .n{font-weight:900;letter-spacing:-.04em;line-height:1;display:block;
    font-size:clamp(28px,8.5vw,36px);font-variant-numeric:tabular-nums}
  .contest-m .d .n.up{color:var(--positive)}
  .contest-m .d .n.down{color:var(--loss)}
  .contest-m .d .lb{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-4);margin-top:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;line-height:1.6}
  .contest-m .aster{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);line-height:1.7;
    margin-top:14px;border-left:2px solid var(--line-2);padding-left:11px}

  /* the glass card's desktop padding ate ~70px of a 390px screen */
  .glass.stairsized{padding:20px 15px}
}

@media (prefers-reduced-motion: reduce){
  .contest-m .bar{transition:none}
}

/* ============================================================================
   Mobile navigation — deliberately at the end, not the top.

   The header links are display:none below 840px. Rather than restore them
   behind a hamburger, the destinations live in the footer: a phone reader
   going down a single-column pitch should meet the argument, then the CTA,
   and only then be offered somewhere else to go. A menu at the top competes
   with the one button the page exists to get pressed.

   Costs nothing: no JS, no icon, no open/close state, no focus trap.
   Desktop never sees it — the header already carries these.
   ============================================================================ */
.footnav{display:none}

@media (max-width: 840px){          /* matches where nav.links disappears */
  .footnav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    margin:0 0 26px;
    background:var(--line);          /* shows through the gap as hairlines */
    border-block:1px solid var(--line);
  }
  .footnav a{
    display:flex;align-items:center;
    min-height:52px;                 /* comfortably past the 44px tap minimum */
    padding:0 var(--pad);
    background:var(--bg);
    font-family:var(--mono);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);
  }
  .footnav a:active{background:var(--bg-2);color:var(--accent-bright)}
  /* An odd number of links would leave a hole; the last one spans instead. */
  .footnav a:last-child:nth-child(odd){grid-column:1 / -1}

  footer .foot{flex-direction:column;align-items:flex-start;gap:18px}
}

@media (max-width: 400px){
  .footnav{grid-template-columns:1fr}
}