/* DeadlockGuide — "City Never Sleeps" neon-noir theme.
   Occult 1940s New York: neon signs, art deco gold, mystical purple/teal. */

:root {
  --bg: #0a0812;
  --bg2: #100c1a;
  --card: #151022;
  --card2: #1b1430;
  --gold: #c9a227;
  --gold-dim: #8a6f1c;
  --gold-glow: rgba(201,162,39,0.45);
  --neon-purple: #a855f7;
  --neon-purple-glow: rgba(168,85,247,0.45);
  --neon-teal: #2dd4bf;
  --neon-teal-glow: rgba(45,212,191,0.4);
  --text: #ece5d8;
  --muted: #a39a86;
  --accent: #7b2ff7;
  --green: #3ddc84;
  --red: #ff5a5a;
  --blue: #4da6ff;
  --border: #2c2344;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #06040d; }
body {
  background: transparent;
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  animation: pageFade 0.6s ease-out;
}

/* ---------- Site-wide atmosphere: "City Never Sleeps" layered background ----------
   Layer stack (all on body::before, fixed, behind content):
   1. vignette — darkened edges for depth
   2. art-deco diamond lattice — faint gold/purple geometry
   3-5. aurora glows — slow-drifting purple / teal / gold nebulae
   body::after carries rising ember particles. CSS-only, GPU-friendly. */
body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 115% 85% at 50% 42%, transparent 52%, rgba(3,2,9,0.82) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1' stroke-opacity='0.30'%3E%3Cpath d='M48 6 L90 48 L48 90 L6 48 Z'/%3E%3Cpath d='M48 24 L72 48 L48 72 L24 48 Z'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='2.4' fill='%23a855f7' fill-opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 52% 36% at 16% 10%, rgba(123,47,247,0.20), transparent 70%),
    radial-gradient(ellipse 46% 34% at 86% 90%, rgba(45,212,191,0.11), transparent 70%),
    radial-gradient(ellipse 38% 28% at 80% 6%, rgba(201,162,39,0.09), transparent 70%),
    radial-gradient(ellipse 42% 30% at 8% 82%, rgba(123,47,247,0.10), transparent 70%);
  background-size: auto, 96px 96px, auto, auto, auto, auto;
  animation: bgDrift 70s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgDrift {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1); }
  to { transform: translate3d(1.6%, 1.2%, 0) scale(1.03); }
}
/* Rising ember particles — occult city sparks drifting upward */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 104vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  box-shadow:
    -42vw 8vh 0 0 rgba(201,162,39,0.55), -36vw 34vh 0 0 rgba(168,85,247,0.45),
    -28vw 62vh 0 0 rgba(45,212,191,0.42), -21vw 20vh 0 0 rgba(201,162,39,0.38),
    -14vw 88vh 0 0 rgba(168,85,247,0.5), -7vw 48vh 0 0 rgba(45,212,191,0.36),
    -2vw 74vh 0 0 rgba(201,162,39,0.44), 4vw 12vh 0 0 rgba(168,85,247,0.42),
    11vw 56vh 0 0 rgba(45,212,191,0.5), 17vw 28vh 0 0 rgba(201,162,39,0.4),
    24vw 82vh 0 0 rgba(168,85,247,0.46), 30vw 6vh 0 0 rgba(45,212,191,0.38),
    37vw 44vh 0 0 rgba(201,162,39,0.52), 43vw 70vh 0 0 rgba(168,85,247,0.4),
    -45vw 96vh 0 0 rgba(45,212,191,0.34), 8vw 100vh 0 0 rgba(201,162,39,0.42),
    -33vw 108vh 0 0 rgba(168,85,247,0.44), 28vw 112vh 0 0 rgba(45,212,191,0.4);
  animation: emberRise 52s linear infinite;
}
@keyframes emberRise {
  from { transform: translateY(0); }
  to { transform: translateY(-225vh); }
}

/* --------------------------------------------------------------------------
   QA mobile fixes (Oct 15 2026) — 390px viewport polish
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 1. index.html: landing-hero negative margin caused 24px horizontal overflow */
  .landing-hero { margin: 0 -1rem; }

  /* 2. fan-art.html: banner heading wraps badly — smaller, tighter */
  .page-hero h1 { font-size: 1.45rem; letter-spacing: 1px; line-height: 1.25; }

  /* 3. patch-tracker.html: hero picker grid too dense at 5-across */
  .hero-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.7rem; }

  /* 4. map.html + movement.html: wide tables get horizontal scroll instead of crushing */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 520px; }

  /* 5. map.html: lore notes toggle — stack label under title instead of squeezing */
  summary .lore-tag { display: block; margin-top: 0.25rem; }

  /* 6. timer.html: keep objective names compact on narrow screens */
  .obj-row .obj-name { font-size: 0.92rem; }
  .obj-row .obj-sub { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Header ---------- */
header {
  background: linear-gradient(180deg, rgba(20,14,36,0.97) 0%, rgba(10,8,18,0.94) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(201,162,39,0.25), 0 4px 24px rgba(0,0,0,0.5);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 200;
  transition: transform 0.35s ease;
}
header.header-hidden {
  transform: translateY(-110%);
}
.logo {
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 0;
  padding: 0.4rem 0 0.2rem;
}
.logo .wordmark {
  height: 120px;
  width: auto;
  max-width: min(680px, 88vw);
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.25));
  transition: filter 0.25s ease;
}
.logo:hover .wordmark { filter: drop-shadow(0 0 22px rgba(212,175,55,0.45)); }
@media (max-width: 640px) {
  .logo .wordmark { height: 84px; max-width: 92vw; }
}

/* Animated golden ripple sweep across the wordmark */
.wordmark-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  border-radius: 4px;
}
.wordmark-wrap::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 28%;
  background: linear-gradient(105deg,
    rgba(255,215,130,0) 0%,
    rgba(255,215,130,0.12) 35%,
    rgba(255,235,180,0.55) 50%,
    rgba(255,215,130,0.12) 65%,
    rgba(255,215,130,0) 100%);
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: wordmark-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wordmark-shine {
  0%, 8% { left: -30%; opacity: 0; }
  12% { opacity: 1; }
  52% { left: 110%; opacity: 1; }
  56%, 100% { left: 110%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark-wrap::after { animation: none; }
}

.main-nav {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.main-nav .nav-pill {
  appearance: none;
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  cursor: pointer;
  color: var(--muted);
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  transition: all 0.25s ease;
  border: 1px solid rgba(120,110,160,0.25);
  background: rgba(20,16,32,0.6);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}
.main-nav .nav-icon { display: inline-flex; transition: all 0.25s ease; }
.main-nav .nav-icon svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.main-nav .nav-pill:hover .nav-icon svg { opacity: 1; transform: scale(1.15); }
.main-nav .nav-pill.active .nav-icon svg { opacity: 1; }
.lane-dot { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; margin-right: 0.35em; box-shadow: 0 0 8px currentColor; vertical-align: baseline; }
.main-nav .nav-pill:hover {
  color: #fff;
  border-color: var(--neon-teal);
  box-shadow: 0 0 16px rgba(45,212,191,0.35), inset 0 0 8px rgba(45,212,191,0.08);
  transform: translateY(-2px);
}

.main-nav .nav-pill.active {
  color: #0d0b12;
  background: linear-gradient(135deg, var(--gold) 0%, #f0d060 50%, var(--gold) 100%);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 2px 8px rgba(0,0,0,0.4);
  font-weight: 800;
}


/* ---------- Layout ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 4rem; }
main.page { padding-top: 2.5rem; }

/* ---------- Page hero (all interior pages) ---------- */
.page-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 2rem 0 2.5rem;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), inset 0 0 60px rgba(123,47,247,0.08);
}
.page-hero .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: saturate(1.1);
}
.page-hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,8,18,0.25) 0%, rgba(10,8,18,0.88) 100%),
              linear-gradient(90deg, rgba(123,47,247,0.18) 0%, transparent 60%);
}
.page-hero .content {
  position: relative;
  padding: 2.5rem 2.2rem 1.8rem;
  z-index: 2;
}
.page-hero h1, .page-hero h2 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 24px var(--neon-purple-glow), 0 2px 8px rgba(0,0,0,0.8);
  border: none;
  margin: 0 0 0.4rem;
  padding: 0;
}
.page-hero p {
  color: #cfc6b4;
  font-size: 1.05rem;
  max-width: 620px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
/* art deco corner ticks */
.page-hero::before, .page-hero::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--gold);
  z-index: 3;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px var(--gold-glow));
}
.page-hero::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.page-hero::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }

/* ---------- Homepage hero ---------- */
.landing-hero {
  position: relative;
  margin: 0 -1.5rem;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.landing-hero .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
  animation: heroDrift 24s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.06) translateY(-12px); }
}
.landing-hero .overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(10,8,18,0.15) 0%, rgba(10,8,18,0.82) 100%),
    linear-gradient(180deg, rgba(10,8,18,0.55) 0%, rgba(10,8,18,0.25) 40%, rgba(10,8,18,0.95) 100%);
}
.landing-hero .content {
  position: relative;
  z-index: 2;
  padding: 5rem 1.5rem 4rem;
  max-width: 900px;
  animation: heroRise 0.9s ease-out;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.landing-hero .kicker {
  font-size: 0.85rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--neon-teal);
  text-shadow: 0 0 14px var(--neon-teal-glow);
  margin-bottom: 1rem;
  font-weight: 600;
}
.landing-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(3.2rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: 10px;
  text-transform: uppercase;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff6d8 0%, var(--gold) 55%, #8a6f1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(201,162,39,0.35)) drop-shadow(0 4px 10px rgba(0,0,0,0.9));
  margin-bottom: 1.2rem;
}
.landing-hero .tagline {
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: #d8cfbd;
  max-width: 680px;
  margin: 0 auto 2.2rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95);
}
.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.2rem;
  border-radius: 10px;
  transition: all 0.25s;
}
.btn-gold {
  color: #0a0812;
  background: linear-gradient(180deg, #e8c84a, var(--gold) 60%, #a88420);
  box-shadow: 0 0 24px var(--gold-glow), 0 4px 14px rgba(0,0,0,0.5);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(201,162,39,0.65), 0 6px 18px rgba(0,0,0,0.5);
}
.btn-ghost {
  color: var(--neon-teal);
  border: 1px solid rgba(45,212,191,0.55);
  background: rgba(45,212,191,0.06);
  box-shadow: 0 0 16px rgba(45,212,191,0.12), inset 0 0 12px rgba(45,212,191,0.05);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(45,212,191,0.12);
  box-shadow: 0 0 28px rgba(45,212,191,0.3);
}
/* deco divider under hero */
.deco-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem auto;
  max-width: 720px;
  color: var(--gold);
}
.deco-divider::before, .deco-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.deco-divider::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.deco-divider span { font-size: 1.1rem; text-shadow: 0 0 10px var(--gold-glow); }

/* ---------- Headings ---------- */
h2 {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 3rem 0 1.1rem;
  padding-bottom: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: none;
  position: relative;
  text-shadow: 0 0 16px rgba(201,162,39,0.25);
}
h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--neon-purple) 45%, transparent 100%);
  box-shadow: 0 0 10px rgba(168,85,247,0.4);
}
h3 { color: var(--text); font-size: 1.2rem; margin: 1.6rem 0 0.6rem; font-weight: 700; }
p { margin-bottom: 1rem; color: var(--text); }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(160deg, var(--card2) 0%, var(--card) 70%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem;
  margin: 1rem 0;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.6), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(168,85,247,0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(168,85,247,0.18);
}
.card:hover::before { opacity: 1; }
.card h3 { margin-top: 0; color: var(--gold); font-family: 'Cinzel', serif; letter-spacing: 1px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin: 1.2rem 0; }

/* feature cards (homepage guide links) */
.feature-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0;
}
.feature-card .img-head {
  height: 150px;
  background-size: cover;
  background-position: center 25%;
  position: relative;
  border-radius: 12px 12px 0 0;
}
.feature-card .img-head::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(21,16,34,0.95) 100%);
  border-radius: 12px 12px 0 0;
}
.feature-card .body { padding: 1.2rem 1.4rem 1.4rem; }
.feature-card .body h3 { margin-top: 0; }
.feature-card .go {
  color: var(--neon-teal);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(45,212,191,0.3);
}

