/*
 * Lab4Lays phone-first adaptation of MobileUI/components tab + menu patterns.
 * Source: https://github.com/MobileUI/components (MIT; copyright 2017 MobileUI).
 * Namespaced to avoid global framework resets and existing Lab4Lays route collisions.
 */
.mui-mobile-dock,.mui-mobile-menu,.mui-mobile-backdrop{display:none}
@media(max-width:800px){
  *,*::before,*::after{box-sizing:border-box}
  html,body{max-width:100%}
  body.mui-menu-open{overflow:hidden}
  #app.app{padding:0!important;width:100%;max-width:100%;min-width:0}
  #app>aside,body.research-active #app>aside{display:none!important}
  #app>main,body.research-active #app>main{
    width:100%;max-width:100%;min-width:0;margin:0;
    padding:10px 12px calc(92px + env(safe-area-inset-bottom,0px))!important
  }
  #app main .view,#app main section,#app main .card,#app main .panel,
  #app main .boardLayout,#app main .builder,#app main .row,
  #app main .grow,#app main .rail{min-width:0;max-width:100%}
  #app main img,#app main svg,#app main video,#app main canvas{max-width:100%}
  #app main .row{flex-wrap:wrap}
  #app main .grow{min-width:0;flex-basis:auto}
  #app main h1{font-size:22px;line-height:1.15;overflow-wrap:anywhere}
  #app main h2{line-height:1.24;overflow-wrap:anywhere}
  #app main p,#app main .muted,#app main .card{overflow-wrap:anywhere}
  #app main .top{
    position:relative;top:auto;display:flex;align-items:center;gap:8px;
    padding:8px 0 12px;margin:0 0 12px;border-bottom:1px solid #38506e
  }
  #app main .top>.grow{flex:1;min-width:0}
  #app main .top #userChip,#app main .top #logoutBtn{display:none!important}
  #app main .top .notifBell{flex:none}
  #app main .card,#app main .panel,#app main .metricCard,
  #app main .line-card,#app main .marketCard,
  #app main #buildWorkspace,#app main .rb-panel,
  #app main .gcl-card,#app main .gcl-scoreboard,
  #app main .gc-big-card,#app main .gc-stats,
  #app main .profile-trophy{
    border-color:#3a506f;
    box-shadow:0 2px 0 rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.12)
  }
  #app main .card,#app main .panel{padding:12px}
  #app main button,#app main select,#app main input{
    min-height:44px
  }
  #app main .grid,#app main .metricStrip,#app main .pickGrid,
  #app main .settingsLayout,#app main .boardLayout,
  #app main .builder{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  #app main .metricStrip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #app #board>.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #app #board>.grid>.card:last-child:nth-child(odd){grid-column:1/-1}
  #app main .grid>.card{min-width:0}
  #app main .tabRow,#app main .sports,#app main .settingsNav,
  #app main .gcl-filters,#app main .gcl-toolbar{
    flex-wrap:wrap;overflow-x:visible;white-space:normal;max-width:100%
  }
  #app main .sports button,#app main .tabRow button{
    flex:0 1 auto;white-space:normal;min-height:44px
  }
  #app main .searchrow,#buildWorkspace .searchrow{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px}
  #app main .searchrow>*,#buildWorkspace .searchrow>*{min-width:0!important;max-width:100%;width:100%}
  #app main .line-card{grid-template-columns:40px minmax(0,1fr);gap:9px}
  #app main .line-card .pickBtns{grid-column:1/-1;display:flex;gap:8px}
  #app main .line-card .pickBtns button{flex:1;min-width:0}
  #app main .tray{position:static!important}
  #app main .marketGrid{grid-template-columns:minmax(0,1fr)}
  #app main .statline{gap:10px}
  #app main .statline>div{min-width:0;flex:1 1 80px}
  #app main .chatCard{height:min(70dvh,650px);min-height:350px}
  #app main .chatComposer{gap:6px}
  #app main #buildWorkspace .buildWorkspaceBody{padding:10px}
  #app main #buildWorkspace .buildWorkspaceHead{padding:14px 10px 0}
  #app main #buildWorkspace .buildModeTabs{gap:4px}
  #app main #buildWorkspace .buildModeTabs button{padding:10px 5px;font-size:12px}
  #app main #buildWorkspace .intelGrid{grid-template-columns:minmax(0,1fr)}
  #app main #buildWorkspace .sports,#app main #buildWorkspace .sportTiles{flex-wrap:wrap}
  #app main .gcl{gap:10px}
  #app main .gcl-scoreline{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:12px 0}
  #app main .gcl-clock{min-width:46px}
  #app main .gcl-team{min-width:0}
  #app main .gcl-team span{overflow-wrap:anywhere}
  #app main .gcl-columns,#app main .gcl-live-top{display:flex;flex-direction:column;gap:10px;min-width:0}
  #app main .gcl-columns [data-region],#app main .gcl-live-top>div{width:100%;min-width:0}
  #app main .gcl-card,#app main .gcl-scoreboard{padding:12px}
  #app main .gcl-event{grid-template-columns:46px minmax(0,1fr);gap:7px;padding:10px 0}
  #app main .gcl-event-content{padding-left:9px}
  #app main .gcl-timeline{max-height:440px}
  #app main .gcl-player{padding:10px}
  #app main .gcl-metrics,#app main .gcl-player .gcl-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #app main .gc-big-scroll{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none}
  #app main .gc-big-card{flex:auto;width:100%;max-width:100%;padding:12px;gap:7px}
  #app main .gc-big-card p{font-size:13px}
  #app main .gc-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  #app main .gc-stats table{font-size:12px}
  #app main .gc-stats th,#app main .gc-stats td{padding:8px}
  #app main #labbot{min-width:0}
  body.research-active #app main #labbot .rb-toolbar{
    height:auto;min-height:46px;margin:0;padding:8px 0;flex-wrap:wrap;gap:5px
  }
  #app main #labbot .rb-sports{flex-wrap:wrap;overflow:visible;gap:5px}
  #app main #labbot .rb-layout{display:block;min-width:0;min-height:0}
  #app main #labbot .rb-thread{min-height:340px;height:min(65dvh,630px);padding:10px 8px}
  #app main #labbot .rb-feed{min-width:0}
  #app main #labbot .rb-tabs{flex-wrap:wrap;overflow:visible;gap:3px}
  #app main #labbot .rb-tabs button{flex:1 1 auto;min-width:0;white-space:normal;padding:9px 5px}
  #app main #labbot .rb-related{grid-template-columns:minmax(0,1fr)}
  #app main #labbot .rb-factors{grid-template-columns:minmax(0,1fr);gap:9px}
  #app main #labbot .rb-market-tile{min-width:0}
  #app main #labbot .rb-prediction{gap:9px}
  #app main #labbot .rb-drawer{left:8px;right:8px;top:8px;bottom:calc(72px + env(safe-area-inset-bottom,0px));width:auto;max-height:none;overflow:auto}
  #app main #labbot .rb-panel,
  #app main #labbot .rb-thread,
  #app main #labbot .rb-analysis{border-color:#38516f}
  #app main #labbot .rb-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app main #labbot .rb-model-factors{grid-template-columns:minmax(0,1fr)}
  #app main .moments-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 24px)}
  #moment-alerts{max-width:calc(100vw - 24px)}
  /* MobileUI-inspired fixed footer tabs, isolated from the desktop nav DOM. */
  #app .mui-mobile-dock{
    position:fixed;bottom:0;left:0;right:0;z-index:120;
    display:flex;align-items:stretch;justify-content:space-around;
    padding:5px 5px calc(6px + env(safe-area-inset-bottom,0px));
    min-height:65px;
    border-top:1px solid #466181;background:#0c1524f5;
    box-shadow:0 -6px 22px #0008;backdrop-filter:blur(16px)
  }
  #app .mui-mobile-tab{
    position:relative;display:flex;flex:1 1 0;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;min-width:0;
    min-height:52px;border:0;border-radius:8px;background:transparent;
    color:#9fb3d0;font:600 10px/1.2 system-ui,sans-serif;
    text-align:center;cursor:pointer;padding:5px 2px
  }
  #app .mui-mobile-tab svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;flex:none}
  #app .mui-mobile-tab[aria-current=page],#app .mui-mobile-tab[aria-expanded=true]{
    color:#e8f4ff;background:#152c48
  }
  #app .mui-mobile-tab[aria-current=page]::after{
    content:"";position:absolute;top:-5px;width:28px;height:3px;
    border-radius:3px;background:#68b5ff
  }
  #app .mui-mobile-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:125;background:#000b}
  #app .mui-mobile-menu:not([hidden]){
    display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;
    max-height:min(80dvh,680px);overflow-y:auto;z-index:130;
    padding:16px 14px calc(85px + env(safe-area-inset-bottom,0px));
    border:1px solid #52719a;border-radius:18px 18px 0 0;
    background:#0e1a2b;box-shadow:0 -16px 46px #000c;
    transform:translateY(0);gap:10px
  }
  #app .mui-mobile-menu-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
  #app .mui-mobile-menu-header h2{font-size:17px;margin:0}
  #app .mui-mobile-menu-close{border:1px solid #466181;border-radius:9px;background:#172a43;color:#fff;min-width:44px;min-height:44px}
  #app .mui-mobile-menu-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #app .mui-mobile-menu-items button{
    min-width:0;min-height:48px;padding:10px;text-align:left;
    background:#16263b;border:1px solid #435d7e;border-radius:10px;
    color:#ebf4ff;font:600 13px/1.3 system-ui,sans-serif;overflow-wrap:anywhere
  }
  #app .mui-mobile-menu-items button[aria-current=page]{border-color:#70b5ff;background:#17375c}
  #app .mui-mobile-menu-items .mui-signout{grid-column:1/-1}
  #app .mui-mobile-dock :focus-visible,#app .mui-mobile-menu :focus-visible{
    outline:2px solid #79bdff;outline-offset:2px
  }
  body.mui-typing #app .mui-mobile-dock{display:none}
  body.mui-typing #app>main{padding-bottom:16px!important}
}
@media(max-width:360px){
  #app>main,body.research-active #app>main{padding-left:8px!important;padding-right:8px!important}
  #app main .gcl-team b,#app main .gcl-team:last-child b{font-size:27px}
  #app main .gcl-scoreline{gap:4px}
  #app .mui-mobile-tab{font-size:9px}
  #app main .metricStrip{gap:6px}
}
@media(min-width:801px){
  #app .mui-mobile-dock,#app .mui-mobile-menu,#app .mui-mobile-backdrop{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  #app .mui-mobile-dock *,#app .mui-mobile-menu *{transition:none!important}
}
/* Keep fixed game sheets independent of the page dock and compact at phone widths. */
@media(max-width:800px){
  body:has(.matchupModal:not(.hidden)) #muiMobileDock{display:none}
  .matchupModal .matchupSheet{padding:12px;max-height:96dvh;min-width:0}
  .matchupModal .matchupTabs{flex-wrap:wrap;overflow:visible}
  .matchupModal .matchupTabs button{flex:1 1 auto;min-height:44px}
  .matchupModal .gcl-toolbar{flex-wrap:wrap}
  .matchupModal .gcl-columns,.matchupModal .gcl-live-top{grid-template-columns:minmax(0,1fr);min-width:0}
  .matchupModal .gc-stats-controls{display:flex;flex-wrap:wrap;gap:8px}
  .matchupModal .gc-stats-controls label{flex:1 1 120px;min-width:0}
  .matchupModal .gc-stats-controls input,.matchupModal .gc-stats-controls select{width:100%;min-width:0;min-height:44px}
  .matchupModal .gc-table-scroll{max-width:100%;overflow:auto}
  #app main .boardHero{padding:12px;margin-bottom:10px}
  #app main .boardHero .heroQuote,#app main .boardHero .heroVertical{display:none}
  #app main .boardHero .grow>.muted:first-of-type{display:none}
  #app main .metricCard{padding:9px;gap:7px}
  #app main .metricCard .metricIcon{width:28px;height:28px;flex:0 0 28px}
  #app main .metricCard .metricBody .muted{font-size:10px}
  #app main .metricCard .metricBody b{font-size:18px}
  #app main .metricStrip{gap:6px;margin-bottom:10px}
}