/* info / tech pages — estética retro/CRT del juego (negro, monospace, neón) */
:root{
  --bg:#05080c; --panel:rgba(6,14,22,0.96); --bd:#1f3a4d;
  --tx:#cfd8dc; --dim:#8aa0b0; --green:#7CFC00; --cyan:#4FC3F7; --amber:#FFB300;
  --amber2:#FFE082; --pink:#FF8FC7; --orange:#FF7043;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:"Courier New",monospace; line-height:1.5;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.025) 0 1px,transparent 1px 3px);
}
a{color:var(--cyan); text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:920px; margin:0 auto; padding:24px 18px 64px}
header.bar{position:sticky; top:0; z-index:10; background:rgba(3,6,10,0.92);
  border-bottom:1px solid var(--bd); padding:10px 18px; display:flex; gap:16px; align-items:center;
  backdrop-filter:blur(4px)}
header.bar .brand{color:var(--amber); font-weight:bold; letter-spacing:1px}
header.bar nav{margin-left:auto; display:flex; gap:14px; font-size:13px}

.hero{text-align:center; padding:46px 12px 30px; border-bottom:1px solid var(--bd)}
.hero h1{font-size:42px; margin:0 0 8px; color:var(--green); text-shadow:0 0 14px rgba(124,252,0,.35); letter-spacing:2px}
.hero .tag{color:var(--amber2); font-size:16px; margin:0 0 20px}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-block; padding:12px 22px; border:1px solid var(--bd); border-radius:6px;
  color:var(--tx); background:var(--panel); font-weight:bold; cursor:pointer}
.btn.play{border-color:var(--green); color:var(--green); box-shadow:0 0 12px rgba(124,252,0,.2)}
.btn:hover{filter:brightness(1.25)}
.badge{display:inline-block; font-size:11px; color:var(--dim); border:1px solid var(--bd);
  border-radius:20px; padding:3px 10px; margin-top:14px}

.free{margin:26px 0; padding:18px 20px; border:1px solid var(--green); border-radius:8px;
  background:linear-gradient(180deg,rgba(124,252,0,.08),rgba(124,252,0,.02))}
.free h2{color:var(--green); margin:0 0 6px}
.free b{color:var(--amber2)}

section{margin:30px 0}
h2.sec{color:var(--cyan); border-left:3px solid var(--cyan); padding-left:10px; font-size:22px}
h3{color:var(--amber); margin:18px 0 6px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--bd); border-radius:8px; padding:14px 16px}
.card h3{margin-top:0}
.dim{color:var(--dim)}
ul{padding-left:20px} li{margin:4px 0}
code,.mono{font-family:"Courier New",monospace; color:var(--amber2); background:rgba(255,224,130,.07);
  padding:1px 5px; border-radius:3px; font-size:.92em}

/* diagrama de capas (tech) */
.flow{background:#020407; border:1px solid var(--bd); border-radius:8px; padding:18px; overflow-x:auto}
.flow pre{margin:0; color:var(--green); font-size:13px; line-height:1.45; white-space:pre}
.layer{display:flex; gap:14px; margin:14px 0; align-items:flex-start}
.layer .n{flex:0 0 42px; height:42px; display:grid; place-items:center; border:1px solid var(--cyan);
  border-radius:50%; color:var(--cyan); font-weight:bold}
.layer .body{flex:1; background:var(--panel); border:1px solid var(--bd); border-radius:8px; padding:12px 16px}
.layer .body h3{margin:0 0 4px}
.tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.tagrow span{font-size:11px; color:var(--cyan); border:1px solid var(--bd); border-radius:4px; padding:2px 7px}
.soon{border-color:var(--pink)} .soon .n{border-color:var(--pink); color:var(--pink)}
.soon h3{color:var(--pink)}
/* diagrama: ¿por dónde entra el juego? (GitHub vs infra) */
.access{background:#020407; border:1px solid var(--bd); border-radius:10px; padding:18px}
.access .top{text-align:center; margin-bottom:6px}
.access .node{display:inline-block; background:var(--panel); border:1px solid var(--bd); border-radius:8px; padding:10px 16px; font-weight:bold; color:var(--tx)}
.access .down{text-align:center; color:var(--dim); margin:6px 0}
.access .split{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
@media(max-width:640px){.access .split{grid-template-columns:1fr}}
.lane{border:1px solid var(--bd); border-radius:8px; padding:12px; background:rgba(255,255,255,.015)}
.lane h4{margin:0 0 4px; font-size:14px}
.lane .what{color:var(--dim); font-size:12px; margin-bottom:10px}
.lane.game h4{color:var(--amber)} .lane.ai h4{color:var(--green)}
.opt{border-radius:6px; padding:9px 11px; margin:8px 0; font-size:12.5px; border:1px solid var(--bd)}
.opt .k{display:block; font-weight:bold; font-size:11px; letter-spacing:.5px; margin-bottom:3px}
.opt.gh{border-color:#8aa0b0; background:rgba(138,160,176,.08)} .opt.gh .k{color:#cfd8dc}
.opt.infra{border-color:var(--green); background:rgba(124,252,0,.07)} .opt.infra .k{color:var(--green)}
.opt.soon{opacity:.92}
.opt .path{color:var(--amber2); font-size:11.5px}
.access .legend{margin-top:12px; font-size:11.5px; color:var(--dim); text-align:center}
.access .legend b.gh{color:#cfd8dc} .access .legend b.infra{color:var(--green)}

/* pipeline diseñado del viaje del mensaje (infra) */
.pipe{display:flex; flex-direction:column; align-items:center; gap:0; margin:14px 0; background:#020407;
  border:1px solid var(--bd); border-radius:10px; padding:18px 14px}
.pstep{width:100%; max-width:560px; background:var(--panel); border:1px solid var(--bd);
  border-left:4px solid var(--cyan); border-radius:8px; padding:9px 14px; display:flex; gap:12px; align-items:center}
.pstep .ic{font-size:20px; flex:0 0 26px; text-align:center}
.pstep .t{font-weight:bold; color:var(--tx); font-size:13.5px}
.pstep .s{color:var(--dim); font-size:11px}
.pstep.edge{border-left-color:var(--pink)}
.pstep.gw{border-left-color:var(--green)}
.pstep.router{border-left-color:var(--amber)}
.parrow{color:var(--green); font-size:16px; line-height:1; margin:4px 0; text-align:center}
.parrow small{display:block; color:var(--dim); font-size:10px}
.pbranch{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:560px; width:100%}
.pbranch .pstep{flex:1; min-width:150px; max-width:100%; border-left-color:var(--amber2)}
.alt-ascii{margin-top:10px} .alt-ascii summary{cursor:pointer; color:var(--cyan); font-size:12.5px}

footer{margin-top:50px; padding-top:18px; border-top:1px solid var(--bd); color:var(--dim); font-size:12px; text-align:center}