/* ---------- Tags ---------- */
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: 4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tag.weapon { background: rgba(255,90,90,0.14); color: var(--red); border: 1px solid var(--red); box-shadow: 0 0 10px rgba(255,90,90,0.15); }
.tag.vitality { background: rgba(61,220,132,0.12); color: var(--green); border: 1px solid var(--green); box-shadow: 0 0 10px rgba(61,220,132,0.12); }
.tag.spirit { background: rgba(194,136,240,0.16); color: #c288f0; border: 1px solid #c288f0; box-shadow: 0 0 10px rgba(194,136,240,0.2); }
.tag.tip { background: rgba(201,162,39,0.12); color: var(--gold); border: 1px solid var(--gold-dim); box-shadow: 0 0 10px rgba(201,162,39,0.12); }
.tag.new { background: rgba(45,212,191,0.12); color: var(--neon-teal); border: 1px solid var(--neon-teal); box-shadow: 0 0 10px rgba(45,212,191,0.2); }

ul, ol { margin: 0.6rem 0 1rem 1.4rem; }
li { margin-bottom: 0.45rem; }
.tip-box {
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(201,162,39,0.09), rgba(201,162,39,0.02));
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  border-radius: 0 10px 10px 0;
  box-shadow: inset 0 0 24px rgba(201,162,39,0.04);
}
.tip-box strong { color: var(--gold); }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
th {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-family: 'Cinzel', serif;
}
tr:hover td { background: rgba(168,85,247,0.06); }
footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(20,14,36,0.6));
}
footer a { color: var(--gold-dim); }
kbd {
  background: #2a2340;
  border: 1px solid #3d3358;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-family: monospace;
  font-size: 0.88rem;
}

/* ---------- Images ---------- */
.hero-banner {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 0 30px rgba(201,162,39,0.15), 0 8px 30px rgba(0,0,0,0.5);
  margin: 1.5rem 0;
  display: block;
}
.hero-card-img {
  width: 100%;
  max-width: 220px;
  height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.8rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  transition: transform 0.25s, filter 0.25s;
}
.card:hover .hero-card-img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 18px rgba(168,85,247,0.55)) drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.card .hero-card-img + h3 { margin-top: 0; }
.shot {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  margin: 1rem 0;
  display: block;
}
.shot-caption {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin: -0.5rem 0 1.2rem;
}
.struct-row { display: flex; gap: 1.2rem; align-items: flex-start; margin: 0.5rem 0; }
.struct-row img {
  width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--border); background: #14111c;
  box-shadow: 0 0 16px rgba(168,85,247,0.25);
}
.struct-row .struct-text { flex: 1; min-width: 0; }
.struct-row .struct-text h3 { margin-top: 0; }
@media (max-width: 560px) {
  .struct-row { flex-direction: column; align-items: center; text-align: center; }
  .struct-row img { width: 140px; height: 140px; }
}
.image-credit { color: var(--muted); font-size: 0.8rem; }
.item-icon { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border); background: #14111c; box-shadow: 0 0 8px rgba(123,47,247,0.25);
  vertical-align: middle; }
td .item-icon { width: 32px; height: 32px; margin-right: 0.4rem; }
.stamina-demo { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.5rem; }
.stamina-demo .pip {
  width: 34px; height: 14px; border-radius: 7px;
  background: linear-gradient(135deg, #2dd4bf, #0ea5e9);
  box-shadow: 0 0 10px rgba(45,212,191,0.5);
  animation: pip-pulse 2.4s ease-in-out infinite;
}
.stamina-demo .pip:nth-child(2) { animation-delay: 0.3s; }
.stamina-demo .pip:nth-child(3) { animation-delay: 0.6s; }
.stamina-demo .pip-label { color: var(--muted); font-size: 0.85rem; margin-left: 0.4rem; }
@keyframes pip-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .stamina-demo .pip { animation: none; } }
.phase-timeline { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 2rem 0 1rem; flex-wrap: wrap; }
.phase-node { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.phase-node img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
  border: 2px solid var(--gold-dim); background: #14111c;
  box-shadow: 0 0 18px rgba(201,162,39,0.3); }
.phase-node .phase-time { font-size: 0.75rem; color: var(--gold); font-weight: 700; letter-spacing: 0.5px; }
.phase-node .phase-name { font-size: 0.95rem; font-weight: 600; }
.phase-line { flex: 1; min-width: 40px; max-width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--gold-dim), #a855f7, var(--gold-dim)); border-radius: 1px; }

