/* HOODIES Wiki — asphalt field guide */
:root {
  --night: #090b10;
  --night-2: #0e1118;
  --night-3: #161b26;
  --panel: #12161f;
  --panel-2: #181e2a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --ember: #e8953a;
  --ember-2: #d47820;
  --gold: #f0b24a;
  --gold-2: #f5c46a;
  --ash: #eceef2;
  --smoke: #8b93a3;
  --smoke-2: #5c6575;
  --good: #4ade9b;
  --danger: #e86a76;
  --r-comun: #a8b0bc;
  --r-raro: #4ab4e8;
  --r-epico: #a878e8;
  --r-legendario: #e8b04a;
  --r-mitico: #e86aad;
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --rail: 240px;
  --focus: 0 0 0 2px var(--night), 0 0 0 4px var(--gold);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ash);
  background:
    radial-gradient(ellipse 80% 50% at 50% -15%, #1a223590, transparent 55%),
    radial-gradient(ellipse 40% 35% at 100% 80%, #e8953a10, transparent 50%),
    var(--night);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-2); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 0.85em; text-wrap: pretty; color: #c5cad4; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ash); font-weight: 700; }

/* Top bar */
.hw-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--night) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hw-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ash);
}
.hw-brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.hw-brand span { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.04em; }
.hw-brand b { color: var(--gold); }
.hw-top-spacer { flex: 1; }
.hw-lang {
  display: inline-flex; padding: 3px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
}
.hw-lang button {
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700;
  color: var(--smoke);
}
.hw-lang button.on { background: var(--ember); color: #120e08; }
.hw-play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: linear-gradient(180deg, var(--gold), var(--ember-2));
  color: #120e08; font-weight: 800; font-size: 13px; text-decoration: none;
}
.hw-play:hover { filter: brightness(1.06); color: #120e08; }

/* Layout */
.hw-shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0;
  max-width: 1240px;
  margin: 0 auto;
  min-height: calc(100dvh - 58px);
}
.hw-nav {
  position: sticky; top: 58px;
  align-self: start;
  max-height: calc(100dvh - 58px);
  overflow: auto;
  padding: 22px 14px 40px 18px;
  border-right: 1px solid var(--line);
}
.hw-nav h2 {
  font-size: 11px; letter-spacing: 0.12em; color: var(--smoke-2);
  margin: 0 0 10px 6px; font-family: var(--body); font-weight: 700;
}
.hw-nav a {
  display: block; padding: 7px 10px; margin: 1px 0;
  border-radius: 6px; color: var(--smoke); text-decoration: none; font-size: 13px; font-weight: 600;
}
.hw-nav a:hover, .hw-nav a:focus-visible { background: var(--panel-2); color: var(--ash); outline: none; }
.hw-nav a:focus-visible { box-shadow: var(--focus); }

.hw-main { padding: 8px 28px 80px; min-width: 0; }

