/**
 * Homepage — play + game modes docked above bottom nav
 * Mobile-first; scales down for narrow / short viewports.
 */

/* Lock shell to viewport so footer nav is never clipped (body overflow:hidden). */
body:has(main.app-main--menu) .app-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body:has(main.app-main--menu) .app-top-bar.app-hud-bar--redesign {
  flex-shrink: 0;
}

body:has(main.app-main--menu) .app-main--menu {
  margin-top: 0;
  gap: 0;
  padding: 0;
}

body:has(main.app-main--menu) .app-bottom-nav {
  flex-shrink: 0;
}

.app-main--menu {
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden;
  overscroll-behavior: none;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.app-main--menu .app-page-stack {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.app-main--menu .app-page-content {
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mb-home {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Floating side actions (daily gift + tutorial) ── */
.mb-home-float-actions {
  position: absolute;
  top: 6px;
  left: max(6px, env(safe-area-inset-left, 0px));
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 56px;
}

.mb-float-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  color: var(--p-cream, #fff4d8);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  max-width: 100%;
}

.mb-float-btn-icon,
.mb-float-btn img {
  width: clamp(36px, 11vw, 46px);
  height: clamp(36px, 11vw, 46px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.mb-float-btn-label {
  font-size: clamp(7px, 2.1vw, 9px);
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-home-float-actions .daily-gift-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  max-width: 100%;
}

.mb-home-float-actions .daily-gift-btn img {
  width: clamp(36px, 11vw, 46px);
  height: clamp(36px, 11vw, 46px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.mb-home-float-actions .daily-gift-btn::after {
  content: "هدیه روزانه";
  font-size: clamp(7px, 2.1vw, 9px);
  font-weight: 800;
  color: var(--p-cream, #fff4d8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Bottom dock: play + modes above nav ── */
.mb-home-bottom-dock {
  margin-top: auto;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  z-index: 4;
  background: transparent;
  border-top: none;
  box-shadow: none;
  max-height: min(56dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Play plaque ── */
.mb-home-play {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding:
    12px
    max(12px, env(safe-area-inset-right, 0px))
    10px
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.mb-home-play .ban-notice {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(calc(100% - 8px), 320px);
}

.mb-play-plaque {
  position: relative;
  width: min(100%, 250px);
  max-width: 250px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mb-play-plaque.is-banned {
  opacity: 0.4;
  pointer-events: none;
}

.mb-play-plaque-fx {
  display: block;
  width: min(100%, 250px);
  height: auto;
  max-height: min(160px, 18dvh);
  min-height: clamp(88px, 16dvh, 132px);
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 6px 24px rgba(224, 184, 58, 0.35));
}

.mb-play-plaque:active .mb-play-plaque-fx {
  transform: scale(0.98);
  filter: drop-shadow(0 4px 18px rgba(224, 184, 58, 0.28)) brightness(0.96);
}

/* ── Game modes grid ── */
.mb-home-modes {
  width: 100%;
  padding:
    clamp(14px, 4vw, 22px)
    clamp(12px, 3.5vw, 18px)
    clamp(12px, 3.5vw, 18px);
  box-sizing: border-box;
  background-color: transparent;
  background-image: url("/icons/modes-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.mb-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 10px) clamp(5px, 1.8vw, 8px);
  width: 100%;
}

.mb-mode-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(3px, 1vw, 5px);
  min-width: 0;
  text-decoration: none;
  color: var(--p-cream, #fff4d8);
  touch-action: manipulation;
  transition: transform 0.12s ease;
}

.mb-mode-tile:active {
  transform: scale(0.96);
}

.mb-mode-tile-frame {
  position: relative;
  display: block;
  width: min(100%, min(72px, 9.5dvh));
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: var(--mb-mode-icon, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
}

.mb-mode-tile-frame--ranking {
  --mb-mode-icon: url("/icons/ranking.webp");
}

.mb-mode-tile-frame--achievements {
  --mb-mode-icon: url("/icons/achievements.webp");
}

.mb-mode-tile-frame--rules {
  --mb-mode-icon: url("/icons/rules.webp");
}

.mb-mode-tile-frame--support {
  --mb-mode-icon: url("/icons/support.webp");
}

.mb-mode-tile-frame--settings {
  --mb-mode-icon: url("/icons/setting.webp");
}

.mb-mode-tile-frame--history {
  --mb-mode-icon: url("/icons/history.webp");
}

.mb-mode-tile-dot {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.mb-mode-tile-dot[hidden] {
  display: none !important;
}

.mb-mode-tile-label {
  width: 100%;
  font-size: clamp(8px, 2.4vw, 10px);
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tall / medium phones (e.g. 414×896) — keep dock compact ── */
@media (min-height: 700px) and (max-height: 920px) {
  .mb-home-play {
    padding-top: 8px;
    padding-bottom: 6px;
  }

  .mb-play-plaque-fx {
    max-height: min(140px, 16dvh);
    min-height: 96px;
  }

  .mb-mode-tile-frame {
    width: min(100%, min(68px, 8.5dvh));
  }

  .mb-home-bottom-dock {
    max-height: min(50dvh, 460px);
  }
}

/* ── Short viewports ── */
@media (max-height: 680px) {
  .mb-play-plaque-fx {
    max-height: 96px;
    min-height: 76px;
  }

  .mb-mode-tile-frame {
    width: min(100%, 60px);
  }

  .mb-home-bottom-dock {
    max-height: min(58dvh, 400px);
  }
}

@media (max-height: 580px) {
  .mb-home-play {
    padding-top: 8px;
    padding-bottom: 6px;
  }

  .mb-play-plaque-fx {
    max-height: 84px;
    min-height: 68px;
  }

  .mb-mode-tile-frame {
    width: min(100%, min(52px, 8dvh));
  }

  .mb-home-bottom-dock {
    max-height: min(62dvh, 360px);
  }
}

/* ── Narrow phones ── */
@media (max-width: 360px) {
  .mb-home-float-actions {
    gap: 8px;
  }
}

@media (max-width: 320px) {
  .mb-modes-grid {
    gap: 5px 4px;
  }

  .mb-mode-tile-label {
    font-size: 7.5px;
  }
}