/* new-hero spotlight strip */
.spotlight {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0.2rem 1rem;
  scroll-snap-type: x mandatory;
}
.spotlight .spot-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  text-align: center;
  background: linear-gradient(160deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.spotlight .spot-card:hover {
  transform: translateY(-4px);
  border-color: var(--neon-teal);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 22px rgba(45,212,191,0.2);
}
.spotlight .spot-card img {
  width: 130px; height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(168,85,247,0.4));
  margin-bottom: 0.5rem;
}
.spotlight .spot-card h4 {
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.spotlight .spot-card p { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.stat {
  text-align: center;
  background: linear-gradient(160deg, rgba(27,20,48,0.9), rgba(21,16,34,0.9));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 0.8rem;
}
.stat .num {
  font-family: 'Cinzel', serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--neon-teal);
  text-shadow: 0 0 18px var(--neon-teal-glow);
}
.stat .lbl {
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* item database bits (kept intact) */
.search-bar { margin: 1.5rem 0; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.search-bar input {
  flex: 1; min-width: 220px; padding: 0.7rem 1rem; font-size: 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.search-bar input:focus { outline: none; border-color: var(--neon-purple); box-shadow: 0 0 14px rgba(168,85,247,0.25); }
.filter-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-btns button {
  padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 0.85rem;
  transition: all 0.2s;
}
.filter-btns button.active { color: var(--gold); border-color: var(--gold-dim); background: rgba(201,162,39,0.08); box-shadow: 0 0 12px rgba(201,162,39,0.15); }
.item-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 0.5rem 0;
}
.item-card h4 { color: var(--text); font-size: 1.02rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.item-card p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.item-card p strong { color: var(--text); }
.badge {
  font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.badge.active { background: rgba(168,85,247,0.18); color: #c084fc; border: 1px solid var(--neon-purple); }
.badge.passive { background: rgba(154,145,126,0.12); color: var(--muted); border: 1px solid #3d3358; }
.badge.cost { background: rgba(201,162,39,0.1); color: var(--gold); border: 1px solid var(--gold-dim); }
.tier-section { margin-bottom: 0.5rem; }
.count-note { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.no-results { display: none; text-align: center; padding: 3rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  header { padding: 0.9rem 1rem; }
  .logo { font-size: 1.35rem; }
  .main-nav .nav-pill { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
  .landing-hero { min-height: 62vh; }
  .landing-hero h1 { letter-spacing: 5px; }
  .page-hero { min-height: 170px; }
  .page-hero h1, .page-hero h2 { font-size: 1.7rem; letter-spacing: 2px; }
  .page-hero .content { padding: 1.8rem 1.4rem 1.4rem; }
  h2 { font-size: 1.35rem; }
  .spotlight .spot-card { flex-basis: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.combo-duo { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.combo-duo img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
.combo-duo .plus { font-size: 1.6rem; color: var(--gold); font-weight: 800; text-shadow: 0 0 12px rgba(201,162,39,0.6); }
.combo-seq { background: rgba(168,85,247,0.08); border-left: 3px solid var(--accent); padding: 0.6rem 0.8rem; border-radius: 0 8px 8px 0; margin: 0.7rem 0; font-size: 0.9rem; line-height: 1.6; }
.combo-seq strong { color: var(--neon-teal); }
.combo-why { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; }
.combo-why strong { color: var(--text); }
.combo-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem; }
.combo-tag.wombo { background: rgba(168,85,247,0.15); color: #c4a5ff; border: 1px solid rgba(168,85,247,0.4); }
.combo-tag.pick { background: rgba(45,212,191,0.12); color: #5eead4; border: 1px solid rgba(45,212,191,0.4); }
.combo-tag.dive { background: rgba(201,162,39,0.12); color: #f0d060; border: 1px solid rgba(201,162,39,0.4); }

/* ---------- Dropdown navigation ---------- */
.nav-dropdown { position: relative; }
.nav-caret {
  width: 0.85rem; height: 0.85rem; stroke: currentColor; fill: none;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-menu {
  display: none;
  position: absolute; top: calc(100% + 0.5rem); left: 0;
  min-width: 13.5rem;
  background: rgba(14,11,24,0.98);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.45rem;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 24px rgba(168,85,247,0.12);
}

/* Right-edge flip: last nav dropdown (Site) opens leftward so it never overflows the viewport */
@media (min-width: 641px) {
  .main-nav > .nav-dropdown:last-child .nav-menu { left: auto; right: 0; }
}
.nav-dropdown.open .nav-menu { display: block; animation: navDrop 0.18s ease-out; }
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.nav-menu a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.nav-menu a:hover { color: #fff; background: rgba(45,212,191,0.1); }
.nav-menu .nav-icon { display: inline-flex; flex-shrink: 0; }
.nav-menu .nav-icon svg { opacity: 0.65; }
.nav-menu a:hover .nav-icon svg, .nav-menu a.active .nav-icon svg { opacity: 1; }
.nav-menu a.active .nav-icon svg { stroke: var(--gold); }
.nav-menu a.active {
  color: var(--gold);
  background: rgba(201,162,39,0.12);
  font-weight: 700;
}
.main-nav .nav-toggle.active-parent {
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 14px rgba(201,162,39,0.3);
}
@media (max-width: 640px) {
  .main-nav { gap: 0.4rem; }
  .nav-dropdown { position: static; }
  .nav-menu {
    left: 1rem; right: 1rem;
    min-width: 0;
    max-height: 70vh; overflow-y: auto;
  }
  .nav-menu a { white-space: normal; }
}

/* DLdle — daily hero guessing game */
.dldle { max-width: 900px; margin: 1.5rem auto; padding: 0; overflow: visible; position: relative; z-index: 50; }
.dldle-banner { background: linear-gradient(120deg, rgba(168,85,247,0.22), rgba(45,212,191,0.12) 55%, rgba(201,162,39,0.16)); border-bottom: 1px solid var(--border); padding: 1.6rem 1.6rem 1.2rem; text-align: center; border-radius: 12px 12px 0 0; }
.dldle-kicker { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--neon-teal); margin-bottom: 0.4rem; }
.dldle-title { font-family: 'Cinzel Decorative', 'Cinzel', serif; font-size: 2.2rem; letter-spacing: 0.12em; margin: 0; background: linear-gradient(100deg, #c9a227 15%, #f7ecc8 42%, #c9a227 65%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dldle-sub { color: var(--muted); font-size: 0.92rem; margin: 0.5rem 0 0; }
.dldle-body { padding: 1.4rem 1.6rem 1.6rem; }
.dldle-how { display: flex; justify-content: center; gap: 0.5rem 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; font-size: 0.8rem; color: var(--muted); }
.dldle-how .sw { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 0.35rem; vertical-align: -2px; }
.sw-hit { background: linear-gradient(180deg,#4ade80,#16a34a); box-shadow: 0 0 10px rgba(34,197,94,0.6); }
.sw-close { background: linear-gradient(180deg,#fbbf24,#d97706); box-shadow: 0 0 10px rgba(245,158,11,0.6); }
.sw-miss { background: linear-gradient(180deg,#f87171,#dc2626); box-shadow: 0 0 10px rgba(239,68,68,0.6); }
.dldle-input-wrap { position: relative; max-width: 460px; margin: 0 auto 1.3rem; z-index: 9999; }
.dldle-input { width: 100%; box-sizing: border-box; padding: 0.9rem 1.2rem; font-size: 1.02rem; border-radius: 12px; border: 1px solid rgba(168,85,247,0.45); background: rgba(8,6,16,0.9); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.dldle-input::placeholder { color: rgba(160,160,180,0.55); }
.dldle-input:focus { outline: none; border-color: var(--neon-purple); box-shadow: 0 0 22px rgba(168,85,247,0.4); }
.dldle-input:disabled { opacity: 0.4; }
.dldle-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: rgba(18,14,34,0.995); border: 1px solid rgba(168,85,247,0.5); border-radius: 12px; max-height: 320px; overflow-y: auto; z-index: 99999; display: none; box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 24px rgba(168,85,247,0.25); padding: 6px; }
.dldle-suggest.open { display: block; }
.dldle-suggest button { display: flex; align-items: center; gap: 0.75rem; width: 100%; box-sizing: border-box; padding: 0.55rem 0.75rem; background: none; border: none; border-radius: 9px; color: var(--text); cursor: pointer; font-size: 0.96rem; text-align: left; font-family: inherit; }
.dldle-suggest button:hover, .dldle-suggest button:focus-visible { background: rgba(168,85,247,0.2); outline: none; }
.dldle-suggest img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid rgba(255,255,255,0.14); flex: none; }
.dldle-board { border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; background: rgba(0,0,0,0.25); padding: 1rem; }
.dldle-head, .dldle-row { display: grid; grid-template-columns: 58px repeat(6, minmax(0,1fr)); gap: 6px; align-items: stretch; }
.dldle-row .dldle-tiles { display: contents; }
.dldle-guess-name { display: none; }
.dldle-head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dldle-head span { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: center; align-self: center; }
.dldle-guesses { display: flex; flex-direction: column; gap: 7px; }
.dldle-guess-label { text-align: center; color: rgba(160,160,180,0.5); font-size: 0.85rem; padding: 1.4rem 0; }
.dldle-row { animation: dldleIn .3s ease; }
@keyframes dldleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dldle-hero { display: flex; align-items: center; justify-content: center; }
.dldle-hero img { width: 54px; height: 54px; border-radius: 11px; object-fit: cover; border: 1px solid rgba(201,162,39,0.5); box-shadow: 0 0 12px rgba(201,162,39,0.25); }
.dldle-tile { border-radius: 10px; padding: 0.55rem 0.3rem; text-align: center; font-size: 0.76rem; font-weight: 700; line-height: 1.35; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.dldle-tile .lbl { font-size: 0.55rem; font-weight: 500; opacity: 0.72; text-transform: uppercase; letter-spacing: 0.06em; }
.dldle-tile.hit { background: linear-gradient(180deg, rgba(34,197,94,0.38), rgba(34,197,94,0.2)); border: 1px solid #22c55e; color: #d9fbe8; box-shadow: 0 0 14px rgba(34,197,94,0.3), inset 0 1px 0 rgba(255,255,255,0.14); }
.dldle-tile.close { background: linear-gradient(180deg, rgba(245,158,11,0.36), rgba(245,158,11,0.18)); border: 1px solid #f59e0b; color: #fef3c7; box-shadow: 0 0 14px rgba(245,158,11,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
.dldle-tile.miss { background: linear-gradient(180deg, rgba(239,68,68,0.32), rgba(239,68,68,0.16)); border: 1px solid #ef4444; color: #fee2e2; box-shadow: 0 0 14px rgba(239,68,68,0.26), inset 0 1px 0 rgba(255,255,255,0.1); }
.dldle-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; gap: 1rem; flex-wrap: wrap; }
.dldle-status { font-size: 1rem; }
.dldle-status strong { color: var(--gold); }
.dldle-counter { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.08em; }
.dldle-win { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold); text-shadow: 0 0 20px rgba(201,162,39,0.55); margin-bottom: 0.3rem; }
.dldle-share-btn { padding: 0.55rem 1.3rem; font-size: 0.88rem; font-weight: 700; border-radius: 10px; border: 1px solid var(--gold); background: rgba(201,162,39,0.14); color: var(--gold); cursor: pointer; font-family: inherit; transition: background .2s; }
.dldle-share-btn:hover { background: rgba(201,162,39,0.3); }
.dldle-reveal { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.4rem; }
.dldle-reveal img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(201,162,39,0.55); box-shadow: 0 0 20px rgba(201,162,39,0.3); }
@media (max-width: 700px) {
  .dldle-head { display: none; }
  .dldle-row { display: block; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.6rem; }
  .dldle-hero { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; justify-content: flex-start; }
  .dldle-hero img { width: 44px; height: 44px; }
  .dldle-hero .dldle-guess-name { display: inline-block; font-weight: 700; color: #e9d5ff; font-size: 1rem; }
  .dldle-row .dldle-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .dldle-tile { font-size: 0.74rem; min-height: 60px; padding: 0.5rem 0.25rem; border-radius: 9px; line-height: 1.4; }
  .dldle-tile .lbl { display: block; font-size: 0.56rem; margin-bottom: 2px; }
  .dldle-title { font-size: 1.7rem; }
  .dldle-body { padding: 1rem 0.8rem 1.2rem; }
  .dldle-board { padding: 0.6rem; }
}

/* DL-dle auth + streak */
.dldle-auth { margin-top: 0.9rem; }
.dldle-auth-btn { padding: 0.55rem 1.3rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 10px; border: 1px solid rgba(168,85,247,0.6); background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(168,85,247,0.08)); color: #e9d5ff; cursor: pointer; font-family: inherit; box-shadow: 0 0 16px rgba(168,85,247,0.25), inset 0 1px 0 rgba(255,255,255,0.08); transition: all 0.2s ease; }
.dldle-auth-btn:hover { background: linear-gradient(135deg, rgba(168,85,247,0.45), rgba(168,85,247,0.18)); box-shadow: 0 0 24px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.12); transform: translateY(-1px); }
.dldle-user { font-size: 0.88rem; color: var(--muted); margin-right: 0.6rem; }
.dldle-user strong { color: var(--neon-teal); text-shadow: 0 0 10px rgba(45,212,191,0.4); }
.dldle-auth-form { display: flex; gap: 0.55rem; justify-content: center; flex-wrap: wrap; align-items: center; background: rgba(10,7,20,0.6); border: 1px solid rgba(168,85,247,0.3); border-radius: 14px; padding: 0.9rem 1rem; max-width: 560px; margin: 0 auto; box-shadow: inset 0 2px 12px rgba(0,0,0,0.4); }
.dldle-auth-form input { padding: 0.55rem 0.9rem; font-size: 0.88rem; border-radius: 10px; border: 1px solid rgba(168,85,247,0.4); background: rgba(8,6,16,0.9); color: var(--text); width: 180px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.dldle-auth-form input:focus { outline: none; border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(168,85,247,0.25), 0 0 16px rgba(168,85,247,0.3); }
.dldle-auth-msg { width: 100%; font-size: 0.82rem; color: var(--gold); min-height: 1.2rem; text-align: center; }
.dldle-streak { margin-top: 0.8rem; display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.dldle-streak-stat { text-align: center; }
.dldle-streak-num { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 16px rgba(201,162,39,0.55); display: block; line-height: 1.1; }
.dldle-streak-lbl { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dldle-streak-sep { display: none; }

/* Custom hero dropdown with portraits (builds / counters / planner) */
.hero-dd { position: relative; width: 100%; max-width: 420px; margin: 0 auto; text-align: left; }
.hero-dd-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; background: rgba(20,16,32,0.95); border: 1px solid rgba(168,85,247,0.45); border-radius: 12px; color: var(--text); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.hero-dd-btn:hover { border-color: rgba(168,85,247,0.8); }
.hero-dd-btn:focus-visible { outline: none; border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(168,85,247,0.3); }
.hero-dd-btn img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(168,85,247,0.35); }
.hero-dd-label { display: flex; align-items: center; gap: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hero-dd-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-dd-ph { color: var(--muted); }
.hero-dd-caret { margin-left: auto; flex-shrink: 0; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-dd-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 9999; background: rgba(16,12,30,0.99); border: 1px solid rgba(168,85,247,0.5); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 24px rgba(168,85,247,0.2); padding: 8px; display: none; }
.hero-dd.open .hero-dd-list { display: block; }
.hero-dd.open .hero-dd-btn { border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(168,85,247,0.25); }
.hero-dd-search { width: 100%; box-sizing: border-box; padding: 0.6rem 0.9rem; margin-bottom: 6px; background: rgba(8,6,16,0.9); border: 1px solid rgba(168,85,247,0.35); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 0.9rem; }
.hero-dd-search:focus { outline: none; border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(168,85,247,0.25); }
.hero-dd-search::placeholder { color: var(--muted); }
.hero-dd-options { max-height: 320px; overflow-y: auto; }
.hero-dd-opt { display: flex; align-items: center; gap: 0.7rem; width: 100%; box-sizing: border-box; min-height: 52px; padding: 6px 8px; background: none; border: none; border-radius: 9px; color: var(--text); cursor: pointer; font-family: inherit; font-size: 0.95rem; text-align: left; }
.hero-dd-opt:hover { background: rgba(168,85,247,0.18); }
.hero-dd-opt img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(168,85,247,0.3); }
.hero-dd-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-dd-empty { padding: 0.8rem; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* =====================================================================
   VANITY PASS — global micro-polish layer (CSS only, no HTML changes)
   ===================================================================== */

/* Text selection */
::selection { background: rgba(168,85,247,0.45); color: #fff; text-shadow: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0b0814; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b2a63, #241a3f);
  border-radius: 8px;
  border: 2px solid #0b0814;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5b4391, #3b2a63); }

/* Accessible focus */
:focus-visible {
  outline: 2px solid var(--neon-teal);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(45,212,191,0.35);
}

/* Content links (not buttons/nav) */
main a:not(.btn):not(.nav-pill):not(.gear-btn):not(.tag),
.card a:not(.btn):not(.nav-pill) {
  color: var(--neon-teal);
  text-decoration: none;
  border-bottom: 1px dotted rgba(45,212,191,0.45);
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}
main a:not(.btn):not(.nav-pill):not(.gear-btn):not(.tag):hover,
.card a:not(.btn):not(.nav-pill):hover {
  color: #7ef0dd;
  border-bottom-color: #7ef0dd;
  text-shadow: 0 0 12px rgba(45,212,191,0.5);
}

/* Horizontal rule ornament */
hr {
  border: none;
  height: 1px;
  margin: 2.2rem auto;
  max-width: 640px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.6), rgba(168,85,247,0.6), transparent);
  box-shadow: 0 0 8px rgba(168,85,247,0.25);
}

/* Blockquote */
blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--neon-purple);
  background: linear-gradient(90deg, rgba(168,85,247,0.1), rgba(168,85,247,0.02));
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #d8cfbd;
  box-shadow: inset 0 0 24px rgba(168,85,247,0.05);
}

/* Code */
code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.28);
  border-radius: 5px;
  padding: 0.12em 0.45em;
  color: #d9c6ff;
}
pre {
  background: #0d0a18;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  margin: 1.2rem 0;
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.5);
}
pre code { background: none; border: none; padding: 0; color: var(--text); }

/* List markers — deco diamonds */
main ul li::marker, .card ul li::marker { color: var(--gold); content: "◆  "; font-size: 0.7em; }
main ol li::marker, .card ol li::marker { color: var(--neon-teal); font-weight: 700; }
li { padding-left: 0.2rem; }

/* Details/summary accordions */
details {
  background: linear-gradient(160deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  margin: 0.8rem 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
details:hover { border-color: rgba(168,85,247,0.45); }
details[open] { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px rgba(168,85,247,0.12); }
summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.8px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "▸";
  color: var(--neon-teal);
  transition: transform 0.2s;
  text-shadow: 0 0 8px rgba(45,212,191,0.5);
}
details[open] summary::before { transform: rotate(90deg); }
details > *:not(summary) { animation: detailsIn 0.25s ease-out; }
@keyframes detailsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Tables — premium treatment */
.table-wrap { overflow-x: auto; margin: 1.2rem 0; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.table-wrap table { margin: 0; border: none; }
table { background: rgba(16,12,30,0.7); }
thead th {
  background: linear-gradient(180deg, rgba(42,32,70,0.95), rgba(26,20,46,0.95));
  border-bottom: 2px solid rgba(201,162,39,0.4);
  position: sticky;
  top: 0;
}
tbody tr:nth-child(even) td { background: rgba(168,85,247,0.03); }
tbody tr { transition: background 0.15s; }
tbody tr:hover td { background: rgba(168,85,247,0.09); }
td:first-child, th:first-child { padding-left: 1.2rem; }
td:last-child, th:last-child { padding-right: 1.2rem; }

/* tip-box variants */
.tip-box.warn {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(255,90,90,0.09), rgba(255,90,90,0.02));
  box-shadow: inset 0 0 24px rgba(255,90,90,0.05);
}
.tip-box.warn strong { color: var(--red); }
.tip-box.info {
  border-left-color: var(--neon-teal);
  background: linear-gradient(90deg, rgba(45,212,191,0.09), rgba(45,212,191,0.02));
  box-shadow: inset 0 0 24px rgba(45,212,191,0.05);
}
.tip-box.info strong { color: var(--neon-teal); }
.tip-box.purple {
  border-left-color: var(--neon-purple);
  background: linear-gradient(90deg, rgba(168,85,247,0.1), rgba(168,85,247,0.02));
  box-shadow: inset 0 0 24px rgba(168,85,247,0.06);
}
.tip-box.purple strong { color: #c084fc; }

/* Button variants */
.btn-teal {
  color: #06231f;
  background: linear-gradient(180deg, #5eead4, var(--neon-teal) 60%, #14b8a6);
  box-shadow: 0 0 24px var(--neon-teal-glow), 0 4px 14px rgba(0,0,0,0.5);
}
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(45,212,191,0.55), 0 6px 18px rgba(0,0,0,0.5); }
.btn-purple {
  color: #fff;
  background: linear-gradient(180deg, #c084fc, var(--neon-purple) 60%, #7c3aed);
  box-shadow: 0 0 24px var(--neon-purple-glow), 0 4px 14px rgba(0,0,0,0.5);
}
.btn-purple:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(168,85,247,0.6), 0 6px 18px rgba(0,0,0,0.5); }
.btn-sm { padding: 0.55rem 1.3rem; font-size: 0.82rem; }

/* Global form controls */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(10,7,20,0.85);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.25), 0 0 16px rgba(168,85,247,0.3);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
label { color: var(--muted); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.3px; }

/* Generic buttons (non-.btn) */
button:not(.nav-toggle):not(.hero-dd-btn):not(.hero-dd-opt):not(.dldle-suggest button) {
  font-family: inherit;
}

/* Kicker / eyebrow utility */
.kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--neon-teal);
  text-shadow: 0 0 12px var(--neon-teal-glow);
  margin-bottom: 0.5rem;
}
.kicker.gold { color: var(--gold); text-shadow: 0 0 12px var(--gold-glow); }
.kicker.purple { color: #c084fc; text-shadow: 0 0 12px var(--neon-purple-glow); }

/* Card accent variants */
.card.card-gold { border-color: rgba(201,162,39,0.45); box-shadow: 0 0 24px rgba(201,162,39,0.12), 0 8px 28px rgba(0,0,0,0.5); }
.card.card-gold::before { background: linear-gradient(90deg, transparent, rgba(201,162,39,0.7), transparent); opacity: 1; }
.card.card-teal { border-color: rgba(45,212,191,0.45); box-shadow: 0 0 24px rgba(45,212,191,0.12), 0 8px 28px rgba(0,0,0,0.5); }
.card.card-teal::before { background: linear-gradient(90deg, transparent, rgba(45,212,191,0.7), transparent); opacity: 1; }
.card.card-flat:hover { transform: none; box-shadow: none; }

/* Scroll-reveal (progressive enhancement via view timeline; safe fallback = visible) */
@supports (animation-timeline: view()) {
  .card, .stat, .spotlight .spot-card, .tip-box, .struct-row {
    animation: revealIn 0.55s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 18%;
  }
  @keyframes revealIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .card, .stat, .spotlight .spot-card, .tip-box, .struct-row { animation: none; }
  }
}

/* Stat strip hover */
.stat { transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.stat:hover {
  transform: translateY(-3px);
  border-color: rgba(45,212,191,0.5);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 20px rgba(45,212,191,0.15);
}

/* Page hero content entrance */
.page-hero .content { animation: heroRise 0.7s ease-out both; }

/* Footer deco top */
footer {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(16,11,30,0.85));
}
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.55), rgba(168,85,247,0.55), transparent);
  box-shadow: 0 0 12px rgba(168,85,247,0.3);
}
footer .foot-links { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
footer .foot-links a { letter-spacing: 0.6px; font-size: 0.82rem; text-transform: uppercase; }

/* Figure / caption */
figure { margin: 1.4rem 0; }
figcaption { color: var(--muted); font-size: 0.85rem; text-align: center; margin-top: 0.6rem; font-style: italic; }

/* Image frame utility */
.img-frame {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(168,85,247,0.1);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.img-frame:hover { border-color: rgba(168,85,247,0.5); box-shadow: 0 12px 34px rgba(0,0,0,0.55), 0 0 30px rgba(168,85,247,0.22); }

/* Utility: subtle divider text */
.divider-text {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.2rem 0 1.4rem;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(201,162,39,0.3);
}
.divider-text::before, .divider-text::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.5));
}
.divider-text::after { background: linear-gradient(90deg, rgba(201,162,39,0.5), transparent); }

/* Mobile polish */
@media (max-width: 640px) {
  main { padding: 0 1rem 3rem; }
  .card { padding: 1.1rem; }
  table { font-size: 0.85rem; }
  th, td { padding: 0.55rem 0.65rem; }
  .deco-divider { margin: 1.8rem auto; }
  h2 { margin-top: 2.2rem; }
}


/* ===== VANITY POLISH — Group 1 — index/start/new-players/about/privacy/fan-art/gear/glossary ===== */
/* ==========================================================================
   POLISH GROUP 1 — neon-noir visual elevation
   Pages: index.html, start.html, new-players.html, about.html,
          privacy.html, fan-art.html, gear.html, glossary.html
   --------------------------------------------------------------------------
   WHAT THIS STYLES (and the page element each targets):

   A. Shared text-page rhythm (about / privacy / start)
      - "Last updated" standfirst line (privacy.html; shot-caption excluded)
      - Anchor scroll offset under the sticky header (glossary letter
        headings, about #creators/#contact/#disclosure)
      - Gold list markers inside cards (about feature list, disclosure list,
        privacy cards)
      - Art-deco numbered list w/ timeline rail (start.html "5 Rules" <ol>)
      - Accent left-borders on about.html's #contact / #disclosure / #creators

   B. index.html — Deadle game + homepage
      - .dldle-status plain-text pill (guesses-remaining readout)
      - .dldle-user signed-in pill
      - .dldle-how legend -> pill container
      - Community Spotlight CTA card (h2 "Community Spotlight" + .card)
      - .spot-card image zoom on hover
      - .feature-card .go link glow/slide on hover

   C. start.html — timeline cards
      - .card > .tag.tip time markers (gold glow, wider tracking)
      - .card:has(> .tag.tip) timeline rail accent on timeline cards

   D. new-players.html (inline classes, overridden with `main` prefix so
      these rules beat the page <style> block)
      - .obj-step hover lift + image glow/zoom, .obj-arrow glow
      - .step-num gold glow ring
      - .item-pick hover slide + icon glow, .ip-name brightening
      - .cat-weapon / .cat-vitality / .cat-spirit label glows
      - .keys-table framed panel + row hover, kbd keycap shadow
      - .mistake-num gold glow + deco underline
      - .inline-img shadow + hover zoom

   E. fan-art.html (inline classes, `main` prefix for override power)
      - .fanart-card top accent line + image zoom on hover
      - .vote-btn.voted gold glow + heart pop animation
      - .vote-count tabular numerals
      - .sort-row select hover/focus states
      - .guideline-list teal markers
      - .mailto-btn hover glow + focus ring
      - .empty-state radial glow + heading glow
      - .submit-card teal top accent + heading glow

   F. gear.html (inline classes; higher-specificity hooks like
      `.gear-section .gear-card` and `a.gear-btn` so transitions apply)
      - .gear-hero gradient Cinzel h1 + gold divider rule
      - .gear-section h2 trailing gradient rule
      - .gear-section .section-sub left accent
      - .gear-card top accent line + neon hover shadow
      - .gear-card .price glow, .gear-card .specs dashed divider
      - .badge-pro / .badge-budget / .badge-pick glows
      - a.gear-btn smooth hover lift + glow + focus ring
      - .howto-card hover lift + glow, h3 glow
      - .howto-card .priority-num gradient + glow
      - .disclosure gold left border + heading glow

   G. glossary.html
      - h2[id^="letter-"] letter headings: diamond marker, trailing
        gradient rule, scroll offset
      - .gloss-term left accent bar on hover, term heading brightens,
        hover slide

   H. Reduced motion + mobile refinements
   ========================================================================== */

/* ============ A. Shared text-page rhythm (about / privacy / start) ============ */

/* Privacy "Last updated" standfirst (excludes shot captions) */
main.page > p:first-of-type:not(.shot-caption) {
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: -1rem 0 2rem;
}

/* Anchor targets: keep clear of the sticky header on jump */
main.page h2[id],
main.page .card[id] {
  scroll-margin-top: 190px;
}

/* Gold markers for plain lists inside cards */
main .card ul > li::marker {
  color: var(--gold);
}
main .card ol > li::marker {
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-weight: 800;
}

/* Art-deco numbered list with timeline rail — start.html "5 Rules" <ol> */
main .card > ol {
  list-style: none;
  counter-reset: polish-rule;
  margin-left: 0;
  padding-left: 0;
}
main .card > ol > li {
  counter-increment: polish-rule;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.1rem;
}
main .card > ol > li::before {
  content: counter(polish-rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.45);
}
main .card > ol > li::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 2rem;
  bottom: -0.7rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.4), transparent);
}
main .card > ol > li:last-child::after {
  display: none;
}

/* about.html anchored sections get their own accent rails */
main.page .card[id="contact"] {
  border-left: 3px solid rgba(45, 212, 191, 0.5);
}
main.page .card[id="disclosure"] {
  border-left: 3px solid rgba(201, 162, 39, 0.5);
}
main.page .card[id="creators"] {
  border-left: 3px solid rgba(168, 85, 247, 0.5);
}

/* ============ B. index.html — Deadle game + homepage ============ */

/* Guesses-remaining readout -> uppercase pill (only when holding plain text) */
.dldle-status:not(:has(*)) {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon-teal);
  border: 1px solid rgba(45, 212, 191, 0.35);
  background: rgba(45, 212, 191, 0.06);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  text-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
}

/* Signed-in identity pill */
.dldle-user {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* How-to-play legend -> contained pill */
.dldle-how {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Community Spotlight CTA card (follows the last h2 on the homepage) */
main > h2:last-of-type + .card {
  border: 1px solid rgba(201, 162, 39, 0.4);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(201, 162, 39, 0.1), transparent 70%),
    linear-gradient(160deg, var(--card2) 0%, var(--card) 70%);
  box-shadow: 0 0 34px rgba(201, 162, 39, 0.12), 0 10px 30px rgba(0, 0, 0, 0.5);
}
main > h2:last-of-type + .card h3 {
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.55);
  letter-spacing: 1.5px;
}
main > h2:last-of-type + .card .btn {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
main > h2:last-of-type + .card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Spotlight card artwork zoom */
.spotlight .spot-card img {
  transition: transform 0.3s ease;
}
.spotlight .spot-card:hover img {
  transform: scale(1.08);
}

/* Feature-card "go" links brighten and slide on hover */
.feature-card .go {
  display: inline-block;
  transition: letter-spacing 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}
.feature-card:hover .go {
  letter-spacing: 1.2px;
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.75);
  transform: translateX(4px);
}

/* ============ C. start.html — timeline cards ============ */

/* Time markers on the "First 10 Minutes" timeline cards */
.card > .tag.tip {
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.2);
  letter-spacing: 1.6px;
  font-size: 0.78rem;
  padding: 0.3rem 0.9rem;
}

/* Gold rail accent on cards that open with a time marker */
main .card:has(> .tag.tip) {
  border-left: 3px solid rgba(201, 162, 39, 0.55);
}

/* ============ D. new-players.html ============ */

/* Objective-flow step cards */
main .obj-step {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
main .obj-step:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 162, 39, 0.18);
}
main .obj-step img {
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.35));
  transition: transform 0.25s ease;
}
main .obj-step:hover img {
  transform: scale(1.1);
}
main .obj-arrow {
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.6);
}

/* Numbered step badges */
main .step-num {
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-shadow: 0 0 8px rgba(201, 162, 39, 0.6);
}

/* First-item pick rows */
main .item-pick {
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
main .item-pick:hover {
  background: rgba(168, 85, 247, 0.07);
  transform: translateX(4px);
}
main .item-pick img {
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
}
main .item-pick .ip-name {
  color: #e9d5ff;
  letter-spacing: 0.3px;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

/* Category labels */
main .cat-weapon {
  box-shadow: 0 0 10px rgba(255, 159, 67, 0.18);
}
main .cat-vitality {
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.18);
}
main .cat-spirit {
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

/* Controls table -> framed panel */
main .keys-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 7, 18, 0.5);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
main .keys-table tr:hover td {
  background: rgba(168, 85, 247, 0.06);
}
main .keys-table td:first-child {
  white-space: nowrap;
}
main kbd {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 255, 255, 0.06);
}

/* Mistake numbers */
main .mistake-num {
  text-shadow: 0 0 16px rgba(201, 162, 39, 0.5);
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 0.45rem;
}
main .mistake-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

/* Inline guide images */
main .inline-img {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(168, 85, 247, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
main .inline-img:hover {
  transform: scale(1.015);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(168, 85, 247, 0.22);
}

/* ============ E. fan-art.html ============ */

/* Gallery cards: top accent line + artwork zoom */
main .fanart-card {
  position: relative;
}
main .fanart-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}
main .fanart-card:hover::before {
  opacity: 1;
}
main .fanart-card img {
  transition: transform 0.35s ease;
}
main .fanart-card:hover img {
  transform: scale(1.04);
}

/* Vote button: voted state glows, heart pops */
main .vote-btn.voted {
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
main .vote-btn.voted svg {
  animation: polishHeartPop 0.45s ease;
}
@keyframes polishHeartPop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Vote totals: tabular numerals so counts don't jitter */
main .vote-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* Sort control */
main .sort-row select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
main .sort-row select:hover {
  border-color: rgba(168, 85, 247, 0.6);
}
main .sort-row select:focus {
  outline: none;
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25), 0 0 14px rgba(168, 85, 247, 0.3);
}

/* Guideline lists get teal markers */
main .guideline-list > li::marker {
  color: var(--neon-teal);
}

/* Email CTA button */
main .mailto-btn:hover {
  box-shadow: 0 8px 28px rgba(45, 212, 191, 0.3);
}
main .mailto-btn:focus-visible {
  outline: 2px solid var(--neon-teal);
  outline-offset: 3px;
}

/* Empty states: ambient glow + heading glow */
main .empty-state {
  position: relative;
  overflow: hidden;
}
main .empty-state::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(168, 85, 247, 0.12), transparent 70%);
  pointer-events: none;
}
main .empty-state h3 {
  position: relative;
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}

/* Submit card: teal top accent + heading glow */
main .submit-card {
  position: relative;
}
main .submit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.8), transparent);
  opacity: 0.9;
}
main .submit-card h3 {
  text-shadow: 0 0 16px rgba(45, 212, 191, 0.4);
}

/* ============ F. gear.html ============ */

/* Page hero: gradient Cinzel headline + gold divider */
.gear-hero {
  position: relative;
}
.gear-hero h1 {
  font-family: 'Cinzel', serif;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fff6d8 0%, var(--gold) 60%, #8a6f1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.3));
}
.gear-hero::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 1.4rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
}

/* Section headings: trailing gradient rule */
.gear-section h2 {
  font-family: 'Cinzel', serif;
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px rgba(168, 85, 247, 0.35);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.gear-section h2::after {
  content: "";
  position: static;
  flex: 1;
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.5), transparent);
  box-shadow: none;
}

