/* ============ site.css — /{idioma}/intro y /{idioma}/guide (worker/page.js, intro.js, guide.js) ============
 * El mismo aire que el juego (css/dark.css) y las páginas legales (css/legal.css): la mazmorra de fondo,
 * barra de cuero, títulos en Bona Nova. Todo a oscuras, como el juego (28-10-2026: la guía y las fichas ya no
 * van en pergamino), con los paneles en un marco propio. Sin modo claro: el juego tampoco lo tiene.
 */
@font-face { font-family: 'BonaNova'; src: url('../assets/fonts/BonaNovaSC-Regular.ttf') format('truetype'); font-weight: 400 550; font-display: swap; }
@font-face { font-family: 'BonaNova'; src: url('../assets/fonts/BonaNovaSC-Bold.ttf') format('truetype'); font-weight: 551 900; font-display: swap; }

:root {
  --ink: #e8dcc0; --muted: #a69a80; --gold: #e0b45e; --gold2: #a87d36; --gold-hi: #ffd98a;
  --edge: #b08d55; --line: rgba(176, 141, 85, .28); --well: rgba(0, 0, 0, .38);
  --d-ink: #ddd0b3; --p-soft: #a69a80; --leather: #2a1d12; --d-line: rgba(176, 141, 85, .25); --d-well: rgba(0, 0, 0, .3); --leg: #ff9a3c;
  --serif: 'BonaNova', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Microsoft JhengHei", sans-serif;
  color-scheme: dark;
}
:root:lang(zh-Hant-TW) { --serif: 'BonaNova', 'Noto Serif TC', 'Noto Serif CJK TC', 'Source Han Serif TC', 'Songti TC', 'PMingLiU', serif; }
:root:lang(zh-Hans-CN) { --serif: 'BonaNova', 'Noto Serif SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif; }
:root:lang(ja) { --serif: 'BonaNova', 'Noto Serif JP', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
:root:lang(ko) { --serif: 'BonaNova', 'Noto Serif KR', 'Noto Serif CJK KR', 'AppleMyungjo', 'Batang', serif; }

* { box-sizing: border-box; margin: 0; }
html { background: #0b0907; scroll-padding-top: 76px; }
body {
  min-height: 100vh; overflow-x: hidden;
  font: 16px/1.8 var(--sans); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(11, 9, 7, .55), rgba(11, 9, 7, .94) 70%),
    url('../assets/intro/page-1536.webp') center top / cover fixed no-repeat,
    #0b0907;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }

/* ── botones (28-10-2026): planos, borde fino de bronce; los de Flare quedaban demasiado en relieve ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 26px;
  border: 1px solid rgba(176, 141, 85, .55); border-radius: 3px;
  background: rgba(14, 11, 8, .72);
  font: 700 16px/1.2 var(--serif); letter-spacing: .08em; color: var(--ink);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--gold); background: rgba(176, 141, 85, .14); color: #fff3d6; }
.btn:active { background: rgba(176, 141, 85, .22); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1209; }
.btn.gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #1a1209; }
.btn.gold:active { background: var(--gold2); }
.btn.big { min-height: 54px; padding: 0 34px; font-size: 19px; }
.btn.small { min-height: 34px; padding: 0 16px; font-size: 14px; }

/* ── barra de arriba ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 20px;
  background: linear-gradient(180deg, rgba(14, 11, 8, .35), rgba(8, 6, 5, .85)), url('../assets/ui/leather.jpg') center / cover;
  border-bottom: 2px solid #6e4e26;
  box-shadow: 0 1px 0 #000, 0 8px 24px rgba(0, 0, 0, .5);
}
.brand {
  font: 700 21px/1 var(--serif); letter-spacing: .08em; color: var(--gold); text-decoration: none; white-space: nowrap;
  text-shadow: 0 2px 0 #3b2a12, 0 3px 6px #000;
}
.top-nav { display: flex; gap: 20px; margin-left: auto; }
.top-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a { flex: 0 0 auto; white-space: nowrap; color: #d9c7a0; font-size: 15px; font-weight: 600; text-decoration: none; text-shadow: 1px 1px 1px #000; }
@media (max-width: 1000px) { .top-nav { gap: 14px; } .top-nav a { font-size: 14px; } }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--gold); }
/* En el móvil, una fila: el nombre (cortado si no cabe), la guía y «jugar» con su palabra corta. */
.topbar > .btn .short { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 12px; padding: 0 12px; height: 54px; }
  .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; letter-spacing: .04em; }
  .top-nav { flex: none; gap: 12px; }
  .topbar > .btn { flex: none; }
  .topbar > .btn .long { display: none; }
  .topbar > .btn .short { display: inline; }
  .top-nav a { font-size: 14px; }
}

.crumbs { width: min(1100px, calc(100% - 32px)); margin: 16px auto 0; font-size: 13px; color: var(--muted); }
.crumbs a { color: #c9b68f; text-decoration: none; }
.crumbs .sep { margin: 0 8px; opacity: .6; }

/* ── títulos de sección (presentación) ── */
.sec { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 0; }
.sec > h2, .sec-h {
  text-align: center; font: 700 clamp(26px, 4vw, 36px)/1.3 var(--serif); letter-spacing: .06em; color: var(--gold);
  text-shadow: 0 2px 2px #000, 0 0 18px rgba(200, 140, 60, .2);
}
.sec > .lead { max-width: 680px; margin: 12px auto 0; text-align: center; color: var(--muted); }
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(260px, 70%); margin: 14px auto 0; color: var(--gold2); }
.rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); }

