/* VANTA BLACK — shared 3D world chrome.

   Only what NEXUS's stylesheet does not already provide. The world HUD reuses
   .hud, .hud-top, .hud-brand, .hud-prompt, .hud-chip, .hud-perf, .joystick,
   .mbtn and .look-area from nexus.css, so this file stays small on purpose. */

/* The world mounts inside the platform's game stage. `isolation` keeps the
   world HUD's z-indexes contained so the platform's pause and results overlays
   (z-index 5 in vanta.css) always win. */
.world-mount { position: absolute; inset: 0; z-index: 1; isolation: isolate; }
.world-mount canvas { display: block; width: 100%; height: 100%; }
.world-mount.finished { pointer-events: none; }

.world-root { position: fixed; inset: 0; overflow: hidden; background: #000; }
.world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------------- loading ---------------- */
.world-loading {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 40%, #17132a 0%, #060509 70%);
  transition: opacity 0.6s ease;
}
.world-loading.done { opacity: 0; pointer-events: none; }
.world-loading h2 { font-size: 26px; letter-spacing: 0.3em; margin-left: 0.3em; text-align: center; padding: 0 16px; }
.world-loading .wl-status { color: var(--text-dim); font-size: 13.5px; }
.world-loading .wl-bar { width: min(300px, 70vw); height: 4px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.world-loading .wl-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 0.4s; }
.world-loading .wl-tip { color: var(--text-faint); font-size: 12.5px; margin-top: 12px; font-style: italic; max-width: 34ch; text-align: center; }

/* ---------------- objectives ---------------- */
.w3-objectives {
  position: absolute; left: 16px; top: 84px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px; max-width: min(300px, 60vw);
}
.w3-objectives li {
  display: flex; align-items: center; gap: 8px;
  background: rgba(8, 7, 12, 0.62); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 11px; font-size: 13px;
  backdrop-filter: blur(6px);
}
.w3-objectives li.done { opacity: 0.55; }
.w3-objectives li.done .w3-label { text-decoration: line-through; }
.w3-objectives li.bonus { border-style: dashed; }
.w3-tick { color: var(--lav); font-size: 12px; width: 12px; text-align: center; }
.w3-objectives li.done .w3-tick { color: var(--ok, #7fd8a0); }
.w3-label { flex: 1; color: var(--text); }
.w3-count { color: var(--lav); font-variant-numeric: tabular-nums; font-family: var(--font-display); }

/* ---------------- vitals ---------------- */
.w3-vitals { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.w3-timer {
  font-family: var(--font-display); font-size: 21px; font-variant-numeric: tabular-nums;
  color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); letter-spacing: 0.06em;
}
.w3-timer.urgent { color: var(--danger, #d8607b); animation: w3pulse 1s ease-in-out infinite; }
.w3-health {
  width: 168px; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(8, 7, 12, 0.75); border: 1px solid var(--line);
}
.w3-health i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #d8607b, #e6cf8f);
  transition: width 0.25s ease;
}

/* ---------------- banner ---------------- */
.w3-banner {
  position: absolute; left: 50%; top: 26%; transform: translate(-50%, -8px);
  padding: 10px 20px; border-radius: 11px; font-size: 15px; text-align: center;
  background: rgba(8, 7, 12, 0.82); border: 1px solid var(--line-strong);
  color: var(--text); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: min(440px, 84vw); pointer-events: none;
}
.w3-banner.show { opacity: 1; transform: translate(-50%, 0); }
.w3-banner.k-warn { border-color: var(--gold, #e6cf8f); color: var(--gold, #e6cf8f); }
.w3-banner.k-danger { border-color: var(--danger, #d8607b); color: var(--danger, #d8607b); }
.w3-banner.k-good { border-color: var(--lav); color: var(--lav); }

@keyframes w3pulse { 50% { opacity: 0.55; } }

.reduced-motion .w3-timer.urgent { animation: none; }

@media (max-width: 720px) {
  .w3-objectives { top: 74px; font-size: 12px; max-width: 54vw; }
  .w3-health { width: 120px; }
}