/* Section subtitles: purple left accent */
.gear-section .section-sub {
  border-left: 2px solid rgba(168, 85, 247, 0.5);
  padding-left: 0.8rem;
}

/* Product cards: top accent + neon hover shadow */
.gear-section .gear-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gear-section .gear-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gear-section .gear-card:hover::before {
  opacity: 1;
}
.gear-section .gear-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(168, 85, 247, 0.18);
}

/* Price glow + spec divider */
.gear-card .price {
  text-shadow: 0 0 14px rgba(233, 213, 255, 0.35);
  letter-spacing: 0.5px;
}
.gear-card .specs {
  border-top: 1px dashed rgba(120, 110, 160, 0.25);
  padding-top: 0.7rem;
}

/* Badge glows */
.badge-pro {
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}
.badge-budget {
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.2);
}
.badge-pick {
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
}

/* Amazon CTA buttons: smooth lift + glow + focus ring */
a.gear-btn {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.gear-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35);
}
a.gear-btn:focus-visible {
  outline: 2px solid var(--neon-purple);
  outline-offset: 3px;
}

/* How-to cards: hover lift + heading glow */
.howto-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.howto-card:hover {
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 162, 39, 0.12);
  transform: translateY(-3px);
}
.howto-card h3 {
  text-shadow: 0 0 12px rgba(233, 213, 255, 0.25);
}

