/* Canonical mobile layout, role UX and cross-device fit. */
@media(max-width:1050px){
  html,body,#app,.shell{width:100%;max-width:100%;min-width:0}
  .mobile-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;justify-content:normal!important;gap:10px;min-width:0;width:100%;max-width:100%}
  .mobile-top .brand{min-width:0;max-width:100%;overflow:hidden}
  .mobile-top .brand>div{min-width:0}
  .mobile-top .brand strong{line-height:1.08;overflow-wrap:anywhere}
  .mobile-top .brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
  .mobile-top>.role-context-switch{display:none!important}
  .mobile-top.estel-has-account>button[onclick="logout()"]{display:none!important}
  .mobile-top>.estel-account-btn{margin:0!important;flex:0 0 auto;white-space:nowrap;padding:9px 12px;font-size:11px;min-height:40px}

  .mobile-role-strip{display:flex;align-items:center;gap:8px;width:100%;min-width:0;background:#0b0b0b;color:#fff;border-bottom:1px solid #252525;padding:7px 10px;z-index:29}
  .mobile-role-label{flex:0 0 auto;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.1em;color:#8c8c8c;font-weight:950}
  .mobile-role-options{display:flex;gap:5px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
  .mobile-role-options::-webkit-scrollbar{display:none}
  .mobile-role-options button{flex:1 0 auto;min-width:max-content;min-height:38px;border:1px solid #2a2a2a;border-radius:10px;padding:7px 11px;background:#151515;color:#b7b7b7;font-size:10px;font-weight:900;white-space:nowrap}
  .mobile-role-options button.active{background:var(--yellow);border-color:var(--yellow);color:#111}

  .main,.main>*{min-width:0;max-width:100%}
  .main{width:100%;padding-bottom:var(--estel-bottom-clearance,calc(112px + env(safe-area-inset-bottom)));padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right))}
  .page-head,.page-head>div:first-child,.grid,.card,.hero,.team-grid,.team-card,.v22-card,.quick,.competition-overview{min-width:0;max-width:100%;width:100%}
  .page-head h1,.page-head p,.hero h2,.hero p,.v22-card h3,.team-card h3{max-width:100%;overflow-wrap:anywhere;word-break:normal}
  .quick,.competition-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quick button,.overview-chip{min-width:0;max-width:100%;width:100%}
  .quick button{overflow:hidden}
  .team-card-top{min-width:0;max-width:100%;flex-wrap:wrap}
  .team-card-badges{min-width:0;max-width:100%}
  .team-card-footer{min-width:0;max-width:100%;flex-wrap:wrap}
  .team-card-footer>*{min-width:0;max-width:100%}

  /* The old mobile calendar intentionally forced 760px, which clipped on Galaxy/Chrome. */
  .ux-calendar-card,.team-calendar-clean{overflow:hidden!important;max-width:100%!important}
  .ux-calendar-top,.team-calendar-top{min-width:0;max-width:100%}
  .ux-calendar-controls,.team-calendar-controls{min-width:0;max-width:100%;width:100%}
  .ux-calendar-controls label,.team-calendar-controls label{min-width:0;width:100%}
  .ux-calendar-controls select,.team-calendar-controls select{min-width:0!important;max-width:100%!important;width:100%!important}
  .ux-month-grid,.team-full-grid{min-width:0!important;width:100%!important;max-width:100%!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important}
  .ux-month-grid .cal-day,.team-full-grid .cal-day{min-width:0!important;min-height:62px!important;height:62px!important;padding:3px!important;border-radius:8px!important}
  .ux-month-grid .cal-day.empty,.team-full-grid .cal-day.empty{min-height:62px!important;height:62px!important}
  .ux-month-grid .cal-events,.team-full-grid .cal-events{min-width:0!important;overflow:hidden!important;gap:2px!important}
  .ux-cal-event,.team-full-event,.cal-event[data-v298-mobile-label="1"]{min-width:0!important;max-width:100%!important;width:100%!important;padding:4px 2px!important;border-left-width:2px!important;border-radius:5px!important;text-align:center!important;font-size:8px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
  .ux-cal-event strong,.ux-cal-event small,.team-full-event strong,.team-full-event small{display:none!important}
  .ux-cal-event span,.team-full-event span{font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
  .cal-more-v298{font-size:7px!important;line-height:1;font-weight:950;display:block;padding:1px 2px;color:#666;text-align:center}
  .ux-court-legend{max-width:100%;gap:8px!important;font-size:9px!important}
}

@media(max-width:720px){
  .main{padding:14px max(11px,env(safe-area-inset-right)) var(--estel-bottom-clearance,calc(112px + env(safe-area-inset-bottom))) max(11px,env(safe-area-inset-left))!important}
  .page-head{overflow:visible;margin-bottom:16px}
  .page-head h1{font-size:clamp(28px,8.4vw,34px)!important;line-height:1.02!important;letter-spacing:-.04em!important;margin-right:0!important}
  .page-head p{font-size:13px!important;line-height:1.45!important}
  .hero h2{font-size:clamp(29px,9vw,40px)!important;line-height:1!important}
  .hero{padding:18px!important}
  .card{max-width:100%!important}
  .quick button{font-size:12px!important;padding:12px 11px!important}
  .overview-chip{padding:10px 9px!important;gap:7px!important}
  .overview-chip strong{font-size:18px!important}
  .overview-chip span{font-size:9px!important;min-width:0;overflow-wrap:anywhere}
  .team-card-footer{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important}
  .team-card-footer .btn{white-space:normal;text-align:center}

  .ux-calendar-top,.team-calendar-top{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:9px!important}
  .ux-calendar-controls,.team-calendar-controls{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .ux-calendar-controls .cal-nav,.team-calendar-controls .cal-nav{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;gap:5px!important;width:100%!important}
  .ux-calendar-controls .cal-nav button,.team-calendar-controls .cal-nav button{min-width:0!important;width:100%!important;padding:7px 3px!important}
  .cal-weekday{font-size:7px!important;padding:2px 0!important}
  .cal-day-number{font-size:8px!important;margin-bottom:3px!important}
}

@media(max-width:390px){
  .mobile-top{padding-left:9px!important;padding-right:9px!important;gap:7px}
  .mobile-top img{width:34px!important;height:34px!important}
  .mobile-top .brand{gap:7px!important}
  .mobile-top .brand strong{font-size:10px!important}
  .mobile-top>.estel-account-btn{padding:8px 10px;font-size:10px;min-height:36px}
  .mobile-role-strip{padding:6px 8px;gap:6px}
  .mobile-role-label{display:none}
  .mobile-role-options button{min-height:36px;padding:6px 9px;font-size:9px}
  .main{padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important}
  .quick,.competition-overview{gap:7px!important}
  .team-card-footer{grid-template-columns:1fr!important}
  .team-card-footer .btn{width:100%!important}
  .ux-month-grid,.team-full-grid{gap:2px!important}
  .ux-month-grid .cal-day,.team-full-grid .cal-day,.ux-month-grid .cal-day.empty,.team-full-grid .cal-day.empty{height:58px!important;min-height:58px!important;padding:2px!important}
  .cal-event[data-v298-mobile-label="1"]{font-size:7px!important;padding:3px 1px!important}
}