/* Hero */
.hw-hero {
  position: relative;
  margin: 12px 0 36px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  min-height: min(42vw, 340px);
  background: #0a0d14;
}
.hw-hero-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0.55;
  filter: saturate(0.85) contrast(1.05);
}
.hw-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #090b10f2 0%, #090b10cc 38%, #090b1040 70%, transparent 100%),
    linear-gradient(0deg, #090b10e8 0%, transparent 45%);
  pointer-events: none;
}
.hw-hero-copy {
  position: relative; z-index: 1;
  padding: clamp(28px, 5vw, 48px);
  max-width: 34rem;
}
.hw-hero-copy .kicker {
  display: inline-block; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; color: var(--ember); letter-spacing: 0.06em;
}
.hw-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--ash);
  margin-bottom: 12px;
}
.hw-hero-copy h1 em {
  font-style: normal; color: var(--gold);
}
.hw-hero-copy p { color: #b8bfcb; font-size: 1.02rem; margin: 0; }

/* Sections */
.hw-sec {
  margin: 0 0 42px;
  padding-top: 8px;
  scroll-margin-top: 72px;
}
.hw-sec > h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: var(--gold);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.hw-sec > .lead { font-size: 1.02rem; margin-bottom: 18px; max-width: 62ch; }

.hw-grid { display: grid; gap: 14px; }
.hw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hw-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.hw-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.hw-panel h3 {
  font-size: 1rem;
  color: var(--ash);
  margin-bottom: 8px;
  font-family: var(--body);
  font-weight: 800;
}
.hw-panel .muted { color: var(--smoke); font-size: 13px; }

.hw-stat {
  text-align: center;
  padding: 16px 12px;
}
.hw-stat .n {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.hw-stat .l { font-size: 12px; font-weight: 700; color: var(--smoke); }

/* Reward pool highlight */
.hw-pool-hero {
  position: relative;
  overflow: hidden;
  margin: 8px 0 0;
  padding: 22px 22px 20px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ember) 16%, var(--panel)) 0%, var(--panel) 55%, color-mix(in srgb, var(--gold) 8%, var(--panel)) 100%);
}
.hw-pool-hero-glow {
  position: absolute;
  right: -40px; top: -50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #f0b24a44, transparent 70%);
  pointer-events: none;
}
.hw-pool-kicker {
  position: relative;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ember);
}
.hw-pool-hero h3 {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 400;
  color: var(--ash);
  margin: 0 0 10px;
  max-width: 28ch;
}
.hw-pool-hero h3 em {
  font-style: normal;
  color: var(--gold);
}
.hw-pool-hero > p:not(.hw-pool-kicker) {
  position: relative;
  margin: 0;
  max-width: 54ch;
  color: #c5cad4;
  font-size: 14.5px;
}
.hw-pool-card {
  text-align: left;
  padding: 18px 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ember) 6%, var(--panel)), var(--panel));
}
.hw-pool-ico {
  width: 36px; height: 36px;
  margin-bottom: 12px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 15px;
  color: #120e08;
  background: linear-gradient(180deg, var(--gold), var(--ember-2));
  box-shadow: 0 8px 18px -8px #e8953a88;
}
.hw-pool-card h3 { margin-bottom: 6px; }
.hw-pool-card p { margin: 0; font-size: 13.5px; color: var(--smoke); }

.hw-subh {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 800;
  margin: 22px 0 8px;
  color: var(--ash);
}
.hw-bullets {
  margin: 8px 0 0;
  padding: 0 0 0 1.1em;
  color: var(--smoke);
  font-size: 13.5px;
}
.hw-bullets li { margin: 0 0 8px; }
.hw-bullets strong { color: var(--ash); }

.hw-nft-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: #0a0d14;
  margin: 8px 0 0;
}
.hw-nft-banner {
  width: 100%;
  height: clamp(140px, 28vw, 220px);
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.72;
  filter: saturate(1.05);
}
.hw-nft-hero-copy {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px 18px;
  margin-top: -48px;
  background: linear-gradient(to top, var(--panel) 70%, transparent);
}
.hw-nft-logo {
  width: 72px; height: 72px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 10px 24px -10px #000a;
  flex-shrink: 0;
}
.hw-nft-hero-copy h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin: 0 0 6px;
}
.hw-nft-hero-copy p { margin: 0; font-size: 13.5px; color: #c5cad4; }
.hw-nft-links { margin-top: 10px !important; }
.hw-nft-links a {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--gold), var(--ember-2));
  color: #120e08 !important;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
}
.hw-nft-links a:hover { filter: brightness(1.06); }
.hw-nft-preview img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: #0a0d14;
}

@media (max-width: 560px) {
  .hw-nft-hero-copy { flex-direction: column; align-items: flex-start; margin-top: -36px; }
}

/* Tables */
.hw-tbl-wrap { overflow-x: auto; margin: 12px 0; border-radius: 10px; border: 1px solid var(--line); }
.hw-tbl {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  background: var(--panel);
}
.hw-tbl th, .hw-tbl td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.hw-tbl th {
  font-size: 11px; font-weight: 800; color: var(--smoke);
  letter-spacing: 0.04em; background: var(--night-3);
}
.hw-tbl tr:last-child td { border-bottom: 0; }
.hw-tbl td.num, .hw-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hw-tbl .rar { font-weight: 800; }
.hw-tbl .rar-comun { color: var(--r-comun); }
.hw-tbl .rar-raro { color: var(--r-raro); }
.hw-tbl .rar-epico { color: var(--r-epico); }
.hw-tbl .rar-legendario { color: var(--r-legendario); }
.hw-tbl .rar-mitico { color: var(--r-mitico); }