/* Priority numbers: gradient + glow */
.howto-card .priority-num {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(168, 85, 247, 0.1));
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
  text-shadow: 0 0 8px rgba(216, 180, 254, 0.6);
}

/* Affiliate disclosure: gold rail + heading glow */
.disclosure {
  border-left: 3px solid var(--gold-dim);
  box-shadow: inset 0 0 24px rgba(201, 162, 39, 0.05);
}
.disclosure strong {
  text-shadow: 0 0 10px rgba(201, 162, 39, 0.4);
}

/* ============ G. glossary.html ============ */

/* Letter headings: diamond marker + trailing gradient rule */
main.page h2[id^="letter-"] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main.page h2[id^="letter-"]::before {
  content: "◆";
  color: var(--neon-purple);
  font-size: 0.65em;
  text-shadow: 0 0 10px var(--neon-purple-glow);
}
main.page h2[id^="letter-"]::after {
  position: static;
  flex: 1;
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), rgba(168, 85, 247, 0.4), transparent);
  box-shadow: none;
}

/* Term rows: teal/purple accent bar + slide on hover, term brightens */
main .gloss-term {
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
main .gloss-term::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--neon-teal), var(--neon-purple));
  opacity: 0;
  transition: opacity 0.2s ease;
}
main .gloss-term:hover {
  transform: translateX(4px);
}
main .gloss-term:hover::before {
  opacity: 1;
}
main .gloss-term strong {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.6px;
  font-size: 1rem;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
main .gloss-term:hover strong {
  color: #f0d060;
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.4);
}

/* ============ H. Reduced motion + mobile ============ */

@media (prefers-reduced-motion: reduce) {
  main .vote-btn.voted svg {
    animation: none;
  }
}

@media (max-width: 640px) {
  .dldle-how {
    border-radius: 14px;
    font-size: 0.75rem;
  }
  main .card > ol > li {
    padding-left: 2.4rem;
  }
  .gear-section .gear-card {
    padding: 1.2rem;
  }
  main.page h2[id^="letter-"] {
    gap: 0.7rem;
  }
}


/* ===== VANITY POLISH — Group 2 — heroes/builds/counters/tier-list/items/item-tiers/planner/map ===== */
/* ==========================================================================
   POLISH GROUP 2 — visual polish pass for the Deadlock guide site
   Neon-noir elevation: purple #a855f7 / teal #2dd4bf / gold #c9a227 glows,
   Cinzel headings + Inter body. CSS ONLY — no HTML was touched.

   Pages covered (each section is scoped to classes used only on that page):
     A. heroes.html    — hero profile cards + hero modal (hp-*) polish
     B. builds.html    — build picker, build card, code box, copy button, tabs
     C. counters.html  — counter select, matchup cards, difficulty tags, avoid box
     D. tier-list.html + item-tiers.html — tier rows, tier badges, win-rate pills,
                        per-tier accent glows, unranked card, filter bar, trap box
     E. items.html     — item cards (category-aware hovers), badges, filter
                        buttons, search, tier section headers, category legend
     F. planner.html   — build slots, item picker, filters, search, export box,
                        stat rows, souls total, ability cards, action buttons
     G. map.html       — map pins (boss pulse), district zones, legend cards,
                        lore boxes, map info card

   Specificity notes: page <style> blocks load AFTER styles.css, so overrides
   use higher-specificity selectors (main prefix, attribute selectors, :has).
   No emojis. Animations respect prefers-reduced-motion. Mobile-safe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. heroes.html — hero cards + hero modal
   -------------------------------------------------------------------------- */

/* Hero profile cards: gold top-accent reveal on hover (existing inline hover
   handles lift/border/glow; this adds the accent bar) */
.hero-profile-card { position: relative; overflow: hidden; }
.hero-profile-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 12px var(--gold-glow);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s ease;
}
.hero-profile-card:hover::before { transform: scaleX(1); }

/* Combo duo portraits on hero cards: gentle zoom on hover */
.card .combo-duo img { transition: transform 0.25s ease; }
.card .combo-duo img:hover { transform: scale(1.14); }

/* Modal abilities: purple left accent + lift on hover */
.hp-modal .hp-ability {
  border-left: 3px solid rgba(168,85,247,0.55);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hp-modal .hp-ability:hover {
  transform: translateX(3px);
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 16px rgba(168,85,247,0.18);
}
/* Ability keycap glow */
.hp-modal .hp-key { box-shadow: 0 0 10px rgba(168,85,247,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
/* Effect chips: hover lift */
.hp-modal .hp-chip { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hp-modal .hp-chip:hover { transform: translateY(-1px); box-shadow: 0 0 10px rgba(45,212,191,0.25); }
/* Stat rows: subtle row highlight */
.hp-modal .hp-stat { transition: background 0.15s ease; border-radius: 6px; }
.hp-modal .hp-stat:hover { background: rgba(168,85,247,0.07); }
.hp-modal .hp-stat:hover .hp-stat-val { color: var(--neon-teal); }
/* Combo rows in modal: gold glow hover */
.hp-modal .hp-combo { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.hp-modal .hp-combo:hover {
  border-color: rgba(201,162,39,0.6);
  box-shadow: 0 0 18px rgba(201,162,39,0.2);
  transform: translateY(-2px);
}
/* Section titles: letter-spaced with a fading underline */
.hp-modal .hp-section-title {
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(168,85,247,0.22);
  padding-bottom: 0.45rem;
}
/* Modal scrollbar to match theme (the overlay is the scrolling element) */
.hp-overlay::-webkit-scrollbar { width: 10px; }
.hp-overlay::-webkit-scrollbar-track { background: rgba(10,7,20,0.6); border-radius: 8px; }
.hp-overlay::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), #4c1d95);
  border-radius: 8px; border: 2px solid rgba(10,7,20,0.6);
}
.hp-overlay { scrollbar-color: var(--accent) rgba(10,7,20,0.6); }

/* --------------------------------------------------------------------------
   B. builds.html — picker, build card, code box, copy button, tabs
   -------------------------------------------------------------------------- */

/* Shared panel accent-bar prep */
.build-result .build-card { position: relative; overflow: hidden; }
.build-result .build-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Picker select: stronger gold focus + hover affordance */
main .build-picker select:hover { border-color: var(--gold); }
main .build-picker select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201,162,39,0.35);
  background: rgba(26,22,40,0.95);
}

/* Build card: teal-green glow frame on the card body */
.build-result .build-card { box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 26px rgba(201,162,39,0.12); }

/* Code box: stronger neon-teal glow so the code pops */
.build-result .code-box {
  border-color: rgba(45,212,191,0.5);
  box-shadow: inset 0 0 18px rgba(45,212,191,0.06), 0 0 18px rgba(45,212,191,0.16);
  text-shadow: 0 0 10px rgba(45,212,191,0.5);
}
/* Copy button: press feedback + teal "copied" glow */
.build-result .copy-btn:active { transform: scale(0.94); }
.build-result .copy-btn.copied {
  box-shadow: 0 0 16px rgba(45,212,191,0.45);
  text-shadow: 0 0 8px rgba(45,212,191,0.5);
}
/* Build tabs: lift on hover; richer active state */
.build-tabs .build-tab:hover { transform: translateY(-2px); border-color: var(--gold-dim); color: var(--text); }
.build-tabs .build-tab.active {
  background: linear-gradient(160deg, rgba(201,162,39,0.2), rgba(201,162,39,0.06));
  box-shadow: 0 0 18px rgba(201,162,39,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
/* "How to use it" note: teal left accent */
.build-result .build-how {
  border-left: 3px solid rgba(45,212,191,0.5);
  padding-left: 0.8rem;
}

/* --------------------------------------------------------------------------
   C. counters.html — counter picker + matchup cards
   -------------------------------------------------------------------------- */

/* Counter select panel: gold accent bar + depth (no overflow:hidden — hero dropdown list must escape) */
.counter-select { position: relative; }
.counter-select::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 12px var(--gold-glow);
  border-radius: 14px 14px 0 0;
}
.counter-select select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 18px rgba(201,162,39,0.32);
}
.counter-select select:hover { border-color: var(--gold-dim); }

/* Matchup cards: entry animation + teal hover lift */
@keyframes polishFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#counterResults .counter-card {
  animation: polishFadeUp 0.35s ease-out;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#counterResults .counter-card:hover {
  transform: translateY(-3px);
  border-color: rgba(45,212,191,0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 20px rgba(45,212,191,0.22);
}
/* Difficulty tags: neon glow per difficulty */
.diff-tag.diff-Easy { box-shadow: 0 0 12px rgba(45,212,191,0.3); }
.diff-tag.diff-Medium { box-shadow: 0 0 12px rgba(201,162,39,0.3); }
.diff-tag.diff-Hard { box-shadow: 0 0 12px rgba(229,72,77,0.35); }

/* Avoid box: red accent bar + deeper glow */
.avoid-box { position: relative; overflow: hidden; }
.avoid-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #e5484d 30%, #e5484d 70%, transparent);
  box-shadow: 0 0 12px rgba(229,72,77,0.5);
}
main .avoid-box { box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(229,72,77,0.12); }

