/* =====================================================
   Legend — product pages (unjaded.net/legend/*)
   Layers Legend's own identity (deep navy + video-game
   rarity colors) on top of the shared Unjaded site.css.
   ===================================================== */

:root {
  /* Legend brand navy + rarity spectrum (gray -> gold) */
  --bg: #0b0d12;
  --bg-alt: #12151d;
  --surface: #171c27;
  --line: #262d3a;
  --text: #e7ecf3;
  --text-dim: #9aa6b8;
  /* Repoint the shared gold/steel accents to Legend's palette */
  --steel: #4c8bf5;
  --steel-bright: #7db0ff;
  --gold: #f5a623;
  --gold-bright: #ffc24b;

  --r-common: #9aa2b1;
  --r-uncommon: #2fbf71;
  --r-rare: #4c8bf5;
  --r-epic: #a855f7;
  --r-legendary: #f5a623;
}

/* ===== Legend hero ===== */
.lg-hero {
  background:
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(76, 139, 245, 0.16), transparent),
    radial-gradient(ellipse 60% 55% at 15% 85%, rgba(245, 166, 35, 0.1), transparent);
  padding: 5.5rem 0 4rem;
  text-align: center;
}
.lg-hero img.lg-mark {
  width: 132px;
  height: 132px;
  border-radius: 28px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  margin-bottom: 1.5rem;
}
.lg-hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: -0.01em;
}
.lg-hero .lg-tag {
  color: var(--gold-bright);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  margin-top: 0.5rem;
}
.lg-hero .lg-lead {
  color: var(--text-dim);
  max-width: 620px;
  margin: 1.25rem auto 2rem;
  font-size: 1.1rem;
}
.lg-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== Rarity strip ===== */
.rarity {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.rarity .tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 0.5rem;
  text-align: center;
  background: var(--surface);
}
.rarity .dot {
  width: 26px; height: 26px; border-radius: 50%;
  margin: 0 auto 0.6rem;
  box-shadow: 0 0 18px currentColor;
}
.rarity .tier strong { display: block; font-size: 0.95rem; }
.rarity .tier span { color: var(--text-dim); font-size: 0.78rem; }

/* ===== Feature grid ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.feature:hover { transform: translateY(-4px); border-color: var(--steel); }
.feature .ficon { font-size: 1.5rem; margin-bottom: 0.75rem; }
.feature h3 { margin-bottom: 0.4rem; }
.feature p { color: var(--text-dim); font-size: 0.93rem; }

/* ===== Device showcase ===== */
.showcase {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.device {
  width: 260px;
  border-radius: 34px;
  padding: 12px;
  background: #05070b;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.device img { width: 100%; border-radius: 24px; display: block; }

/* ===== Simple top bar for subpages ===== */
.lg-topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 13, 18, 0.9);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 100;
}
.lg-topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.8rem; padding-bottom: 0.8rem;
}
.lg-topbar .brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 700; }
.lg-topbar .brand img { height: 30px; width: 30px; border-radius: 8px; }
.lg-topbar .back { color: var(--text-dim); font-size: 0.9rem; }

/* ===== Policy document ===== */
.policy { max-width: 760px; margin: 0 auto; padding: 3.5rem 0; }
.policy h1 { margin-bottom: 0.5rem; }
.policy .updated { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 2rem; }
.policy h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; color: var(--steel-bright); }
.policy p, .policy li { color: var(--text-dim); }
.policy ul { margin: 0.5rem 0 1rem 1.25rem; }
.policy li { margin-bottom: 0.4rem; }
.policy strong { color: var(--text); }
.policy .short {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rarity { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
}