/* Wiki de Asteroid Pong · estilo A "wiki clásica" · un solo tema oscuro (el del juego) */
@font-face { font-family: 'Asteroid Blocks'; src: url(asteroid-blocks.woff2) format('woff2'); font-display: swap; }
:root {
  color-scheme: dark;
  --void: #07050d; --deep: #0d0817; --panel: #130d1f; --panel2: #181026; --line: #2a2036; --line-hi: #3d3050;
  --ink: #f2e8d8; --mute: #c4b8a2; --dim: #8c8373;
  --amber: #ffb21a; --amber-sh: #7a4a00; --cyan: #19f0ff; --magenta: #ff2bd6; --green: #3ef08a; --violet: #a98bff; --red: #ff5a6a;
  --pixel: 'Asteroid Blocks', 'Chakra Petch', ui-monospace, monospace;
  --disp: 'Chakra Petch', 'Barlow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --g: clamp(16px, 3vw, 28px);
}
* { box-sizing: border-box; }
html { scrollbar-width: thin; scrollbar-color: var(--line-hi) var(--deep); -webkit-text-size-adjust: 100%; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--line-hi); border: 2px solid var(--deep); } ::-webkit-scrollbar-thumb:hover { background: var(--amber); }
body { margin: 0; background: var(--void); color: var(--ink); font: 400 17px/1.62 var(--body); padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--disp); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--amber); color: #120900; padding: 10px 14px; font: 600 15px/1 var(--disp); }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* barra superior */
.wk-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--g) 10px; background: rgba(7, 5, 13, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.wk-top .mk { font: 400 15px/1 var(--pixel); color: var(--amber); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.wk-top .mk small { font: 500 11px/1 var(--mono); color: var(--cyan); letter-spacing: .14em; margin-left: 8px; text-transform: uppercase; }
.wk-search { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-hi); background: var(--deep); padding: 0 12px; min-height: 44px; color: var(--dim); margin: 0; }
.wk-search:focus-within { border-color: var(--amber); }
.wk-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: 400 15px/1 var(--mono); min-height: 42px; outline: none; }
.wk-search input::placeholder { color: var(--dim); }
.qres { position: absolute; left: -1px; right: -1px; top: 100%; margin: 0; padding: 4px 0; list-style: none; background: var(--panel); border: 1px solid var(--amber); max-height: min(70vh, 460px); overflow: auto; z-index: 30; }
.qres a { display: grid; gap: 2px; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.qres a b { font: 600 16px/1.2 var(--disp); } .qres a small { font: 400 12px/1.3 var(--mono); color: var(--dim); }
.qres a span { font-size: 14px; color: var(--mute); line-height: 1.4; }
.qres a[aria-selected="true"], .qres a:hover, .qres a:focus { background: var(--panel2); outline: none; box-shadow: inset 3px 0 0 var(--amber); }
.qres .none { padding: 12px 14px; color: var(--dim); font: 400 14px/1 var(--mono); }
.wk-top .lg { font: 500 13px/1 var(--mono); color: var(--mute); min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
.wk-top .play { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; background: var(--amber); color: #120900; font: 600 15px/1 var(--disp); text-decoration: none; box-shadow: 0 3px 0 var(--amber-sh); white-space: nowrap; }
.wk-top .play .xs { margin-left: .28em; }
.wk-top .play:hover { background: #ffc54d; }

.crumbs { padding: 14px var(--g) 0; font: 400 13px/1.5 var(--mono); color: var(--dim); max-width: 1320px; margin: 0 auto; }
.crumbs a { color: var(--mute); text-decoration: none; } .crumbs a:hover { color: var(--cyan); }
.crumbs .sep { margin-inline: 8px; }

/* columnas */
.lay { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; padding: 18px var(--g) 48px; align-items: start; }
nav.side { position: sticky; top: 84px; display: grid; gap: 18px; font-size: 15px; max-height: calc(100vh - 100px); overflow: auto; }
nav.side > div { display: grid; gap: 1px; }
nav.side .nh { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
nav.side a { display: flex; min-height: 36px; align-items: center; color: var(--mute); text-decoration: none; padding-left: 12px; border-left: 2px solid transparent; }
nav.side a:hover { color: var(--ink); border-left-color: var(--line-hi); }
nav.side a.on { color: var(--ink); border-left-color: var(--magenta); }
nav.side a.sub { padding-left: 24px; font-size: 14px; min-height: 32px; }
nav.side a.sub.on { color: var(--amber); border-left-color: var(--amber); }

/* artículo */
.art { min-width: 0; max-width: 980px; }
.art > * + * { margin-top: 18px; }
.ah { display: grid; gap: 8px; }
.art h1 { font-family: var(--pixel); font-weight: 400; color: var(--magenta); font-size: clamp(34px, 6vw, 58px); line-height: 1.02; text-transform: lowercase; overflow-wrap: anywhere; }
.art { container-type: inline-size; }
.art h1 { font-size: clamp(22px, min(6vw, calc((100vw - 2 * var(--g)) / (var(--n, 8) * 1.12))), 58px); font-size: clamp(22px, calc(100cqi / (var(--n, 8) * 1.12)), 58px); }
.wk-top .xm { display: none; }
@media (max-width: 720px) { .wk-top .xm { display: inline; } }
.toc ol { columns: 2 220px; column-gap: 28px; } .toc li { break-inside: avoid; }
.kind { font: 400 13px/1.4 var(--mono); color: var(--dim); letter-spacing: .04em; }
.def { font-size: 19px; line-height: 1.6; max-width: 66ch; }
.art .sec { display: flow-root; }
.art .sec > * + * { margin-top: 14px; }
.art h2 { font-size: 25px; padding-top: 22px; margin-top: 14px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.art .sec p, .art .sec li, .art .sec dd { max-width: 70ch; }
.art ul { padding-left: 20px; margin: 0; display: grid; gap: 6px; }
.art .sec ul li::marker { color: var(--amber); }
.upd { font: 400 12px/1.4 var(--mono); color: var(--dim); padding-top: 20px; border-top: 1px solid var(--line); clear: both; }

/* ficha (flota a la derecha, como en una wiki) */
.box { float: right; width: 310px; margin: 4px 0 18px 28px; border: 1px solid var(--line-hi); background: var(--panel); }
.box .t { padding: 10px 14px; font: 400 18px/1.1 var(--pixel); color: var(--magenta); background: var(--panel2); border-bottom: 1px solid var(--line); text-transform: lowercase; }
.box img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.box .cap { padding: 8px 14px; font: 400 12px/1.4 var(--mono); color: var(--dim); border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; padding: 2px 14px 10px; font-size: 15px; line-height: 1.45; }
.facts dt, .facts dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-right: 12px; padding-top: 11px; }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }

/* visor 3D */
.v3dwrap { margin: 0; display: flow-root; }
.v3dwrap > * + * { margin-top: 8px; }
.v3d { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line-hi); max-width: 100%; overflow: hidden; }
.v3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.v3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v3d-go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 48px; padding: 0 20px; background: rgba(7, 5, 13, .85); border: 1px solid var(--amber); color: var(--amber); font: 600 16px/1 var(--disp); cursor: pointer; box-shadow: 0 0 30px -6px var(--amber); white-space: nowrap; }
.v3d-go:hover, .v3d-go:focus-visible { background: var(--amber); color: #120900; }
.v3dcap { font: 400 13px/1.5 var(--mono); color: var(--dim); }
.v3dcap a { display: inline-flex; align-items: center; min-height: 40px; margin-left: 10px; }
.vforms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vforms span { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.vf { min-height: 40px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line-hi); color: var(--mute); font: 500 14px/1 var(--disp); cursor: pointer; }
.vf[aria-pressed="true"] { border-color: var(--amber); color: var(--ink); box-shadow: inset 0 0 0 1px var(--amber); }

/* índice de la página */
.toc { display: flow-root; border: 1px solid var(--line); padding: 12px 16px; max-width: 640px; }
.toc p { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 22px; font: 400 14px/1.5 var(--mono); }
.toc a { color: var(--mute); text-decoration: none; display: inline-block; padding: 3px 0; } .toc a:hover { color: var(--cyan); }
.toc ol li::marker { color: var(--dim); }

/* bloques de contenido */
.steps { list-style: none; margin: 0; padding: 0 !important; counter-reset: s; display: grid; gap: 14px !important; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; color: var(--mute); }
.steps li::before { content: counter(s); width: 34px; height: 34px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--amber); color: var(--amber); font: 700 14px/1 var(--mono); }
.steps li > * { grid-column: 2; }
.steps b { color: var(--ink); font-weight: 600; }
.atk { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.atk > div { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.atk b { font: 600 16px/1.2 var(--disp); } .atk span { font-size: 15px; color: var(--mute); line-height: 1.45; }
.atk .fin { border-color: var(--magenta); } .atk .fin b { color: var(--magenta); }
.tbl { overflow-x: auto; border: 1px solid var(--line); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.4; }
.tbl th { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: left; background: var(--panel2); }
.tbl th, .tbl td { min-width: 6.5em; }
.tbl th:first-child, .tbl td:first-child { min-width: 4.5em; }
.tbl th, .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--ink); font-weight: 500; }
.tbl td { color: var(--mute); }
.tbl .n, .tbl td.n { font: 500 13px/1.4 var(--mono); color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 0 18px; margin: 0; }
.kv dt, .kv dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding-top: 11px; }
.kv dd { color: var(--mute); }
.note { border-left: 3px solid var(--amber); background: var(--panel); padding: 12px 16px; color: var(--mute); }
.note b { color: var(--ink); }
.art .sec b { color: var(--ink); }
.faq details { border: 1px solid var(--line); background: var(--panel); }
.faq details + details { margin-top: 8px; }
.faq summary { cursor: pointer; padding: 12px 16px; min-height: 48px; font: 600 16px/1.35 var(--disp); list-style: none; display: flex; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--amber); font: 700 18px/1 var(--mono); width: 14px; flex: none; }
.faq details[open] summary::before { content: '−'; }
.faq details p { padding: 0 16px 14px 42px; color: var(--mute); }
.rel, .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.rel a, .cards a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); align-content: start; }
.rel img, .cards img, .noimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-hi); }
.noimg { display: block; background: repeating-linear-gradient(135deg, var(--panel) 0 10px, var(--panel2) 10px 20px); }
.rel b, .cards b { font: 600 16px/1.2 var(--disp); }
.rel small, .cards small { font: 400 12px/1.3 var(--mono); color: var(--dim); }
.rel a:hover b, .cards a:hover b { color: var(--amber); }
.cards { list-style: none; padding: 0 !important; margin: 0; }
.cards.top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px 18px !important; }
.cards span { color: var(--mute); font-size: 15px; line-height: 1.45; }