/* Item-counter placeholder circle (built by JS with inline styles — only
   additive properties can be touched here): gold glow ring */
.counter-card div[title="Item counter"] {
  box-shadow: 0 0 16px rgba(201,162,39,0.45);
  background: rgba(201,162,39,0.06);
}
/* Enemy preview portrait: red threat glow */
.enemy-preview img { box-shadow: 0 0 22px rgba(229,72,77,0.4); }

/* --------------------------------------------------------------------------
   D. tier-list.html + item-tiers.html — tier rows, badges, filters
   -------------------------------------------------------------------------- */

/* Tier badges: depth + inner letter glow */
.tier-badge {
  box-shadow: 0 2px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Per-tier left accent + tier-colored hover glow.
   Uses the inline background color of each section's tier badge, so this
   survives content edits that keep the S/A/B/C/D badge colors. */
main h2:has(> .tier-badge[style*="#ffd700"]) + .tier-grid .tier-card { border-left: 3px solid rgba(255,215,0,0.8); }
main h2:has(> .tier-badge[style*="#c9a227"]) + .tier-grid .tier-card { border-left: 3px solid rgba(201,162,39,0.8); }
main h2:has(> .tier-badge[style*="#2dd4bf"]) + .tier-grid .tier-card,
main h2:has(> .tier-badge[style*="#7fb069"]) + .tier-grid .tier-card { border-left: 3px solid rgba(45,212,191,0.7); }
main h2:has(> .tier-badge[style*="#a855f7"]) + .tier-grid .tier-card,
main h2:has(> .tier-badge[style*="#6a7a8a"]) + .tier-grid .tier-card { border-left: 3px solid rgba(168,85,247,0.7); }
main h2:has(> .tier-badge[style*="#ef4444"]) + .tier-grid .tier-card,
main h2:has(> .tier-badge[style*="#8a4a5a"]) + .tier-grid .tier-card { border-left: 3px solid rgba(239,68,68,0.7); }

main h2:has(> .tier-badge[style*="#ffd700"]) + .tier-grid .tier-card:hover {
  border-color: #ffd700; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(255,215,0,0.32); }
main h2:has(> .tier-badge[style*="#c9a227"]) + .tier-grid .tier-card:hover {
  border-color: var(--gold); box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(201,162,39,0.32); }
main h2:has(> .tier-badge[style*="#2dd4bf"]) + .tier-grid .tier-card:hover,
main h2:has(> .tier-badge[style*="#7fb069"]) + .tier-grid .tier-card:hover {
  border-color: #2dd4bf; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(45,212,191,0.32); }
main h2:has(> .tier-badge[style*="#a855f7"]) + .tier-grid .tier-card:hover,
main h2:has(> .tier-badge[style*="#6a7a8a"]) + .tier-grid .tier-card:hover {
  border-color: #a855f7; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(168,85,247,0.32); }
main h2:has(> .tier-badge[style*="#ef4444"]) + .tier-grid .tier-card:hover,
main h2:has(> .tier-badge[style*="#8a4a5a"]) + .tier-grid .tier-card:hover {
  border-color: #ef4444; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(239,68,68,0.32); }

/* Tier card portrait: teal ring on hover */
main .tier-grid .tier-card:hover img {
  border-color: var(--neon-teal);
  box-shadow: 0 0 14px rgba(45,212,191,0.4);
}
/* Win-rate as a glowing gold pill (tier-list.html) */
main .tier-card .tier-info .tier-wr {
  display: inline-block;
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.45);
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
  font-size: 0.78rem;
  box-shadow: 0 0 10px rgba(201,162,39,0.18);
}

/* Unranked card (tier-list.html): teal dashed "not ranked yet" treatment */
main #unranked {
  border: 1px dashed rgba(45,212,191,0.55);
  box-shadow: 0 0 22px rgba(45,212,191,0.14);
}
main #unranked .tier-grid { margin-bottom: 0; }

/* --- item-tiers.html specifics --- */

/* Filter bar: kicker labels + glowing selects */
main .filter-bar label {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--gold); font-size: 0.75rem;
}
main .filter-bar select:hover { border-color: var(--neon-teal); }
main .filter-bar select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 14px rgba(201,162,39,0.35);
}
/* Trap box: red accent bar + glow */
.trap-box { position: relative; overflow: hidden; }
.trap-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #e08a9a 30%, #e08a9a 70%, transparent);
  box-shadow: 0 0 12px rgba(224,138,154,0.45);
}
main .trap-box { box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(224,138,154,0.14); }
/* Item meta (Spirit · T2) as a purple pill */
main .tier-info .item-meta {
  display: inline-block;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.45);
  color: #d8b4fe; border-radius: 999px;
  padding: 0.08rem 0.55rem;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 0 10px rgba(168,85,247,0.18);
}

/* --------------------------------------------------------------------------
   E. items.html — item cards, badges, filters, search
   -------------------------------------------------------------------------- */

