/* Ajustes finais de enquadramento para menu desktop, partida e Safari mobile. */

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  body[data-ui-phase="playing"] #game-shell {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #03111e !important;
  }

  body[data-ui-phase="playing"] #game {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  body[data-ui-phase="playing"] #game canvas {
    width: auto !important;
    height: min(100%, 56.25vw) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    flex: none;
  }

  .ice-desktop-map-slot .campaign-route {
    grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 8vw, 132px), 1fr)) !important;
  }

  .ice-desktop-map-slot .campaign-node {
    min-height: clamp(72px, 9.5vh, 112px) !important;
  }

  .ice-desktop-content {
    min-height: 100%;
  }
}

@media (min-width: 901px) and (max-height: 900px) and (hover: hover) and (pointer: fine) {
  .ice-desktop-content {
    padding-top: 8px !important;
    gap: 8px !important;
  }

  .ice-desktop-statusbar {
    min-height: 38px !important;
  }

  .ice-desktop-daily-slot .desktop-growth-panel,
  .ice-desktop-install-card {
    min-height: 112px !important;
  }

  .ice-desktop-map-slot .desktop-campaign-hub {
    padding: 14px 16px !important;
  }

  .ice-desktop-map-slot .campaign-season-card {
    margin: 7px 0 !important;
  }

  .ice-desktop-map-slot .campaign-route {
    gap: 7px !important;
    padding-block: 4px 8px !important;
  }

  .ice-desktop-map-slot .campaign-node {
    min-height: 66px !important;
  }

  .ice-desktop-map-slot .campaign-play {
    min-height: 48px !important;
  }

  .ice-desktop-modes button {
    padding-block: 9px !important;
  }

  .ice-desktop-summary article {
    min-height: 72px !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  html,
  body,
  #app,
  #game-shell,
  .mobile-screen {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .mobile-screen[hidden] {
    display: none !important;
  }

  body[data-ui-phase="menu"] #mobile-home:not([hidden]) {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding:
      max(14px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      calc(var(--ice-mobile-nav-height, 76px) + max(18px, env(safe-area-inset-bottom)) + 28px)
      max(12px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-home-content {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .mobile-home-content > *,
  .mobile-growth-panel,
  .mobile-campaign-hub,
  .campaign-header,
  .campaign-season-card,
  .campaign-footer {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mobile-growth-panel,
  .mobile-campaign-hub {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-campaign-hub {
    overflow: hidden !important;
  }

  .mobile-campaign-hub .campaign-header {
    gap: 10px !important;
  }

  .mobile-campaign-hub .campaign-header > div:first-child,
  .mobile-campaign-hub .campaign-season-card > div {
    min-width: 0 !important;
    overflow: hidden;
  }

  .mobile-campaign-hub .campaign-header h2,
  .mobile-campaign-hub .campaign-header p,
  .mobile-campaign-hub .campaign-season-card strong,
  .mobile-campaign-hub .campaign-season-card p {
    overflow-wrap: anywhere;
  }

  .mobile-campaign-hub .campaign-currency {
    flex: 0 0 auto;
  }

  .mobile-campaign-hub .campaign-season-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .mobile-campaign-hub .campaign-route {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0 !important;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-campaign-hub .campaign-node {
    flex: 0 0 clamp(72px, 22vw, 84px) !important;
  }

  .mobile-campaign-hub .campaign-footer {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mobile-campaign-hub .campaign-chest,
  .mobile-campaign-hub .campaign-play {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ice-mobile-dock {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden;
  }
}

@media (max-width: 430px) {
  body[data-ui-phase="menu"] #mobile-home:not([hidden]) {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .mobile-growth-panel,
  .mobile-campaign-hub {
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 20px !important;
  }

  .mobile-campaign-hub .campaign-header h2 {
    font-size: 1.18rem !important;
  }

  .mobile-campaign-hub .campaign-currency {
    min-width: 58px !important;
    padding-inline: 6px !important;
  }

  .mobile-campaign-hub .campaign-node {
    flex-basis: 70px !important;
  }

  .ice-mobile-dock {
    padding-left: max(5px, env(safe-area-inset-left)) !important;
    padding-right: max(5px, env(safe-area-inset-right)) !important;
  }
}