/* V22 — escala de leitura maior no PWA + botão central de ações.
   Aplica somente ao aplicativo instalado (standalone), preservando o mobile web. */

@media (display-mode: standalone) and (max-width: 720px) {
  /* Mantém o mapa dominante, mas aumenta textos e alvos de toque. */
  .app {
    grid-template-rows: 124px minmax(0, 1fr) calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .topbar.halloween-topbar {
    height: 124px !important;
    min-height: 124px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "headline headline" !important;
    grid-template-rows: 67px 51px !important;
    gap: 3px 6px !important;
    padding: max(4px, env(safe-area-inset-top)) 7px 3px 0 !important;
    overflow: hidden !important;
  }

  .halloween-wordmark {
    grid-area: brand !important;
    height: 67px !important;
    min-width: 0 !important;
  }

  .halloween-wordmark-img,
  .topbar .halloween-wordmark-img {
    width: min(226px, 69vw) !important;
    height: 65px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    padding-left: 3px !important;
  }

  .top-actions {
    grid-area: actions !important;
    height: 67px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding-left: 2px !important;
    border-left: 0 !important;
  }

  .install-action,
  #modeBadge {
    display: none !important;
  }

  .refresh-action {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  .refresh-action svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Perfil sai da barra inferior e vira avatar compacto no topo. */
  .header-profile {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .header-profile img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
  }

  .header-profile span,
  .header-profile:after {
    display: none !important;
  }

  .headline-zone {
    grid-area: headline !important;
    width: 100% !important;
    height: 51px !important;
    padding: 0 7px 3px 9px !important;
    overflow: hidden !important;
  }

  .headline-zone #screenTitle {
    display: none !important;
  }

  .map-header-metrics {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .map-header-metrics > div {
    min-width: 0 !important;
    width: 100% !important;
    padding: 3px 3px !important;
    display: grid !important;
    grid-template-columns: 30px auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .map-header-metrics .metric-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 29px !important;
    height: 29px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
  }

  .map-header-metrics .metric-check {
    width: 29px !important;
    height: 29px !important;
    font-size: .9rem !important;
  }

  .map-header-metrics b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .map-header-metrics small {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 2px 0 0 !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  /* Barra do mapa: texto e botões maiores sem criar uma segunda faixa. */
  #screen-map.active {
    grid-template-rows: minmax(0, 1fr) 44px !important;
  }

  #screen-map #map {
    top: 58px !important;
  }

  .map-toolbar {
    height: 58px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .map-filter-bar {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
  }

  .map-filter-bar button {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border-radius: 24px !important;
    font-size: .94rem !important;
    font-weight: 850 !important;
  }

  .map-style-switch {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 48vw !important;
    gap: 3px !important;
    padding: 2px !important;
    overflow-x: auto !important;
  }

  .map-style-switch button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 22px !important;
    font-size: .88rem !important;
    font-weight: 850 !important;
  }

  .map-wallet-hud {
    top: 65px !important;
    left: 7px !important;
    right: auto !important;
    gap: 6px !important;
  }

  .wallet-chip {
    min-height: 43px !important;
    padding: 4px 9px 4px 5px !important;
    border-radius: 10px !important;
  }

  .wallet-chip img {
    width: 32px !important;
    height: 32px !important;
  }

  .wallet-chip b {
    font-size: 1.05rem !important;
  }

  .wallet-chip small {
    display: block !important;
    font-size: .67rem !important;
    letter-spacing: 0 !important;
  }

  /* Os três botões deixam de ocupar espaço sobre o mapa no PWA. */
  .map-float.bottom {
    display: none !important;
  }

  .leaflet-control-zoom a {
    width: 43px !important;
    height: 43px !important;
    line-height: 41px !important;
    font-size: 1.34rem !important;
  }

  .leaflet-bottom.leaflet-right {
    right: 7px !important;
    bottom: 12px !important;
  }

  .marker-house { font-size: 35px !important; }
  .marker-child { font-size: 36px !important; }

  .map-score-badge {
    height: 25px !important;
    min-width: 40px !important;
    font-size: .72rem !important;
  }

  .map-score-badge img {
    width: 19px !important;
    height: 19px !important;
  }

  .candy-status-badge { font-size: 18px !important; }
  .candy-low { font-size: 16px !important; }

  /* Legenda: aproximadamente o dobro da tipografia anterior. */
  .map-legend-strip {
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
    gap: 18px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
  }

  .map-legend-strip > div {
    flex: 0 0 auto !important;
    font-size: .80rem !important;
    gap: 6px !important;
  }

  .map-legend-strip img {
    width: 25px !important;
    height: 25px !important;
  }

  .legend-candy { font-size: 1.35rem !important; }
  .legend-low,
  .legend-visited,
  .legend-unvisited {
    min-width: 25px !important;
    height: 25px !important;
    font-size: .82rem !important;
  }

  .legend-sold {
    font-size: .68rem !important;
    padding: 4px 7px !important;
  }

  /* Barra inferior com cinco posições: Mapa, Casas, Ações, Fantasias, Diversão. */
  .bottom-nav {
    position: relative !important;
    height: calc(82px + env(safe-area-inset-bottom)) !important;
    min-height: calc(82px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    overflow: visible !important;
  }

  .bottom-nav > button {
    min-height: 82px !important;
    padding: 8px 2px 4px !important;
    gap: 4px !important;
  }

  .bottom-nav > button[data-screen="profile"] {
    display: none !important;
  }

  .nav-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .nav-icon svg {
    width: 34px !important;
    height: 34px !important;
  }

  .bottom-nav > button b {
    font-size: .82rem !important;
    font-weight: 850 !important;
  }

  /* Botão central destacado. */
  .quick-action-dock {
    order: 0;
    min-width: 0;
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
    z-index: 1500;
  }

  .quick-action-dock summary {
    list-style: none;
    width: 66px;
    height: 66px;
    margin-top: -17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #07131f;
    background: linear-gradient(180deg, #ffad29, #ff7f00);
    border: 4px solid #07131f;
    box-shadow: 0 8px 22px rgba(0,0,0,.42), 0 0 0 1px rgba(255,184,79,.8);
    -webkit-tap-highlight-color: transparent;
  }

  .quick-action-dock summary::-webkit-details-marker { display: none; }

  .quick-action-dock summary svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .quick-action-dock .quick-action-label {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    color: #ff9a17;
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
  }

  .quick-action-dock[open] summary {
    transform: rotate(45deg);
    background: #fff;
    color: #101d29;
  }

  .quick-action-menu {
    position: fixed;
    z-index: 2200;
    left: 50%;
    bottom: calc(94px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(326px, calc(100vw - 26px));
    padding: 10px;
    border-radius: 18px;
    background: rgba(5,15,25,.98);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 46px rgba(0,0,0,.48);
    backdrop-filter: blur(16px);
  }

  .quick-action-menu:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 16px;
    height: 16px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(5,15,25,.98);
    border-right: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  .quick-action-menu button {
    width: 100%;
    min-height: 57px;
    margin: 0 0 7px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: #132638;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 850;
    text-align: left;
  }

  .quick-action-menu button:last-child { margin-bottom: 0; }
  .quick-action-menu button:first-child { background: linear-gradient(180deg,#ff9c17,#f57b00); color:#07131f; }
  .quick-action-menu button:nth-child(3) { background: linear-gradient(180deg,#7958f3,#6745e8); }

  .quick-action-menu .quick-action-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    font-size: 1.35rem;
  }

  /* Telas internas: tipografia e botões maiores, mantendo rolagem. */
  .app:not(.map-screen-active) {
    grid-template-rows: 70px minmax(0, 1fr) calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .app:not(.map-screen-active) .topbar.halloween-topbar {
    height: 70px !important;
    min-height: 70px !important;
    grid-template-columns: 116px minmax(0,1fr) auto !important;
    grid-template-areas: "brand headline actions" !important;
    grid-template-rows: 1fr !important;
  }

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

  .app:not(.map-screen-active) .halloween-wordmark-img {
    width: 116px !important;
  }

  .app:not(.map-screen-active) .headline-zone {
    grid-area: headline !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
  }

  .app:not(.map-screen-active) .headline-zone #screenTitle {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #ffab31 !important;
    text-align: center !important;
    font-size: 1.22rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app:not(.map-screen-active) .map-header-metrics { display: none !important; }
  .app:not(.map-screen-active) .top-actions { height: 66px !important; }

  .screen:not(#screen-map) .section-card h3,
  .screen:not(#screen-map) .section-head h3 {
    font-size: 1.5rem !important;
  }

  .screen:not(#screen-map) .eyebrow {
    font-size: .78rem !important;
  }

  .screen:not(#screen-map) label,
  .screen:not(#screen-map) .field-title,
  .screen:not(#screen-map) .muted,
  .screen:not(#screen-map) .coords,
  .screen:not(#screen-map) .device-selection-card,
  .screen:not(#screen-map) .privacy-card p,
  .screen:not(#screen-map) .contest-explain,
  .screen:not(#screen-map) .profile-details,
  .screen:not(#screen-map) small {
    font-size: 1rem !important;
    line-height: 1.42 !important;
  }

  .screen:not(#screen-map) input,
  .screen:not(#screen-map) select,
  .screen:not(#screen-map) textarea,
  .screen:not(#screen-map) .btn,
  .screen:not(#screen-map) .segmented button,
  .screen:not(#screen-map) .candy-picker button {
    font-size: 1rem !important;
    min-height: 50px !important;
  }
}

@media (display-mode: standalone) and (max-width: 390px) {
  .map-header-metrics small { display: none !important; }
  .map-header-metrics > div { grid-template-columns: 27px auto !important; }
  .map-header-metrics .metric-icon,
  .map-header-metrics .metric-check { width: 26px !important; height: 26px !important; }
  .map-header-metrics b { font-size: 1rem !important; }
  .map-filter-bar button { padding: 0 12px !important; font-size: .88rem !important; }
  .map-style-switch button { padding: 0 10px !important; font-size: .82rem !important; }
  .bottom-nav > button b { font-size: .75rem !important; }
  .quick-action-dock summary { width: 62px; height: 62px; }
}