.screen-loading {
  position: relative;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  padding:
    max(14px, var(--safe-t))
    max(16px, var(--safe-r))
    max(14px, var(--safe-b))
    max(16px, var(--safe-l));
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 181, 76, 0.26), transparent 34%),
    radial-gradient(ellipse at 12% 72%, rgba(255, 174, 62, 0.2), transparent 22%),
    radial-gradient(ellipse at 88% 70%, rgba(255, 174, 62, 0.18), transparent 24%),
    linear-gradient(90deg, rgba(1, 1, 1, 0.78), rgba(8, 4, 2, 0.12) 35%, rgba(8, 4, 2, 0.1) 64%, rgba(1, 1, 1, 0.78)),
    linear-gradient(180deg, rgba(1, 1, 1, 0.38), rgba(5, 2, 1, 0.16) 42%, rgba(2, 1, 1, 0.78));
}

.screen-loading::before,
.screen-loading::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.screen-loading::before {
  inset: max(9px, var(--safe-t)) max(11px, var(--safe-r)) max(9px, var(--safe-b)) max(11px, var(--safe-l));
  border: 1px solid rgba(238, 190, 83, 0.58);
  border-radius: 2px;
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(229, 177, 65, 0.12);
}

.screen-loading::after {
  inset: 0;
  background:
    radial-gradient(circle at 28% 62%, rgba(255, 202, 105, 0.52) 0 1px, transparent 1.8px),
    radial-gradient(circle at 69% 57%, rgba(255, 202, 105, 0.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 46% 27%, rgba(255, 231, 162, 0.34) 0 1px, transparent 1.8px);
  background-size: 230px 170px, 280px 190px, 320px 220px;
  opacity: 0.36;
  animation: loading-dust 9s linear infinite;
}

.loading-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 1760px);
  height: min(100%, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(108px, 0.78fr) minmax(230px, 1.8fr) minmax(96px, 0.62fr);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brand"
    "hero"
    "status";
  align-items: center;
  justify-items: center;
  gap: clamp(4px, 1.2vh, 14px);
  pointer-events: none;
}

.loading-brand {
  grid-area: brand;
  justify-self: center;
  align-self: end;
  display: grid;
  justify-items: center;
  gap: clamp(1px, 0.4vh, 5px);
  text-align: center;
  filter:
    drop-shadow(0 3px 0 rgba(84, 43, 7, 0.84))
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.62));
  animation: loading-logo-breathe 4.8s ease-in-out infinite;
}

.loading-crown {
  width: clamp(86px, 10.5vw, 180px);
  height: clamp(32px, 5vw, 78px);
  object-fit: contain;
  object-position: center;
}

.loading-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.8vw, 118px);
  line-height: 0.82;
  letter-spacing: 0;
  color: #f9d56e;
  background: linear-gradient(180deg, #fff8cf 0%, #f3c95f 38%, #af671b 78%, #5d2b07 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(76, 34, 4, 0.9),
    0 0 20px rgba(255, 207, 100, 0.38);
}

.loading-year {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 42px);
  line-height: 1;
  color: #ffe493;
  letter-spacing: 0.18em;
  text-shadow: 0 2px 0 rgba(78, 36, 5, 0.9), 0 8px 18px rgba(0, 0, 0, 0.58);
}

.loading-tag {
  margin-top: clamp(3px, 0.5vh, 8px);
  font-family: var(--font-display);
  font-size: clamp(10px, 1.15vw, 18px);
  line-height: 1.1;
  color: #ffe8aa;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 5px 14px rgba(0, 0, 0, 0.66);
}

.loading-hero {
  grid-area: hero;
  position: relative;
  width: min(74vw, 980px);
  max-width: calc(100vw - 36px);
  aspect-ratio: 1.55;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: loading-float 5.4s ease-in-out infinite;
}