/* Item cards: base hover lift (category colors layered below) */
.item-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.item-card:hover { transform: translateY(-2px); }
/* Category-aware hover glows (border-left accent is set inline per category) */
.cat-block[data-cat="weapon"] .item-card:hover {
  border-color: rgba(255,159,67,0.75);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(255,159,67,0.28);
}
.cat-block[data-cat="vitality"] .item-card:hover {
  border-color: rgba(46,204,113,0.75);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(46,204,113,0.28);
}
.cat-block[data-cat="spirit"] .item-card:hover {
  border-color: rgba(168,85,247,0.75);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(168,85,247,0.3);
}
.cat-block[data-cat="brawl"] .item-card:hover {
  border-color: rgba(201,162,39,0.8);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(201,162,39,0.3);
}
/* Item icon zoom on card hover */
.item-card .item-icon { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.item-card:hover .item-icon { transform: scale(1.12); }
/* Item name: Cinzel styling */
main .item-card h4 { font-family: 'Cinzel', serif; letter-spacing: 0.04em; }

/* Badges: neon glows */
.item-card .badge.active { box-shadow: 0 0 12px rgba(123,47,247,0.4); }
.item-card .badge.cost { box-shadow: 0 0 10px rgba(201,162,39,0.22); }
.item-card .badge.legendary { box-shadow: 0 0 14px rgba(201,162,39,0.45); }

/* Filter buttons: hover lift + richer active */
.search-bar .filter-btns button { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; }
.search-bar .filter-btns button:hover {
  transform: translateY(-1px); border-color: var(--gold-dim);
  color: var(--text); box-shadow: 0 4px 14px rgba(201,162,39,0.22);
}
.search-bar .filter-btns button.active {
  background: linear-gradient(160deg, rgba(201,162,39,0.18), rgba(201,162,39,0.06));
  box-shadow: 0 0 16px rgba(201,162,39,0.4);
}
/* Search input: stronger gold focus */
main .search-bar input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(201,162,39,0.3);
  background: rgba(26,22,40,0.9);
}
/* Tier section headers: category-colored with left accent */
.cat-block[data-cat="weapon"] .tier-section h3,
.cat-block[data-cat="vitality"] .tier-section h3,
.cat-block[data-cat="spirit"] .tier-section h3,
.cat-block[data-cat="brawl"] .tier-section h3 {
  font-family: 'Cinzel', serif; letter-spacing: 0.08em;
  border-left: 3px solid; padding-left: 0.7rem;
}
.cat-block[data-cat="weapon"] .tier-section h3 { color: #d5903f; border-color: rgba(213,144,63,0.6); text-shadow: 0 0 12px rgba(213,144,63,0.3); }
.cat-block[data-cat="vitality"] .tier-section h3 { color: #2ecc71; border-color: rgba(46,204,113,0.6); text-shadow: 0 0 12px rgba(46,204,113,0.3); }
.cat-block[data-cat="spirit"] .tier-section h3 { color: #c288f0; border-color: rgba(194,136,240,0.6); text-shadow: 0 0 12px rgba(194,136,240,0.3); }
.cat-block[data-cat="brawl"] .tier-section h3 { color: var(--gold); border-color: rgba(201,162,39,0.6); text-shadow: 0 0 12px rgba(201,162,39,0.3); }
/* Count note: kicker styling */
main .count-note {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.75rem; font-weight: 700; color: var(--neon-teal);
}
/* Category legend: pill bar */
main .cat-legend {
  display: inline-flex; align-items: center;
  background: rgba(20,16,32,0.7); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.5rem 1.1rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
/* No-results: gold dashed frame */
main .no-results {
  border: 1px dashed rgba(201,162,39,0.5); border-radius: 14px;
  box-shadow: 0 0 18px rgba(201,162,39,0.1);
}

/* --------------------------------------------------------------------------
   F. planner.html — slots, picker, filters, stats, abilities
   -------------------------------------------------------------------------- */

/* Side panels: gold accent bar + depth */
.hero-select-wrap { position: relative; }
.stat-panel { position: relative; overflow: hidden; }
.hero-select-wrap::before, .stat-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 12px var(--gold-glow);
}
.hero-select-wrap::before { border-radius: 14px 14px 0 0; }
.hero-select-wrap::before, .stat-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 12px var(--gold-glow);
}
/* Hero select: focus glow */
.hero-select-wrap select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 16px rgba(201,162,39,0.32);
}
/* Hero preview portrait: gold halo */
.hero-preview img { box-shadow: 0 0 22px rgba(201,162,39,0.35); }
.hero-preview h3 { text-shadow: 0 0 14px rgba(201,162,39,0.4); }

/* Build slots: hover invitation on empties, lift on filled */
.slot { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.slot.filled { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.slot:not(.filled):hover {
  border-color: rgba(201,162,39,0.55);
  box-shadow: 0 0 14px rgba(201,162,39,0.25);
}
.slot.filled:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 16px rgba(201,162,39,0.35);
}
.slot .slot-remove { transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.slot .slot-remove:hover {
  background: #cc2222;
  box-shadow: 0 0 12px rgba(255,90,90,0.65);
  transform: scale(1.12);
}

/* Item filters: hover lift + richer active */
main .item-filters button { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; }
main .item-filters button:hover {
  transform: translateY(-1px); border-color: var(--gold-dim);
  color: var(--text); box-shadow: 0 4px 14px rgba(201,162,39,0.22);
}
main .item-filters button.active {
  background: linear-gradient(160deg, rgba(201,162,39,0.18), rgba(201,162,39,0.06));
  box-shadow: 0 0 16px rgba(201,162,39,0.4);
}
/* Item search: gold focus glow */
.item-search:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 16px rgba(201,162,39,0.3);
}
/* Pick items: press feedback */
.pick-item:active { transform: scale(0.95); }
.pick-item { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }

/* Export box: teal focus glow */
.export-box:focus {
  outline: none; border-color: var(--neon-teal);
  box-shadow: 0 0 16px rgba(45,212,191,0.3);
}
/* Action buttons: lift + glow on hover, press feedback */
.action-row .btn { transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.action-row .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 16px rgba(201,162,39,0.35);
}
.action-row .btn:active { transform: scale(0.96); }
.action-row .btn.secondary:hover { box-shadow: 0 0 14px rgba(120,110,160,0.3); }

/* Stat rows: row highlight + total glow */
.stat-row { transition: background 0.15s ease; border-radius: 6px; }
.stat-row:hover { background: rgba(168,85,247,0.07); }
.souls-total { text-shadow: 0 0 16px rgba(201,162,39,0.5); }
.base-stat { transition: background 0.15s ease; border-radius: 6px; }
.base-stat:hover { background: rgba(168,85,247,0.07); }

/* Ability cards: purple hover glow + keycap glow */
.ability-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.ability-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(168,85,247,0.22);
}
.ability-card .ab-key { box-shadow: 0 0 10px rgba(168,85,247,0.3); }

/* --------------------------------------------------------------------------
   G. map.html — pins, districts, legend cards, lore, info card
   -------------------------------------------------------------------------- */

/* Boss pin (mid-boss): attention pulse ring */
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(168,85,247,0.35); }
  50% { box-shadow: 0 0 18px rgba(168,85,247,0.9), 0 0 4px rgba(168,85,247,0.9); }
}
.map-pin.boss { animation: pinPulse 2.4s ease-in-out infinite; }
/* Keyboard focus ring for pins */
.map-pin:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
  transform: scale(1.4);
}
/* District zones: dashed hover frame + brighter tint */
main .district-zone:hover {
  border: 1px dashed rgba(168,85,247,0.6);
  background: rgba(168,85,247,0.14);
  box-shadow: inset 0 0 30px rgba(168,85,247,0.12);
}
.district-zone:hover .dz-label {
  border-color: rgba(168,85,247,0.7);
  box-shadow: 0 0 14px rgba(168,85,247,0.35);
  color: #d8b4fe;
}
/* Lane cards: lane-colored headings with glow */
main .card h3:has(> .lane-dot[style*="e8c33a"]) { color: #e8c33a; text-shadow: 0 0 14px rgba(232,195,58,0.45); }
main .card h3:has(> .lane-dot[style*="3ddc84"]) { color: #3ddc84; text-shadow: 0 0 14px rgba(61,220,132,0.45); }
main .card h3:has(> .lane-dot[style*="4aa8ff"]) { color: #4aa8ff; text-shadow: 0 0 14px rgba(74,168,255,0.45); }
main .card h3 .lane-dot { width: 0.9em; height: 0.9em; }

/* Lore boxes: hover glow + brighter summary */
.lore-box { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.lore-box:hover {
  border-color: rgba(168,85,247,0.55);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 18px rgba(168,85,247,0.18);
}
main .lore-box summary:hover { color: #f0d060; text-shadow: 0 0 12px rgba(201,162,39,0.45); }

/* Map info card: stronger gold glow + close button hover */
main .map-card { box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 28px rgba(201,162,39,0.2); }
main .map-card h4 button:hover {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 12px rgba(201,162,39,0.35);
}
/* Screenshots: caption as styled italic */
main .shot-caption { font-style: italic; }

/* --------------------------------------------------------------------------
   H. reduced-motion: silence the polish animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-profile-card::before,
  .card .combo-duo img,
  .hp-modal .hp-ability,
  .hp-modal .hp-chip,
  .hp-modal .hp-combo,
  .hp-modal .hp-stat,
  .build-tabs .build-tab,
  .build-result .copy-btn,
  #counterResults .counter-card,
  .item-card,
  .item-card .item-icon,
  .search-bar .filter-btns button,
  .slot, .slot.filled, .slot .slot-remove,
  main .item-filters button,
  .pick-item,
  .action-row .btn,
  .stat-row, .base-stat,
  .ability-card,
  .lore-box { transition: none; }
  #counterResults .counter-card, .map-pin.boss { animation: none; }
  .hero-profile-card::before { transform: scaleX(1); }
}


/* ===== VANITY POLISH — Group 3 — movement/tech-library/phases/patch-notes/patch-tracker/rifts/soul-calc/timer ===== */
/* ==========================================================================
   polish-group3.css — Visual polish pass, page group 3.
   CSS ONLY — no HTML files were edited. The coordinator merges this file
   into styles.css after review.
   Pages: movement.html, tech-library.html, phases.html, patch-notes.html,
          patch-tracker.html, rifts.html, soul-calc.html, timer.html

   What each section styles:
     M  (movement.html)     .stamina-demo framed as a HUD panel; stamina
                            bullet list rhythm with teal markers; tech-card
                            list markers; Movement Items table framed as a
                            card (it has no .table-wrap); kbd keycap style.
     TL (tech-library.html) Difficulty-coded rails on .tech-card (teal /
                            gold / purple) with color-matched hover lift;
                            meta divider under .tech-meta; Cinzel h3;
                            diamond markers on dl dt; .no-results panel;
                            deep-end heading glow; filter-btn focus ring.
     PH (phases.html)       phase-node hover lift/glow; animated shimmer on
                            .phase-line; "Your job:"/"Buy:" eyebrow labels;
                            card list markers + rhythm; "Mental Game" bare
                            list rebuilt as a panel with diamond bullets;
                            Win Conditions table framed + gold first column.
     PN (patch-notes.html)  Changelog entries: gold side rail; date tag as
                            Cinzel eyebrow; latest (first) entry glow;
                            changelog bullets as diamond-marked entries
                            with gold lead-ins and meta-impact emphasis.
     PT (patch-tracker.html).legend as pill bar; .coverage deco rules;
                            .latest gradient top rule; .hero-pick.sel
                            deepened; .detail.show entrance animation;
                            .patch-block left rail; .change row hover;
                            .no-changes panel; .src-note divider.
     R  (rifts.html)        Timing steps as a numbered gold timeline (ol);
                            card bullets with teal diamonds + gold lead-ins.
     SC (soul-calc.html)    tabular-nums time readout; slider focus ring;
                            .val glow on row hover; guideline-list diamond
                            bullets; .calc-note ruled footnote style.
     T  (timer.html)        button press/focus states; elapsed readout as
                            HUD pill; state-tinted obj-icons and readouts
                            (warn/live/done); sound-toggle pill; guideline-
                            list diamond bullets; small-screen row wrap.

   Scoping: page-unique classes/ids (.tech-grid, .pt-wrap, .calc-wrap,
   .timer-wrap, .stamina-demo, .phase-timeline, .tech-filters, #no-results)
   plus `header:has(a[href="<page>.html"].active) ~ main.page` anchors, so
   rules cannot leak onto other pages. Where a page has an inline <style>
   block, selectors here carry strictly higher specificity than the inline
   rules they touch; everything else is purely additive.
   No emojis anywhere in this file.
   ========================================================================== */

/* ==================== movement.html (M) ==================== */

/* M1 — Stamina demo framed as a HUD readout panel */
header:has(a[href="movement.html"].active) ~ main.page .stamina-demo {
  background: rgba(13, 9, 24, 0.85);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.4rem 0 1.8rem;
  box-shadow: inset 0 0 24px rgba(45, 212, 191, 0.06),
              0 0 22px rgba(45, 212, 191, 0.08);
}
header:has(a[href="movement.html"].active) ~ main.page .stamina-demo .pip-label {
  font-size: 0.78rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8fb8b2;
}

/* M2 — Stamina Basics bullet list: rhythm + teal markers */
header:has(a[href="movement.html"].active) ~ main.page > ul li {
  margin-bottom: 0.55rem;
  line-height: 1.7;
}
header:has(a[href="movement.html"].active) ~ main.page > ul li::marker {
  color: var(--neon-teal);
  font-size: 1.05em;
}

/* M3 — "Tech Worth Knowing" card list markers */
header:has(a[href="movement.html"].active) ~ main.page .card ul li::marker {
  color: var(--neon-teal);
  font-size: 1.05em;
}
header:has(a[href="movement.html"].active) ~ main.page .card ul li {
  margin-bottom: 0.5rem;
}

/* M4 — Movement Items table framed as a card (no .table-wrap in the HTML) */
header:has(a[href="movement.html"].active) ~ main.page > table {
  border: 1px solid var(--border);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
              0 0 18px rgba(45, 212, 191, 0.07);
}
header:has(a[href="movement.html"].active) ~ main.page > table tr:first-child th {
  background: linear-gradient(180deg, rgba(38, 60, 66, 0.95), rgba(22, 34, 40, 0.95));
  border-bottom: 2px solid rgba(45, 212, 191, 0.45);
  color: var(--neon-teal);
}
header:has(a[href="movement.html"].active) ~ main.page > table tbody tr td:first-child {
  font-weight: 700;
}

/* M5 — keycap styling for the parry input */
header:has(a[href="movement.html"].active) ~ main.page kbd {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0.12rem 0.5rem;
  color: #e6dcff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

/* ==================== tech-library.html (TL) ==================== */

/* TL1 — Difficulty-coded rails on tech cards */
.tech-grid .tech-card[data-diff="beginner"] {
  border-left: 3px solid var(--neon-teal);
  box-shadow: inset 4px 0 14px rgba(45, 212, 191, 0.05);
}
.tech-grid .tech-card[data-diff="intermediate"] {
  border-left: 3px solid var(--gold);
  box-shadow: inset 4px 0 14px rgba(201, 162, 39, 0.06);
}
.tech-grid .tech-card[data-diff="advanced"] {
  border-left: 3px solid var(--neon-purple);
  box-shadow: inset 4px 0 14px rgba(168, 85, 247, 0.07);
}

/* TL2 — Deeper, color-matched hover lift per difficulty */
.tech-grid .tech-card[data-diff="beginner"]:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 12px 32px rgba(45, 212, 191, 0.16);
}
.tech-grid .tech-card[data-diff="intermediate"]:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: 0 12px 32px rgba(201, 162, 39, 0.16);
}
.tech-grid .tech-card[data-diff="advanced"]:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.2);
}

/* TL3 — Divider between card meta row and the technique body */
.tech-grid .tech-card .tech-meta {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(120, 110, 160, 0.14);
  margin-bottom: 0.55rem;
}

/* TL4 — Cinzel treatment for technique names */
.tech-grid .tech-card h3 {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.4px;
}

/* TL5 — Diamond markers on the definition labels */
.tech-grid .tech-card dt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5rem;
  background: var(--neon-teal);
  box-shadow: 0 0 8px var(--neon-teal-glow);
  transform: rotate(45deg) translateY(-1px);
}

/* TL6 — Empty-results state as a proper panel */
#no-results {
  background: rgba(168, 85, 247, 0.05);
  border: 1px dashed rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  margin: 1rem 0 2rem;
  box-shadow: inset 0 0 24px rgba(168, 85, 247, 0.05);
}

/* TL7 — Gold glow on the deep-end heading */
main.page .deep-end h2 {
  text-shadow: 0 0 16px rgba(201, 162, 39, 0.35);
  letter-spacing: 1px;
}

/* TL8 — Keyboard focus ring for the difficulty filter buttons */
.tech-filters .filter-btn:focus-visible {
  outline: 2px solid var(--neon-purple);
  outline-offset: 2px;
}

/* ==================== phases.html (PH) ==================== */

/* PH1 — Phase node hover: lift, gold ring, glow */
header:has(a[href="phases.html"].active) ~ main.page .phase-node img {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
header:has(a[href="phases.html"].active) ~ main.page .phase-node:hover img {
  transform: scale(1.07);
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(201, 162, 39, 0.55);
}
header:has(a[href="phases.html"].active) ~ main.page .phase-node:hover .phase-name {
  color: var(--gold);
}

/* PH2 — Animated shimmer travelling along the timeline connectors */
header:has(a[href="phases.html"].active) ~ main.page .phase-line {
  position: relative;
  overflow: hidden;
}
header:has(a[href="phases.html"].active) ~ main.page .phase-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.85), transparent);
  animation: polish-phase-shimmer 3.4s ease-in-out infinite;
}
@keyframes polish-phase-shimmer {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(110%); }
}

/* PH3 — "Your job:" / "Buy:" lead-ins as Cinzel eyebrow labels */
header:has(a[href="phases.html"].active) ~ main.page .card > p > strong:only-child {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.35);
  margin-bottom: 0.15rem;
}

