/* Identidad de Fortnite (índices bajo /fortnite). Colores vivos, tarjetas tipo sticker
   con borde de tinta y sombra sólida, colores de rareza por tipo de herramienta. */
:root {
  --page: #0F2A6B;
  --sky: #1F5BFF;
  --ink: #0B1530;
  --sun: #FFD23F;
  --storm: #7A3CFF;
  --paper: #FFFFFF;
  --parchment: #F6E7C1;
  --parchment-2: #EFD9A6;
  --parchment-edge: #C9A964;
  --x-red: #D7263D;
  --text-on-light: #2B3550;
  --muted-on-light: #4A5470;
  --muted-on-dark: #D3DCF5;
  --tile: #EEF2FB;
  /* Rareza por tipo */
  --r-calc: #FF9F1C;   /* legendaria → calculadora */
  --r-guide: #A35BFF;  /* épica → guía */
  --r-ref: #2F8CFF;    /* rara → referencia */
  --display: 'Lilita One', system-ui, sans-serif;
  --body: 'Rubik', system-ui, sans-serif;
  --shadow: 8px 8px 0 var(--ink);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--page); color: #FFFFFF; font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: #FFFFFF; }
a:hover { color: var(--sun); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.container { max-width: 1240px; margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.display { font-family: var(--display); font-weight: 400; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; }
.back { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; }
.nav a { padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.nav a[aria-current="page"] { background: var(--sky); }
.nav a:hover { color: var(--sun); }

/* Hero band */
.band { position: relative; overflow: hidden; background: var(--sky); border-block: 4px solid var(--ink); }
.band-storm { position: absolute; right: -140px; top: -120px; width: 620px; height: 620px; pointer-events: none; }
.band .container { position: relative; display: flex; flex-direction: column; gap: 20px; padding-block: 72px 80px; }
.band.is-compact .container { padding-block: 48px 52px; }
.band.is-compact .band-storm { width: 460px; height: 460px; right: -120px; top: -150px; }
.kicker {
  align-self: flex-start; transform: skewX(-8deg);
  background: var(--sun); color: var(--ink); border: 3px solid var(--ink);
  font-weight: 800; font-size: 13px; letter-spacing: .1em; padding: 8px 14px;
}
.title {
  margin: 0; font-family: var(--display); font-weight: 400; color: #FFFFFF;
  font-size: clamp(60px, 12vw, 176px); line-height: .9; letter-spacing: .01em; text-shadow: 6px 6px 0 var(--ink);
}
.band.is-compact .title { font-size: clamp(44px, 7vw, 96px); text-shadow: 5px 5px 0 var(--ink); }
.band-lede { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.55; font-weight: 500; }
.crumbs { font-size: 14px; font-weight: 500; }
.crumbs a { text-decoration: none; font-weight: 700; }

/* Sections */
.section { padding-block: 56px 24px; }
.section:first-of-type { padding-top: 72px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--muted-on-dark); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Sticker base */
.sticker { border: 4px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); }
a.sticker, .sticker.is-hover { transition: transform .15s, box-shadow .15s; }
a.sticker:hover, .sticker.is-hover:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }

.tag { align-self: flex-start; font-weight: 800; font-size: 12px; letter-spacing: .1em; padding: 6px 12px; border-radius: 8px; }
.tag.dark { background: var(--ink); color: #FFFFFF; }
.tag.dark.gold { color: var(--sun); }
.tag.outline { border: 2px solid var(--ink); padding: 4px 10px; }

.btn {
  display: inline-block; transform: skewX(-8deg);
  background: var(--sun); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 14px 24px; font-weight: 800; font-size: 16px; letter-spacing: .03em; text-decoration: none;
  transition: transform .15s;
}
.btn:hover { color: var(--ink); transform: skewX(-8deg) translateY(-2px); }

/* Season (treasure map) card */
.season { display: flex; flex-wrap: wrap; background: var(--parchment); color: var(--ink); border-radius: 22px; overflow: hidden; }
.season-body { flex: 999 1 420px; min-width: 0; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.season-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.season-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6vw, 80px); line-height: .95; }
.season-desc { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--text-on-light); }
.season-map { flex: 1 1 320px; min-height: 280px; position: relative; border-left: 4px dashed var(--parchment-edge); background: var(--parchment-2); }
.season-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) { .season-map { border-left: 0; border-top: 4px dashed var(--parchment-edge); } .season-body { padding: 28px; } }

/* Tool cards */
.tools { display: flex; flex-wrap: wrap; gap: 24px; }
.tool { flex: 1 1 360px; max-width: 600px; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); text-decoration: none; overflow: hidden; }
a.tool:hover { color: var(--ink); }
.tool-bar { height: 14px; border-bottom: 4px solid var(--ink); }
.tool-body { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.tool-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-type { color: var(--ink); border: 2px solid var(--ink); }
.tool-source { font-size: 13px; font-weight: 500; color: var(--muted-on-light); }
.tool-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.05; }
.tool-desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-on-light); }
.tool-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-stats div { background: var(--tile); border-radius: 12px; padding: 14px 16px; }
.tool-stats dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted-on-light); }
.tool-stats dd { margin: 4px 0 0; font-family: var(--display); font-size: 26px; }
.tool-cta { align-self: flex-start; font-weight: 800; font-size: 15px; letter-spacing: .04em; border-bottom: 3px solid currentColor; padding-bottom: 2px; }
.tool-cta span { color: var(--ink); }
/* Variantes por rareza */
.is-calc .tool-bar, .is-calc .tool-type { background: var(--r-calc); }
.is-calc .tool-cta { border-color: var(--r-calc); }
.is-guide .tool-bar, .is-guide .tool-type { background: var(--r-guide); }
.is-guide .tool-cta { border-color: var(--r-guide); }
.is-ref .tool-bar, .is-ref .tool-type { background: var(--r-ref); }
.is-ref .tool-cta { border-color: var(--r-ref); }

/* Panels (General / Archivo) */
.panels { display: flex; flex-wrap: wrap; gap: 24px; padding-block: 56px 88px; }
.panel { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.panel.sky { background: var(--sky); }
.panel.storm { background: var(--storm); }
.panel-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1; }
.panel p { margin: 0; font-size: 16px; line-height: 1.55; }
.panel .small { font-size: 14px; line-height: 1.5; }
.empty { padding: 14px 16px; border: 2px dashed #FFFFFF; border-radius: 12px; font-size: 14px; font-weight: 500; }
.empty-light { padding: 18px 20px; border: 3px dashed var(--muted-on-dark); border-radius: 16px; font-size: 15px; font-weight: 500; color: var(--muted-on-dark); }

.season-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.season-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px;
  text-decoration: none; font-weight: 700; transition: transform .15s;
}
.season-list a:hover { color: var(--ink); transform: translateX(4px); }
.badge { font-size: 11px; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; border: 2px solid var(--ink); }
.badge.now { background: var(--sun); }
.badge.past { background: var(--tile); }

/* Footer */
.footer { background: var(--ink); margin-top: 0; }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 28px 40px; font-size: 13px; color: #C4CCE4; line-height: 1.6; }
.footer a { font-weight: 700; text-decoration: none; }

@media (max-width: 520px) {
  .nav { gap: 2px; font-size: 13px; }
  .nav a { padding: 8px 10px; }
  .band-storm { opacity: .4; }
  .tool-stats dd { font-size: 21px; }
}
.tool-stats dd { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  a.sticker, .btn, .season-list a { transition: none; }
}