/* базово */
.error-dialog { --win-title-scale: 1; }
/* тільки українська */
/*:lang(uk) .error-dialog { --win-title-scale: .75; }*/

.error-overlay {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: grid;
  width: auto;
  max-width: calc(100vw - 112px);
  justify-items: center;
  align-content: start;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
}
.error-overlay.hidden {
  display: none !important;
}
.error-overlay:not(.hidden) {
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}
.error-dialog {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  background: radial-gradient(
          85.27% 86.29% at 50% 13.71%,
          rgba(46, 56, 102, 0.70) 0%,
          rgba(67, 79, 135, 0.50) 33.98%,
          rgba(165, 175, 220, 0.50) 80.75%
  );
  box-shadow:
          0 1.362px 0 0 rgba(255, 255, 255, 0.55) inset,
          0 0 9.73px 0 rgba(255, 255, 255, 0.60) inset,
          0 3.892px 9.73px 0 rgba(9, 33, 63, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  display: grid;
  place-items: center;
  gap: 0;

  transform-origin: 50% 60%;
  transform: translateY(14px) scale(.92);
  opacity: 0;
  filter: blur(2px);
  pointer-events: auto;
  overflow: visible;
}
@media (orientation: landscape) {
  .error-overlay {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    left: calc(50% - var(--compact-top-left-slot-offset, 64px) - 110px);
    width: auto;
    max-width: min(25vw, 240px);
    transform: translateX(-50%);
  }

  #game:has(#bottom-tools.full) .error-overlay {
    left: calc(50% - var(--compact-top-left-slot-offset, 64px) - 24px + var(--compact-top-open-shift, 24px));
  }

  .error-dialog {
    padding: 0 10px;
  }

  .error-text {
    font-size: calc(13px * var(--win-title-scale));
  }
}

@media (orientation: landscape) and (max-height: 375px) {
  .error-overlay {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    left: calc(43% - var(--compact-top-left-slot-offset));
    width: auto;
    max-width: min(30vw, 170px);
    transform: translateX(-50%);
  }

  #game:has(#bottom-tools.full) .error-overlay {
    left: calc(50% - var(--compact-top-left-slot-offset, 64px) + var(--compact-top-open-shift, 14px));
  }
}

@media (orientation: landscape) and (max-height: 375px) and (min-width: 800px) {
  .error-overlay {
    left: calc(50% - var(--compact-top-left-slot-offset, 64px) - 120px);
  }
}

@media (orientation: portrait) and (min-height: 1024px) {
  .error-dialog {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
  }

  .error-text {
    font-size: calc(18px * var(--win-title-scale));
  }
}

@media (orientation: landscape) and (min-width: 1180px) {
  .error-overlay,
  #game:has(#bottom-tools.full) .error-overlay {
    left: 50%;
  }
}

@media (orientation: landscape) and (min-width: 1024px) {
  .error-dialog {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
  }

  .error-text {
    font-size: calc(18px * var(--win-title-scale));
  }
}

@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px) {
  .error-overlay {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
  }
}
.error-dialog::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  border-radius: inherit;
  clip-path: inset(0 round 23px);
  background: linear-gradient(
          115deg,
          transparent 35%,
          rgba(255,255,255,.22) 45%,
          rgba(255,255,255,.06) 55%,
          transparent 65%
  );
  transform: translateX(-35%) translateY(0);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.error-text {
  position: relative;
  overflow: visible;
  font-family: var(--basic-font);
  font-weight: 800;
  font-size: calc(16px * var(--win-title-scale));
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  background: linear-gradient(89deg,
  #a50000 0%,
  #ae003d 25%,
  #d30213 50%,
  #ae003d 75%,
  #a50000 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: gradientMove 2.5s linear infinite;
}
@keyframes gradientMove {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 200% center;
  }
}
.error-overlay:not(.hidden):not(.is-hiding) .error-dialog {
  animation:
          errorPopupIn .28s cubic-bezier(.22, .61, .36, 1) forwards,
          errorGlow 1.15s ease-in-out .45s 2;
}
.error-overlay.is-hiding .error-dialog {
  animation: errorPopupOut .22s cubic-bezier(.55, .06, .68, .19) forwards;
}
@keyframes glowBreath {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(255,255,255,.65));
  }
}
@keyframes errorPopupIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(.96);
    filter: blur(2px);
  }

  72% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes errorPopupOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-14px) scale(.99);
    filter: blur(0);
  }
}
@keyframes errorGlow {
  0%, 100% {
    box-shadow:
            0 1.362px 0 rgba(255,255,255,.55) inset,
            0 0 9.73px rgba(255,255,255,.60) inset,
            0 6px 18px rgba(9,33,63,.95);
  }
  50% {
    box-shadow:
            0 1.362px 0 rgba(255,255,255,.70) inset,
            0 0 14px rgba(255,255,255,.75) inset,
            0 3.892px 9.73px rgba(9,33,63,.90);
  }
}