/* Stable portrait game frame and compact hotbar cells for wide displays.
   Loaded after the shared release styles so short landscape windows do not
   stretch the game scene or let HUD values escape their buttons. */

.compact-player-panel,
.compact-panel-items,
.compact-panel-item {
  box-sizing: border-box;
  min-width: 0;
}

.compact-panel-item {
  max-width: 100%;
  overflow: hidden;
}

.compact-panel-item b,
.compact-panel-item em {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 600px) {
  .compact-panel-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
    align-items: stretch;
    gap: 4px;
  }

  .compact-panel-item,
  .compact-panel-item.icon-only {
    width: 100%;
    min-width: 0;
  }
}

@media (orientation: landscape) {
  :is(
    .main-menu-page,
    .register-screen,
    .loading-screen,
    .garden-screen,
    .profile-frame,
    .training-frame,
    .inventory-frame,
    .shop-frame,
    .village-frame,
    .druid-frame,
    .witch-frame,
    .blacksmith-frame,
    .monk-frame,
    .petstore-frame,
    .petprofile-frame,
    .pettraining-frame,
    .petstats-frame,
    .petsettings-frame,
    .guard-frame,
    .travel-frame,
    .mine-frame,
    .playersettings-frame,
    .merchant-frame,
    .home-frame,
    .market-frame,
    .clan-frame,
    .arena-frame,
    .stats-frame,
    .mobile-game-frame
  ) {
    width: min(100%, var(--game-shell-width, 430px), 56.25vh);
    max-width: min(100vw, var(--game-shell-width, 430px), 56.25vh);
    width: min(100%, var(--game-shell-width, 430px), 56.25dvh);
    max-width: min(100vw, var(--game-shell-width, 430px), 56.25dvh);
  }

  .main-menu-page {
    container-type: inline-size;
  }
}

@container (max-width: 340px) {
  .main-menu-map-buttons {
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
    column-gap: 2px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .main-menu-side {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .map-image-button-large {
    width: min(100%, clamp(38px, 22cqw, 64px));
    max-width: 100%;
  }

  .map-image-button-small {
    width: min(100%, clamp(32px, 18cqw, 52px));
    max-width: 100%;
  }
}

@container (max-width: 260px) {
  .main-menu-map-buttons {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    padding-right: 3px;
    padding-left: 3px;
  }

  .map-image-button-large {
    width: min(100%, clamp(34px, 21cqw, 54px));
  }

  .map-image-button-small {
    width: min(100%, clamp(30px, 17cqw, 44px));
  }
}

@media (orientation: landscape) and (max-height: 360px) {
  .compact-panel-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  .compact-panel-item,
  .compact-panel-item.icon-only {
    height: 22px;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .compact-panel-item img {
    width: 16px;
    height: 16px;
  }

  .compact-panel-title {
    height: 22px;
    margin-bottom: 2px;
  }

  .compact-panel-notices {
    margin-top: 2px;
  }

  .compact-notice {
    height: 20px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 9px;
  }
}