.loading-hero img {
  position: absolute;
  left: 50%;
  height: auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.loading-aura {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 12%;
  height: 31%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(255, 203, 105, 0.52), rgba(255, 186, 68, 0.15) 46%, transparent 72%);
  filter: blur(7px);
  opacity: 0.88;
  animation: loading-aura 4s ease-in-out infinite;
}

.loading-pedestal {
  bottom: 0;
  width: 93%;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.72))
    saturate(1.08)
    contrast(1.05);
}

.loading-plate {
  bottom: 24%;
  width: 66%;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.52));
}

.loading-bowl {
  bottom: 35%;
  width: 42%;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 20px 18px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 14px rgba(255, 214, 132, 0.22));
}

.loading-spark {
  position: absolute;
  width: clamp(3px, 0.45vw, 7px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff3b7;
  box-shadow: 0 0 14px rgba(255, 226, 148, 0.9);
  animation: loading-spark 3.4s ease-in-out infinite;
}

.loading-spark.a { left: 28%; top: 42%; }
.loading-spark.b { right: 29%; top: 39%; animation-delay: -0.9s; }
.loading-spark.c { left: 38%; bottom: 28%; animation-delay: -1.8s; }
.loading-spark.d { right: 38%; bottom: 31%; animation-delay: -2.5s; }

.loading-status {
  grid-area: status;
  align-self: start;
  justify-self: center;
  width: min(56vw, 760px);
  max-width: calc(100vw - 44px);
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  justify-items: center;
  gap: clamp(30px, 3.8vh, 46px);
}

.load-label,
.load-wait {
  margin: 0;
  font-family: var(--font-display);
  color: #fff0bd;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.72);
}

.load-label {
  font-size: clamp(16px, 1.75vw, 30px);
  letter-spacing: 0.16em;
}

.load-wait {
  font-size: clamp(10px, 1vw, 16px);
  letter-spacing: 0.22em;
  opacity: 0.92;
}

.load-track {
  position: relative;
  width: 100%;
  height: clamp(18px, 2.5vh, 34px);
  padding: 3px;
  border-radius: 999px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(50, 25, 8, 0.86), rgba(9, 6, 3, 0.92));
  border: 1px solid rgba(242, 192, 83, 0.78);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 236, 168, 0.22),
    0 0 28px rgba(224, 156, 37, 0.14);
}

.load-track::before,
.load-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(24px, 3vw, 42px);
  height: 150%;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(255, 222, 132, 0.95), transparent);
  clip-path: polygon(0 50%, 28% 0, 100% 0, 72% 50%, 100% 100%, 28% 100%);
}

.load-track::before {
  right: calc(100% - 9px);
}

.load-track::after {
  left: calc(100% - 9px);
  transform: translateY(-50%) scaleX(-1);
}

.load-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fff2b4 0%, #ffc653 34%, #d9871e 72%, #8d4511 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 220, 0.8),
    inset 0 -2px 5px rgba(102, 46, 6, 0.45),
    0 0 18px rgba(255, 181, 53, 0.62);
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.load-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 235, 0.72) 48%, transparent 74%);
  animation: loading-shine 1.6s ease-in-out infinite;
}

.load-percent {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: clamp(42px, 5vw, 72px);
  min-height: clamp(30px, 4vw, 54px);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(246, 207, 108, 0.88);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 238, 158, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(42, 21, 7, 0.98), rgba(8, 5, 3, 0.98));
  color: #ffe692;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.25vw, 20px);
  line-height: 1;
  z-index: 3;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 235, 155, 0.2);
}

.load-percent::before {
  content: attr(data-value);
  display: block;
  transform: rotate(-45deg);
  font-size: clamp(12px, 1.25vw, 20px);
  color: #ffe692;
}

.load-percent {
  font-size: 0;
}

.screen-loading.is-ready .loading-shell {
  animation: loading-ready-fade 0.48s ease forwards;
}

@keyframes loading-dust {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 160px -110px, -190px -130px, 120px -150px; }
}

