/* ============================================================
   BIG BENIS GAME — экран загрузки
   Слои: фон → искры → логотип → герой → панель прогресса → совет
   ============================================================ */

.screen--loading {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr); /* иначе колонку распирает natural-ширина картинок */
  justify-items: center;
  row-gap: clamp(4px, 1vh, 12px);
  padding: calc(var(--safe-top) + 2.6vh) 5vw calc(var(--safe-bottom) + 1.6vh);
  text-align: center;
}

/* --- фон --- */
.loading-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(3, 8, 17, 0.10), rgba(3, 8, 17, 0.18)),
    url("../assets/loading/background.webp?v=2") center bottom / cover no-repeat;
}
.screen--loading::after {
  /* виньетка поверх фона, ниже контента */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 34%, rgba(1, 5, 12, 0.38) 76%, rgba(1, 4, 10, 0.82) 108%);
}

/* --- логотип и слоган --- */
.loading-brand {
  width: min(92%, 620px);
  z-index: 2;
  animation: brand-in 700ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
.loading-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6));
}
.loading-tagline {
  margin: clamp(2px, 0.7vh, 10px) 0 0;
  font: 400 clamp(15px, 4vw, 26px)/1 var(--font-display);
  color: #e6e8ee;
  letter-spacing: 0.05em;
  text-shadow: 0 3px 0 #2c3140, 0 6px 12px #000;
  animation: tagline-in 950ms 400ms cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}
@keyframes tagline-in {
  from { opacity: 0; transform: translateY(12px); letter-spacing: 0.32em; filter: blur(5px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; letter-spacing: 0.05em; filter: none; }
}
@keyframes brand-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* --- герой на пьедестале --- */
.loading-stage {
  align-self: stretch;
  min-height: 0;
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  z-index: 1;
}
.loading-hero {
  width: min(97%, 575px);
  max-height: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.65));
}

/* --- панель прогресса (каменная рамка 9-slice) ---
   Панель растягивается пропорционально (fixed aspect-ratio), поэтому
   дочерние элементы позиционируются в % от размеров текстуры 1400x527:
   внутренняя выемка под полосу — x: 167..1237, y: 197..326. */
.loading-panel {
  position: relative;
  width: min(94%, 540px);
  aspect-ratio: 1400 / 527;
  background: url("../assets/loading/loading-panel-9slice.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  font-family: var(--font-display);
  z-index: 3;
}
.loading-label {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 7%;
  height: 30%;
  display: grid;
  place-items: center;
  font-size: clamp(17px, 4.6vw, 28px);
  letter-spacing: 0.05em;
  color: #f5f0e7;
  text-shadow: 0 3px 0 #2a3140, 0 6px 10px #000;
}

/* трек прогресса — точно по выемке текстуры (+3px внутреннего зазора) */
.loading-track {
  position: absolute;
  left: 12.14%;
  right: 11.86%;
  top: 37.95%;
  bottom: 38.71%;
  border-radius: clamp(3px, 1vw, 6px);
  overflow: hidden;
}

/* заполнение: золотая текстура всегда растянута на ширину трека,
   а сам элемент обрезает её по проценту (--p-num ставит loader.js) */
.loading-fill {
  position: relative;
  width: 0%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 14px rgba(255, 170, 20, 0.4);
  transition: width 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loading-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% * 100 / max(var(--p-num, 1), 1));
  background: url("../assets/loading/loading-fill.webp") center / 100% 100% no-repeat;
}
.loading-fill::after {
  /* блик, пробегающий по заполнению */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.35) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: fill-shine 2.2s linear infinite;
}
@keyframes fill-shine {
  from { background-position: 130% 0; }
  to { background-position: -120% 0; }
}

.loading-value {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 66%;
  height: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--gold-2);
  font-size: clamp(15px, 3.8vw, 22px);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #7c4a00, 0 4px 8px #000;
}

