/* V1.54 professional match conclusion language: one reveal and three outcomes. */
html body:not(.maintenance-mode) #resultOverlay.result-overlay {
  --result-accent: #d8e4ed;
  --result-accent-bright: #f5fbff;
  --result-glow: rgba(170, 204, 225, 0.22);
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, calc(100% - 32px));
  max-height: min(720px, calc(100dvh - 28px));
  gap: 10px;
  padding: 30px 34px 26px;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--result-accent) 68%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 24%),
    radial-gradient(circle at 50% -4%, var(--result-glow), transparent 48%),
    linear-gradient(152deg, rgba(19, 29, 39, 0.975), rgba(4, 8, 14, 0.99) 68%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -50px 90px rgba(0, 0, 0, 0.26),
    0 30px 100px rgba(0, 0, 0, 0.72),
    0 0 54px var(--result-glow),
    0 0 0 100vmax rgba(1, 4, 8, 0.76);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--result-accent) 38%, transparent) transparent;
}

html body:not(.maintenance-mode):has(#resultOverlay.result-overlay:not([hidden])) #rematch {
  display: none !important;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--result-accent) 16%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--result-accent) 42%, transparent) 50%, transparent 92%) top / 100% 1px no-repeat,
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--result-accent) 10%, transparent), transparent 32%);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.victory {
  --result-accent: #f0c861;
  --result-accent-bright: #fff3bd;
  --result-glow: rgba(240, 185, 63, 0.25);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.defeat {
  --result-accent: #d57b72;
  --result-accent-bright: #ffd0c8;
  --result-glow: rgba(188, 72, 65, 0.22);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.draw {
  --result-accent: #a9c7d8;
  --result-accent-bright: #e7f5fc;
  --result-glow: rgba(119, 176, 207, 0.2);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  border: 1px solid color-mix(in srgb, var(--result-accent) 72%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--result-accent) 20%, transparent), transparent 57%),
    conic-gradient(from 45deg, transparent 0 10%, color-mix(in srgb, var(--result-accent) 34%, transparent) 10% 12%, transparent 12% 23%, color-mix(in srgb, var(--result-accent) 24%, transparent) 23% 25%, transparent 25% 100%);
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--result-accent) 17%, transparent),
    0 0 28px var(--result-glow);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem::before,
html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem::before {
  width: 34px;
  height: 34px;
  border: 2px solid var(--result-accent-bright);
  transform: rotate(45deg);
  box-shadow: inset 0 0 12px var(--result-glow), 0 0 12px var(--result-glow);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.victory .result-emblem::before {
  width: 38px;
  height: 28px;
  border-width: 0 3px 3px 0;
  border-radius: 2px;
  transform: rotate(45deg) translate(-3px, -3px);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.defeat .result-emblem::before {
  width: 36px;
  height: 36px;
  border-width: 2px 0 0 2px;
  transform: rotate(45deg);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.draw .result-emblem::before {
  width: 42px;
  height: 24px;
  border-width: 2px 0;
  border-radius: 50%;
  transform: none;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem::after {
  inset: 7px;
  border: 1px dashed color-mix(in srgb, var(--result-accent) 48%, transparent);
  border-radius: 50%;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultKicker {
  color: color-mix(in srgb, var(--result-accent-bright) 78%, white 22%);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultTitle {
  color: var(--result-accent-bright);
  font-size: clamp(48px, 7vw, 76px);
  line-height: 0.98;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-shadow: 0 0 32px var(--result-glow), 0 3px 8px rgba(0, 0, 0, 0.74);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultMeta.result-meta {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-top: 2px;
  padding: 3px 12px;
  border: 1px solid color-mix(in srgb, var(--result-accent) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--result-accent) 8%, rgba(4, 8, 13, 0.86));
  color: color-mix(in srgb, var(--result-accent-bright) 78%, #b9c4cc 22%);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultDetail {
  max-width: 420px;
  min-height: 22px;
  color: rgba(235, 241, 245, 0.78);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 760;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeCard {
  margin-top: 8px;
  border-color: color-mix(in srgb, var(--result-accent) 34%, rgba(255, 203, 222, 0.4));
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-conclusion-actions {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-rematch,
html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-return-lobby {
  width: 100%;
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box;
  margin-top: 0;
  border-color: color-mix(in srgb, var(--result-accent) 66%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 22px var(--result-glow);
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-rematch {
  padding: 9px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--luminary-simple-button-frame) center / 100% 100% no-repeat !important;
  color: #563f18 !important;
  font-size: 16px;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76), 0 2px 5px rgba(0, 0, 0, 0.45) !important;
  filter: drop-shadow(0 8px 14px var(--result-glow));
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-rematch[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed {
  animation: result-conclusion-panel 480ms cubic-bezier(0.2, 0.84, 0.24, 1) both !important;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed .result-emblem {
  animation: result-conclusion-emblem 720ms 80ms cubic-bezier(0.16, 0.9, 0.22, 1) both;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed #resultKicker {
  animation: result-conclusion-copy 420ms 190ms ease-out both;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed #resultTitle {
  animation: result-conclusion-title 620ms 250ms cubic-bezier(0.16, 0.88, 0.26, 1) both;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed #resultMeta,
html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed #resultDetail {
  animation: result-conclusion-copy 430ms 440ms ease-out both;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed #resultLikeCard,
html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed .result-conclusion-actions {
  animation: result-conclusion-actions 460ms 570ms ease-out both;
}

@keyframes result-conclusion-panel {
  0% { opacity: 0; translate: 0 18px; scale: 0.965; filter: saturate(0.78); }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: saturate(1); }
}

@keyframes result-conclusion-emblem {
  0% { opacity: 0; transform: scale(0.62) rotate(-18deg); }
  62% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes result-conclusion-title {
  0% { opacity: 0; transform: translateY(14px); letter-spacing: 0.22em; filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.12em; filter: blur(0); }
}

@keyframes result-conclusion-copy {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes result-conclusion-actions {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  html body:not(.maintenance-mode) #resultOverlay.result-overlay {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 18px);
    gap: 8px;
    padding: 20px 14px 16px;
    border-radius: 16px;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem {
    width: 62px;
    height: 62px;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-emblem::before {
    width: 27px;
    height: 27px;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultTitle {
    font-size: clamp(42px, 15vw, 58px);
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultDetail {
    font-size: 13px;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeCard {
    min-height: 72px;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay .result-conclusion-actions {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed,
  html body:not(.maintenance-mode) #resultOverlay.result-overlay,
  html body:not(.maintenance-mode) #resultOverlay.result-overlay *,
  html body:not(.maintenance-mode) #resultOverlay.result-overlay::before,
  html body:not(.maintenance-mode) #resultOverlay.result-overlay::after {
    animation: none !important;
    transition: none !important;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay.result-revealed {
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }
}