@keyframes loading-logo-breathe {
  0%, 100% { filter: drop-shadow(0 3px 0 rgba(84, 43, 7, 0.84)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.62)); }
  50% { filter: drop-shadow(0 3px 0 rgba(84, 43, 7, 0.84)) drop-shadow(0 0 26px rgba(255, 203, 95, 0.46)); }
}

@keyframes loading-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.006); }
}

@keyframes loading-aura {
  0%, 100% { opacity: 0.72; transform: scale(0.98); }
  50% { opacity: 0.98; transform: scale(1.04); }
}

@keyframes loading-spark {
  0%, 100% { opacity: 0.18; transform: translateY(0) scale(0.68); }
  50% { opacity: 1; transform: translateY(-16px) scale(1); }
}

@keyframes loading-shine {
  0% { transform: translateX(-120%); }
  62%, 100% { transform: translateX(120%); }
}

@keyframes loading-ready-fade {
  to {
    opacity: 0;
    transform: scale(1.015);
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .screen-loading {
    padding:
      max(8px, var(--safe-t))
      max(10px, var(--safe-r))
      max(8px, var(--safe-b))
      max(10px, var(--safe-l));
  }

  .loading-shell {
    grid-template-rows: minmax(82px, 0.68fr) minmax(128px, 1.48fr) minmax(54px, 0.48fr);
    gap: 0;
  }

  .loading-crown {
    width: clamp(50px, 10vw, 80px);
    height: clamp(20px, 4.2vw, 34px);
  }

  .loading-title {
    font-size: clamp(23px, 5.7vw, 36px);
  }

  .loading-year {
    font-size: clamp(11px, 2.7vw, 16px);
  }

  .loading-tag {
    font-size: clamp(7px, 1.85vw, 10px);
    letter-spacing: 0.14em;
  }

  .loading-hero {
    width: min(52vw, 360px);
  }

  .loading-status {
    width: min(48vw, 380px);
    gap: 7px;
  }

  .load-label {
    font-size: clamp(10px, 2.35vw, 13px);
  }

  .load-track {
    height: clamp(15px, 4.4vh, 22px);
  }

  .load-percent {
    left: auto;
    right: 9px;
    top: 50%;
    min-width: 34px;
    min-height: 0;
    height: calc(100% - 4px);
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: rgba(18, 10, 5, 0.72);
    box-shadow: inset 0 0 0 1px rgba(246, 207, 108, 0.42);
  }

  .load-percent::before {
    font-size: clamp(9px, 2.3vw, 13px);
    transform: none;
  }

  .load-wait {
    font-size: clamp(6.5px, 1.55vw, 8.5px);
  }
}

@media (min-width: 1600px) and (min-height: 900px) {
  .loading-shell {
    grid-template-rows: minmax(190px, 0.8fr) minmax(520px, 1.95fr) minmax(150px, 0.62fr);
  }

  .loading-hero {
    width: min(72vw, 1180px);
  }
}

@media (max-height: 820px) and (min-width: 933px) {
  .loading-shell {
    grid-template-rows: minmax(152px, 0.8fr) minmax(280px, 1.54fr) minmax(82px, 0.5fr);
  }

  .loading-crown {
    width: clamp(70px, 8vw, 104px);
    height: clamp(28px, 4vw, 48px);
  }

  .loading-title {
    font-size: clamp(38px, 5.2vw, 72px);
  }

  .loading-year {
    font-size: clamp(16px, 2.1vw, 26px);
  }

  .loading-tag {
    font-size: clamp(9px, 1vw, 13px);
  }

  .loading-hero {
    width: min(58vw, 670px);
  }

  .loading-status {
    width: min(50vw, 660px);
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-loading::after,
  .loading-brand,
  .loading-hero,
  .loading-aura,
  .loading-spark,
  .load-fill::after {
    animation: none !important;
  }
}