/* Charts */
.hw-chart { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.hw-bar-row { display: grid; grid-template-columns: 110px 1fr 52px; gap: 10px; align-items: center; }
.hw-bar-row .lab { font-size: 13px; font-weight: 800; }
.hw-bar-row .pct { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.hw-bar-track {
  height: 14px; border-radius: 999px; background: var(--night-3);
  overflow: hidden; border: 1px solid var(--line);
}
.hw-bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--ember);
  width: 0;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-bar-fill.comun { background: var(--r-comun); }
.hw-bar-fill.raro { background: var(--r-raro); }
.hw-bar-fill.epico { background: var(--r-epico); }
.hw-bar-fill.legendario { background: var(--r-legendario); }
.hw-bar-fill.mitico { background: var(--r-mitico); }

.hw-power-chart {
  display: grid; gap: 8px; margin-top: 12px;
}
.hw-power-row {
  display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center;
}
.hw-power-range {
  position: relative; height: 22px; border-radius: 6px; background: var(--night-3);
  border: 1px solid var(--line);
}
.hw-power-seg {
  position: absolute; top: 3px; bottom: 3px; border-radius: 4px; opacity: 0.95;
}
.hw-power-lbl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #0a0c10; mix-blend-mode: difference;
}

/* Media strips */
.hw-media {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0;
}
.hw-card {
  flex: 1 1 120px; max-width: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.hw-card img {
  width: 88px; height: 88px; margin: 0 auto 8px;
  object-fit: contain; filter: drop-shadow(0 10px 16px #0008);
}
.hw-card.tall img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; }
.hw-card .name { font-weight: 800; font-size: 13px; }
.hw-card .sub { font-size: 11px; color: var(--smoke); margin-top: 2px; }

.hw-map-shot {
  border-radius: 12px; border: 1px solid var(--line-2);
  overflow: hidden; margin: 14px 0;
  background: #000;
}
.hw-map-shot img { width: 100%; height: auto; image-rendering: pixelated; }

.hw-callout {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--ember);
  background: color-mix(in srgb, var(--ember) 10%, var(--panel));
  font-size: 14px;
  color: #d5dae3;
}
.hw-callout.warn { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.hw-callout.good { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }

.hw-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; }
.hw-steps li {
  position: relative;
  padding: 12px 12px 12px 52px;
  margin: 0 0 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.hw-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 12px; top: 12px;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ember); color: #120e08;
  font-weight: 900; font-size: 13px;
}
.hw-steps strong { display: block; margin-bottom: 2px; color: var(--ash); }

.hw-pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: var(--night-3); border: 1px solid var(--line); color: var(--smoke);
}
.hw-pill.on { color: #120e08; background: var(--gold); border-color: transparent; }

.hw-footer {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--smoke-2);
}

[data-lang="en"] [data-i="es"],
[data-lang="es"] [data-i="en"] { display: none !important; }

@media (max-width: 900px) {
  .hw-shell { grid-template-columns: 1fr; }
  .hw-nav {
    position: relative; top: 0; max-height: none;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center;
  }
  .hw-nav h2 { width: 100%; margin-bottom: 4px; }
  .hw-nav a { padding: 6px 8px; font-size: 12px; }
  .hw-main { padding: 8px 16px 64px; }
  .hw-grid-2, .hw-grid-3, .hw-grid-4, .hw-grid-5 { grid-template-columns: 1fr 1fr; }
  .hw-bar-row { grid-template-columns: 88px 1fr 44px; }
}
@media (max-width: 560px) {
  .hw-grid-2, .hw-grid-3, .hw-grid-4, .hw-grid-5 { grid-template-columns: 1fr; }
  .hw-top .hw-play span { display: none; }
  .hw-hero { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hw-bar-fill { transition: none; }
}