/* portada */
.home .hero { margin: 0; border: 1px solid var(--line-hi); }
.home .hero img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.mh { font-size: 22px; margin-top: 30px !important; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 30px !important; }
.hsec { border: 1px solid var(--line); background: var(--panel); padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.art .hsec h2 { font-size: 21px; border: 0; padding: 0; margin: 0; } .hsec h2 a { color: var(--ink); text-decoration: none; } .hsec h2 a:hover { color: var(--amber); }
.hsec small { font: 400 12px/1 var(--mono); color: var(--dim); }
.hsec p { color: var(--mute); font-size: 15px; line-height: 1.5; }
.hsec ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; }
.hsec ul a { display: inline-flex; min-height: 32px; align-items: center; }

/* secretos */
.spoil { position: relative; }
.spoil:not(.open) .spoil-in { filter: blur(9px); max-height: 560px; overflow: hidden; user-select: none; pointer-events: none; }
.spoil-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: linear-gradient(180deg, rgba(7, 5, 13, .45), rgba(7, 5, 13, .9)); }
.spoil-cover p { font: 600 19px/1.3 var(--disp); }
.spoil-go { min-height: 48px; padding: 0 20px; background: var(--amber); color: #120900; border: 0; font: 600 16px/1 var(--disp); cursor: pointer; box-shadow: 0 3px 0 var(--amber-sh); }
.spoil.open .spoil-cover { display: none; }

/* widgets reusados de la landing */
.tempo { margin: 0; display: grid; gap: 10px; }
.tempo-tip { font: 400 14px/1.4 var(--mono); color: var(--ink); min-height: 2.8em; margin: 0; }
.tempo-box { position: relative; border: 1px solid var(--line); background: rgba(7, 5, 13, .55); padding-block: 10px; }
.rocwrap { min-width: 0; }

.wk-foot { max-width: 1320px; margin: 0 auto; padding: 22px var(--g) 36px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; font: 400 13px/1.5 var(--mono); color: var(--dim); }
.wk-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.wk-foot a { color: var(--mute); display: inline-flex; align-items: center; min-height: 40px; }

@media (max-width: 1080px) {
  .box { width: 280px; }
}
@media (max-width: 900px) {
  .lay { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  nav.side { position: static; order: 2; max-height: none; border-top: 1px solid var(--line); padding-top: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}
@media (max-width: 720px) {
  .box { float: none; width: auto; margin: 18px 0 0; }
  .box.hv img, .box.hv .cap { display: none; }
  .wk-top .xs { display: none; }
  .cards.top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .def { font-size: 18px; }
  .wk-search { order: 3; flex: 1 1 150px; }
  .wk-top .play { order: 4; }
  .wk-top { gap: 10px 12px; }
  .wk-top .mk { margin-right: auto; }
  .home .hero img { aspect-ratio: 16 / 9; }
  .kv { grid-template-columns: minmax(0, 1fr); } .kv dt { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }