/* Loading panel ("Dungeon loadout"): Hero Showdown restyle. Styling only.
   Every selector starts with #asset-preload-overlay, so nothing else on the page can match.
   The markup, ids, text, counts and progress logic (game.js updateStageOverlay / stageGate)
   are untouched. No images; fonts are the game's self-hosted "Cinzel Lore" / "Fell Lore". */

#asset-preload-overlay {
  --lp-hair: rgba(240, 200, 120, .42);
  --lp-hair2: rgba(240, 200, 120, .16);
  --lp-gold: #f5c542;
  --lp-ink: #f0e6d0;
  --lp-muted: #cdbb96;
  /* see-through, so the torchlit landing (or the combat hall, for halls 4+) stays behind it, dimmed */
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(255, 140, 40, .10), transparent 70%),
    radial-gradient(ellipse at 50% 45%, rgba(10, 8, 9, .55) 0%, rgba(6, 5, 7, .86) 62%, rgba(3, 3, 4, .96) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(.85); backdrop-filter: blur(6px) saturate(.85);
  color: var(--lp-ink);
}

#asset-preload-overlay .asset-preload-card {
  position: relative; isolation: isolate;
  width: min(34rem, 100%);
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4.5vw, 2.6rem) clamp(1.3rem, 3.5vw, 2rem);
  border: 1px solid var(--lp-hair); border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 170, 70, .10), transparent 70%),
    linear-gradient(180deg, rgba(26, 21, 18, .88), rgba(10, 9, 11, .92));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, .12), 0 24px 70px rgba(0, 0, 0, .62), 0 0 46px rgba(255, 130, 40, .10);
}
/* inner hairline frame, like the landing plates */
#asset-preload-overlay .asset-preload-card::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; pointer-events: none;
  border: 1px solid var(--lp-hair2); border-radius: 10px;
}

/* kicker: small Cinzel caps between two gold hairlines (the "- TYPE TO FIGHT! -" treatment) */
#asset-preload-overlay .asset-preload-kicker {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 600 .74rem/1 "Cinzel Lore", Georgia, serif; letter-spacing: .32em; padding-left: .32em;
  text-transform: uppercase; color: var(--lp-gold);
  text-shadow: 0 0 12px rgba(255, 170, 60, .45);
}
#asset-preload-overlay .asset-preload-kicker::before,
#asset-preload-overlay .asset-preload-kicker::after {
  content: ""; flex: 0 1 54px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 200, 120, .8));
}
#asset-preload-overlay .asset-preload-kicker::after { background: linear-gradient(90deg, rgba(240, 200, 120, .8), transparent); }

/* heading ("Loading Mage and halls 1-3..."): the gilded title gradient from the landing */
#asset-preload-overlay .asset-preload-card h1 {
  margin: .8rem 0 .5rem;
  font: 600 clamp(1.3rem, 3.6vw, 1.95rem)/1.18 "Cinzel Lore", Georgia, serif; letter-spacing: .04em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff8dc 0%, #ffd56a 38%, #d08a24 66%, #ffe3a0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #1a0c04) drop-shadow(0 0 16px rgba(255, 120, 40, .38));
}

/* "Loaded 54 of 160...": Cinzel, because IM Fell's old-style figures made "160" read like "i6o" */
#asset-preload-overlay .asset-preload-card p {
  margin: 0 0 .9rem; font: 600 .9rem/1.35 "Cinzel Lore", Georgia, serif; letter-spacing: .08em; color: var(--lp-muted);
  font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 1px 2px #000;
}

/* progress: recessed track with a gold hairline, torch-gold fill that glows */
#asset-preload-overlay .asset-preload-progress {
  position: relative; height: 14px; margin: 1.2rem 0 .65rem; padding: 2px; overflow: hidden;
  border: 1px solid var(--lp-hair); border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(30, 22, 14, .55));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), 0 0 0 3px rgba(0, 0, 0, .25);
}
#asset-preload-overlay .asset-preload-progress span {
  position: relative; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #8a4a12 0%, #d08a24 38%, #f5c542 78%, #fff1b8 100%);
  box-shadow: 0 0 10px rgba(255, 170, 50, .55), 0 0 2px rgba(255, 230, 160, .9);
  /* width and its .18s transition stay exactly as in styles.nohands.css */
}
/* a slow ember shimmer travelling along the fill */
#asset-preload-overlay .asset-preload-progress span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 0 35%, rgba(255, 245, 210, .55) 50%, transparent 65% 100%) 0 0 / 220% 100% no-repeat;
  animation: lp-sd-shimmer 1.6s linear infinite;
}
@keyframes lp-sd-shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
/* complete: the bar flares (driven by the aria-valuenow game.js already writes) */
#asset-preload-overlay .asset-preload-progress[aria-valuenow="100"] {
  border-color: rgba(255, 215, 120, .75);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), 0 0 0 3px rgba(0, 0, 0, .25), 0 0 18px rgba(255, 170, 50, .45);
}

/* "34%" */
#asset-preload-overlay .asset-preload-card > strong {
  display: block; font: 600 1rem/1 "Cinzel Lore", Georgia, serif; letter-spacing: .12em;
  color: var(--lp-gold); text-shadow: 0 0 12px rgba(255, 170, 60, .5);
  font-variant-numeric: tabular-nums lining-nums;
}

/* error + Retry (rare, but it should match) */
#asset-preload-overlay .asset-preload-error {
  font: italic 1rem/1.35 "Fell Lore", Georgia, serif; color: #ff9c8a !important;
}
#asset-preload-overlay #asset-preload-retry {
  margin-top: .3rem; padding: .6rem 1.4rem; border-radius: 10px;
  border: 1px solid rgba(255, 220, 140, .7);
  background: linear-gradient(180deg, #f6cf62, #c98a22); color: #1f1406;
  font: 600 .9rem/1 "Cinzel Lore", Georgia, serif; letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 170, 50, .3);
}
#asset-preload-overlay #asset-preload-retry:hover { filter: brightness(1.08); }
#asset-preload-overlay #asset-preload-retry:focus-visible { outline: 2px solid #fff1b8; outline-offset: 3px; }

@media (max-width: 480px) {
  #asset-preload-overlay { padding: 14px; }
  #asset-preload-overlay .asset-preload-card { border-radius: 12px; }
  #asset-preload-overlay .asset-preload-kicker { font-size: .66rem; gap: 10px; }
  #asset-preload-overlay .asset-preload-kicker::before,
  #asset-preload-overlay .asset-preload-kicker::after { flex-basis: 30px; }
  #asset-preload-overlay .asset-preload-card p { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  #asset-preload-overlay .asset-preload-progress span::after { animation: none; opacity: 0; }
}