/* Palette: a night-sky indigo with parchment text and tooltip gold.
   Item quality colors follow the in-game convention, lightened slightly for contrast. */
:root {
  --night: #10162a;
  --panel: #18203b;
  --line: #2b3560;
  --ink: #ece5d3;
  --muted: #98a0bf;
  --gold: #ffd35a;
  --tt-bg: rgba(6, 10, 26, 0.94);
  --tt-edge: #7584b3;

  --q-poor: #9d9d9d;
  --q-common: #ffffff;
  --q-uncommon: #1eff00;
  --q-rare: #3d8ff5;
  --q-epic: #b866ff;
  --q-legendary: #ff8000;
  --q-artifact: #e6cc80;
  --q-heirloom: #00ccff;

  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 17px/1.55 var(--body);
}
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 64px; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: 1.5rem; margin: 48px 0 16px; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Header */
.site-header {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  max-width: 1080px; margin: 0 auto; padding: 16px 20px;
}
.brand { font-family: var(--display); font-size: 1.35rem; color: var(--ink); text-decoration: none; }

/* Search */
.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.search label { display: grid; gap: 2px; font-size: 0.88rem; color: var(--muted); }
.search input, .search select, .search button {
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
}
.search input { width: 150px; }
.search button { background: var(--gold); color: #1d1606; border-color: var(--gold); font-weight: 600; cursor: pointer; }
.search button:hover { filter: brightness(1.08); }
.search.compact label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search.hero { margin-top: 28px; }
.search.hero input { width: 210px; padding: 12px 14px; }
.search.hero button { padding: 12px 20px; }

/* Home */
.home { padding: 72px 0 40px; max-width: 720px; }
.home h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.lede { color: var(--muted); font-size: 1.15rem; max-width: 58ch; margin: 16px 0 0; }

/* Character banner */
.banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  margin-top: 24px; padding: 24px 0; border-bottom: 1px solid var(--line);
}
.banner h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); color: var(--class); }
.who { margin: 4px 0 0; color: var(--muted); }
.avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--class); object-fit: cover; }
.avatar.placeholder { display: grid; place-items: center; background: var(--panel); font-family: var(--display); font-size: 2.2rem; color: var(--class); }
.stats { display: flex; gap: 28px; margin: 0; }
.stats dt { font-size: 0.92rem; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--display); font-size: 2rem; }

/* The signature element: priorities rendered like in-game item tooltips */
.tooltips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tooltip {
  position: relative; padding: 16px 18px 18px;
  background: var(--tt-bg);
  border: 1px solid var(--tt-edge);
  border-radius: 4px;
  box-shadow: 0 0 0 1px #05081a, inset 0 0 0 1px #05081a, 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: tt-in 420ms ease-out both; animation-delay: var(--delay);
}
.tooltip p { margin: 0; }
.rank {
  position: absolute; top: -14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: #1d1606; font-weight: 600; font-size: 0.9rem;
}
.tt-name { font-size: 1.1rem; font-weight: 600; padding-right: 24px; }
.tt-ilvl { color: var(--gold); font-size: 0.95rem; }
.tt-slot { color: var(--ink); font-size: 0.95rem; }
.tt-actions { margin: 12px 0 0; padding: 0; list-style: none; color: var(--q-uncommon); font-size: 0.95rem; }
.tt-actions li + li { margin-top: 4px; }
@keyframes tt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .tooltip { animation: none; } }

