/* MCO: preparação do primeiro mundo — layout de smartphones.
   Isolado das telas da temporada, do desktop e do Supabase. */
@media(max-width:600px){
  /* Escala real de layout: conteúdos e textos encolhem juntos, sem criar
     uma caixa transformada de tamanho original (e espaços vazios artificiais).
     A header/topbar não recebe zoom. */
  .app-shell:not(.home-screen):not(.season-screen-shell) > .mco-mobile-setup-content{
    display:block;
    zoom:.85;
    width:100%;
    max-width:100%;
    min-width:0;
    margin-inline:auto;
    padding-bottom:24px;
    box-sizing:border-box;
  }

  /* Cabeçalho compartilhado somente pelos fluxos anteriores à temporada. */
  .app-shell:not(.season-screen-shell) > .topbar{
    /* Adiciona espaço ACIMA do conteúdo, mantendo o espaço existente
       ENTRE logo/Sair e a linha inferior do cabeçalho. */
    min-height:82px;
    padding:18px 0 6px;
    gap:6px;
    align-items:center;
  }
  .app-shell:not(.season-screen-shell):not(.home-screen) > .topbar{
    margin-bottom:0;
  }
  .app-shell:not(.season-screen-shell) > .topbar .brand-image{
    width:150px;
    max-width:42vw;
    height:auto;
  }
  .app-shell:not(.season-screen-shell) > .topbar .topbar-exit{
    min-height:32px;
    min-width:55px;
    padding:5px 8px;
    font-size:11px;
  }

  /* Página inicial: marca no mesmo tamanho das outras páginas.
     Ações posicionadas em torno do centro vertical da viewport. */
  .home-screen > .topbar{
    min-height:96px!important;
    padding:20px 0 8px!important;
    align-content:center;
  }
  .home-screen > .topbar .brand-image{
    width:150px!important;
    max-width:42vw!important;
  }
  .home-screen > .topbar .home-alpha-label{
    top:calc(100% + 12px);
    font-size:10px;
    letter-spacing:.10em;
  }
  .home-screen > .home-actions{
    zoom:.85;
    width:100%;
    max-width:520px;
    min-width:0;
    flex:1 1 auto;
    gap:14px;
    padding:0 0 60px;
    margin:0 auto;
    justify-content:center;
    align-items:stretch;
    box-sizing:border-box;
  }

  /* Espaçamento mais compacto abaixo da linha divisória do cabeçalho. */
  .mco-mobile-setup-content .page-heading{
    padding:28px 0 26px;
  }
  .mco-mobile-setup-content .page-heading h1{
    overflow-wrap:break-word;
  }

  /* Botões de navegação: voltar isolado mais estreito e centralizado. */
  .mco-mobile-setup-content .actions{
    display:flex;
    gap:12px;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    margin:26px auto 0;
    width:100%;
    padding-bottom:10px;
  }
  .mco-mobile-setup-content .actions > button{
    flex:0 1 43%;
    min-width:0;
    width:auto;
    margin:0!important;
    padding-inline:10px;
    text-align:center;
    white-space:normal;
  }
  .mco-mobile-setup-content .actions > button:only-child{
    flex:0 0 64%;
    max-width:290px;
  }

  /* Cadastro de nome e liga: Voltar (esq.) / Continuar (dir.). */
  .mco-mobile-setup-content .league-actions{
    max-width:100%;
    gap:12px;
  }
  .mco-mobile-setup-content .league-actions > button{
    flex:1 1 0;
    max-width:none;
  }

  /* Confirmar participantes e aviso do usuário: afastados do fim da tela. */
  .mco-mobile-setup-content #participantActions{
    margin:0 auto;
    padding:0 0 24px;
    max-width:100%;
  }
  .mco-mobile-setup-content #participantActions .lobby-actions{
    margin-top:24px;
    padding:0 0 12px;
  }
  .mco-mobile-setup-content #participantActions .lobby-actions > button{
    flex:0 0 auto;
    width:min(100%,310px);
  }
  .mco-mobile-setup-content #participantActions .waiting-note{
    box-sizing:border-box;
    max-width:calc(100% - 24px);
    margin:24px auto 12px;
    padding:15px;
  }

  /* Todos os modais de confirmação mobile do início de mundo:
     redução proporcional, centralização e dois botões na mesma linha. */
  dialog.mco-mobile-join-world,
  dialog.mco-mobile-participants-confirm,
  dialog.mco-mobile-club-confirm{
    zoom:.85;
    box-sizing:border-box;
    width:min(520px,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    margin:auto;
    padding:26px 20px;
    text-align:center;
  }
  dialog.mco-mobile-participants-confirm h2,
  dialog.mco-mobile-club-confirm h2,
  dialog.mco-mobile-participants-confirm p,
  dialog.mco-mobile-club-confirm p{
    text-align:center;
  }
  dialog.mco-mobile-participants-confirm .actions,
  dialog.mco-mobile-club-confirm .actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    gap:10px;
    margin:24px auto 0;
  }
  dialog.mco-mobile-participants-confirm .actions > button,
  dialog.mco-mobile-club-confirm .actions > button{
    flex:1 1 0;
    width:auto;
    min-width:0;
    margin:0!important;
    padding:11px 7px;
    font-size:13px;
    white-space:normal;
  }

  /* Entrada no mundo existente: mesmo redimensionamento, mantendo o
     formulário centrado e seus botões lado a lado. */
  dialog.mco-mobile-join-world #joinWorldForm{
    width:100%;
    max-width:100%;
    margin:0 auto;
    text-align:center;
  }
  dialog.mco-mobile-join-world #joinWorldForm .actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    gap:10px;
    margin-top:22px;
  }
  dialog.mco-mobile-join-world #joinWorldForm .actions > button{
    flex:1 1 0;
    width:auto;
    min-width:0;
    min-height:46px;
    padding:9px 6px;
    font-size:12px;
    white-space:normal;
  }

  /* Avisos de copiar código e de mínimo de participantes:
     centralizados pela viewport, não pelo conteúdo redimensionado. */
  .app-shell:not(.season-screen-shell) > #notice:not([hidden]){
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    margin:0;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
  .app-shell:not(.season-screen-shell) > #notice .notice-card{
    box-sizing:border-box;
    zoom:.85;
    width:min(720px,calc(100% - 24px));
    max-width:100%;
    margin:0 auto;
    text-align:center;
  }

  /* O Draft não usa zoom na raiz. O ajuste anterior compensava o zoom
     ampliando a largura, causando recorte e rolagem horizontal na página.
     Aqui a área ocupa exatamente a largura disponível no viewport. */
  .app-shell:not(.home-screen):not(.season-screen-shell)
    > .mco-mobile-setup-content[data-setup-screen="elencos"]{
    zoom:1;
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 auto;
    padding:0 10px 12px;
    box-sizing:border-box;
    font-size:.85em;
  }
  .app-shell:has(> .mco-mobile-setup-content[data-setup-screen="elencos"]){
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
  }
  /* O scroll horizontal fica limitado aos componentes que precisam dele. */
  html:has(.mco-mobile-setup-content[data-setup-screen="elencos"]),
  body:has(.mco-mobile-setup-content[data-setup-screen="elencos"]){
    max-width:100%;
    overflow-x:clip;
  }
  .mco-mobile-setup-content[data-setup-screen="elencos"] .page-heading{
    width:100%;
    max-width:100%;
    padding:25px 0 20px;
  }
  /* Igual à posição do título Competições na visualização mobile. */
  .mco-mobile-setup-content[data-setup-screen="elencos"] .page-heading.draft-heading{
    padding:14px 0 0;
    margin-bottom:22px;
  }
  .mco-mobile-setup-content .draft-layout,
  .mco-mobile-setup-content .draft-main{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .mco-mobile-setup-content .draft-layout{
    gap:16px;
  }
  .mco-mobile-setup-content .draft-main{
    gap:16px;
  }
  .mco-mobile-setup-content .draft-sidebar,
  .mco-mobile-setup-content .draft-search-panel,
  .mco-mobile-setup-content .draft-squad-panel,
  .mco-mobile-setup-content #squad,
  .mco-mobile-setup-content #playerResults{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .mco-mobile-setup-content .draft-sidebar{
    position:static;
    overflow:hidden;
    padding:12px;
  }
  .mco-mobile-setup-content .draft-sidebar nav{
    display:flex;
    width:100%;
    max-width:100%;
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .mco-mobile-setup-content .draft-search-panel,
  .mco-mobile-setup-content .draft-squad-panel{
    padding:14px;
  }
  .mco-mobile-setup-content .draft-panel-title{
    font-size:15px;
  }
  .mco-mobile-setup-content .draft-search-label{
    font-size:13px;
  }
  .mco-mobile-setup-content .draft-table-wrap{
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .mco-mobile-setup-content .draft-squad-table{
    width:100%;
    min-width:820px;
  }

  /* Draft: rolagem horizontal *dentro da lista de jogadores*, mantendo
     o OVR/nome e todos os atributos na mesma linha. Rolagem vertical igual. */
  .mco-mobile-setup-content .draft-results{
    --draft-row-height:80px;
    width:100%;
    max-height:calc(3 * var(--draft-row-height));
    overflow-x:auto;
    overflow-y:auto;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .mco-mobile-setup-content .draft-result{
    display:grid;
    width:max-content;
    min-width:100%;
    min-height:var(--draft-row-height);
    height:auto;
    grid-template-columns:250px repeat(5,105px);
    grid-template-rows:minmax(60px,auto);
    align-items:center;
    gap:8px;
    padding:8px 10px;
    white-space:nowrap;
  }
  .mco-mobile-setup-content .draft-result-player,
  .mco-mobile-setup-content .draft-result > .draft-stat,
  .mco-mobile-setup-content .draft-result > .draft-money{
    grid-row:1;
    grid-column:auto;
    min-width:0;
  }
  .mco-mobile-setup-content .draft-result .draft-player-basics{
    min-width:0;
    grid-template-columns:34.1px 31px 44px 27px minmax(0,1fr);
    column-gap:5px;
  }
  .mco-mobile-setup-content .draft-result .draft-blocked{
    white-space:normal;
    line-height:1.2;
  }
  /* Draft termina junto às ações, sem margem artificial abaixo. */
  .mco-mobile-setup-content:has(.draft-layout){
    padding-bottom:8px;
  }
  .mco-mobile-setup-content .finish-actions{
    padding:4px 0 8px;
    margin:0 auto;
  }
  .mco-mobile-setup-content .draft-main,
  .mco-mobile-setup-content .draft-layout{
    min-width:0;
  }
  .mco-mobile-setup-content .draft-sidebar nav{
    scroll-padding-inline:10px;
    overscroll-behavior-x:contain;
  }
  .mco-mobile-setup-content .draft-team{
    flex-basis:190px;
  }

  /* A única rolagem vertical do Draft é a da área principal. Os 820px da
     tabela não podem ampliar a página nem criar barras globais. Mantemos o
     cabeçalho e as rolagens horizontais locais, inclusive após atualizar. */
  html:has(.mco-mobile-setup-content[data-setup-screen="elencos"]),
  body:has(.mco-mobile-setup-content[data-setup-screen="elencos"]){
    width:100%;
    max-width:100%;
    height:100%;
    overflow:hidden;
  }
  body:has(.mco-mobile-setup-content[data-setup-screen="elencos"]){
    min-height:0;
    height:100dvh;
  }
  #app:has(.mco-mobile-setup-content[data-setup-screen="elencos"]){
    width:100%;
    max-width:100%;
    height:100%;
    overflow:hidden;
  }
  #app > .app-shell:has(> .mco-mobile-setup-content[data-setup-screen="elencos"]){
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}