/* PH4 — Phase card lists: teal markers, better rhythm */
header:has(a[href="phases.html"].active) ~ main.page .card ul li {
  margin-bottom: 0.55rem;
}
header:has(a[href="phases.html"].active) ~ main.page .card ul li::marker {
  color: var(--neon-teal);
  font-size: 1.05em;
}

/* PH5 — "The Mental Game" bare list rebuilt as a panel with diamond bullets */
header:has(a[href="phases.html"].active) ~ main.page > ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 1.3rem 1.5rem;
  background: rgba(20, 16, 32, 0.75);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
header:has(a[href="phases.html"].active) ~ main.page > ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  line-height: 1.65;
}
header:has(a[href="phases.html"].active) ~ main.page > ul li:last-child {
  margin-bottom: 0;
}
header:has(a[href="phases.html"].active) ~ main.page > ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--neon-purple);
  box-shadow: 0 0 8px var(--neon-purple-glow);
}
header:has(a[href="phases.html"].active) ~ main.page > ul li strong {
  color: var(--gold);
}

/* PH6 — Win Conditions table: framed card look + gold phase column */
header:has(a[href="phases.html"].active) ~ main.page > table {
  border: 1px solid var(--border);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
header:has(a[href="phases.html"].active) ~ main.page > table tr:first-child th {
  border-bottom: 2px solid rgba(201, 162, 39, 0.5);
}
header:has(a[href="phases.html"].active) ~ main.page > table td:first-child {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.9rem;
}

/* ==================== patch-notes.html (PN) ==================== */

/* PN1 — Changelog entries: gradient gold side rail */
header:has(a[href="patch-notes.html"].active) ~ main.page .card {
  position: relative;
  overflow: hidden;
}
header:has(a[href="patch-notes.html"].active) ~ main.page .card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), rgba(201, 162, 39, 0));
  pointer-events: none;
}

/* PN2 — Date tag rendered as a Cinzel eyebrow */
header:has(a[href="patch-notes.html"].active) ~ main.page .card > .tag.tip:first-child {
  font-family: 'Cinzel', serif;
  letter-spacing: 1.4px;
  padding: 0.28rem 0.8rem;
}

/* PN3 — Latest (first) entry glows brighter to mark it current */
header:has(a[href="patch-notes.html"].active) ~ main.page > div:nth-of-type(2) {
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 0 32px rgba(201, 162, 39, 0.14),
              0 12px 32px rgba(0, 0, 0, 0.5);
}

/* PN4 — Changelog bullets: diamond markers, gold lead-ins, airier rhythm */
header:has(a[href="patch-notes.html"].active) ~ main.page .card ul {
  list-style: none;
  margin: 1rem 0 1.1rem;
  padding-left: 0;
}
header:has(a[href="patch-notes.html"].active) ~ main.page .card ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
  line-height: 1.65;
}
header:has(a[href="patch-notes.html"].active) ~ main.page .card ul li:last-child {
  margin-bottom: 0;
}
header:has(a[href="patch-notes.html"].active) ~ main.page .card ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--neon-purple);
  box-shadow: 0 0 8px var(--neon-purple-glow);
}
header:has(a[href="patch-notes.html"].active) ~ main.page .card ul li > strong:first-child,
header:has(a[href="patch-notes.html"].active) ~ main.page .card p > strong:first-child {
  color: var(--gold);
}

/* ==================== patch-tracker.html (PT) ==================== */

/* PT1 — Legend strip as a pill bar */
.pt-wrap .legend {
  background: rgba(13, 9, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

/* PT2 — Coverage line flanked by deco rules */
.pt-wrap .coverage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.pt-wrap .coverage::before,
.pt-wrap .coverage::after {
  content: "";
  height: 1px;
  flex: 1 1 0;
  max-width: 140px;
}
.pt-wrap .coverage::before {
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.pt-wrap .coverage::after {
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}

/* PT3 — Latest patch panel: gradient top rule + gold list markers */
.pt-wrap .latest {
  position: relative;
  overflow: hidden;
}
.pt-wrap .latest::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--neon-purple), var(--neon-teal));
}
.pt-wrap .latest ul li {
  margin-bottom: 0.6rem;
}
.pt-wrap .latest ul li::marker {
  color: var(--gold);
}

/* PT4 — Selected hero pick: tinted background, lifted, brightened name */
.pt-wrap .hero-pick.sel {
  background: rgba(201, 162, 39, 0.08);
  transform: translateY(-2px);
}
.pt-wrap .hero-pick span {
  transition: color 0.15s ease;
}
.pt-wrap .hero-pick:hover span,
.pt-wrap .hero-pick.sel span {
  color: var(--text);
}

/* PT5 — Hero detail panel entrance animation */
.pt-wrap .detail.show {
  animation: polish-detail-in 0.35s ease-out;
}
@keyframes polish-detail-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* PT6 — Patch block: purple gradient left rail */
.pt-wrap .patch-block {
  position: relative;
  padding-left: 1.1rem;
}
.pt-wrap .patch-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--neon-purple), rgba(168, 85, 247, 0));
}

/* PT7 — Change rows: hover feedback */
.pt-wrap .change {
  padding: 0.45rem 0.65rem;
  margin: 0 -0.65rem 0.55rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.pt-wrap .change:hover {
  background: rgba(168, 85, 247, 0.07);
}

/* PT8 — "No changes" empty state as a dashed panel */
.pt-wrap .no-changes {
  border: 1px dashed rgba(168, 85, 247, 0.35);
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.04);
}

/* PT9 — Source note separated by a hairline divider */
.pt-wrap .src-note {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
  margin-top: 1.6rem;
}

/* ==================== rifts.html (R) ==================== */

/* R1 — Spawn-timing steps as a numbered gold timeline */
header:has(a[href="rifts.html"].active) ~ main.page .card ol {
  list-style: none;
  counter-reset: polish-rift-step;
  margin: 1.1rem 0;
  padding-left: 0;
}
header:has(a[href="rifts.html"].active) ~ main.page .card ol li {
  counter-increment: polish-rift-step;
  position: relative;
  padding-left: 3.1rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}
header:has(a[href="rifts.html"].active) ~ main.page .card ol li:last-child {
  margin-bottom: 0;
}
header:has(a[href="rifts.html"].active) ~ main.page .card ol li::before {
  content: counter(polish-rift-step);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(201, 162, 39, 0.08);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
}
header:has(a[href="rifts.html"].active) ~ main.page .card ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.5rem;
  bottom: -1rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-dim), transparent);
}

/* R2 — Rift card bullets: teal diamonds, gold lead-ins */
header:has(a[href="rifts.html"].active) ~ main.page .card ul {
  list-style: none;
  margin: 1rem 0;
  padding-left: 0;
}
header:has(a[href="rifts.html"].active) ~ main.page .card ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  line-height: 1.65;
}
header:has(a[href="rifts.html"].active) ~ main.page .card ul li:last-child {
  margin-bottom: 0;
}
header:has(a[href="rifts.html"].active) ~ main.page .card ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--neon-teal);
  box-shadow: 0 0 8px var(--neon-teal-glow);
}
header:has(a[href="rifts.html"].active) ~ main.page .card ul li > strong:first-child {
  color: var(--gold);
}

/* ==================== soul-calc.html (SC) ==================== */

/* SC1 — Stable-width time readout + keyboard focus ring on the slider */
.calc-wrap .time-display {
  font-variant-numeric: tabular-nums;
}
.calc-wrap input[type="range"].time-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25), 0 0 14px var(--gold-glow);
}

/* SC2 — Soul values glow teal when their row is hovered */
.calc-wrap .soul-table .val {
  transition: text-shadow 0.15s ease;
}
.calc-wrap .soul-table tbody tr:hover .val {
  text-shadow: 0 0 12px var(--neon-teal-glow);
}

/* SC3 — Guideline lists: gold diamond bullets, consistent rhythm */
.calc-wrap .guideline-list {
  list-style: none;
  padding-left: 0;
}
.calc-wrap .guideline-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  line-height: 1.7;
}
.calc-wrap .guideline-list li:last-child {
  margin-bottom: 0;
}
.calc-wrap .guideline-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.68em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

/* SC4 — Calc notes read as ruled footnotes */
.calc-wrap .calc-note {
  border-top: 1px dashed rgba(120, 110, 160, 0.28);
  padding-top: 0.9rem;
}

/* ==================== timer.html (T) ==================== */

/* T1 — Control buttons: press feedback + keyboard focus ring */
.timer-wrap .timer-controls button:active {
  transform: translateY(1px) scale(0.98);
}
.timer-wrap .timer-controls button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* T2 — Elapsed readout as a HUD pill */
.timer-wrap .elapsed {
  display: inline-block;
  background: rgba(13, 9, 24, 0.8);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
  margin-top: 1rem;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4);
}
.timer-wrap .elapsed strong {
  color: var(--gold);
  text-shadow: 0 0 12px var(--gold-glow);
  font-variant-numeric: tabular-nums;
}

/* T3 — State-tinted icons, names, and readouts */
.timer-wrap .obj-row.warn .obj-icon {
  border-color: var(--gold-dim);
  background: rgba(201, 162, 39, 0.1);
}
.timer-wrap .obj-row.warn .obj-icon svg {
  color: var(--gold);
}
.timer-wrap .obj-row.live .obj-icon {
  border-color: rgba(255, 80, 80, 0.55);
  background: rgba(255, 80, 80, 0.08);
}
.timer-wrap .obj-row.live .obj-icon svg {
  color: #ff8080;
}
.timer-wrap .obj-row.live .obj-name {
  color: #ffc4c4;
}
.timer-wrap .obj-row.live .obj-time {
  text-shadow: 0 0 14px rgba(255, 80, 80, 0.65);
}
.timer-wrap .obj-row.done .obj-time {
  color: var(--muted);
  text-shadow: none;
}

/* T4 — Sound toggle as a pill */
.timer-wrap .sound-toggle {
  display: inline-flex;
  background: rgba(13, 9, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  margin-top: 1.1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.timer-wrap .sound-toggle:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.15);
}

/* T5 — Guideline lists: gold diamond bullets, consistent rhythm */
.timer-wrap .guideline-list {
  list-style: none;
  padding-left: 0;
}
.timer-wrap .guideline-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  line-height: 1.7;
}
.timer-wrap .guideline-list li:last-child {
  margin-bottom: 0;
}
.timer-wrap .guideline-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.68em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

/* T6 — Small screens: let objective rows breathe */
@media (max-width: 560px) {
  .timer-wrap .obj-row {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }
  .timer-wrap .obj-row .obj-time {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 1.35rem;
  }
  header:has(a[href="rifts.html"].active) ~ main.page .card ol li {
    padding-left: 2.8rem;
  }
}

/* ==================== reduced motion ==================== */
@media (prefers-reduced-motion: reduce) {
  header:has(a[href="phases.html"].active) ~ main.page .phase-line::after,
  .pt-wrap .detail.show {
    animation: none;
  }
  header:has(a[href="phases.html"].active) ~ main.page .phase-node img,
  .pt-wrap .hero-pick span,
  .pt-wrap .change,
  .calc-wrap .soul-table .val,
  .timer-wrap .sound-toggle {
    transition: none;
  }
}

/* Contact form */
.contact-form { margin-top: 1rem; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.cf-field { margin-bottom: 0.8rem; }
.cf-field label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.cf-opt { font-weight: 400; opacity: 0.7; }
.cf-field input, .cf-field textarea, .cf-field select {
  width: 100%; padding: 0.65rem 0.8rem; border-radius: 10px;
  border: 1px solid rgba(168,85,247,0.3); background: rgba(0,0,0,0.35);
  color: #e9d5ff; font-family: inherit; font-size: 0.92rem; box-sizing: border-box;
}
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus {
  outline: none; border-color: var(--neon-teal); box-shadow: 0 0 0 2px rgba(94,234,212,0.2);
}
.cf-field textarea { resize: vertical; min-height: 110px; }
.cf-status { margin-top: 0.7rem; font-size: 0.88rem; min-height: 1.2em; }
.cf-status.ok { color: #5eead4; }
.cf-status.err { color: #f87171; }
#cfSubmit:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 600px) { .cf-row { grid-template-columns: 1fr; } }
.footer-dev{font-size:0.8rem;opacity:0.75;font-style:italic;margin-top:0.3rem;}