/* Vault and next steps */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.vault { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vault li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.vault-title { color: var(--muted); }
.vault .open .vault-title { color: var(--ink); }
.vault-note { font-size: 0.9rem; color: var(--muted); min-width: 9ch; text-align: right; }
.vault .open .vault-note { color: var(--gold); }
meter { width: 100%; height: 10px; }
meter::-webkit-meter-bar { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
meter::-webkit-meter-optimum-value { background: var(--gold); border-radius: 5px; }
meter::-moz-meter-bar { background: var(--gold); }
.steps { margin: 0; padding-left: 1.2em; }
.steps li + li { margin-top: 8px; }
.calm { color: var(--muted); }

/* Stats */
.core { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin: 0 0 20px; }
.core dt { font-size: 0.92rem; color: var(--muted); }
.core dd { margin: 0; font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.secondary { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.secondary li { display: grid; grid-template-columns: 116px 1fr 58px; gap: 2px 12px; align-items: center; }
.s-name { color: var(--muted); }
.secondary .top .s-name { color: var(--ink); }
.s-bar { height: 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.s-bar span { display: block; height: 100%; background: var(--muted); }
.secondary .top .s-bar span { background: var(--gold); }
.s-pct { text-align: right; font-variant-numeric: tabular-nums; }
.s-rating { grid-column: 2 / -1; font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.extra { margin: 16px 0 0; color: var(--muted); font-size: 0.95rem; }

/* Consumables */
.cons-intro { margin: 0 0 14px; color: var(--muted); font-size: 0.95rem; }
.cons { list-style: none; padding: 0; margin: 0; }
.cons li { display: grid; grid-template-columns: 112px 36px 1fr; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cons li:first-child { border-top: 1px solid var(--line); }
.c-type { grid-row: 1 / span 2; color: var(--muted); font-size: 0.9rem; padding-top: 2px; }
/* Icons framed like action-bar buttons */
.c-icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--tt-edge); box-shadow: 0 0 0 1px #05081a; margin-top: 2px; }
.c-icon.blank { display: block; background: radial-gradient(circle at 35% 30%, #2b3560, #10162a 70%); }
.c-name { color: var(--q-common); font-weight: 600; }
.c-why { grid-column: 3; color: var(--muted); font-size: 0.9rem; }

/* Full gear list, laid out like a character sheet */
.gear { list-style: none; padding: 0; margin: 0; columns: 2 420px; column-gap: 40px; }
.gear li {
  break-inside: avoid; display: grid; grid-template-columns: 84px 1fr 40px; gap: 4px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.g-slot { color: var(--muted); font-size: 0.9rem; padding-top: 2px; }
.g-name small { display: block; color: var(--q-uncommon); font-size: 0.92rem; }
.g-ilvl { text-align: right; font-variant-numeric: tabular-nums; }
.g-flags { grid-column: 2 / -1; display: flex; gap: 6px; }
.g-flags:empty { display: none; }
.g-flags em { font-style: normal; font-size: 0.88rem; color: var(--gold); border: 1px solid rgba(255, 211, 90, 0.4); border-radius: 4px; padding: 0 6px; }
.gear .flagged .g-slot { color: var(--gold); }
.empty-slot { color: var(--muted); font-style: italic; }

.q-poor { color: var(--q-poor); } .q-common { color: var(--q-common); } .q-uncommon { color: var(--q-uncommon); }
.q-rare { color: var(--q-rare); } .q-epic { color: var(--q-epic); } .q-legendary { color: var(--q-legendary); }
.q-artifact { color: var(--q-artifact); } .q-heirloom { color: var(--q-heirloom); }

.demo-banner { margin: 16px 0 0; padding: 10px 14px; border: 1px dashed var(--gold); border-radius: 6px; color: var(--gold); font-size: 0.95rem; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; text-align: center; padding: 20px; }

@media (max-width: 720px) {
  .banner { grid-template-columns: auto 1fr; }
  .stats { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .cons li { grid-template-columns: 36px 1fr; }
  .c-type { grid-row: auto; grid-column: 1 / -1; }
  .c-icon { grid-row: 2 / span 2; }
  .c-why { grid-column: 2; }
  .search.hero input, .search input { width: 100%; }
  .search label { flex: 1 1 140px; }
}
.split > section { min-width: 0; }

/* ---------- Home page ---------- */
/* Midnight sky: void purple above, stars, and the spires of Silvermoon. */
body.home-page { position: relative; background: radial-gradient(ellipse 80% 55% at 50% 0%, #33246e 0%, transparent 62%), #0b0d22; }
.home-page .site-header, .home-page .hero, .home-page .preview { position: relative; z-index: 1; }
.home-page { overflow-x: clip; }
.home-page .site-header { justify-content: flex-end; }
.season {
  color: var(--ink); font-size: 0.95rem; padding: 5px 14px; border-radius: 999px;
  border: 1px solid rgba(190, 170, 255, 0.35); background: rgba(60, 40, 130, 0.25);
  box-shadow: 0 0 18px rgba(160, 130, 255, 0.35), inset 0 0 10px rgba(160, 130, 255, 0.15);
  text-shadow: 0 0 10px rgba(220, 210, 255, 0.6);
}
.sky { position: absolute; inset: 0 0 auto 0; height: 760px; pointer-events: none; overflow: hidden; }
.sky i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; opacity: 0.15; animation: twinkle var(--d) ease-in-out var(--w) infinite;
}
@keyframes twinkle { 50% { opacity: 0.85; } }
.skyline { position: absolute; left: 0; right: 0; top: 290px; height: 300px; pointer-events: none; }
.skyline::after { content: ""; position: absolute; inset: auto 0 0 0; height: 170px; background: linear-gradient(transparent, #0b0d22); }
/* The spires keep their size and repeat across wide screens instead of stretching. */
.skyline { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 340%22 width=%221440%22 height=%22340%22%3E%3Cdefs%3E%3ClinearGradient id=%22sg%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233a2c86%22/%3E%3Cstop offset=%221%22 stop-color=%22%23151236%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22fg%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23231b5a%22/%3E%3Cstop offset=%221%22 stop-color=%22%230d0c26%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22url(%23sg)%22 opacity=%22.7%22 d=%22M60 340L60 235.5L54.0 229.8L70 150L86.0 229.8L80 235.5L80 340Z M173 340L173 263.0L168.8 258.8L180 200L191.2 258.8L187 263.0L187 340Z M288 340L288 213.5L280.8 206.60000000000002L300 110L319.2 206.60000000000002L312 213.5L312 340Z M412 340L412 246.5L407.2 241.4L420 170L432.8 241.4L428 246.5L428 340Z M546 340L546 197.0L537.6 189.20000000000002L560 80L582.4 189.20000000000002L574 197.0L574 340Z M681 340L681 241.0L675.6 235.60000000000002L690 160L704.4 235.60000000000002L699 241.0L699 340Z M807 340L807 208.0L799.2 200.8L820 100L840.8 200.8L833 208.0L833 340Z M952 340L952 252.0L947.2 247.2L960 180L972.8 247.2L968 252.0L968 340Z M1068 340L1068 219.0L1060.8 212.4L1080 120L1099.2 212.4L1092 219.0L1092 340Z M1191 340L1191 243.75L1185.6 238.5L1200 165L1214.4 238.5L1209 243.75L1209 340Z M1319 340L1319 224.5L1312.4 218.2L1330 130L1347.6 218.2L1341 224.5L1341 340Z%22/%3E%3Cpath fill=%22url(%23fg)%22 d=%22M16 340L16 274.0L7.599999999999998 270.4L30 220L52.400000000000006 270.4L44 274.0L44 340Z M112 340L112 246.5L101.2 241.4L130 170L158.8 241.4L148 246.5L148 340Z M238 340L238 279.5L230.8 276.2L250 230L269.2 276.2L262 279.5L262 340Z M340 340L340 230.0L328.0 224.0L360 140L392.0 224.0L380 230.0L380 340Z M487 340L487 268.5L479.2 264.6L500 210L520.8 264.6L513 268.5L513 340Z M618 340L618 213.5L604.8 206.60000000000002L640 110L675.2 206.60000000000002L662 213.5L662 340Z M746 340L746 263.0L737.6 258.8L760 200L782.4 258.8L774 263.0L774 340Z M881 340L881 235.5L869.6 229.8L900 150L930.4 229.8L919 235.5L919 340Z M1008 340L1008 274.0L1000.8 270.4L1020 220L1039.2 270.4L1032 274.0L1032 340Z M1119 340L1119 224.5L1106.4 218.2L1140 130L1173.6 218.2L1161 224.5L1161 340Z M1256 340L1256 263.0L1247.6 258.8L1270 200L1292.4 258.8L1284 263.0L1284 340Z M1384 340L1384 252.0L1374.4 247.2L1400 180L1425.6 247.2L1416 252.0L1416 340Z%22/%3E%3Crect x=%2228.5%22 y=%22309%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.54%22/%3E%3Crect x=%22128.5%22 y=%22289%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.56%22/%3E%3Crect x=%22248.5%22 y=%22316%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.66%22/%3E%3Crect x=%22358.5%22 y=%22254%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.82%22/%3E%3Crect x=%22498.5%22 y=%22289%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.59%22/%3E%3Crect x=%22638.5%22 y=%22263%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.61%22/%3E%3Crect x=%22758.5%22 y=%22306%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.54%22/%3E%3Crect x=%22898.5%22 y=%22292%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.87%22/%3E%3Crect x=%221018.5%22 y=%22291%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.82%22/%3E%3Crect x=%221138.5%22 y=%22256%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.58%22/%3E%3Crect x=%221268.5%22 y=%22301%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.75%22/%3E%3Crect x=%221398.5%22 y=%22279%22 width=%223%22 height=%226%22 rx=%221%22 fill=%22%23ffd35a%22 opacity=%220.84%22/%3E%3C/svg%3E") center bottom / auto 100% repeat-x; }
/* The moon, with thin clouds drifting across it now and then. */
.moon-wrap { position: relative; height: 124px; margin: -6px 0 6px; }
.moon {
  position: absolute; left: 50%; top: 7px; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fffaf0, #e9e2ff 45%, #b9b3e6 75%);
  box-shadow: 0 0 30px 6px rgba(225, 220, 255, 0.45), 0 0 110px 30px rgba(150, 130, 255, 0.25);
}
.moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 44px 12px rgba(225, 220, 255, 0.6), 0 0 150px 50px rgba(150, 130, 255, 0.35); opacity: 0; animation: moon-breathe 7s ease-in-out infinite; will-change: opacity; }
@keyframes moon-breathe { 50% { opacity: 1; } }
.cloud {
  position: absolute; z-index: 1; height: 26px; border-radius: 50%; filter: blur(3px);
  background: radial-gradient(ellipse at center, rgba(190, 180, 240, 0.55), rgba(120, 110, 200, 0.18) 55%, transparent 72%);
}
.cloud.c1 { top: 116px; left: 0; width: 260px; animation: cloud-drift 26s linear infinite; will-change: transform; }
.cloud.c2 { top: 150px; left: 0; width: 190px; opacity: 0.7; animation: cloud-drift 34s linear -14s infinite; will-change: transform; }
@keyframes cloud-drift { from { transform: translateX(-280px); } to { transform: translateX(100vw); } }
.sky .cloud { z-index: 2; }

.hero { text-align: center; max-width: 860px; margin: 0 auto; padding: 40px 0 24px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); text-wrap: balance; }
/* "Gear up for MIDNIGHT": carved Cinzel lettering in moonlit silver, like WoW's expansion logos. */
.hero h1.title { font-family: "Cinzel", var(--display); line-height: 1; display: grid; justify-items: center; gap: 6px; }
.title .pre {
  display: flex; align-items: center; gap: 14px; padding-left: 0.42em;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem); font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: #cfc7ff;
}
.title .pre::before, .title .pre::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.title .pre::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.title .big {
  font-size: clamp(3rem, 10vw, 6rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #e6e0ff 38%, #a99cf0 62%, #6a55c9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #1a1240) drop-shadow(0 0 22px rgba(150, 120, 255, 0.55));
}
@media (max-width: 420px) { .title .pre::before, .title .pre::after { width: 28px; } .title .pre { letter-spacing: 0.3em; } }
.hero .lede { margin: 14px auto 28px; max-width: 52ch; }

/* One combined search bar */
.search.bar {
  max-width: 760px; margin: 0 auto; flex-wrap: nowrap; gap: 0; align-items: stretch;
  background: rgba(24, 32, 59, 0.85); border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.search.bar label { flex: 1 1 0; min-width: 0; display: flex; }
.search.bar label:first-child { flex: 0 0 auto; }
.search.bar label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search.bar input, .search.bar select { width: 100%; border: 0; background: transparent; padding: 12px 14px; font-size: 1.05rem; }
.search.bar label + label { border-left: 1px solid var(--line); }
.search.bar button { padding: 12px 22px; font-size: 1.05rem; border-radius: 10px; white-space: nowrap; }
.search button.loading { opacity: 0.75; cursor: progress; }

/* Recent searches */
.recent { max-width: 760px; margin: 14px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--muted); font-size: 0.92rem; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: rgba(16, 22, 42, 0.6);
}
.chip:hover { border-color: var(--gold); }
.dot { width: 20px; height: 20px; border-radius: 50%; }
.hint { margin-left: auto; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; font: inherit; font-size: 0.8rem; }

/* "What you'll see": an example character sheet with glowing weak slots */
.preview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; margin-top: 64px; }
.sheet { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 14px; }
.slots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; align-content: start; }
.slots.weapons { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; }
.slot {
  position: relative; width: 60px; height: 60px; border-radius: 8px;
  border: 2px solid #8a4fd0; background: linear-gradient(145deg, #232b4d, #121831);
}
.slot-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.slot-ilvl { position: absolute; right: 5px; bottom: 2px; font-size: 0.86rem; font-weight: 600; text-shadow: 0 1px 2px #000; }
.slot.weak { border-color: var(--gold); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 211, 90, 0.2), 0 0 14px rgba(255, 211, 90, 0.35); }
  50% { box-shadow: 0 0 0 3px rgba(255, 211, 90, 0.35), 0 0 26px rgba(255, 211, 90, 0.65); }
}
.figure {
  position: relative; border-radius: 16px; border: 1px solid var(--line); min-height: 520px;
  background: radial-gradient(ellipse at 50% 32%, rgba(244, 140, 186, 0.22), transparent 62%), linear-gradient(#18203b, #10162a);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 18px; text-align: center;
}
.fig-name { margin: 0; font-family: var(--display); font-size: 1.8rem; color: #F48CBA; }
.fig-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.callout {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%); width: min(220px, 90%);
  display: grid; text-align: left; padding: 10px 12px; font-size: 0.92rem;
  background: var(--tt-bg); border: 1px solid var(--tt-edge); border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.c-title { color: var(--q-epic); font-weight: 600; }
.c-good { color: var(--q-uncommon); }

.explain h2 { margin-top: 0; font-size: 2rem; }
.explain h2 { line-height: 1; margin-bottom: 18px; }
.see { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.see li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.45; }
.see li::before {
  content: ""; position: absolute; left: 4px; top: 0.5em; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 8px rgba(255, 211, 90, 0.6);
}
.see b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .slot.weak, .moon, .moon::after, .cloud, .sky i { animation: none; } .cloud { display: none; } }

@media (max-width: 760px) {
  .search.bar { flex-wrap: wrap; gap: 6px; }
  .search.bar label { flex: 1 1 100%; }
  .search.bar label + label { border-left: 0; border-top: 1px solid var(--line); }
  .search.bar label:first-child { flex: 1 1 100%; }
  .search.bar button { flex: 1 1 100%; }
  .hint { display: none; }
  .preview { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; }
  .sheet { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 10px; }
  .slot { width: 46px; height: 46px; }
  .slot-ilvl { font-size: 0.78rem; }
  .figure { min-height: 420px; }
}

/* ---------- Character sheet on the character page ---------- */
.charsheet { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: start; }
.gslot {
  position: relative; display: block; width: 60px; height: 60px; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 8px; border: 2px solid #3a3f5c; background: linear-gradient(145deg, #232b4d, #121831);
}
.gslot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gslot .slot-ilvl { position: absolute; right: 4px; bottom: 1px; font-size: 0.86rem; font-weight: 600; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.gslot:hover, .gslot.selected { outline: 2px solid var(--ink); outline-offset: 2px; }
.gslot.weak { border-color: var(--gold); animation: glow 2.4s ease-in-out infinite; }
/* Border color follows the item's quality, like in game */
.qb-uncommon { border-color: #1eff00; } .qb-rare { border-color: #0070dd; } .qb-epic { border-color: #a335ee; }
.qb-legendary { border-color: #ff8000; } .qb-artifact { border-color: #e6cc80; } .qb-heirloom { border-color: #00ccff; }

.sheet.live .figure {
  overflow: hidden; min-height: 560px;
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--class) 28%, transparent), transparent 62%), linear-gradient(#18203b, #10162a);
}
.render {
  position: absolute; inset: 0 0 56px; width: 100%; height: calc(100% - 56px);
  object-fit: cover; object-position: 50% 18%; pointer-events: none;
}
.sheet.live .fig-name { position: relative; color: var(--class); }
.sheet.live .fig-sub { position: relative; }

.sheet-detail { position: sticky; top: 16px; }
.sheet-hint { margin: 0 0 18px; color: var(--muted); font-size: 0.95rem; }
.tooltip.big { animation: none; }
.tooltip.big .tt-name { font-size: 1.2rem; }
.tt-enchant { color: var(--q-uncommon); font-size: 0.95rem; }
.tt-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.tt-flags em { font-style: normal; font-size: 0.88rem; color: var(--gold); border: 1px solid rgba(255, 211, 90, 0.4); border-radius: 4px; padding: 0 6px; }

@media (prefers-reduced-motion: reduce) { .gslot.weak { animation: none; } }

@media (max-width: 860px) {
  .charsheet { grid-template-columns: 1fr; gap: 20px; }
  .sheet-detail { position: static; }
}
@media (max-width: 760px) {
  .gslot { width: 46px; height: 46px; }
  .gslot .slot-ilvl { font-size: 0.78rem; }
  .sheet.live .figure { min-height: 470px; }
}

/* ---------- Item stats in tooltips ---------- */
.tt-stats { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.95rem; }
.tt-stats .st-armor, .tt-stats .st-primary { color: var(--ink); }
.tt-stats .st-secondary { color: var(--q-uncommon); }
.tt-enchant { margin-top: 8px !important; }

/* ---------- A bigger, livelier character ---------- */
.charsheet { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
.sheet.live .figure { min-height: 680px; perspective: 900px; isolation: isolate; }
/* Soft beam of class-colored light from above */
.light {
  position: absolute; inset: -10% 15% 30%; z-index: -1;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, color-mix(in srgb, var(--class) 35%, transparent), transparent 70%);
  animation: breathe-light 6s ease-in-out infinite;
}
/* Shadow under the feet */
.ground {
  position: absolute; left: 22%; right: 22%; bottom: 66px; height: 28px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  animation: shadow 5s ease-in-out infinite;
}
.render {
  inset: auto; left: 50%; bottom: 40px; width: auto; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotateY(calc(var(--tx, 0) * 10deg)) rotateX(calc(var(--ty, 0) * -4deg));
  transition: transform 0.4s ease-out;
  animation: idle 5s ease-in-out infinite;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--class) 30%, transparent));
}
/* Placeholder when Blizzard has no render */
.silhouette {
  position: absolute; left: 50%; bottom: 80px; width: 38%; height: 70%; transform: translateX(-50%);
  border-radius: 45% 45% 18% 18% / 30% 30% 10% 10%;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--class) 25%, transparent), transparent 70%);
}
@keyframes idle {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 -6px; scale: 1.012; }
}
@keyframes shadow { 0%, 100% { opacity: 1; transform: scaleX(1); } 50% { opacity: 0.75; transform: scaleX(0.92); } }
@keyframes breathe-light { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

/* Embers drifting upward */
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.embers span {
  position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
  background: color-mix(in srgb, var(--class) 60%, var(--gold));
  box-shadow: 0 0 8px color-mix(in srgb, var(--class) 70%, var(--gold));
  opacity: 0; animation: rise var(--d) linear infinite; animation-delay: calc(var(--w) * -1);
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(18px, -640px); opacity: 0; }
}
.sheet.live .fig-name { font-size: 2.2rem; z-index: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .render, .ground, .light, .embers span { animation: none; }
  .embers { display: none; }
}
@media (max-width: 860px) { .charsheet { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sheet.live .figure { min-height: 500px; }
  .render { height: 96%; }
  .sheet.live .fig-name { font-size: 1.7rem; }
}

/* ---------- Animated border on upgrade slots ---------- */
/* A band of light runs around the border. Browsers without @property show a steady gold border. */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.gslot.weak, .slot.weak {
  border-color: transparent; border-width: 3px;
  background:
    linear-gradient(145deg, #232b4d, #121831) padding-box,
    conic-gradient(from var(--spin), #8a5a00, #ffd35a 8%, #fff4c8 12%, #ffd35a 16%, #8a5a00 30%, #8a5a00 50%, #ffd35a 58%, #fff4c8 62%, #ffd35a 66%, #8a5a00 80%) border-box;
  animation: spin 3.2s linear infinite, glow 2.4s ease-in-out infinite;
}
.gslot.weak.rank-1, .slot.weak.rank-1 {
  animation: spin 2s linear infinite, glow-strong 1.6s ease-in-out infinite;
}
@keyframes spin { to { --spin: 360deg; } }
@keyframes glow-strong {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 211, 90, 0.3), 0 0 18px rgba(255, 211, 90, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(255, 211, 90, 0.5), 0 0 34px rgba(255, 211, 90, 0.85); }
}
/* Rank number in the corner, matching the "Upgrade these first" cards */
.slot-rank {
  position: absolute; top: 2px; left: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 700;
  background: var(--gold); color: #1d1606; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .gslot.weak, .slot.weak, .gslot.weak.rank-1, .slot.weak.rank-1 { animation: none; }
}

/* Stat groups: Defense (tanks) and Minor stats */
.stat-group { margin: 22px 0 10px; font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.secondary.minor .s-bar span { background: #6fb7a8; }
.secondary.defense .s-bar span { background: #c9a36a; }
.s-rating:empty { display: none; }

/* ---------- Upgrade cards ---------- */
.upgrades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.upgrade {
  position: relative; display: flex; gap: 14px; align-items: flex-start; min-width: 0;
  padding: 16px; background: var(--tt-bg); border: 1px solid var(--tt-edge); border-radius: 6px;
  box-shadow: 0 0 0 1px #05081a, 0 12px 28px rgba(0, 0, 0, 0.45);
}
.upgrade .rank { top: -12px; left: -12px; right: auto; width: 26px; height: 26px; font-size: 0.92rem; font-weight: 700; }
.u-icon { flex: none; width: 44px; height: 44px; border-radius: 6px; border: 2px solid #3a3f5c; background: linear-gradient(145deg, #3b2a5c, #141a33); object-fit: cover; }
.upgrade.qb-epic .u-icon { border-color: #a335ee; } .upgrade.qb-rare .u-icon { border-color: #0070dd; }
.upgrade.qb-uncommon .u-icon { border-color: #1eff00; } .upgrade.qb-legendary .u-icon { border-color: #ff8000; }
.u-body { min-width: 0; flex: 1; }
.u-body p { margin: 0; }
.u-name { font-weight: 600; }
.u-meta { color: var(--muted); font-size: 0.9rem; }
.u-extras { list-style: none; padding: 0; margin: 6px 0 0; color: var(--q-uncommon); font-size: 0.92rem; }
.u-delta { flex: none; margin: 0; text-align: right; font-size: 1.6rem; font-weight: 600; line-height: 1; color: #ff7a6b; font-variant-numeric: tabular-nums; }
.u-delta small { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 400; color: var(--muted); }
.u-delta.quick { font-size: 0.92rem; color: var(--gold); border: 1px solid rgba(255, 211, 90, 0.4); border-radius: 4px; padding: 2px 8px; }

/* ---------- Great Vault reward tiles ---------- */
.vault-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vault-tiles li {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 170px; justify-content: center;
  padding: 16px 10px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(#18203b, #10162a);
}
.vault-tiles li.open {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 211, 90, 0.3), 0 0 28px rgba(255, 211, 90, 0.22);
  background: radial-gradient(circle at 50% 30%, rgba(255, 211, 90, 0.2), transparent 62%), linear-gradient(#1f2445, #10162a);
}
.chest { width: 52px; height: 42px; margin-bottom: 6px; filter: grayscale(1) brightness(0.6); }
.open .chest { filter: drop-shadow(0 0 10px rgba(255, 211, 90, 0.6)); }
.v-title { font-family: var(--display); font-size: 1.05rem; }
.v-note { color: var(--muted); font-size: 0.95rem; }
.open .v-note { color: var(--gold); font-weight: 600; }
.pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 8px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.pips i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 211, 90, 0.6); }
.reset { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }

/* ---------- To-do list ---------- */
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.todo label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(24, 32, 59, 0.6);
}
.todo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.todo .box { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 5px; border: 2px solid var(--gold); display: grid; place-items: center; }
.todo input:checked + .box { background: var(--gold); }
.todo input:checked + .box::after { content: ""; width: 6px; height: 10px; margin-top: -2px; border: solid #1d1606; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.todo input:checked ~ .t { color: var(--muted); text-decoration: line-through; }
.todo input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 520px) {
  .vault-tiles { gap: 8px; }
  .vault-tiles li { min-height: 150px; padding: 12px 6px; }
  .chest { width: 40px; height: 32px; }
  .v-note { font-size: 0.92rem; }
}

/* Upgrade card icons open a floating item tooltip */
.u-tip { flex: none; padding: 0; border: 0; background: none; cursor: help; border-radius: 8px; }
.u-tip:hover .u-icon, .u-tip[aria-expanded="true"] .u-icon { outline: 2px solid var(--ink); outline-offset: 2px; }
.tooltip.floating {
  position: absolute; z-index: 50; width: min(320px, calc(100vw - 24px)); pointer-events: none;
  animation: tip-in 0.12s ease-out;
}
.tooltip.floating .rank { top: -12px; right: 12px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .tooltip.floating { animation: none; } }
.u-tip .u-icon { display: block; }
.tooltip.floating { background: #070b1c; }

/* Home page example sheet: real character, tooltip tucked into the top corner */
.home-sheet .figure { min-height: 600px; }
.home-sheet .callout { top: 16px; left: 16px; transform: none; z-index: 2; }
@media (max-width: 760px) { .home-sheet .figure { min-height: 480px; } .home-sheet .callout { top: 10px; left: 10px; width: 190px; font-size: 0.88rem; } }

/* Big search bar: a visible label above each box so it's clear what to type */
.search.bar label { flex-direction: column; justify-content: center; text-align: left; padding: 6px 14px 4px; }
.search.bar label > span {
  position: static; width: auto; height: auto; overflow: visible; clip: auto;
  font-size: 0.86rem; font-weight: 600; color: var(--gold); letter-spacing: 0.02em;
}
.search.bar input, .search.bar select { padding: 2px 0 6px; }
.search.bar select { padding-right: 18px; }
.search.bar input::placeholder { color: #8890b3; opacity: 1; }
.search.bar label:focus-within > span { color: #fff1b8; }
.search.bar label:focus-within { background: rgba(255, 255, 255, 0.04); border-radius: 10px; }
@media (max-width: 760px) { .search.bar label { padding: 8px 12px 6px; } }
.search.bar input, .search.bar select { font-size: 1rem; }
.search.bar label:nth-of-type(3) { flex-grow: 1.25; }
.search.bar input::-webkit-calendar-picker-indicator { display: none !important; }
.search.bar input:focus-visible, .search.bar select:focus-visible { outline: none; }
.search.bar label:focus-within { box-shadow: inset 0 0 0 2px var(--gold); }
.tt-upgrade { color: var(--gold); font-size: 0.9rem; }

/* Ranked to-do list with impact tags */
.todo-intro { margin: -6px 0 14px; color: var(--muted); font-size: 0.92rem; }
.todo label { flex-wrap: wrap; }
.todo .t { flex: 1 1 0; min-width: 0; }
.impact {
  flex: none; align-self: flex-start; margin-top: 1px; padding: 1px 9px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap; border: 1px solid;
}
.impact-high { color: #1d1606; background: var(--gold); border-color: var(--gold); }
.impact-medium { color: var(--gold); border-color: rgba(255, 211, 90, 0.55); }
.impact-low { color: var(--muted); border-color: var(--line); }
.todo input:checked ~ .impact { opacity: 0.5; }
@media (max-width: 520px) { .impact { margin-left: 32px; } }
@media (max-width: 520px) { .todo .t { flex-basis: calc(100% - 32px); } }

/* Impact tags, style A ("Ember glow"): High pulses and lights its card, Medium glows softly, Low stays still. */
@keyframes ember {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 90, 0), 0 0 8px rgba(255, 211, 90, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(255, 211, 90, 0.18), 0 0 22px rgba(255, 211, 90, 0.9); }
}
@keyframes ember-soft {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 211, 90, 0.15); }
  50% { box-shadow: 0 0 12px rgba(255, 211, 90, 0.45); }
}
.impact-high { animation: ember 1.6s ease-in-out infinite; }
.impact-medium { animation: ember-soft 3s ease-in-out infinite; }
.todo li.is-high label {
  border-color: rgba(255, 211, 90, 0.6);
  box-shadow: inset 3px 0 0 var(--gold), 0 0 18px rgba(255, 211, 90, 0.12);
  background: linear-gradient(90deg, rgba(255, 211, 90, 0.08), rgba(24, 32, 59, 0.6) 40%);
}
/* Ticked items calm down */
.todo input:checked ~ .impact { animation: none; }
.todo li.is-high label:has(input:checked) { box-shadow: none; background: rgba(24, 32, 59, 0.6); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .impact-high, .impact-medium { animation: none; } }

/* ---------- "Your crests" panel ---------- */
.wallet { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16, 22, 42, 0.7); }
.wallet h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.w-hint { margin: 4px 0 12px; color: var(--muted); font-size: 0.9rem; }
.w-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.w-fields label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); min-width: 0; }
.w-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 6px 10px; }
.w-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 211, 90, 0.2); }
.w-box input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; font-variant-numeric: tabular-nums; outline: none; }
.gem { flex: none; display: block; width: 14px; height: 14px; margin: 0 3px; border-radius: 3px; transform: rotate(45deg); }
.gem.g-champ { background: linear-gradient(135deg, #9cc8ff, #2f6fd1); box-shadow: 0 0 8px rgba(61, 143, 245, 0.6); }
.gem.g-hero { background: linear-gradient(135deg, #d9a3ff, #7b2fd1); box-shadow: 0 0 8px rgba(163, 53, 238, 0.6); }
.gem.g-myth { background: linear-gradient(135deg, #ffc27a, #d45f00); box-shadow: 0 0 8px rgba(255, 128, 0, 0.6); }
.gem.g-spark { background: linear-gradient(135deg, #9ff3e6, #1c9c8c); box-shadow: 0 0 8px rgba(46, 200, 180, 0.6); border-radius: 50%; }
.w-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.w-note.fresh { color: #7fe07f; }
.w-note.stale { color: var(--gold); }
.w-clear { flex: none; font: inherit; font-size: 0.9rem; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.w-clear:hover { color: var(--ink); }

/* "Ready now" steps */
.impact-ready { color: #052b05; background: #5fd35f; border-color: #5fd35f; }
.todo .t small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 520px) { .w-fields { gap: 6px; } .w-box { padding: 6px 8px; gap: 6px; } }

/* ---------- Talents ---------- */
.col { min-width: 0; }
.talents { margin-top: 8px; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.spec {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.88rem; color: var(--muted);
  background: rgba(16, 22, 42, 0.7); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.spec:hover { color: var(--ink); }
.spec.on { color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 211, 90, 0.35); }
.spec small { font-size: 0.78rem; font-weight: 700; color: #052b05; background: #5fd35f; border-radius: 999px; padding: 0 6px; }
.offnote { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 0.92rem; color: var(--muted); border: 1px dashed var(--line); }
.tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 22, 42, 0.7); margin-bottom: 12px; }
.tab { flex: 1; font: inherit; font-size: 0.92rem; color: var(--muted); background: none; border: 0; border-radius: 7px; padding: 8px 6px; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.on { color: #1d1606; background: var(--gold); font-weight: 700; }
.tcard { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(24, 32, 59, 0.6); }
.tcard.empty { display: block; }
.tcard.empty a { color: var(--gold); font-size: 0.92rem; }
.tcard .b { flex: 1; min-width: 0; }
.tcard p { margin: 0; }
.tcard .n { font-weight: 600; }
.tcard .d { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.tcard.empty .d { margin: 0 0 6px; }
.hero-ic {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center;
  font-family: var(--display); font-size: 1.1rem; color: var(--gold); background: radial-gradient(circle at 40% 35%, #4a3a1a, #120d05 70%);
}
.yours { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #052b05; background: #5fd35f; vertical-align: 2px; }
.copy { flex: none; font: inherit; font-size: 0.88rem; font-weight: 600; color: #1d1606; background: var(--gold); border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.copy:hover { filter: brightness(1.08); }
.copy.done { background: #5fd35f; color: #052b05; }
.tal-hint { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; }
.src { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.src a { color: var(--muted); }
@media (max-width: 520px) {
  .tcard { flex-wrap: wrap; }
  .tcard .copy { width: 100%; }
  .tab { font-size: 0.92rem; padding: 8px 4px; }
}
.current { margin: 10px 0 0; font-size: 0.88rem; color: var(--ink); }

/* ---------- Enchants ---------- */
.enchants { margin-top: 8px; }
.e-sum { margin: 0 0 12px; color: var(--muted); font-size: 0.92rem; }
.e-sum b { color: var(--ink); }
.e-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(24, 32, 59, 0.6); overflow: hidden; }
.e-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.e-row + .e-row { border-top: 1px solid var(--line); }
.e-icon { flex: none; width: 36px; height: 36px; border-radius: 7px; border: 1px solid var(--line); object-fit: cover; }
.e-icon.blank { background: radial-gradient(circle at 40% 35%, #2b3766, #121a33 75%); }
.e-b { flex: 1; min-width: 0; }
.e-b p { margin: 0; }
.e-slot { font-size: 0.86rem; color: var(--muted); }
.e-name { font-weight: 600; }
.e-yours, .e-note { font-size: 0.84rem; color: var(--muted); margin-top: 2px !important; }
.e-note { font-style: italic; }
.e-chip { flex: none; align-self: flex-start; margin-top: 4px; font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.e-chip.ok { color: #052b05; background: #5fd35f; }
.e-chip.swap { color: var(--gold); border: 1px solid var(--gold); background: rgba(255, 211, 90, 0.08); }

/* ---------- Section panels and scroll fade-in (character page) ---------- */
.blk {
  position: relative; border-radius: 16px; padding: 22px 24px 24px; margin-top: 28px;
  background: linear-gradient(180deg, rgba(44, 52, 98, 0.55), rgba(20, 26, 52, 0.35));
  border: 1px solid rgba(120, 130, 210, 0.18); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.blk > h2:first-child { margin-top: 0; }
.split:has(> .blk), .split:has(> .col > .blk) { gap: 28px; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (max-width: 520px) { .blk { padding: 18px 16px 20px; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Gems, under the enchants */
.g-sub { margin: 26px 0 8px; font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.g-count { margin-left: 6px; font-family: var(--body); font-size: 0.88rem; color: var(--muted); }
.gem-ic { flex: none; width: 36px; height: 36px; border-radius: 7px; border: 1px solid var(--line); display: grid; place-items: center; background: #121a33; }
.gem-ic i { width: 16px; height: 16px; transform: rotate(45deg); border-radius: 3px; }
.gem-ic.dia i { background: linear-gradient(135deg, #fff, #9fd8ff 45%, #6a8cff); box-shadow: 0 0 10px rgba(160, 210, 255, 0.8); }
.gem-ic.peridot i { background: linear-gradient(135deg, #d7ffb0, #5fc23a); box-shadow: 0 0 8px rgba(110, 220, 70, 0.6); }
.gem-ic.garnet i { background: linear-gradient(135deg, #ffb3b3, #d23a3a); box-shadow: 0 0 8px rgba(230, 70, 70, 0.6); }
.gem-ic.amethyst i { background: linear-gradient(135deg, #e3c2ff, #8a3fd6); box-shadow: 0 0 8px rgba(160, 80, 240, 0.6); }
.gem-ic.lapis i { background: linear-gradient(135deg, #b9d4ff, #2f5fd1); box-shadow: 0 0 8px rgba(60, 110, 240, 0.6); }
.sockets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sockets span { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; }
.sockets .match { background: #5fd35f; }
.sockets .swap { border: 1.5px solid var(--gold); }
.sockets .empty { border: 1.5px dashed #5b6699; }

/* ---------- To-do: titles, details and the 5-level impact meter ---------- */
.todo .t .n { display: block; font-weight: 600; line-height: 1.3; }
.todo .t .d { display: block; margin-top: 3px; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.todo input:checked ~ .t .d { text-decoration: none; }
.meter { flex: none; display: grid; justify-items: end; gap: 5px; margin-left: auto; text-align: right; }
.m-lab { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.m-bars { display: flex; gap: 3px; }
.m-bars i { width: 14px; height: 5px; border-radius: 3px; background: #2b3560; }
.m-gain { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter.lv5 .m-lab, .meter.lv4 .m-lab { color: var(--gold); }
.meter.lv5 .m-bars i { background: var(--gold); box-shadow: 0 0 6px rgba(255, 211, 90, 0.7); animation: bar-glow 2.4s ease-in-out infinite; }
.meter.lv5 .m-gain { color: var(--gold); }
.meter.lv4 .m-bars i:nth-child(-n+4) { background: var(--gold); }
.meter.lv3 .m-lab { color: #e9c97a; }
.meter.lv3 .m-bars i:nth-child(-n+3) { background: #c9a64a; }
.meter.lv2 .m-lab, .meter.lv1 .m-lab { color: var(--muted); }
.meter.lv2 .m-bars i:nth-child(-n+2) { background: #7b84aa; }
.meter.lv1 .m-bars i:nth-child(1) { background: #5b6488; }
.meter.ready .m-lab { color: #5fd35f; }
@keyframes bar-glow { 50% { box-shadow: 0 0 10px rgba(255, 211, 90, 1); } }
.todo li.lv-5 label { border-color: rgba(255, 211, 90, 0.7); border-left: 3px solid var(--gold); box-shadow: 0 0 0 1px rgba(255, 211, 90, 0.25), 0 0 22px rgba(255, 211, 90, 0.15); }
.todo li.lv-4 label { border-left: 3px solid rgba(255, 211, 90, 0.7); }
.todo li.is-ready label { border-left: 3px solid #5fd35f; }
.todo input:checked ~ .meter { opacity: 0.45; }
.todo input:checked ~ .meter i { animation: none; }
.todo li label:has(input:checked) { box-shadow: none; border-color: var(--line); }
@media (max-width: 520px) {
  .todo .meter { margin-left: 32px; grid-auto-flow: column; align-items: center; justify-items: start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .meter.lv5 .m-bars i { animation: none; } }
/* Panels in a two-column row keep their own height instead of stretching to match. */
.split > .blk { align-self: start; }

/* "N characters optimized" on the home page */
.optimized { margin: 22px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(190, 170, 255, 0.3); background: rgba(40, 30, 100, 0.35); color: var(--muted); font-size: 0.95rem;
  box-shadow: 0 0 22px rgba(160, 130, 255, 0.18); }
.optimized b { color: var(--gold); font-family: "Cinzel", var(--display); font-size: 1.15rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 211, 90, 0.45); }
.o-gem { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--gold); box-shadow: 0 0 8px rgba(255, 211, 90, 0.7); }

/* Server suggestions dropdown */
form.search label { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 4px;
  background: #121831; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  max-height: 280px; overflow-y: auto; text-align: left; min-width: 180px;
}
.suggest[hidden] { display: none; }
.suggest li { padding: 9px 12px; border-radius: 7px; font-size: 0.98rem; color: var(--ink); cursor: pointer; }
.suggest li:hover, .suggest li.on { background: rgba(255, 211, 90, 0.14); color: var(--gold); }

/* ---------- Header on character pages: moon home button and rounded search ---------- */
.home-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 7px; border-radius: 999px; border: 1px solid var(--line); background: rgba(16, 22, 42, 0.8); color: var(--ink); font-size: 0.95rem; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.home-btn:hover, .home-btn:focus-visible { border-color: rgba(255, 211, 90, 0.6); box-shadow: 0 0 14px rgba(255, 211, 90, 0.2); }
.hb-moon { width: 28px; height: 28px; border-radius: 50%; flex: none; background: radial-gradient(circle at 38% 35%, #fffaf0, #e9e2ff 45%, #b9b3e6 75%); box-shadow: 0 0 12px rgba(225, 220, 255, 0.6), 0 0 30px rgba(150, 130, 255, 0.35); }
.search.compact { gap: 0; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(16, 22, 42, 0.8); padding: 4px; flex-wrap: nowrap; }
.search.compact input, .search.compact select { border: 0; background: transparent; border-radius: 0; padding: 7px 12px; }
.search.compact label + label { border-left: 1px solid var(--line); }
.search.compact input { width: 140px; }
.search.compact button { border-radius: 999px; padding: 8px 16px; }
@media (max-width: 640px) {
  .search.compact { flex: 1 1 100%; }
  .search.compact label { flex: 1 1 0; min-width: 0; }
  .search.compact input { width: 100%; }
  .search.compact select { padding: 7px 6px; }
}

/* ---------- Character banner ---------- */
.cbanner { margin-top: 18px; border-radius: 18px; border: 1px solid rgba(120, 130, 210, 0.2); background: linear-gradient(180deg, rgba(44, 52, 98, 0.55), rgba(20, 26, 52, 0.35)); padding: 22px 24px; }
.cb-row { display: flex; gap: 18px; align-items: center; }
.cb-av { flex: none; width: 84px; height: 84px; border-radius: 18px; border: 2px solid var(--class); object-fit: cover; box-shadow: 0 0 20px color-mix(in srgb, var(--class) 35%, transparent); }
.cb-av.placeholder { display: grid; place-items: center; background: var(--panel); font-family: "Cinzel", var(--display); font-size: 2.2rem; color: var(--class); }
.cb-id { min-width: 0; }
.cb-name { margin: 0; font-family: "Cinzel", var(--display); font-weight: 800; letter-spacing: 0.03em; line-height: 1.05; font-size: clamp(2rem, 5vw, 3rem); color: var(--class); text-shadow: 0 0 22px color-mix(in srgb, var(--class) 45%, transparent); overflow-wrap: anywhere; }
.cb-who { margin: 6px 0 0; color: var(--muted); }
.cb-who b { color: var(--class); font-weight: 600; }
.cb-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.cb-m { min-width: 0; }
.cb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cb-top span { font-size: 0.9rem; color: var(--muted); }
.cb-top b { font-family: "Cinzel", var(--display); font-weight: 700; font-size: 1.6rem; }
.cb-score { color: #ff8000; }
.cb-bar { height: 7px; border-radius: 5px; background: #2b3560; margin-top: 5px; overflow: hidden; }
.cb-bar i { display: block; height: 100%; border-radius: 5px; }
.cb-bar.il i { background: linear-gradient(90deg, #8a64f0, #ffd35a); }
.cb-bar.sc i { background: linear-gradient(90deg, #a335ee, #ff8000); }
.cb-m small { display: block; margin-top: 5px; font-size: 0.86rem; color: var(--muted); }
.cb-m small b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .cbanner { padding: 18px 16px; }
  .cb-av { width: 64px; height: 64px; border-radius: 14px; }
  .cb-meters { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) { .search.compact input, .search.compact select { padding: 7px 8px; font-size: 0.9rem; } .search.compact button { padding: 8px 12px; } }

/* ---------- Best stats box (Stats panel) ---------- */
.sp-box { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 12, 28, 0.45); }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.sp-head b { color: var(--ink); font-weight: 600; }
.sp-head a { color: var(--muted); font-size: 0.86rem; }
.sp-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.88rem; }
.sp-pill i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: #2b3560; color: var(--ink); }
.sp-pill.good { border-color: rgba(95, 211, 95, 0.55); }
.sp-pill.good i { background: #5fd35f; color: #052b05; }
.sp-pill.low { border-color: rgba(255, 211, 90, 0.45); }
.sp-pill.low i { background: var(--gold); color: #1d1606; }
.sp-sep { color: var(--muted); font-size: 0.9rem; }
.sp-tip { margin: 8px 0 0; font-size: 0.9rem; color: var(--ink); }
.sp-note { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); font-style: italic; }
.s-rank { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; background: #2b3560; color: var(--ink); margin-right: 6px; vertical-align: 1px; }

/* Enchant and gem names: hover or tap for what they do */
.fx { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: help; text-decoration: none; }
.fx:hover, .fx[aria-expanded="true"] { color: var(--gold); }
.tooltip .fx-title { color: var(--ink); padding-right: 0; }
.tooltip .fx-text { margin-top: 6px !important; max-width: 300px; line-height: 1.4; }

/* "Midnight, Season 2": hover, tap or focus for a note */
.season { position: relative; cursor: help; outline: none; }
.season-tip {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 240px; padding: 10px 12px; border-radius: 10px;
  background: #070b1c; border: 1px solid var(--tt-edge); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  color: var(--ink); font-size: 0.92rem; line-height: 1.4; text-shadow: none; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.season:hover .season-tip, .season:focus .season-tip, .season:focus-within .season-tip { opacity: 1; visibility: visible; transform: none; }
.season:focus-visible { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(160, 130, 255, 0.35); }
.site-footer .credits { margin-top: 6px; font-size: 0.9rem; opacity: 0.85; }
.site-footer a { color: inherit; }

/* ---------- Tier list links (header, homepage, footer) ---------- */
.navlinks { display: flex; align-items: center; gap: 8px; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(16, 22, 42, 0.8); color: var(--ink); font-size: 0.95rem; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.on { border-color: rgba(255, 211, 90, 0.6); box-shadow: 0 0 14px rgba(255, 211, 90, 0.2); }
.nb-ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-family: "Cinzel", var(--display); font-weight: 800; font-size: 0.74rem; color: #0f1428; background: linear-gradient(135deg, #ffb347, #ff8000); }
.home-page .site-header { justify-content: space-between; }
.newbie { display: flex; justify-content: center; margin: 14px auto 0; }
.newbie a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 211, 90, 0.35); background: rgba(255, 211, 90, 0.07); color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.newbie a:hover, .newbie a:focus-visible { border-color: var(--gold); }
.newbie .nb-ic { width: 24px; height: 24px; border-radius: 7px; font-size: 0.88rem; }
.newbie b { color: var(--gold); font-weight: 600; }
.foot-links { margin: 0 0 6px; }
.foot-links a { color: var(--ink); }

/* ---------- Tier list page ---------- */
.tl { margin-top: 10px; }
.tl-h1 { font-family: "Cinzel", var(--display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin: 0; }
.tl-lede { color: var(--muted); margin: 6px 0 16px; }
.tl-q { padding: 16px; border-radius: 14px; border: 1px solid rgba(120, 130, 210, 0.25); background: linear-gradient(180deg, rgba(44, 52, 98, 0.55), rgba(20, 26, 52, 0.35)); margin-bottom: 12px; }
.tl-q p { margin: 0 0 8px; font-size: 0.88rem; color: var(--muted); }
.tl-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tl-opts button { font: inherit; font-size: 0.92rem; color: var(--ink); background: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; }
.tl-opts button.on { border-color: var(--gold); color: var(--gold); }
.tl-picks { display: grid; gap: 8px; }
.tl-pick { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: rgba(10, 12, 28, 0.55); border: 1px solid rgba(255, 211, 90, 0.4); color: inherit; text-decoration: none; }
.tl-pick:hover { border-color: var(--gold); }
.tl-rank { flex: none; width: 22px; font-family: "Cinzel", var(--display); font-weight: 800; font-size: 1.3rem; color: var(--gold); }
.tl-nm { display: block; font-weight: 600; }
.tl-why { display: block; margin-top: 3px; font-size: 0.9rem; color: var(--muted); }
.tl-why b { color: var(--ink); font-weight: 600; }
.tl-sec { margin: 36px 0 12px; font-family: "Cinzel", var(--display); font-size: 1.5rem; }
.tl-ctrls { display: grid; gap: 8px; }
.tl-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 22, 42, 0.7); }
.tl-seg button { flex: 1; font: inherit; font-size: 0.88rem; color: var(--muted); background: none; border: 0; padding: 8px 4px; border-radius: 7px; cursor: pointer; }
.tl-seg button.on { background: var(--gold); color: #1d1606; font-weight: 700; }
.tl-th { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.tl-th span:last-child { font-size: 0.88rem; color: var(--muted); }
.tl-badge { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-family: "Cinzel", var(--display); font-weight: 800; font-size: 0.95rem; color: #0f1428; }
.tl-grp { display: grid; gap: 8px; }
.tl-card { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(24, 32, 59, 0.6); color: inherit; text-decoration: none; }
.tl-card:hover { border-color: rgba(255, 211, 90, 0.5); }
.tl-n { display: block; font-weight: 600; }
.tl-c { display: block; font-size: 0.88rem; }
.tl-r { margin-left: auto; display: grid; justify-items: end; gap: 4px; }
.tl-ez { font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid; }
.tl-lnk { font-size: 0.82rem; color: var(--muted); }
.tl-l { min-width: 0; }
.tl-p { display: block; margin-top: 3px; font-size: 0.86rem; line-height: 1.35; color: var(--muted); }
.tl-play { display: block; margin-top: 3px; font-size: 0.92rem; line-height: 1.4; color: var(--ink); opacity: 0.85; }
.tl-rg { font-size: 0.78rem; color: var(--muted); }
.tl-few { grid-column: 1 / -1; margin: 0; font-size: 0.92rem; color: var(--muted); }
.tl-q [hidden] { display: none; }
.tl-dnote { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 211, 90, 0.3); background: rgba(255, 211, 90, 0.06); font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
.tl-dnote a { color: var(--ink); }
.tl-src { margin-top: 28px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.tl-src a { color: var(--muted); }
@media (min-width: 900px) {
  .tl-q { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 20px; }
  .tl-picks { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tl-ctrls { grid-template-columns: 1fr 1.3fr; gap: 12px; max-width: 700px; }
  .tl-grp { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) { .navlinks .nav-link, .navlinks .home-btn { font-size: 0.9rem; } }

/* ---------- Spec page ---------- */
.sg-crumbs { margin: 6px 0 12px; font-size: 0.92rem; color: var(--muted); }
.sg-crumbs a { color: var(--ink); }
.sg-hero { display: grid; gap: 16px; padding: 20px; border-radius: 16px; border: 1px solid rgba(120, 130, 210, 0.25); border-left: 4px solid var(--cc); background: linear-gradient(180deg, rgba(44, 52, 98, 0.55), rgba(20, 26, 52, 0.35)); margin-bottom: 18px; }
.sg-h1 { font-family: "Cinzel", var(--display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin: 0; }
.sg-why { margin: 8px 0 12px; font-size: 1.02rem; color: var(--ink); opacity: 0.9; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-chip { font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.sg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sg-tier { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(10, 12, 28, 0.5); border: 1px solid var(--line); font-size: 0.88rem; }
.sg-talents .specs { display: none; }
.sg-hint { margin: 10px 0 0; font-size: 0.92rem; color: var(--muted); }
.sg-cta p { color: var(--muted); margin: 0 0 4px; }
.sg-cta .search { margin-top: 0; padding-top: 0; }
.sg-tier { min-width: 0; color: inherit; text-decoration: none; }
.sg-tier:hover { border-color: rgba(255, 211, 90, 0.55); }
.sg-more { margin: 8px 0 0; font-size: 0.9rem; color: var(--muted); }
.sg-more a { color: var(--ink); }
.sg-guide { display: inline-block; margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 211, 90, 0.45); color: var(--gold) !important; text-decoration: none; font-weight: 600; }
.sg-guide:hover { border-color: var(--gold); }
@media (min-width: 900px) {
  .sg-hero { grid-template-columns: 1fr auto; align-items: center; padding: 24px 28px; }
  .sg-tiers { grid-template-columns: repeat(3, 120px); }
}

.sg-ench { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sg-ench li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(36, 44, 84, 0.55), rgba(20, 26, 50, 0.55)); }
.sg-ic { flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 211, 90, 0.35); }
.sg-glyph { flex: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; border: 1px solid rgba(255, 211, 90, 0.3); background: radial-gradient(circle at 40% 30%, #2d3a6c, #121a33 75%); }
.sg-glyph svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
.sg-gem { width: 40px; height: 40px; border-radius: 8px; }
.sg-eb { min-width: 0; }
.sg-eb p { margin: 0; }
.sg-slot { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); opacity: 0.85; }
.sg-en { font-weight: 600; margin-top: 1px !important; }
.sg-fx { margin-top: 3px !important; font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.sg-note { margin-top: 4px !important; font-size: 0.88rem; font-style: italic; color: var(--muted); }

/* ---------- Trinkets ---------- */
.tk-sum { margin: 0 0 4px; color: var(--muted); font-size: 0.9rem; }
.tk-sub { margin: 16px 0 8px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); opacity: 0.85; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(36, 44, 84, 0.55), rgba(20, 26, 50, 0.55)); }
.tk-list li[hidden] { display: none; }
.tk-ic { display: block; flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(184, 102, 255, 0.55); }
.tk-ic.blank { background: radial-gradient(circle at 40% 30%, #3a2d6c, #121a33 75%); }
.tk-b { min-width: 0; flex: 1; }
.tk-b p { margin: 0; }
.tk-n { font-weight: 600; color: var(--q-epic); }
.tk-n .fx { color: inherit; font-weight: inherit; }
.tk-m { font-size: 0.88rem; color: var(--muted); margin-top: 2px !important; }
.tk-act { font-size: 0.92rem; color: #5fd35f; margin-top: 5px !important; line-height: 1.4; }
.tk-opt { font-size: 0.84rem; color: var(--muted); font-style: italic; margin-top: 2px !important; }
.tk-g { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: "Cinzel", var(--display); font-weight: 800; color: #0f1428; }
.tk-have, .tk-farm { display: inline-block; margin-left: 6px; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }
.tk-have { border: 1px solid #5fd35f88; color: #5fd35f; }
.tk-farm { border: 1px solid #ffd35a66; color: var(--gold); }
.tk-f { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.tk-f button { font: inherit; font-size: 0.88rem; color: var(--ink); background: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; }
.tk-f button.on { border-color: var(--gold); color: var(--gold); }
.tk-icw { display: block; position: relative; flex: none; width: 44px; height: 44px; }
.tk-icw .tk-ic { display: block; width: 44px; height: 44px; }
.tk-corner { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 7px; display: grid; place-items: center; font-family: "Cinzel", var(--display); font-weight: 800; font-size: 0.78rem; color: #0f1428; box-shadow: 0 0 0 2px #16203f; }
@media (min-width: 900px) {
  .trinkets .tk-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
  .trinkets .tk-best .tk-list { grid-template-columns: 1fr 1fr; }
}
.hb-logo { width: 32px; height: 32px; flex: none; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 211, 90, 0.35)); }
/* Homepage headline: the full Gear Compass logo, with "Gear up for Midnight" beneath it. */
.hero h1.title.brand { gap: 18px; margin-top: 6px; }
.hero-lock { display: block; width: auto; height: clamp(200px, 30vw, 300px); filter: drop-shadow(0 0 40px rgba(255, 211, 90, 0.16)) drop-shadow(0 0 70px rgba(150, 130, 255, 0.22)); }
.title.brand .pre { white-space: nowrap; }
@media (max-width: 480px) { .title.brand .pre { font-size: 0.92rem; letter-spacing: 0.24em; gap: 10px; } .title.brand .pre::before, .title.brand .pre::after { width: 22px; } }
@media (max-width: 360px) { .title.brand .pre { letter-spacing: 0.18em; padding-left: 0.18em; } .title.brand .pre::before, .title.brand .pre::after { display: none; } }
.tl-lnk, .tl-rg { white-space: nowrap; }

/* ---------- Spec icons ---------- */
.sic { flex: none; width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); object-fit: cover; }
.sic-lg { width: 46px; height: 46px; }
.sic-xl { width: 64px; height: 64px; border-radius: 12px; }
.sic-ph { display: grid; place-items: center; font-family: "Cinzel", var(--display); font-weight: 800; font-size: 1.1rem; color: #0f1428; background: linear-gradient(150deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #10162a)); }
.sic-xl.sic-ph { font-size: 1.7rem; }
.sg-title { display: flex; align-items: center; gap: 16px; }
.tl-pick { align-items: center; }
@media (max-width: 480px) { .sg-tier { gap: 6px; padding: 8px; font-size: 0.82rem; } .sg-tier .tl-badge { width: 26px; height: 26px; font-size: 0.8rem; } }
.spec-ic { width: 20px; height: 20px; border-radius: 5px; margin-right: 7px; vertical-align: -4px; border: 1px solid rgba(255, 255, 255, 0.18); }