/* ── marcos (concept/site/frame): f2 bronce = el cuerpo de las páginas (.paper); el resto, por tema:
   f1 hierro (características, pasos, índice) · f3 piedra con calaveras (fases, ataques de los jefes) ·
   f4 cuero (héroes, preguntas, diálogos) · f5 obsidiana y lava (llamada a jugar, combinaciones de legendarios) ·
   f6 madera (el pueblo). --fr la imagen, --fs el corte (de 768 px), --fw el ancho en pantalla. ── */
.panel, .fr {
  --fr: url('../assets/site/frame-iron.webp'); --fs: 124; --fw: 30px;
  border: var(--fw) solid transparent; border-image: var(--fr) var(--fs) / var(--fw) round;
  background-clip: padding-box;
}
.panel {
  background: linear-gradient(180deg, rgba(14, 11, 8, .35), rgba(8, 6, 5, .78)), url('../assets/ui/leather.jpg') center / cover;
  background-clip: padding-box;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  text-shadow: 1px 1px 1px #000;
}
.fr-bronze { --fr: url('../assets/site/frame.webp'); --fs: 150; --fw: 34px; }
.fr-stone, .chapters li, .move { --fr: url('../assets/site/frame-stone.webp'); --fs: 150; --fw: 36px; }
.fr-leather, .who, .faq details, .quote { --fr: url('../assets/site/frame-leather.webp'); --fs: 94; --fw: 24px; }
.fr-lava, .cta-band, .build { --fr: url('../assets/site/frame-lava.webp'); --fs: 128; --fw: 32px; }
.fr-wood { --fr: url('../assets/site/frame-wood.webp'); --fs: 124; --fw: 30px; }
/* dentro del cuerpo, más finos */
.paper .fr { --fw: 22px; }
.paper .move { --fw: 26px; }
.paper .quote { --fw: 18px; }
@media (max-width: 560px) { .panel, .fr { --fw: 22px; } .paper .fr { --fw: 18px; } .paper .quote { --fw: 14px; } }

/* ── portada de la presentación ── */
/* Llena la primera pantalla entera, menos la barra de arriba (--tb: su alto). */
:root { --tb: 62px; }
@media (max-width: 640px) { :root { --tb: 56px; } }
.hero { position: relative; min-height: calc(100vh - var(--tb)); min-height: calc(100svh - var(--tb)); display: grid; align-items: center; overflow: hidden; }   /* (10-11-2026) el logo y lo demás, en el centro (antes abajo) */
.hero-art { position: absolute; inset: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(11, 9, 7, .2) 0%, rgba(11, 9, 7, .1) 40%, rgba(11, 9, 7, .85) 80%, #0b0907 100%),
  radial-gradient(ellipse 60% 45% at 50% 55%, rgba(11, 9, 7, .55), transparent),
  radial-gradient(ellipse at 50% 100%, transparent 40%, rgba(11, 9, 7, .5)); }
