/* V39 — cabeçalho unificado das telas internas.
   Usa exatamente a mesma base dimensional do cabeçalho do Mapa.
   A única diferença funcional é a segunda linha: no Mapa ficam as métricas;
   em Família/Fantasias/Diversão/Perfil fica o título da tela. */

@media (max-width:720px){
  .app:not(.map-screen-active){
    grid-template-rows:136px minmax(0,1fr) calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .app:not(.map-screen-active) .topbar.halloween-topbar{
    box-sizing:border-box !important;
    height:136px !important;
    min-height:136px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "headline headline" !important;
    grid-template-rows:78px 50px !important;
    row-gap:0 !important;
    column-gap:8px !important;
    padding:4px 8px 4px 0 !important;
    overflow:hidden !important;
    border-bottom:0 !important;
  }

  .app:not(.map-screen-active) .topbar.halloween-topbar::after{
    display:none !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark{
    grid-area:brand !important;
    height:78px !important;
    min-height:78px !important;
    min-width:0 !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark-img,
  .app:not(.map-screen-active) .topbar .halloween-wordmark-img{
    width:min(270px,76vw) !important;
    height:74px !important;
    max-width:100% !important;
    max-height:74px !important;
    object-fit:contain !important;
    object-position:left center !important;
    padding-left:0 !important;
  }

  .app:not(.map-screen-active) .top-actions{
    grid-area:actions !important;
    height:78px !important;
    min-height:78px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    padding-left:0 !important;
    border-left:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  .app:not(.map-screen-active) .headline-zone{
    grid-area:headline !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:50px !important;
    min-height:50px !important;
    margin:0 !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    position:relative !important;
    z-index:1 !important;
  }

  .app:not(.map-screen-active) .headline-zone #screenTitle{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:#ffab31 !important;
    text-align:center !important;
    font-size:1.08rem !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    position:static !important;
    transform:none !important;
  }

  .app:not(.map-screen-active) .map-header-metrics{
    display:none !important;
  }

  /* Mantém as ações na mesma faixa superior do Mapa.
     Em web mobile o perfil segue oculto como no layout aprovado. */
  .app:not(.map-screen-active) .install-action,
  .app:not(.map-screen-active) .refresh-action{
    position:static !important;
    transform:none !important;
  }
}

@media (max-width:390px){
  .app:not(.map-screen-active){
    grid-template-rows:132px minmax(0,1fr) calc(72px + env(safe-area-inset-bottom)) !important;
  }

  .app:not(.map-screen-active) .topbar.halloween-topbar{
    height:132px !important;
    min-height:132px !important;
    grid-template-rows:74px 50px !important;
    padding:4px 7px 4px 0 !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark,
  .app:not(.map-screen-active) .top-actions{
    height:74px !important;
    min-height:74px !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark-img,
  .app:not(.map-screen-active) .topbar .halloween-wordmark-img{
    height:70px !important;
    max-height:70px !important;
  }
}

@media (display-mode:standalone) and (max-width:720px){
  .app:not(.map-screen-active){
    grid-template-rows:112px minmax(0,1fr) calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .app:not(.map-screen-active) .topbar.halloween-topbar{
    height:112px !important;
    min-height:112px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "headline headline" !important;
    grid-template-rows:62px 46px !important;
    row-gap:0 !important;
    column-gap:6px !important;
    padding:2px 7px 2px 0 !important;
    overflow:hidden !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark,
  .app:not(.map-screen-active) .top-actions{
    height:62px !important;
    min-height:62px !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark-img,
  .app:not(.map-screen-active) .topbar .halloween-wordmark-img{
    width:min(225px,70vw) !important;
    height:60px !important;
    max-height:60px !important;
  }

  .app:not(.map-screen-active) .headline-zone{
    height:46px !important;
    min-height:46px !important;
    padding:0 10px !important;
  }

  .app:not(.map-screen-active) .headline-zone #screenTitle{
    font-size:1.08rem !important;
  }
}

@media (display-mode:standalone) and (max-width:390px){
  .app:not(.map-screen-active){
    grid-template-rows:108px minmax(0,1fr) calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .app:not(.map-screen-active) .topbar.halloween-topbar{
    height:108px !important;
    min-height:108px !important;
    grid-template-rows:60px 44px !important;
    padding:2px 7px 2px 0 !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark,
  .app:not(.map-screen-active) .top-actions{
    height:60px !important;
    min-height:60px !important;
  }

  .app:not(.map-screen-active) .halloween-wordmark-img,
  .app:not(.map-screen-active) .topbar .halloween-wordmark-img{
    height:58px !important;
    max-height:58px !important;
  }

  .app:not(.map-screen-active) .headline-zone{
    height:44px !important;
    min-height:44px !important;
  }
}