/* STEP34 — responsive spectator UI. Desktop STEP32 nav remains unchanged. */
.stride-menu-toggle{display:none;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:92px;border:1px solid #587967;border-radius:11px;background:#193c2c;color:#effff3;font-size:13px;font-weight:850;letter-spacing:.1px}
.stride-menu-bars{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:19px;height:20px}
.stride-menu-bars span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;transition:transform .17s ease,opacity .17s ease}
.stride-mobile-nav-backdrop[hidden]{display:none!important}
.stride-mobile-nav-backdrop{display:none}
@media(max-width:767px){
  .top{position:sticky;top:0;z-index:12}
  body.stride-mobile-nav-open{overflow:hidden}
  body.stride-mobile-nav-open .top{z-index:22}
  .top .head-inner{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:10px 16px!important;min-height:64px}
  .top .brand{align-self:auto!important;font-size:20px;line-height:1.25;flex:0 0 auto}
  .stride-menu-toggle{display:inline-flex;flex:0 0 auto}
  .stride-menu-toggle:focus-visible{outline:3px solid #b0e8c1;outline-offset:3px}
  body.stride-mobile-nav-open .stride-menu-toggle{border-color:#94bda0;background:#28583e}
  body.stride-mobile-nav-open .stride-menu-bars span:first-child{transform:translateY(6px) rotate(45deg)}
  body.stride-mobile-nav-open .stride-menu-bars span:nth-child(2){opacity:0}
  body.stride-mobile-nav-open .stride-menu-bars span:last-child{transform:translateY(-6px) rotate(-45deg)}
  .stride-mobile-nav-backdrop{display:block;position:fixed;inset:0;background:#071a12a8;z-index:21}
  /* Override prior horizontal-scroll mobile nav; use an easy-to-tap 2-column sheet. */
  .top #nav{display:none!important;position:absolute!important;top:100%;left:0;right:0;width:100%;max-height:min(72dvh,620px);overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch!important;align-content:start;gap:8px!important;margin:0!important;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px))!important;border-top:1px solid #315542;background:#102a1f;box-shadow:0 18px 26px #06170e60;scrollbar-width:thin}
  body.stride-mobile-nav-open .top #nav{display:grid!important}
  .top #nav > button,.top #nav > a{display:flex!important;align-items:center;justify-content:center;flex:1 1 auto!important;width:100%;min-width:0;min-height:46px!important;padding:11px 5px!important;border:1px solid #385f4a!important;border-radius:9px!important;color:#e0f2e4;font-size:12px!important;font-weight:800!important;text-align:center;white-space:normal!important;line-height:1.25;text-decoration:none;background:#1a3b2a}
  .top #nav > button:hover,.top #nav > button.on,.top #nav > a:hover{background:#326b4d!important;color:#fff;border-color:#5d9874!important}
  /* On inner pages don't make visitors scroll through the full welcome hero. */
  body:has(main > .section.active:not(#home)) .hero{display:none}
  .hero{padding:48px 18px 56px!important}
  .hero h1{font-size:clamp(43px,10.5vw,66px)!important;letter-spacing:-1.9px!important;line-height:1.05}
  .hero .eyebrow{font-size:10px;letter-spacing:1.5px}
  .hero p{font-size:13px;line-height:1.75}
  .actions{gap:9px;margin-top:20px}
  .actions .btn{min-height:44px;flex:1 1 auto;line-height:1.3;padding:12px}
  .container{width:100%;max-width:100%;padding:28px 16px 44px!important}
  .section-title{align-items:start;gap:9px}
  .section-title h2{font-size:clamp(23px,6vw,30px);line-height:1.22;overflow-wrap:anywhere}
  .section-title .chip{max-width:100%}
  .cards,.fixtures,.details-grid,.group-grid{min-width:0}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card,.fixture,.group-card,.team-card,.bracket-box{min-width:0}
  .fixture{padding:14px}
  .versus{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:4px}
  .side b{font-size:12px}
  .tabs{gap:7px}
  .tabs .tab{min-height:44px}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:420px}
  .stride-official-poster-wrap{grid-template-columns:minmax(0,1fr)!important}
  img,video{max-width:100%}
  .foot{overflow-wrap:anywhere}
}
@media(max-width:390px){
 .top #nav{padding-left:12px!important;padding-right:12px!important;gap:7px!important}
 .container{padding-left:13px!important;padding-right:13px!important}
 .hero{padding-left:16px!important;padding-right:16px!important}
 .hero h1{font-size:clamp(39px,10.5vw,48px)!important}
 .top #nav > button,.top #nav > a{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){.stride-menu-bars span{transition:none}}