.hero-in { position: relative; z-index: 1; width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 56px; text-align: center; }
.hero h1 {
  font: 700 clamp(40px, 8vw, 84px)/1.1 var(--serif); letter-spacing: .1em; color: var(--gold);
  text-shadow: 0 3px 0 #3b2a12, 0 6px 18px #000, 0 0 40px rgba(224, 160, 70, .25);
}
.hero h1 .logo { display: block; width: auto; height: auto; max-width: min(680px, 100%); max-height: clamp(150px, 34vh, 320px); margin: 0 auto; filter: drop-shadow(0 6px 18px #000); }   /* (10-11-2026) el logo */
.hero .tag { margin-top: 10px; font: 600 clamp(17px, 2.4vw, 22px)/1.6 var(--serif); color: #f0e4c8; text-shadow: 0 2px 6px #000; }
.hero .sub { max-width: 640px; margin: 10px auto 0; color: #cdbf9f; text-shadow: 0 1px 4px #000; }
.hero .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.hero .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: #c9b68f; }
.hero .facts span::before { content: '✦'; margin-right: 8px; color: var(--gold2); }

/* ── tarjetas ── */
.grid { display: grid; gap: 18px; margin-top: 32px; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { padding: 2px 4px 6px; }
.card h3 { font: 700 20px/1.35 var(--serif); color: var(--gold); letter-spacing: .04em; }
.card p { margin-top: 8px; color: #d6c9ab; font-size: 15px; line-height: 1.75; }
.card .ico { width: 56px; height: 56px; margin-bottom: 12px; image-rendering: auto; }
.card .town-img { height: 120px; width: auto; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.card.shot { padding: 0; overflow: hidden; }
.card.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.card.shot .in { padding: 18px 20px 22px; }

/* héroes */
.heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px; margin-top: 32px; }
.who { text-align: center; padding: 0 0 4px; }
.who img { width: 112px; height: 112px; margin: 0 auto; object-fit: cover; border: 2px solid var(--edge); box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .6); }
.who b { display: block; margin-top: 12px; font: 700 18px/1.3 var(--serif); color: var(--gold); }
.who small { display: block; color: var(--muted); font-size: 13px; }
.who p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: #d6c9ab; }

/* capítulos */
.chapters { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 14px; counter-reset: ch; }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 0 4px; }
.chapters li::before {
  content: counter(ch); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a321b, var(--leather)); border: 2px solid var(--gold2);
  font: 700 22px/1 var(--serif); color: var(--gold);
}
.chapters b { font: 700 19px/1.4 var(--serif); color: var(--gold); }
.chapters p { color: #d6c9ab; font-size: 15px; }

/* pasos */
.steps { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: st; }
.steps li { counter-increment: st; position: relative; padding: 14px 4px 4px; }
.steps li::before { content: counter(st); position: absolute; top: -22px; left: 4px; padding: 0 10px; background: #0b0907; border: 1px solid var(--gold2); font: 700 15px/26px var(--serif); color: var(--gold); }
.steps b { font: 700 18px/1.4 var(--serif); color: var(--gold); }
.steps p { margin-top: 6px; color: #d6c9ab; font-size: 15px; }

/* preguntas */
.faq { max-width: 820px; margin: 28px auto 0; display: grid; gap: 10px; }
.faq details { padding: 0 6px; }
.faq summary { cursor: pointer; padding: 12px 0; font: 700 17px/1.5 var(--serif); color: var(--gold); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; display: inline-block; width: 1.4em; color: var(--gold2); }
.faq details[open] summary::before { content: '−'; }
.faq details p { padding: 0 0 14px 1.4em; color: #d6c9ab; }

.cta-band { margin: 80px auto 0; padding: 12px 8px; width: min(900px, calc(100% - 32px)); text-align: center; }
.cta-band h2 { font: 700 clamp(24px, 3.6vw, 32px)/1.35 var(--serif); color: var(--gold); }
.cta-band p { margin: 8px 0 22px; color: #d6c9ab; }

a.who { color: inherit; text-decoration: none; transition: transform .15s; }
a.who:hover { transform: translateY(-3px); }
.chapters b a { color: inherit; text-decoration: none; } .chapters b a:hover { color: var(--gold-hi); }
.lead.more a { color: var(--gold); font-weight: 700; }

/* ── las fichas: panel oscuro con marco (28-10-2026: antes pergamino) ── */

.paper {
  min-width: 0; padding: 16px 24px 40px; color: var(--d-ink); line-height: 1.9;
  background: radial-gradient(ellipse at 50% 0%, rgba(60, 42, 22, .3), transparent 60%) padding-box, #17130f padding-box;
  /* El marco (concept/site/frame/f2.png, 28-10-2026): 9-slice, esquinas iguales y lados que se repiten. */
  border: 80px solid transparent; border-image: url('../assets/site/frame.webp') 150 / 80px round;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .75);
}
@media (max-width: 560px) { .paper { border-width: 44px; border-image-width: 44px; padding: 8px 4px 28px; } .panel { border-width: 26px; border-image-width: 26px; } }
.paper .kicker { text-align: center; font: 700 13px/1 var(--serif); letter-spacing: .3em; color: var(--gold2); }
.paper h1 { margin-top: 10px; text-align: center; font: 900 clamp(26px, 4vw, 36px)/1.3 var(--serif); letter-spacing: .06em; color: var(--gold); text-shadow: 0 2px 2px #000, 0 0 18px rgba(200, 140, 60, .2); }
.paper .intro { margin-top: 18px; font-size: 17px; }
.paper .rule { color: var(--gold2); }
.paper .rule i { background: linear-gradient(90deg, transparent, var(--gold2), transparent); }
.paper h2 {
  display: flex; align-items: center; gap: 12px; margin: 48px 0 12px;
  font: 800 23px/1.4 var(--serif); color: var(--gold); text-shadow: 0 2px 2px #000;
}
.paper h2 .num {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a321b, var(--leather)); border: 2px solid var(--gold2);
  color: var(--gold); font-size: 13px; font-weight: 800; font-family: var(--sans);
}
.paper h3 { margin: 28px 0 6px; font: 800 18px/1.5 var(--serif); color: #e8c47a; }
.paper p { margin: 10px 0; }
.paper ul, .paper ol { margin: 10px 0; padding-left: 24px; }
.paper li { margin: 6px 0; }
.paper li::marker { color: var(--gold2); font-weight: 700; }
.paper a { color: var(--gold); font-weight: 700; }
.paper a:hover { color: var(--gold-hi); }
.paper b, .paper strong { color: #f3e6c8; }
.paper kbd {
  display: inline-block; min-width: 1.8em; padding: 0 6px; text-align: center;
  font: 700 13px/1.6 var(--sans); color: #f3e6c8;
  background: linear-gradient(180deg, #3a2e22, #241c14); border: 1px solid #6e4e26; border-bottom-width: 3px; border-radius: 4px;
}
.paper table { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.paper th, .paper td { padding: 8px 10px; border-bottom: 1px solid var(--d-line); text-align: left; vertical-align: top; }
.paper th { color: #e8c47a; background: rgba(176, 141, 85, .1); }
.paper .tbl { overflow-x: auto; }
.paper .tip {
  margin: 18px 0; padding: 12px 16px 12px 46px; position: relative;
  background: var(--d-well); border: 1px solid var(--d-line); border-left: 4px solid var(--gold2);
}
.paper .tip::before { content: '✦'; position: absolute; left: 16px; top: 12px; color: var(--gold2); }
.paper figure { margin: 20px 0; }
.paper figure img { border: 2px solid #6e4e26; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.paper figcaption { margin-top: 6px; font-size: 14px; color: var(--p-soft); text-align: center; }
.paper .next { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--d-line); text-align: center; }
.paper .next .btn { margin-top: 10px; }

/* ── pie ── */
.site-foot { margin-top: 90px; padding: 44px 0 30px; background: rgba(0, 0, 0, .45); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.site-foot .brand { font-size: 20px; }
.site-foot p { margin: 8px 0 14px; }
.site-foot h4 { font: 700 15px/1.4 var(--serif); letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
.site-foot .cols a:not(.btn) { display: block; color: #c9b68f; text-decoration: none; line-height: 2; }
.site-foot .cols a:not(.btn):hover { color: var(--gold); }
.site-foot .langs { width: min(1100px, calc(100% - 32px)); margin: 26px auto 0; text-align: center; line-height: 2; }
.site-foot .langs a { color: #c9b68f; text-decoration: none; }
.site-foot .langs b { color: var(--gold); }
.site-foot .langs .sep { margin: 0 8px; opacity: .5; }
.site-foot .copy { margin-top: 22px; text-align: center; font-size: 12px; opacity: .7; }
@media (max-width: 640px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } .site-foot .cols > div:first-child { grid-column: 1 / -1; } }

/* ── fichas (worker/wiki.js): legendarios, jefes ── */
.doc-wrap { width: min(980px, calc(100% - 32px)); margin: 20px auto 0; }
/* Las páginas interiores: el menú de la izquierda (todas las secciones; la abierta, con sus subpáginas) y la ficha.
   En pantallas estrechas, el menú va arriba, plegado. */
.site-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; width: min(1300px, calc(100% - 32px)); margin: 0 auto; align-items: start; }
.site-body .doc-wrap { width: 100%; }
.site-body ~ * .crumbs, body.wiki .crumbs { width: min(1300px, calc(100% - 32px)); }
.side { position: sticky; top: 80px; margin-top: 20px; }
.side-box { max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding: 4px 2px; }
.side-box summary { list-style: none; padding: 2px 8px 8px; font: 700 13px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); pointer-events: none; }
.side-box summary::-webkit-details-marker { display: none; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li > a { display: block; padding: 7px 10px; border-radius: 3px; color: #d9c7a0; font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none; }
.side li > a:hover { color: var(--gold); background: rgba(224, 160, 70, .08); }
.side li.on > a { color: var(--gold); }
.side li ul { margin: 2px 0 8px 10px; padding-left: 8px; border-left: 1px solid rgba(201, 162, 90, .3); }
.side li li > a { padding: 5px 10px; font-size: 14px; font-weight: 500; color: #c9b68f; }
.side a[aria-current] { color: var(--gold); background: rgba(224, 160, 70, .14); }
@media (max-width: 900px) {
  .site-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side { position: static; margin-top: 14px; }
  .side-box { max-height: none; }
  .side-box summary { pointer-events: auto; cursor: pointer; padding: 6px 8px; font-size: 14px; }
  .side-box summary::after { content: ' ▾'; }
  .side-box[open] summary::after { content: ' ▴'; }
  .side-box[open] summary { padding-bottom: 8px; }
}
.paper .hero-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.paper .hero-row img { width: 96px; height: 96px; flex: 0 0 auto; border: 2px solid var(--edge); box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .6); }
.paper .hero-row img.big { width: 140px; height: 140px; }
.paper .hero-row .intro { margin: 0; }
.paper .hero-row.boss img.art { width: 300px; height: auto; border: 0; box-shadow: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .8)); }
@media (max-width: 640px) { .paper .hero-row.boss img.art { width: 240px; } }
@media (max-width: 640px) { .paper .hero-row { flex-wrap: wrap; justify-content: center; } .paper .hero-row img { width: 80px; height: 80px; } }
.paper .num { color: var(--leg); }
.legs { display: grid; gap: 14px; margin-top: 14px; }
.leg { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; background: var(--d-well); border: 1px solid var(--d-line); border-left: 4px solid #ff8a1e; scroll-margin-top: 80px; }
.leg-ico { width: 64px; height: 64px; background: #1b1410; border: 2px solid #ff8a1e; box-shadow: 0 0 10px rgba(255, 138, 30, .35); }
.leg h3 { margin: 0; color: var(--leg); font-size: 19px; }
.leg h3 small { margin-left: 8px; font: 600 13px var(--sans); color: var(--p-soft); }
.grades { display: grid; gap: 4px; margin-top: 6px; }
.gr { font-size: 15px; line-height: 1.6; }
.gr .num.g0 { color: #e8dcc0; } .gr .num.g1 { color: #c58ce0; } .gr .num.g2 { color: #ff6b5b; }
.gr .sl { margin: 0 2px; color: #6e5e45; font-weight: 400; }
.gtag { display: flex; gap: 4px; }
.gtag i { padding: 0 6px; font: 700 11px/18px var(--sans); font-style: normal; color: #fff6e0; border-radius: 3px; }
.gtag .g0 { background: #5c4a30; } .gtag .g1 { background: #6a2a7a; } .gtag .g2 { background: #8a1c1c; }
.skills { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 13px; color: var(--p-soft); }
.sk { display: inline-flex; align-items: center; gap: 5px; }
.sk img { width: 22px; height: 22px; border: 1px solid var(--gold2); }
.leg p { margin: 6px 0 0; font-size: 15px; }
.price { margin-top: 4px; font-size: 13px; color: var(--p-soft); }
.builds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.build { padding: 6px 8px; background: #120e0b padding-box; }
.build h3 { margin: 0 0 8px; }
.build-items { display: grid; gap: 6px; }
.bi { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bi img { width: 40px; height: 40px; background: #1b1410; border: 1px solid #ff8a1e; }
.bi span { line-height: 1.3; } .bi small { display: block; font-weight: 400; color: var(--p-soft); }
.build p { margin: 8px 0 0; font-size: 15px; }
.mini-legs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); font-size: 14px; line-height: 1.6; }
.ml { display: flex; gap: 10px; align-items: flex-start; }
.ml img { width: 40px; height: 40px; flex: 0 0 auto; background: #1b1410; border: 1px solid #ff8a1e; }
.ml b { color: var(--leg); }
.paper .facts th { width: 8em; }
.moves { display: grid; gap: 18px; margin-top: 14px; }
.move { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; padding: 6px; background: #120e0b padding-box; }
.move figure { margin: 0; } .move svg { width: 100%; height: auto; display: block; border: 1px solid var(--d-line); }
.move h3 { margin-top: 0; }
.move .how { padding: 8px 12px; background: var(--d-well); border-left: 3px solid var(--gold2); }
@media (max-width: 640px) { .move { grid-template-columns: 1fr; } }
.quote { display: flex; gap: 12px; margin: 12px 0; padding: 4px 6px; background: #120e0b padding-box; color: #e8dcc0; }
.quote img { width: 56px; height: 56px; flex: 0 0 auto; border: 1px solid var(--gold2); }
.quote b { color: var(--gold); } .quote p { margin: 2px 0 0; }
.related { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--d-line); }
.related h2 { margin: 0 0 8px; font-size: 19px; }
.related ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.related li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.related span { font-size: 14px; color: var(--p-soft); }

/* ── condiciones y privacidad (worker/legal.js) ── */
.paper.legal .sub { margin-top: 4px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .32em; color: var(--gold2); }
.paper.legal .meta { margin: 24px 0 6px; padding: 12px 18px; background: var(--d-well); border: 1px solid var(--d-line); font-size: 14px; }
.paper.legal .meta div { display: flex; gap: 14px; padding: 2px 0; }
.paper.legal .meta dt { flex: 0 0 8em; color: #e8c47a; font-weight: 700; }
.paper.legal .meta dd { min-width: 0; margin: 0; word-break: break-word; }
@media (max-width: 560px) { .paper.legal .meta div { flex-direction: column; gap: 0; padding: 4px 0; } .paper.legal .meta dt { flex: none; } }

/* ════════ secciones de las fichas (cada una, lo suyo; lo común va arriba) ════════ */
/* ── guide ── */
.g-step { margin-top: 6px; text-align: center; font-size: 13px; letter-spacing: .1em; color: var(--p-soft); }
.g-fig img { width: 100%; height: auto; }
.g-fig.narrow img { max-width: 360px; margin: 0 auto; }
.g-fig.tall img { max-width: 300px; margin: 0 auto; }
.g-toc { margin: 22px 0 0; padding: 12px 16px; background: var(--d-well); border: 1px solid var(--d-line); font-size: 15px; }
.g-toc b { color: var(--gold); }
.g-toc ol { margin: 6px 0 0; columns: 2 220px; column-gap: 28px; }
.g-toc li { margin: 3px 0; break-inside: avoid; }
.g-k { font-weight: 700; } .g-k.up { color: #8fe36a; } .g-k.down { color: #ff7a6a; } span.g-k { color: #6e5e45; }
.g-cards { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.g-card { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 4px; background: #120e0b padding-box; text-decoration: none; font-weight: 400 !important; }
.g-card img { width: 200px; height: 125px; object-fit: cover; border: 1px solid var(--d-line); }
.g-txt { display: block; color: #d6c9ab; line-height: 1.6; }
.g-txt b { display: block; margin: 2px 0 4px; font: 800 18px/1.4 var(--serif); color: var(--gold); }
.g-no { font: 800 13px/1 var(--sans); color: var(--gold2); letter-spacing: .1em; }
.g-card:hover b { color: var(--gold-hi); }
.g-story { display: grid; gap: 12px; margin-top: 12px; }
.g-ch { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; background: #120e0b padding-box; }
.g-ch img { width: 96px; height: 96px; border: 1px solid var(--gold2); }
.g-ch h3 { margin: 0; }
.g-ch p { margin: 4px 0 0; font-size: 15px; }
.g-meta { font-size: 13px !important; color: var(--p-soft); }
.g-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.g-nav a { display: block; padding: 12px 14px; background: var(--d-well); border: 1px solid var(--d-line); text-decoration: none; line-height: 1.5; }
.g-nav a:hover { border-color: var(--gold2); }
.g-nav small { display: block; font-weight: 400; color: var(--p-soft); }
.g-nav .next-ch { text-align: right; }
@media (max-width: 640px) {
  .g-card { grid-template-columns: 1fr; }
  .g-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .g-ch { grid-template-columns: 64px 1fr; } .g-ch img { width: 64px; height: 64px; }
  .g-nav { grid-template-columns: 1fr; } .g-nav .next-ch { text-align: left; }
}
/* ── heroes ── */
.el { display: inline-block; padding: 0 6px; font: 700 12px/1.6 var(--sans); font-style: normal; border: 1px solid currentColor; border-radius: 3px; vertical-align: 1px; }
.el-normal { color: #c8bca8; } .el-fire { color: #ff8a3c; } .el-ice { color: #8fd8ff; } .el-electric { color: #ffe45c; } .el-poison { color: #8fe36a; } .el-dark { color: #c08aff; } .el-fairy { color: #ffd88a; }
@media (max-width: 640px) { .paper .hero-por img.big { width: 104px; height: 104px; } }
.skls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.skl { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--d-well); border: 1px solid var(--d-line); scroll-margin-top: 80px; }
.skl img { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--gold2); }
.skl p { margin: 2px 0 4px; font-size: 15px; line-height: 1.6; }
.skl .evo, .evo-ok { display: block; font-size: 13px; line-height: 1.6; color: var(--p-soft); }
.ult { display: flex; gap: 14px; align-items: center; padding: 4px 6px; background: #120e0b padding-box; }
.ult img { width: 64px; height: 64px; flex: 0 0 auto; border: 2px solid var(--gold2); }
.ult p { margin: 4px 0; }
.paper figure img[src*="/heroes/ult-"] { width: 100%; height: auto; }
.tal-tree { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tal-br { padding: 4px 6px; background: #120e0b padding-box; font-size: 14px; line-height: 1.6; }
.tal-br h3 { margin: 0 0 6px; }
.tal-br ol { margin: 0; padding-left: 20px; }
.tal-br small, .hcard .how { color: var(--p-soft); }
.hcards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.paper .hcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 4px; background: #120e0b padding-box; text-align: center; text-decoration: none; font-weight: 400; color: var(--d-ink); }
.hcard img { width: 140px; height: 140px; border: 2px solid var(--edge); }
.hcard b { color: var(--gold); font-size: 17px; } .hcard .role { font-size: 14px; line-height: 1.5; } .hcard .how { font-size: 13px; }
.paper .cmp td, .paper .cmp th { white-space: nowrap; } .cmp .stars { color: var(--gold); letter-spacing: 1px; }
.por-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.paper .por-strip figure { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.por-strip img { width: 70px; height: 70px; border: 1px solid var(--edge); }
.por-strip figcaption { width: 100%; margin: 0; }
@media (max-width: 560px) { .hcards { grid-template-columns: 1fr 1fr; gap: 8px; } .hcard img { width: 84px; height: 84px; } .hcard b { font-size: 15px; } .skls { grid-template-columns: 1fr; } .por-strip { grid-template-columns: 1fr 1fr; } .por-strip img { width: 56px; height: 56px; } }
/* ── legendaries ── */
.lh-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 14px; }
.paper .lh-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 4px; background: #120e0b padding-box; text-align: center; text-decoration: none; font-weight: 400; }
.lh-card img { width: 96px; height: 96px; border: 2px solid var(--edge); box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .6); }
.lh-card b { font: 700 17px/1.35 var(--serif); color: var(--leg); }
.lh-card small { font-size: 13px; color: var(--p-soft); }
.paper .lh-card:hover b { color: var(--gold-hi); }
.suits { font-size: 14px; color: var(--p-soft); }
.lh-slots th, .lh-slots td { white-space: nowrap; }
.lh-slots td:nth-child(2) { white-space: normal; min-width: 9em; }
.lh-drop th:first-child { min-width: 7em; }
@media (max-width: 560px) {
  .lh-grid { grid-template-columns: 1fr; gap: 10px; }
  .paper .lh-card { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; text-align: left; align-items: center; }
  .lh-card img { width: 64px; height: 64px; grid-row: 1 / 3; }
  .lh-card b { align-self: end; } .lh-card small { align-self: start; }
}
/* ── bosses ── */
.boss-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 14px; }
.paper .boss-card { display: block; padding: 8px 6px 4px; background: #120e0b padding-box; text-align: center; text-decoration: none; font-weight: 400; color: var(--d-ink); }
.boss-card img { display: block; height: 180px; width: auto; max-width: 100%; margin: 0 auto 6px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .8)); }
.paper .boss-card h3 { margin: 0; color: var(--gold); }
.boss-card .bc-meta { margin: 2px 0 0; font-size: 13px; color: var(--gold2); letter-spacing: .08em; }
.boss-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.paper .boss-card:hover h3 { color: var(--gold-hi); }
/* ── stages / monsters ── */
.paper .st-shot { margin: 20px 0 0; } .paper .st-shot img { display: block; width: 100%; height: auto; }
.st-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 14px; }
.paper .st-card { display: block; padding: 4px; background: #120e0b padding-box; text-decoration: none; font-weight: 400; color: var(--d-ink); }
.st-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--d-line); }
.st-in { display: grid; gap: 2px; padding: 8px 4px 2px; font-size: 14px; line-height: 1.6; }
.st-in small { color: var(--gold2); letter-spacing: .08em; } .st-in b { font: 700 19px/1.4 var(--serif); color: var(--gold); } .st-in .g { color: var(--p-soft); }
.paper .st-card:hover b { color: var(--gold-hi); }
.mons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 12px; }
.mon { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 12px; background: var(--d-well); border: 1px solid var(--d-line); scroll-margin-top: 80px; }
.mon > img, .mon-s img { background: radial-gradient(circle at 50% 60%, #3a2c1c, #1b1410 70%); border: 1px solid var(--d-line); }
.paper .mon h3 { margin: 0; font-size: 17px; }
.mon p { margin: 2px 0; font-size: 14px; line-height: 1.6; } .mon small { display: block; font-size: 13px; line-height: 1.6; color: var(--p-soft); }
.mon .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rc { display: inline-block; padding: 0 6px; font: 700 12px/1.6 var(--sans); font-style: normal; color: #e8dcc0; background: #3a2e22; border-radius: 3px; }
.badge { padding: 0 6px; font: 700 11px/18px var(--sans); color: #fff6e0; background: #6a2a7a; border-radius: 3px; vertical-align: 2px; } .badge.g { background: #8a1c1c; }
.st-mons { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.paper .mon-s { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: var(--d-well); border: 1px solid var(--d-line); text-align: center; text-decoration: none; font-weight: 400; line-height: 1.4; }
.mon-s b { font-size: 14px; color: var(--gold); } .mon-s small { font-size: 12px; color: var(--p-soft); }
.st-el td, .st-el th { text-align: center; white-space: nowrap; } .st-el td.up { color: #8fe36a; font-weight: 700; } .st-el td.dn { color: #ff8a7a; }
@media (max-width: 560px) { .mons { grid-template-columns: 1fr; } .st-mons { grid-template-columns: repeat(2, 1fr); } }

/* coreano: no partir las palabras (el coreano separa con espacios) */
:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }