/* Hero splash: live text stays crisp, localized and independent of generated art. */
#lobby[data-home-loading] { z-index:100; }
#homeLoading {
  position:fixed; inset:0; z-index:20; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
  padding:calc(var(--hud-space-6) + env(safe-area-inset-top,0px)) calc(clamp(24px,5vw,80px) + env(safe-area-inset-right,0px)) calc(var(--hud-space-6) + env(safe-area-inset-bottom,0px)) calc(clamp(24px,5vw,80px) + env(safe-area-inset-left,0px));
  background:var(--hud-surface-canvas); color:var(--hud-text); text-align:left;
  font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);
}
/* Held for a beat after the home screen is ready, then faded over it. */
#homeLoading.is-out { z-index:200; opacity:0; pointer-events:none; transition:opacity 400ms ease-out; }
#homeLoading .loadingArt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 40%; }
#homeLoading .loadingArt[hidden] { display:none; }
#homeLoading::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,var(--hud-surface-canvas),transparent 28%,transparent 45%,var(--hud-surface-canvas) 92%);
}
.loadingBrand,.loadingFooter { position:relative; z-index:1; }
.loadingBrand { display:flex; align-items:center; gap:var(--hud-space-3); }
.loadingBrand img { width:var(--hud-target); height:var(--hud-target); }
.loadingBrand strong { display:block; font:var(--hud-weight-strong) var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display); }
.loadingBrand small { display:block; color:var(--hud-text-muted); font-size:var(--hud-text-sm); letter-spacing:var(--hud-tracking-label); }
.loadingFooter { display:grid; gap:var(--hud-space-2); max-width:640px; }
.loadingHero { color:var(--hud-accent); font:var(--hud-weight-strong) clamp(40px,6vw,80px)/var(--hud-leading-title) var(--hud-font-display); }
.loadingCaption { margin:0 0 var(--hud-space-4); font-weight:var(--hud-weight-label); letter-spacing:var(--hud-tracking-label); }
.loadingStatus { color:var(--hud-text-muted); font-size:var(--hud-text-body); }
.loadingFooter progress { width:100%; height:var(--hud-space-1); border:0; accent-color:var(--hud-accent); }
.loadingFooter progress::-webkit-progress-bar { background:var(--hud-border-subtle); }
.loadingFooter progress:indeterminate { background:linear-gradient(90deg,var(--hud-border-subtle),var(--hud-accent),var(--hud-border-subtle)); background-size:200% 100%; animation:loadingSweep calc(var(--hud-motion-fast) * 18) linear infinite; }
.loadingFooter progress:indeterminate::-webkit-progress-bar { background:transparent; }
@keyframes loadingSweep { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .loadingFooter progress:indeterminate { animation:none; } #homeLoading.is-out, #matchLoading.is-out { transition:none; } }
@media (max-width:600px) {
  #homeLoading .loadingArt { object-position:45% 36%; }
  .loadingBrand strong { font-size:var(--hud-title-lg); }
  .loadingCaption { font-size:var(--hud-text-sm); }
}
@media (max-height:500px) {
  #homeLoading { padding-top:calc(var(--hud-space-3) + env(safe-area-inset-top,0px)); padding-bottom:calc(var(--hud-space-3) + env(safe-area-inset-bottom,0px)); }
  .loadingHero { font-size:var(--hud-title-xl); }
  .loadingCaption { margin-bottom:0; }
  .loadingFooter { gap:var(--hud-space-1); max-width:50%; }
}
/* Match splash (js/match-art-gate.js): the same hero screen over the whole match HUD, the tutorial
   coach included, while the match art finishes arriving. #homeLoading stays a rule of its own:
   the Godot port's exporter reads it by that selector. */
#matchLoading {
  position:fixed; inset:0; z-index:9000; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
  padding:calc(var(--hud-space-6) + env(safe-area-inset-top,0px)) calc(clamp(24px,5vw,80px) + env(safe-area-inset-right,0px)) calc(var(--hud-space-6) + env(safe-area-inset-bottom,0px)) calc(clamp(24px,5vw,80px) + env(safe-area-inset-left,0px));
  background:var(--hud-surface-canvas); color:var(--hud-text); text-align:left;
  font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);
}
#matchLoading.is-out { opacity:0; pointer-events:none; transition:opacity 400ms ease-out; }
#matchLoading .loadingArt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 40%; }
#matchLoading .loadingArt[hidden] { display:none; }
#matchLoading::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,var(--hud-surface-canvas),transparent 28%,transparent 45%,var(--hud-surface-canvas) 92%);
}
@media (max-width:600px) { #matchLoading .loadingArt { object-position:45% 36%; } }
@media (max-height:500px) { #matchLoading { padding-top:calc(var(--hud-space-3) + env(safe-area-inset-top,0px)); padding-bottom:calc(var(--hud-space-3) + env(safe-area-inset-bottom,0px)); } }
/* Punk sticker: the fades over the art become hard scrim bands with keyline edges, the brand and hero
   name are sticker type, and the progress bar is flat, stepping instead of sweeping. */
html body.hud-theme-sticker :is(#homeLoading,#matchLoading)::after{background:linear-gradient(180deg,var(--hud-sticker-scrim) 0 calc(20% - 3px),var(--hud-sticker-keyline) calc(20% - 3px) 20%,transparent 20% 62%,var(--hud-sticker-keyline) 62% calc(62% + 3px),var(--hud-sticker-scrim) calc(62% + 3px));}
html body.hud-theme-sticker :is(.loadingBrand strong,.loadingHero){-webkit-text-stroke:5px var(--hud-sticker-keyline);paint-order:stroke fill;text-shadow:0 3px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker .loadingFooter progress{background:var(--hud-sticker-wall);box-shadow:0 0 0 2px var(--hud-sticker-keyline),0 3px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker .loadingFooter progress::-webkit-progress-bar{background:var(--hud-sticker-wall);}
html body.hud-theme-sticker .loadingFooter progress::-webkit-progress-value{background:var(--hud-accent);}
html body.hud-theme-sticker .loadingFooter progress::-moz-progress-bar{background:var(--hud-accent);}
html body.hud-theme-sticker .loadingFooter progress:indeterminate{background:repeating-linear-gradient(90deg,var(--hud-accent) 0 12px,var(--hud-sticker-wall) 12px 24px);animation:loadingStep .6s steps(4) infinite;}
@keyframes loadingStep{to{background-position:24px 0;}}
@media (prefers-reduced-motion:reduce){html body.hud-theme-sticker .loadingFooter progress:indeterminate{animation:none;}}