/* Shared, compact result layout for daily, duel, live duel and Bomb mode. */
body.modal-open,
body.result-overlay-open,
body.duel-result-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.result-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden !important;
  background: rgba(8, 20, 15, .72);
}

.result-modal.game-result.visible,
.duel-page.duel-finished .result-modal.duel-result-card.visible,
.duel-page.duel-waiting-result .result-modal.duel-result-card.visible,
.result-modal[data-result-card] {
  position: fixed !important;
  z-index: 9999 !important;
  left: 50% !important;
  top: 50% !important;
  flex-direction: column;
  width: min(calc(100vw - 32px), 520px) !important;
  max-width: 520px !important;
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(16px, 2.5dvh, 28px) !important;
  gap: clamp(10px, 1.5dvh, 18px);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: 28px !important;
  transform: translate(-50%, -50%) !important;
  zoom: 1 !important;
  box-sizing: border-box;
}

.result-modal.game-result.visible,
.duel-page.duel-finished .result-modal.duel-result-card.visible,
.duel-page.duel-waiting-result .result-modal.duel-result-card.visible {
  display: flex !important;
}

.result-modal .result-close,
.result-modal .duel-result-close {
  position: absolute !important;
  z-index: 5 !important;
  top: 14px !important;
  right: 14px !important;
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  margin: 0 !important;
  display: grid;
  place-items: center;
}

.result-modal h1,
.result-modal h2 {
  margin: 0 !important;
  padding-right: 48px;
  font-size: clamp(1.65rem, 4dvh, 2.6rem) !important;
  line-height: 1.05 !important;
}

.result-modal > p,
.result-modal .result-description {
  margin: 0 !important;
  font-size: clamp(.82rem, 1.8dvh, 1rem) !important;
  line-height: 1.3 !important;
}

.result-modal .duel-result-emblem,
.result-modal .result-icon {
  width: clamp(34px, 6dvh, 54px);
  height: clamp(34px, 6dvh, 54px);
  margin: 0 auto !important;
  display: grid !important;
  place-items: center;
  font-size: clamp(30px, 5.5dvh, 48px) !important;
  line-height: 1;
}

.result-modal .duel-result-matchup {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  margin: 0 !important;
  padding: 10px 48px 10px 16px;
  box-sizing: border-box;
}

.result-modal .duel-result-matchup b,
.result-modal .duel-comparison article span,
.result-modal .duel-comparison article b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-modal .duel-comparison {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin: 0 !important;
}

.result-modal .duel-comparison article {
  min-width: 0;
  padding: clamp(8px, 1.5dvh, 14px) !important;
}

.result-modal .result-stats,
.result-modal .result-stats-row {
  width: 100% !important;
  max-width: 100%;
  display: grid !important;
  gap: 6px !important;
  box-sizing: border-box;
}

.result-modal .result-stats-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 12px !important;
}

.result-modal .word-definition {
  max-height: none !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.result-modal .word-definition p,
.result-modal .word-definition__text {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3;
  line-height: 1.35 !important;
}

.result-modal .duel-mission-celebration,
.result-modal .join-reward,
.result-modal .result-pattern,
.result-modal .result-stats,
.result-modal .next-game,
.result-modal .city-impact {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.result-modal .result-modal__actions,
.result-modal .result-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 8px 0 max(2px, env(safe-area-inset-bottom, 0px));
  background: #101a15;
  box-sizing: border-box;
}

.result-modal .result-modal__actions button,
.result-modal .result-modal__actions a,
.result-modal .result-actions button,
.result-modal .result-actions a,
.result-modal .result-rematch button {
  width: 100% !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: clamp(.85rem, 1.8dvh, 1rem) !important;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .result-modal.game-result.visible,
  .duel-page.duel-finished .result-modal.duel-result-card.visible,
  .duel-page.duel-waiting-result .result-modal.duel-result-card.visible,
  .result-modal[data-result-card] {
    width: min(520px, calc(100vw - 48px)) !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 48px) !important;
  }
}

@media (max-height: 700px) {
  .result-overlay { padding: 8px; }
  .result-modal.game-result.visible,
  .duel-page.duel-finished .result-modal.duel-result-card.visible,
  .duel-page.duel-waiting-result .result-modal.duel-result-card.visible,
  .result-modal[data-result-card] {
    width: min(calc(100vw - 16px), 520px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px !important;
    gap: 8px;
    border-radius: 20px !important;
  }
  .result-modal h1,
  .result-modal h2 { font-size: 1.65rem !important; line-height: 1.05 !important; }
  .result-modal .duel-result-emblem,
  .result-modal .result-icon { width: 34px; height: 34px; font-size: 30px !important; }
  .result-modal .result-modal__actions,
  .result-modal .result-actions { gap: 7px !important; padding-top: 5px; }
  .result-modal .result-modal__actions button,
  .result-modal .result-modal__actions a,
  .result-modal .result-actions button,
  .result-modal .result-actions a { min-height: 42px; }
}

@media (max-width: 340px) {
  .result-modal.game-result.visible,
  .duel-page.duel-finished .result-modal.duel-result-card.visible,
  .duel-page.duel-waiting-result .result-modal.duel-result-card.visible,
  .result-modal[data-result-card] {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px !important;
  }
  .result-modal .result-secondary-description,
  .result-modal .result-community-summary,
  .result-modal .daily-community,
  .result-modal .city-impact,
  .result-modal .next-game,
  .duel-page.duel-waiting-result .result-modal > p:last-of-type {
    display: none !important;
  }
}
