/* ============================================================
   PRIMAL RAGE SNES wiki - estilos
   ============================================================ */
:root {
  --bg: #151210;
  --bg2: #1b1714;
  --card: #211c17;
  --card2: #262019;
  --line: #3a3228;
  --text: #ede5d8;
  --mut: #a89b8a;
  --ember: #f2712c;
  --ember2: #ffb347;
  --b-y: #8b8fd8; --b-x: #5b5fc0; --b-b: #d06a90; --b-a: #a63a62; --b-l: #6a6f78;
  --pixel: "Press Start 2P", "Courier New", monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(242, 113, 44, .07), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.65 system-ui, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}
a { color: var(--ember2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; }
b { color: #fff; }
.tiny { color: var(--mut); font-size: 12.5px; margin-top: 8px; }
small { color: var(--mut); }

/* ---------- barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px;
  background: rgba(21, 18, 16, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.brand {
  font-family: var(--pixel); font-size: 13px; letter-spacing: 1px;
  color: var(--text); white-space: nowrap;
}
.brand em { font-style: normal; color: var(--ember); }
.brand small { font-family: system-ui; font-size: 11px; color: var(--mut); margin-left: 8px; }
.topbar nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  color: var(--mut); font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
}
.topbar nav a:hover { color: var(--text); background: var(--card); text-decoration: none; }

main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 60px; }

/* ---------- inicio ---------- */
.hero { padding: 46px 0 30px; }
.hero h1 {
  font-family: var(--pixel); font-size: clamp(26px, 5.4vw, 54px);
  color: var(--text); text-shadow: 0 3px 0 #6b2d10;
  letter-spacing: 2px;
}
.hero h1 em { font-style: normal; color: var(--ember); }
.hero-sub { max-width: 62ch; margin-top: 18px; font-size: 17px; color: #cfc4b4; }
.hero-note { max-width: 62ch; margin-top: 12px; font-size: 14px; color: var(--mut); border-left: 3px solid var(--ember); padding-left: 12px; }
.sec-title { font-family: var(--pixel); font-size: 15px; color: var(--ember2); margin: 34px 0 18px; letter-spacing: 1px; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.rcard {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--char);
  border-radius: 14px; padding: 18px 14px 14px; text-align: center; color: var(--text);
  transition: transform .18s ease, border-color .18s ease;
}
.rcard:hover { transform: translateY(-3px); text-decoration: none; border-color: var(--char); }
.rcard img { height: 110px; image-rendering: pixelated; }
.rcard h3 { font-family: var(--pixel); font-size: 12px; margin-top: 12px; color: var(--char); }
.rcard p { font-size: 12.5px; color: var(--mut); margin-top: 6px; }

.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.home-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; color: var(--text);
}
.home-card:hover { border-color: var(--ember); text-decoration: none; }
.home-card h3 { color: var(--ember2); font-size: 17px; }
.home-card p { color: var(--mut); margin-top: 8px; font-size: 14px; }

/* ---------- paneles ---------- */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 16px;
}
.panel h3 {
  font-family: var(--pixel); font-size: 12px; letter-spacing: 1px;
  color: var(--ember2); margin-bottom: 14px;
}
.panel h3 small { font-family: system-ui; letter-spacing: 0; color: var(--mut); font-weight: 400; }
.panel h5 { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.panel p + p { margin-top: 10px; }

/* ---------- ficha de personaje ---------- */
.char-head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 24px; }
.char-sprite {
  width: 150px; image-rendering: pixelated;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.char-kicker { font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--char); font-weight: 700; }
.char-head h1 { font-family: var(--pixel); font-size: clamp(22px, 4vw, 40px); margin: 8px 0; color: var(--text); text-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.char-deity { color: var(--mut); }
.char-nav { margin-left: auto; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.char-grid { display: grid; grid-template-columns: 430px 1fr; gap: 18px; align-items: start; }
.char-grid > div > .panel:first-child { margin-top: 0; }

.info-box dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.info-box dt { color: var(--mut); }
.info-box dd { text-align: right; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; border: 1px solid rgba(255, 255, 255, .25); vertical-align: baseline; }

.palettes p { font-size: 13.5px; color: var(--mut); }
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pal-grid figure {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; text-align: center;
}
.pal-grid img { width: 100%; image-rendering: pixelated; border-radius: 6px; }
.pal-grid figcaption { font-size: 11.5px; color: var(--mut); margin-top: 6px; }

.basic-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.basic-cols ul { list-style: none; }
.basic-cols li { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; flex-wrap: wrap; }

.trivia { list-style: none; }
.trivia li { padding: 6px 0 6px 18px; position: relative; font-size: 14px; color: #d6cab9; }
.trivia li::before { content: "▸"; position: absolute; left: 0; color: var(--ember); }

/* ---------- tarjetas de movimiento ---------- */
.moves { display: grid; gap: 10px; }
.movecard {
  background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--char);
  border-radius: 10px; padding: 14px 16px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.movecard:hover, .movecard:focus-visible { border-color: var(--char); background: #2b241c; transform: translateX(3px); outline: none; }
.movecard header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.movecard h4 { font-size: 15px; color: #fff; }
.badge-type {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 99px; background: var(--line); color: var(--mut);
}
.badge-v23 {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: rgba(242, 113, 44, .15); color: var(--ember2); border: 1px solid var(--ember);
}
.mv-desc { font-size: 13.5px; color: #cfc4b4; margin-top: 8px; }
.mv-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mv-note {
  margin-top: 10px; font-size: 12.5px; color: #ffce54;
  background: rgba(255, 206, 84, .08); border: 1px dashed rgba(255, 206, 84, .4);
  border-radius: 8px; padding: 6px 10px;
}
.mv-orig { margin-top: 10px; font-size: 11.5px; color: var(--mut); font-family: ui-monospace, Consolas, monospace; }

/* cuerpo con captura a la derecha */
.mv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.movecard.has-shot .mv-body { grid-template-columns: minmax(0, 1fr) 148px; }
.mv-shot { margin: 0; text-align: center; }
.mv-shot img {
  width: 100%; height: auto; display: block; background: #000;
  border: 2px solid var(--line); border-radius: 6px; cursor: zoom-in;
  transition: border-color .15s ease;
}
.movecard:hover .mv-shot img { border-color: var(--char); }
.mv-shot figcaption {
  margin-top: 4px; font-size: 8.5px; letter-spacing: .04em;
  color: var(--mut); font-family: var(--pixel, monospace);
}
.lightbox {
  position: fixed; inset: 0; z-index: 200; padding: 24px;
  background: rgba(10, 7, 5, .88); display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox img {
  max-width: min(92vw, 720px); max-height: 88vh; width: auto; height: auto;
  border: 3px solid var(--ember); border-radius: 10px; background: #000;
}
@media (max-width: 560px) {
  .movecard.has-shot .mv-body { grid-template-columns: minmax(0, 1fr) 108px; }
}

.phase-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--ember2);
  border: 1px solid var(--ember); border-radius: 6px; padding: 2px 6px;
}
.io-hold { display: inline-flex; align-items: center; gap: 4px; }
.io-verb { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); font-weight: 700; margin-right: 2px; }
.io-alt { font-size: 11px; color: var(--mut); }
.io-seq { display: inline-flex; gap: 4px; align-items: center; }
.io-step { display: inline-flex; gap: 2px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 6px; font-size: 12.5px; font-weight: 800; color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.chip.dir { background: #17181c; color: var(--ember2); font-size: 15px; }
.chip.air { background: transparent; border: 1px dashed var(--line); color: var(--mut); font-size: 11px; text-transform: uppercase; }
.chip.b-y { background: var(--b-y); } .chip.b-x { background: var(--b-x); }
.chip.b-b { background: var(--b-b); } .chip.b-a { background: var(--b-a); }
.chip.b-l, .chip.b-r { background: var(--b-l); }
.chip.xb-x { background: #3a7bd5; } .chip.xb-y { background: #cfa22a; }
.chip.xb-a { background: #43a047; } .chip.xb-b { background: #cf4c3f; }
.chip.xb-lb, .chip.xb-rb { background: var(--b-l); }

/* ---------- interruptor de mapeo SNES / Xbox (barra superior) ---------- */
.map-switch {
  display: flex; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--card);
}
.map-switch button {
  border: 0; background: transparent; color: var(--mut);
  font: 700 12px/1 system-ui, "Segoe UI", sans-serif;
  padding: 8px 12px; cursor: pointer;
}
.map-switch button + button { border-left: 1px solid var(--line); }
.map-switch button.on { background: var(--ember); color: #1a0d05; }
.map-switch button:not(.on):hover { color: var(--text); background: var(--card2); }

/* ---------- guía rápida dentro de la columna sticky ---------- */
.map-guide .map-table { font-size: 12.5px; }
.map-guide .map-table th { padding: 4px 6px; }
.map-guide .map-table td { padding: 5px 6px; }
.map-guide .tiny { margin-top: 10px; }

/* ---------- mando SNES ---------- */
.pad-wrap svg { width: 100%; height: auto; display: block; }
.pad-status {
  margin-top: 10px; min-height: 40px; padding: 8px 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: #d6cab9;
}
.pad-hint b { color: var(--ember2); }
.sticky-pad { position: sticky; top: 74px; }
.pad .fbtn, .pad .sh, .pad .arm, .pad .diag { cursor: pointer; }
.pad .armhit, .pad .dighit { pointer-events: all; }
.pad text { user-select: none; }
.pad .badge circle { fill: #3a3a3a; stroke: #161616; stroke-width: 1.2; }
.pad .badge text {
  fill: #f2ecdf; font-family: Arial, sans-serif; font-size: 10.5px;
  font-weight: 700; text-anchor: middle; pointer-events: none;
}
.pad .pill-label {
  fill: #7a7a7a; font-family: Arial, sans-serif; font-size: 9.5px;
  font-style: italic; font-weight: 700; letter-spacing: 1px; pointer-events: none;
}
.pad .arm .dglyph, .pad .diag .dglyph {
  opacity: 0; fill: var(--ember2); font-family: Arial, sans-serif;
  font-weight: 700; pointer-events: none; transition: opacity .12s ease;
}
.pad .face, .pad .shface, .pad .armhit { transition: filter .12s ease, stroke .12s ease, fill .12s ease; }
.pad .fbtn.held .face {
  stroke: var(--ember); stroke-width: 2.6;
  filter: drop-shadow(0 0 6px rgba(242, 113, 44, .85));
}
.pad .fbtn.held .badge circle { fill: var(--ember); stroke: #b64d12; }
.pad .fbtn.held .badge text { fill: #2a1204; }
.pad .sh.held .shface {
  stroke: var(--ember); stroke-width: 2.4;
  filter: drop-shadow(0 0 5px rgba(242, 113, 44, .8));
}
.pad .sh.held .badge circle { fill: var(--ember); stroke: #b64d12; }
.pad .sh.held .badge text { fill: #2a1204; }
.pad .arm.press .armhit { fill: rgba(242, 113, 44, .16); stroke: var(--ember); stroke-width: 1.8; }
.pad .arm.press .dglyph, .pad .diag.press .dglyph { opacity: 1; }
.pad .diag.press .dighit { fill: rgba(242, 113, 44, .10); }
.pad .fbtn:hover .face { filter: brightness(1.06); }

/* ---------- pad Xbox (Series) ---------- */
.pad-xbox .xbletter, .pad-xbox .xbshadow {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 22px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
}
.pad-xbox .xbshadow { fill: rgba(0, 0, 0, .55); }
.pad-xbox .badge circle { fill: #262626; stroke: #000; }
.pad-xbox .badge text { fill: #f2ecdf; }
.pad-xbox .arm .dglyph { fill: #ffb347; }

/* ---------- guía ---------- */
.guia h1, .sistema h1 { font-family: var(--pixel); font-size: clamp(18px, 3vw, 28px); color: var(--ember); margin-bottom: 10px; }
.lead { color: var(--mut); margin-bottom: 20px; }
.guia-grid { display: grid; grid-template-columns: 430px 1fr; gap: 18px; align-items: start; }
.map-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.map-table th { text-align: left; color: var(--mut); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.map-table td { padding: 8px; border-bottom: 1px solid rgba(58, 50, 40, .5); }
.legend { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.legend .chip { min-width: 22px; height: 22px; font-size: 13px; }
.example { background: var(--bg2); border-radius: 8px; padding: 10px 12px; }
.steps { margin: 12px 0 0 18px; font-size: 14px; display: grid; gap: 6px; }
.cheat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-play {
  background: var(--ember); color: #1a0d05; border: 0; border-radius: 8px;
  font-weight: 800; font-size: 13px; padding: 8px 14px; cursor: pointer;
}
.btn-play:hover { background: var(--ember2); }
.btn-play:active { transform: translateY(1px); }

/* ---------- sistema ---------- */
.sis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.bar { display: inline-block; width: 46px; height: 12px; border-radius: 3px; vertical-align: baseline; border: 1px solid rgba(255, 255, 255, .3); }
.bar.life { background: linear-gradient(#ff5a3c, #c22a12); }
.bar.brain { background: linear-gradient(#ffe14d, #d8a410); }
.jumps { list-style: none; display: grid; gap: 12px; }
.jumps li { display: flex; gap: 12px; align-items: flex-start; }
.jsteps { display: inline-flex; gap: 3px; padding-top: 2px; }
.jumps b { font-size: 14px; }
.jumps p { font-size: 13px; color: var(--mut); }
.opts { list-style: none; display: grid; gap: 7px; font-size: 13.5px; }

/* ---------- pie ---------- */
footer {
  border-top: 1px solid var(--line); margin-top: 40px;
  padding: 26px 24px 40px; color: var(--mut); font-size: 12.5px;
  max-width: 1240px; margin-inline: auto;
}
footer p + p { margin-top: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .char-grid, .guia-grid { grid-template-columns: 1fr; }
  .sticky-pad { position: static; }
}
@media (max-width: 720px) {
  main { padding: 18px 14px 40px; }
  .topbar { flex-wrap: wrap; gap: 10px 14px; }
  .map-switch { margin-left: auto; }
  .map-switch button { padding: 7px 10px; }
  .home-cols { grid-template-columns: 1fr; }
  .char-head { gap: 14px; }
  .char-sprite { width: 110px; }
  .char-nav { flex-direction: row; margin-left: 0; }
  .pal-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .info-box dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}