/* Loader screens (loader.js): the avionics kit header, a kit bar driven by real bytes, the phase line, the run item
   list, the stall hint and the action keys; plus the menu-time background indicator. Palette and font come from the
   kit tokens (.av-site: violet + gold, Russo One), like the game's boot loader (assets/tuning/boot.json). */
.loading { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #161230 0%, var(--av-page) 70%); z-index: 30; padding: 16px; }
.loader-card { width: min(560px, 92vw); display: grid; gap: 12px; font-family: var(--av-font); }
.loading .av-head { width: 100%; }
.loader-bar { height: 12px; }
/* Moving sheen over the fill: the screen is never frozen, even when a big file is mid-download. */
.loader-bar > i { background-image: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 45%, transparent 60%);
  background-color: var(--tone); background-size: 220% 100%; animation: loader-sheen 1.4s linear infinite; transition: width .25s ease-out; }
@keyframes loader-sheen { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.loader-meta { display: flex; justify-content: space-between; font-size: 14px; color: var(--av-label); letter-spacing: .04em; }
.loader-items { list-style: none; margin: 0; padding: 10px 13px; display: grid; gap: 6px; border: 2px solid #1b1636; border-radius: 9px; background: var(--av-glass); }
.loader-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--av-hint); }
.loader-items li::before { content: '○'; width: 1.2em; color: var(--av-hint); }
.loader-items li[data-state="load"] { color: var(--av-text); }
.loader-items li[data-state="load"]::before { content: '◐'; color: var(--av-gold); animation: loader-spin 1s steps(4) infinite; display: inline-block; }
.loader-items li[data-state="done"] { color: var(--av-label); }
.loader-items li[data-state="done"]::before { content: '✓'; color: var(--av-green); }
.loader-items li[data-state="fail"] { color: var(--av-red); }
.loader-items li[data-state="fail"]::before { content: '!'; color: var(--av-red); }
.loader-item-name { flex: 1; }
.loader-item-size { color: var(--av-gold); font-size: 13px; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
.loader-hint { margin: 0; font-size: 14px; color: var(--av-amber); }
.loader-actions { display: flex; gap: 12px; justify-content: center; }
.loader-actions[hidden], .loader-items[hidden], .loader-hint[hidden] { display: none; }
.loader-key { width: 96px; height: 81px; }
/* Error, missing WebGL and graphics reset: red and amber tones, longer reason text. */
.loading[data-state="error"] .loader-bar, .loading[data-state="nowebgl"] .loader-bar { --tone: var(--av-red); --v: 1 !important; }
.loading[data-state="error"] .loader-bar > i, .loading[data-state="nowebgl"] .loader-bar > i, .loading[data-state="lost"] .loader-bar > i { animation: none; }
.loading[data-state="lost"] .loader-bar { --tone: var(--av-amber); --v: 1 !important; }
.loading[data-state="error"] .av-objective > .o, .loading[data-state="nowebgl"] .av-objective > .o { color: var(--av-red); }
.loading[data-state="error"] .sub, .loading[data-state="nowebgl"] .sub, .loading[data-state="lost"] .sub { color: var(--av-text); font-size: 15px; }
.loading[data-state="error"] .loader-meta, .loading[data-state="nowebgl"] .loader-meta, .loading[data-state="lost"] .loader-meta { color: var(--av-hint); font-size: 12px; }

/* Menu-time background indicator: bottom-centre pill (clear of the menu column, settings and news) with the current item and a thin bar. */
.bgload { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 25; display: grid; gap: 5px; min-width: 200px; padding: 8px 12px;
  border: 1.5px solid var(--av-divider); border-radius: 9px; background: color-mix(in srgb, var(--av-glass) 82%, transparent);
  font: 12px/1.2 var(--av-font); color: var(--av-label); letter-spacing: .06em; pointer-events: none; }
.bgload-bar { height: 4px; --tone: var(--av-gold); }
.bgload-bar > i { transition: width .3s ease-out; }