/* --- совет внизу --- */
.loading-tip {
  max-width: 92%;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(10px, 2.6vw, 14px);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px #000;
  z-index: 3;
}
.loading-tip b { color: var(--gold-2); }

/* --- частицы: искры огня ---
   Каждая искра поднимается со своей скоростью, покачивается по горизонтали
   (--sway) и мерцает. Разные размеры, оттенки и высоты старта. */
.loading-embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.loading-embers i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffedb0 0%, #ffb428 45%, #ff7a00 100%);
  box-shadow: 0 0 6px 1px rgba(255, 150, 30, 0.85), 0 0 16px 5px rgba(255, 106, 0, 0.30);
  opacity: 0;
  animation:
    ember-rise var(--dur, 4.4s) linear var(--delay, 0s) infinite,
    ember-flicker 560ms ease-in-out var(--delay, 0s) infinite alternate;
}
.loading-embers i:nth-child(1)  { left: 8%;  bottom: 14%; --dur: 4.6s; --delay: -0.7s; --sway: 2.4vw; }
.loading-embers i:nth-child(2)  { left: 15%; bottom: 20%; --dur: 3.4s; --delay: -2.6s; --sway: -1.8vw; width: 3px; height: 3px; }
.loading-embers i:nth-child(3)  { left: 24%; bottom: 16%; --dur: 5.2s; --delay: -1.4s; --sway: 1.5vw; width: 5px; height: 5px; }
.loading-embers i:nth-child(4)  { left: 33%; bottom: 24%; --dur: 3.8s; --delay: -3.3s; --sway: -2.6vw; width: 2px; height: 2px; }
.loading-embers i:nth-child(5)  { left: 41%; bottom: 13%; --dur: 4.9s; --delay: -0.3s; --sway: 2vw; width: 3px; height: 3px; }
.loading-embers i:nth-child(6)  { left: 52%; bottom: 19%; --dur: 3.1s; --delay: -1.9s; --sway: -1.4vw; }
.loading-embers i:nth-child(7)  { left: 60%; bottom: 15%; --dur: 5.6s; --delay: -4.1s; --sway: 2.8vw; width: 2px; height: 2px; }
.loading-embers i:nth-child(8)  { left: 69%; bottom: 22%; --dur: 3.6s; --delay: -0.9s; --sway: -2.2vw; width: 5px; height: 5px; }
.loading-embers i:nth-child(9)  { left: 77%; bottom: 14%; --dur: 4.2s; --delay: -2.2s; --sway: 1.7vw; width: 3px; height: 3px; }
.loading-embers i:nth-child(10) { left: 85%; bottom: 18%; --dur: 5s;   --delay: -3.8s; --sway: -1.6vw; }
.loading-embers i:nth-child(11) { left: 91%; bottom: 25%; --dur: 3.3s; --delay: -1.1s; --sway: 2.2vw; width: 2px; height: 2px; }
.loading-embers i:nth-child(12) { left: 96%; bottom: 15%; --dur: 4.7s; --delay: -2.9s; --sway: -2vw; width: 3px; height: 3px; }
@keyframes ember-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translate3d(var(--sway, 2vw), -20vh, 0) scale(1); opacity: 0.95; }
  100% { transform: translate3d(calc(var(--sway, 2vw) * -0.6), -40vh, 0) scale(0.1); opacity: 0; }
}
@keyframes ember-flicker {
  from { filter: brightness(0.8); }
  to   { filter: brightness(1.35); }
}

/* --- низкие экраны --- */
@media (max-height: 680px) {
  .screen--loading { padding-top: calc(var(--safe-top) + 10px); }
  .loading-brand { width: min(74%, 430px); }
  .loading-tagline { font-size: 14px; }
  .loading-hero { width: min(72%, 390px); }
  .loading-panel { width: min(88%, 470px); }
  .loading-tip { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-embers { display: none; }
  .loading-fill { transition: none; }
  .loading-fill::after { animation: none; background: none; }
  .loading-brand, .loading-tagline { animation: none; }
}