/* Canonical mobile navigation and auto-hiding chrome. */
@media (max-width:1050px){
  :root{--estel-mobile-chrome-top-shift:-128px}

  .bottom-nav{grid-template-columns:repeat(var(--estel-mobile-nav-count,5),minmax(0,1fr))!important;overflow:hidden!important;justify-content:stretch!important}
  .bottom-nav button{min-width:0!important;width:100%!important;padding-left:2px!important;padding-right:2px!important}

  /* Header + VISTA behave as one visual stack. The JS measures the real
     combined height and writes --estel-mobile-chrome-top-shift, avoiding
     hard-coded offsets on different Android/iOS viewport sizes. */
  .mobile-top,
  .mobile-role-strip,
  .role-context-switch{
    transform:translate3d(0,0,0);
    transition:transform .30s cubic-bezier(.2,.82,.2,1)!important;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .bottom-nav{
    transform:translate3d(0,0,0);
    transition:transform .28s cubic-bezier(.2,.82,.2,1)!important;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .mobile-role-strip{overflow:hidden!important}

  /* On hide, every top-chrome element travels exactly the same distance.
     This makes the club header and VISTA strip read as a single component
     instead of two independent animations. */
  html.estel-mobile-chrome-hidden .mobile-top,
  html.estel-mobile-chrome-hidden .mobile-role-strip,
  html.estel-mobile-chrome-hidden .role-context-switch{
    transform:translate3d(0,var(--estel-mobile-chrome-top-shift),0)!important;
    pointer-events:none!important;
    transition-duration:.24s!important;
    transition-timing-function:cubic-bezier(.4,0,.6,1)!important;
  }

  html.estel-mobile-chrome-hidden .bottom-nav,
  html.estel-attendance-keyboard-open .bottom-nav{
    transform:translate3d(0,calc(100% + env(safe-area-inset-bottom,0px) + 14px),0)!important;
    pointer-events:none!important;
    transition-duration:.24s!important;
    transition-timing-function:cubic-bezier(.4,0,.6,1)!important;
  }
}

@media (max-width:720px){
  .bottom-nav{grid-template-columns:repeat(var(--estel-mobile-nav-count,5),minmax(0,1fr))!important}
  .bottom-nav[data-count="5"][data-estel-role="coach"][data-estel-attendance-position="2"]{grid-template-columns:repeat(var(--estel-mobile-nav-count,5),minmax(0,1fr))!important}
  .bottom-nav[data-count="5"][data-estel-role="player"],.bottom-nav[data-count="5"][data-estel-role="family"]{grid-template-columns:repeat(var(--estel-mobile-nav-count,5),minmax(0,1fr))!important}
  .bottom-nav[data-count="5"][data-estel-attendance-position="3"]{grid-template-columns:repeat(var(--estel-mobile-nav-count,5),minmax(0,1fr))!important}
  .bottom-nav[data-count="5"][data-estel-attendance-position="4"]{grid-template-columns:repeat(var(--estel-mobile-nav-count,5),minmax(0,1fr))!important}
  .bottom-nav button span{max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
}

@media (max-width:1050px){
  .bottom-nav button{min-height:44px;font-size:11px!important}
  .bottom-nav .estel-more-trigger .icon{display:grid;place-items:center;color:var(--yellow);font-size:19px}
  .bottom-nav .estel-more-trigger.active .icon{color:#111}
  .estel-mobile-more:not([hidden]){display:grid;position:fixed;z-index:42;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));gap:5px;padding:12px;border:1px solid #383838;border-radius:16px;background:#111;box-shadow:0 12px 30px #0008}
  .estel-mobile-more button{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:0;border-radius:10px;background:#202020;color:#fff;text-align:left;font-size:13px;font-weight:800}
  .estel-mobile-more button.active{background:var(--yellow);color:#111}
  .estel-mobile-more .icon{width:20px;height:20px}
}

@media (prefers-reduced-motion:reduce){
  .mobile-top,
  .bottom-nav,
  .role-context-switch,
  .mobile-role-strip{transition:none!important}
}