/* Width-conditional layout — loaded only on tablets & phones via the <link media> attr.
   Base styles are mobile-first in styles.css; desktop enhancements live there behind a
   min-width media query. This file only carries the phone-specific trims. */
@media (max-width:560px){
  /* serve a far lighter, phone-sized backdrop (44KB WebP vs 160KB) for the summit crown */
  :root{--bgphoto:image-set(url('OLYMPUS-412738419-1280.webp') type('image/webp'),
                            url('OLYMPUS-412738419.jpg') type('image/jpeg'))}
  /* the anthem pills are a nice-to-have; drop them so the phone bar stays tidy */
  .anthems{display:none}
  .brand{font-size:22px}
  .brand small{letter-spacing:.2em;margin-top:4px;font-size:8px}
  .livestrip{padding:8px 12px}
  .livestrip .tcd-match{font-size:14px}
  .livestrip .tcd-next{display:none}        /* drop the secondary NEXT line on phones */
  .nav button{font-size:13px}
  .ghost{padding:9px 13px}
  .board .lr{grid-template-columns:40px 1fr 64px 60px;padding:12px 12px}
  /* round selector: tighten so all five tabs are reachable, matches stack one-per-row */
  .rounds{gap:5px}
  .round-tab{min-width:0;padding:8px 6px}
  .round-tab .rt-lbl{font-size:11px;letter-spacing:.02em}
  .round-tab .rt-pts{font-size:10px}
  /* bracket feed: single column of head-to-head boxes; trim the section header */
  .feed-grid,.feat-grid{grid-template-columns:1fr;gap:9px}
  .feed-head .fh-lbl{font-size:16px}
  .feed-head .fh-pts{font-size:12px}
  .feed-head .fh-champ{font-size:12.5px}
  .mside{padding:10px 11px;gap:7px}
  .mflag{font-size:19px}
  .mnm,.mbox.big .mnm{font-size:15px}
  .modds{font-size:11px}
  /* page cards & login breathe a little less on a phone */
  .page{margin:10px 8px 16px;padding:16px 14px 22px}
  .panel{padding:16px 15px}
  .login-hero{height:150px;padding:0 22px 12px}
  .login h1{font-size:clamp(34px,11vw,46px)}
  .login-body{padding:18px 22px 26px}
  /* chat / anthem popups span the width on a phone (JS also sets exact geometry) */
  .yt-pop,.chat-pop{width:calc(100vw - 20px)!important;max-width:none}
}