/* RCB v3.10 — mobile-first stability + visual polish.
 * No smooth-scroll hijacking, no extra library, no layout redesign.
 * The goal is to keep the approved desktop language while making WebKit/iOS
 * rendering, touch targets and compact sections behave predictably.
 */
.ui-arrow{
  display:inline-block;
  width:1.15em;
  height:1.15em;
  flex:0 0 auto;
  overflow:visible;
  vertical-align:-.16em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-actions .ui-arrow{width:18px;height:18px}
.next-arrow.ui-arrow{width:21px;height:21px;margin-left:18px;color:var(--gold)}
.pulse-source .ui-arrow,.tag-seller .ui-arrow{width:13px;height:13px}
.product-arrow .ui-arrow,.card-link-arrow .ui-arrow{width:17px;height:17px}
.player-profile-cue .ui-arrow{width:15px;height:15px}
.mobile-menu .ui-arrow{width:18px;height:18px;margin-left:auto}

/* Keep native horizontal gesture surfaces deliberate and clean. */
.roster-track,.match-list.match-deck{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.roster-track::-webkit-scrollbar,.match-list.match-deck::-webkit-scrollbar{display:none}
.player-card,.match-card-shell{scroll-snap-stop:always}

@media(max-width:760px){
  :root{--mobile-edge:clamp(18px,5.8vw,26px)}

  /* Fixed layers are the expensive part of iOS scrolling. Keep the glass look,
     but halve the live blur cost on phones. */
  .site-header.scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .glass-panel{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .motion-toggle{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .world-light{filter:blur(64px);opacity:.38}

  /* The pulse sits early enough in the page that deferring it gives Safari more
     downside than benefit (late paint / perceived snap). Render it normally. */
  .team-pulse{content-visibility:visible!important;contain-intrinsic-size:auto!important}

  /* Hero keeps the same composition, but follows the actual mobile viewport
     instead of forcing a 890px canvas on every phone. */
  .hero{height:max(780px,100svh);max-height:920px}
  .hero-content{top:128px}
  .hero h1{font-size:clamp(72px,19vw,112px);line-height:.86;margin-bottom:24px}
  .hero-eyebrow{margin-bottom:20px}
  .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:12px;
    width:min(100%,360px);
    align-items:stretch;
  }
  .hero-actions .button{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:14px 16px;
    gap:10px;
  }
  .quiet-link{
    min-width:0;
    min-height:48px;
    padding:0 2px;
    gap:8px;
    justify-content:flex-start;
    white-space:nowrap;
  }
  .quiet-link span:first-child{min-width:0}
  .hero-floor{height:92px}
  .next-match{gap:12px;padding:14px 0}
  .next-caption{padding-right:12px}
  .next-arrow.ui-arrow{width:20px;height:20px;margin-left:0}

  /* Compact, deterministic snapshot geometry. This specifically prevents the
     over-airy layout visible on tall iPhone captures. */
  .team-pulse{padding-top:30px}
  .pulse-shell{padding:20px 18px}
  .pulse-heading{gap:12px;padding-bottom:16px}
  .pulse-heading h2{font-size:clamp(38px,11.6vw,52px);line-height:.88}
  .pulse-source{padding:9px 10px;min-height:36px}
  .pulse-grid{grid-auto-rows:minmax(106px,auto);align-content:start}
  .pulse-stat{
    min-height:0;
    padding-top:18px;
    padding-bottom:15px;
    align-content:start;
    gap:7px;
  }
  .pulse-stat+.pulse-stat{padding-left:14px}
  .pulse-stat:nth-child(3){padding-left:0}
  .pulse-stat-index{top:11px;right:10px}
  .pulse-value{font-size:clamp(42px,12.5vw,52px);line-height:.88}
  .pulse-value-small{font-size:clamp(38px,11vw,48px)}
  .pulse-form{min-height:40px;gap:5px}
  .pulse-form-dot{width:28px;height:28px}
  .pulse-foot{min-height:0;gap:7px;padding-top:13px}
  #pulse-latest{gap:7px}

  /* Every horizontal deck is gesture-first on mobile, while the arrow controls
     remain large enough for a real thumb. */
  .slider-controls{gap:4px;padding:2px}
  .slider-controls button{width:44px;height:44px}
  .slider-controls svg{width:17px;height:17px}
  .roster-track{scroll-padding-inline:0 14px;padding-bottom:13px}
  .match-list.match-deck{scroll-padding-inline:5px 18px;padding-bottom:14px}

  /* Maintain the approved section hierarchy while reducing accumulated mobile
     whitespace across a long landing page. */
  .section{padding-top:58px}
  .section-heading{margin-bottom:24px}
  .section-baseline{min-height:64px;padding:16px 0 20px}
  .competition-record{margin-top:22px}

  /* Mobile product/detail surfaces: avoid unnecessary full-screen blur and keep
     close buttons / CTAs thumb friendly. */
  .detail-dialog::backdrop{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .dialog-close{width:48px;height:48px}
  .product-arrow{display:grid;place-items:center}

  /* Safe area support for notched phones in standalone/PWA style contexts. */
  @supports(padding-left:max(0px)){
    .site-header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
    .mobile-menu{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
  }
}

@media(max-width:430px){
  .pulse-shell{padding:18px 15px}
  .pulse-heading{grid-template-columns:minmax(0,1fr) auto}
  .pulse-heading h2{font-size:clamp(38px,12.1vw,49px)}
  .pulse-source{font-size:6px;letter-spacing:.8px;padding:8px 9px}
  .pulse-grid{grid-auto-rows:minmax(100px,auto)}
  .pulse-stat{padding-right:10px}
  .pulse-stat+.pulse-stat{padding-left:11px}
  .pulse-stat:nth-child(3){padding-left:0}
  .pulse-form-dot{width:26px;height:26px;font-size:8px}
  .pulse-latest-score{font-size:13px}
}

@media(max-width:360px){
  :root{--pad:18px}
  .site-header .wordmark b{font-size:26px}
  .site-header .brand-crest{width:25px;height:31px}
  .discipline-pill{padding:8px 8px;font-size:6.8px}
  .language-control{min-width:58px;padding-inline:7px}
  .hero-content{top:120px}
  .hero h1{font-size:20vw}
  .hero-actions{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:9px}
  .hero-actions .button{font-size:7.5px;padding:13px 12px}
  .quiet-link{font-size:6.8px;gap:6px}
  .hero-actions .ui-arrow{width:15px;height:15px}
  .next-caption{font-size:7px;letter-spacing:.8px}
  .next-match strong{font-size:17px}
  .pulse-heading h2{font-size:40px}
  .pulse-value{font-size:43px}
  .pulse-stat small{letter-spacing:.65px}
}

@media(prefers-reduced-motion:reduce){
  .ui-arrow{transition:none}
}