/* ============================================================
   Shared hero detail popover — loaded by both index.html and
   team-ups.html (see js/hero-detail.js). Kept self-contained: its
   own keyframes, and var() fallbacks for tokens a host page might
   not define (--anchor, --font-display, --ease), so it drops in
   anywhere the base palette (--bg-panel, --ink, role colours) exists.
   ============================================================ */
.detail-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.detail-modal[hidden] { display: none; }
.detail-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 7, 16, 0.78); backdrop-filter: blur(3px);
  animation: hd-fade 160ms var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}
.detail-panel {
  position: relative; width: min(460px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--bg-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 26px rgba(242, 199, 68, 0.12);
  animation: hd-pop 200ms var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}
.detail-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(11, 14, 26, 0.85);
  transition: background 140ms ease, transform 140ms ease, color 140ms ease, border-color 140ms ease;
}
.detail-close:hover, .detail-close:focus-visible {
  background: var(--gold); color: #1a1400; transform: scale(1.08); border-color: var(--gold);
}
.detail-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.detail-body {
  overflow-y: auto; padding: 20px;
  /* Match the app's themed scrollbars. Fallbacks cover pages that don't define
     the --scroll-* tokens (e.g. team-ups.html), so the popover looks the same
     everywhere regardless of its host. */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, #303a6b) var(--scroll-track, var(--bg, #0b0e1a));
}
.detail-body::-webkit-scrollbar { width: 10px; height: 10px; }
.detail-body::-webkit-scrollbar-track { background: var(--scroll-track, var(--bg, #0b0e1a)); }
.detail-body::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb, #303a6b); border-radius: 8px;
  border: 2px solid var(--scroll-track, var(--bg, #0b0e1a)); background-clip: padding-box;
}
.detail-body::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover, #4a5699); background-clip: padding-box;
}

.detail-head { display: flex; align-items: center; gap: 14px; margin: 0 34px 16px 0; }
.detail-portrait {
  width: 60px; height: 60px; flex: none; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--line); background: #10142c; display: block;
}
.detail-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-portrait .fallback {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 700; font-size: 22px; color: var(--ink-dim);
}
.detail-name {
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 700; font-size: 22px; margin: 0 0 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.detail-sub { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-role {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 9px 3px; border-radius: 5px; border: 1px solid currentColor;
}
.detail-role.role-vanguard { color: var(--vanguard); }
.detail-role.role-duelist { color: var(--duelist); }
.detail-role.role-strategist { color: var(--strategist); }
.detail-stats { color: var(--ink-dim); font-size: 13px; }

.detail-abilities { list-style: none; margin: 0; padding: 0; }
.detail-ability { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.detail-ability:first-child { border-top: 0; }
/* Ability art from the game files. Icons come in two shapes — 88×88 ability
   squares and wide 128×43 attack bars — so `contain` fits both without
   cropping. A same-size placeholder keeps rows aligned for the ~quarter of
   abilities the dataminer has no icon for. */
.ab-icon {
  width: 40px; height: 40px; flex: none; margin-top: 1px; display: block;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-raise); overflow: hidden; object-fit: contain;
}
.ab-main { flex: 1; min-width: 0; }
.ab-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ab-tag {
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-dim); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}
.ab-tag-ultimate { color: var(--gold); border-color: rgba(242, 199, 68, 0.5); }
.ab-tag-teamup { color: var(--anchor, #b585ff); border-color: rgba(181, 133, 255, 0.5); }
.ab-name-h {
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.ab-meta { margin-left: auto; display: flex; gap: 6px; }
.ab-stat {
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 600; font-size: 11px; color: var(--ink-dim);
  background: var(--bg-raise); border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.ab-desc { margin: 5px 0 0; font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.ab-desc .ab-name { color: var(--gold); font-weight: 600; }
.ab-desc .ab-buff { color: var(--strategist); }
.ab-desc .ab-debuff { color: var(--duelist); }
/* Key-bind action chip, e.g. {Jump} -> a small keycap. */
.ab-key {
  font-family: var(--font-display, "Rajdhani", sans-serif); font-weight: 600; font-size: 11px;
  color: var(--ink); background: var(--bg-raise); border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  border-radius: 4px; padding: 0 5px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em;
}
.detail-empty { color: var(--ink-dim); font-style: italic; margin: 8px 0 0; }

@keyframes hd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-backdrop, .detail-panel { animation: none; }
}