/* Shared overlay sizing. Keep all content reachable when zoomed or rotated. */
#overlay {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#overlay .modalbody {
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  scroll-padding: 16px;
}
#overlay .modalbody > *, #resultContent, #resultActions > *, #reviveOffer > * {
  min-width: 0;
}
#overlay .button-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
#overlay button {
  max-width: 100%;
  white-space: normal;
  line-height: 1.45;
}
#overlay .acid-result-stamp {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#overlay.poster-result #resultPosterPanel {
  align-self: start;
}
#info, #marketDialog, #leaderboard {
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  scroll-padding: 16px;
}
#info :is(button, .brief-check, .hazard-card, .hazard-nav), #marketDialog .market-heading {
  min-width: 0;
  overflow-wrap: anywhere;
}
#info .hazard-nav {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
#info .hazard-nav button, #guideTabs button {
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
}
#info .brief-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}
#countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
#countdown > div {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  margin-block: auto;
}
#countdown button {
  max-width: calc(100% - 12px);
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (max-width: 800px) {
  /* Every compact result uses one column, including the 651–800px interval. */
  #overlay.poster-result .modalbody {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
  }
  #overlay.poster-result .modalbody > * {
    flex: 0 0 auto;
    width: 100%;
  }
  #overlay.poster-result .result-language { order: -5; }
  #overlay.poster-result .acid-result-stamp { order: -4; font-size: clamp(44px, 10vw, 64px); }
  #overlay.poster-result #resultTitle { order: -3; }
  #overlay.poster-result #reviveOffer { order: -2; }
  #overlay.poster-result #resultPosterPanel {
    order: -1;
    align-self: center;
    max-width: 360px;
    margin: 4px auto 16px;
  }
  #overlay.poster-result #resultPoster {
    max-height: 52dvh;
  }
  #overlay.poster-result:has(#reviveOffer:not(.revive-used)) #resultPoster { max-height: 39dvh; }
  #overlay.poster-result .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #overlay.poster-result .result-stats span { font-size: 12px; line-height: 1.5; }
  #overlay.poster-result .result-stats b { font-size: 17px; }
  #overlay.poster-result .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #overlay.poster-result .actions button { font-size: 12px; }
}
@media (max-width: 360px) {
  #overlay .actions { grid-template-columns: minmax(0, 1fr); }
  #overlay.poster-result .actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 500px) {
  #countdown .countdown-weex { width: 110px; margin-bottom: 6px; }
  #countdownTitle { font-size: 18px; margin: 6px 0; }
  #countdownValue { font-size: clamp(64px, 24dvh, 112px); margin: 8px 0; }
  #countdown button { min-height: 44px; margin: 4px; padding: 8px 12px; }
}