/* Juegos · lo propio de /juegos/. El juego en sí (escenas, marcadores, decisiones)
   lo pinta /guias/guias.js con los estilos de /guias/guias.css; aquí van la portada
   de cada juego, el expediente, el tablón de sospechosos y los carteles de /juegos/. */

.jg { --noche:#0b1020; --noche-2:#141b33; --papel:#f6efdc; --papel-borde:#e3d5b0; --tinta:#3a3226; --rojo:#c8323f; }
.jg-maquina { font-family:'Special Elite','Courier New',monospace; font-weight:400; letter-spacing:.02em; }

/* ─────────── Portada de un juego ─────────── */
.jg-portada { position:relative; isolation:isolate; overflow:hidden; background:var(--noche); color:#fff; min-height:min(88vh, 820px); display:flex; align-items:flex-end; }
.jg-arte { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:62% 50%; animation:jg-acerca 14s cubic-bezier(.2,.6,.2,1) both; }
@keyframes jg-acerca { from { transform:scale(1.08); } to { transform:scale(1); } }
/* Velo para que el texto se lea: oscuro a la izquierda y abajo, y un fundido al fondo de la página. */
.jg-portada::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,11,22,.94) 0%, rgba(8,11,22,.78) 30%, rgba(8,11,22,.25) 58%, rgba(8,11,22,0) 72%),
    linear-gradient(0deg, var(--bg-body) 0, rgba(249,250,251,.85) 50px, rgba(249,250,251,0) 170px),
    linear-gradient(0deg, rgba(8,11,22,.75) 0, rgba(8,11,22,0) 45%); }
.jg-portada-c { width:100%; max-width:1240px; margin:0 auto; padding:72px clamp(16px,3%,28px) 120px; }
.jg-portada-c > * { max-width:640px; }

.jg-migas { font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:26px; }
.jg-migas a { color:rgba(255,255,255,.88); font-weight:600; text-decoration:none; }
.jg-migas a:hover { text-decoration:underline; }
.jg-migas .sep { margin:0 8px; opacity:.6; }

/* El logo va sobre una placa clara: la E del logo es marina y en la noche se perdería. */
.jg-presenta { display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.94); color:var(--navy); border-radius:100px; padding:6px 16px 6px 8px; box-shadow:0 10px 30px rgba(0,0,0,.35); font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; }
.jg-presenta img { height:30px; width:auto; }

.jg-kicker { font-family:'Special Elite','Courier New',monospace; color:#ffd27a; font-size:1.05rem; letter-spacing:.06em; margin-bottom:6px; }
.jg-titulo { color:#fff; font-size:clamp(3rem, 8.2vw, 6.6rem); line-height:.92; letter-spacing:-.045em; margin-bottom:22px; text-wrap:balance; }
.jg-titulo span { display:block; color:#6ee7b7; text-shadow:0 0 34px rgba(95,208,166,.55), 0 0 2px rgba(95,208,166,.9); }
.jg-lema { color:rgba(255,255,255,.86); font-size:1.12rem; max-width:560px; margin-bottom:28px; }

.jg-acciones { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.jg-cta, .jg-cta2 { display:inline-flex; align-items:center; min-height:48px; padding:0 26px; border-radius:100px; font-weight:800; font-size:1rem; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.jg-cta { background:#5fd0a6; color:var(--noche); box-shadow:0 0 0 0 rgba(95,208,166,.6), 0 12px 30px rgba(47,174,132,.35); animation:jg-late 2.8s ease-out 1.6s infinite; }
.jg-cta:hover { background:#7de0bb; transform:translateY(-2px); }
@keyframes jg-late { 0% { box-shadow:0 0 0 0 rgba(95,208,166,.55), 0 12px 30px rgba(47,174,132,.35); } 70%, 100% { box-shadow:0 0 0 16px rgba(95,208,166,0), 0 12px 30px rgba(47,174,132,.35); } }
.jg-cta2 { color:#fff; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06); backdrop-filter:blur(6px); }
.jg-cta2:hover { background:rgba(255,255,255,.14); border-color:#fff; }

.jg-sellos { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.jg-sellos li { font-size:.82rem; font-weight:600; color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:5px 12px; backdrop-filter:blur(6px); }
.jg-sellos b { color:#fff; font-weight:800; }

/* La pista del lunes: la tarjeta roja de visitante con las letras CH. */
.jg-chapa { position:absolute; right:clamp(20px, 6vw, 90px); bottom:120px; width:120px; padding:26px 0 14px; text-align:center; background:linear-gradient(160deg, #d8434f, #a5202d); border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); transform:rotate(9deg); color:#fff; animation:jg-chapa 7s ease-in-out infinite; }
.jg-chapa i { position:absolute; top:9px; left:50%; width:30px; height:7px; margin-left:-15px; border-radius:6px; background:var(--noche); }
.jg-chapa span { display:block; font-family:'Special Elite','Courier New',monospace; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.jg-chapa b { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
@keyframes jg-chapa { 50% { transform:rotate(6deg) translateY(-6px); } }

/* Entrada: lo de la portada sube en cascada. */
.jg-portada-c > * { animation:jg-sube .8s cubic-bezier(.2,.7,.2,1) both; }
.jg-portada-c > :nth-child(2) { animation-delay:.1s; } .jg-portada-c > :nth-child(3) { animation-delay:.2s; }
.jg-portada-c > :nth-child(4) { animation-delay:.3s; } .jg-portada-c > :nth-child(5) { animation-delay:.42s; }
.jg-portada-c > :nth-child(6) { animation-delay:.54s; } .jg-portada-c > :nth-child(7) { animation-delay:.66s; }
@keyframes jg-sube { from { opacity:0; transform:translateY(18px); } }

/* El juego se monta encima del final de la portada. */
.jg-main { position:relative; }
.jg-jugar { position:relative; z-index:2; margin-top:-56px; scroll-margin-top:84px; }
.jg-jugar .gx { margin-top:0; }
/* Sin sesión: el formulario de entrada, centrado y con el borde encendido. */
.jg-jugar .gx-acceso { width:100%; max-width:620px; justify-self:center; border-color:rgba(95,208,166,.55); box-shadow:0 0 0 4px rgba(95,208,166,.14), 0 24px 50px rgba(11,16,32,.22); }#caso, #como { scroll-margin-top:84px; }

/* ─────────── El expediente ─────────── */
.jg-expediente { position:relative; margin-top:22px; background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(58,50,38,.06) 31px 32px),
    linear-gradient(180deg, #fbf6e8, var(--papel));
  border:1px solid var(--papel-borde); border-radius:4px 18px 18px 18px; box-shadow:0 18px 40px rgba(43,51,73,.14), 0 2px 0 #eadfc2; padding:34px clamp(20px,4vw,44px) 30px; color:var(--tinta); }
.jg-pestana { position:absolute; left:-1px; top:-30px; height:31px; display:flex; align-items:center; padding:0 18px; background:#fbf6e8; border:1px solid var(--papel-borde); border-bottom:none; border-radius:12px 12px 0 0; font-family:'Special Elite','Courier New',monospace; font-size:.86rem; color:#6b5a3a; letter-spacing:.04em; }
.jg-sello { position:absolute; right:clamp(16px,4vw,40px); top:22px; transform:rotate(-8deg); border:3px solid var(--rojo); color:var(--rojo); border-radius:8px; padding:4px 14px; font-family:'Special Elite','Courier New',monospace; font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; mix-blend-mode:multiply; }
.jg-expediente h2 { font-family:'Special Elite','Courier New',monospace; font-weight:400; color:var(--tinta); font-size:1.7rem; letter-spacing:.01em; margin-bottom:12px; }
.jg-expediente p { color:var(--tinta); font-size:1rem; line-height:2; max-width:760px; }
.jg-expediente p + p { margin-top:4px; }

.jg-datos { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.jg-datos li { background:rgba(255,255,255,.65); border:1px dashed #cdbb8e; border-radius:12px; padding:12px 14px; display:grid; gap:2px; }
.jg-datos b { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.7rem; font-weight:800; color:var(--navy); line-height:1; }
.jg-datos span { font-size:.82rem; font-weight:600; color:#6b5a3a; }

/* ─────────── Tablón de sospechosos ─────────── */
.jg-tablon { background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(135deg, #1b2440, #2b3349); border-color:#1b2440; color:rgba(255,255,255,.86); }
.jg-tablon h2 { color:#fff; }
.jg-tablon .gx-sub { color:rgba(255,255,255,.72); }
.jg-fichas { list-style:none; margin:20px 0 4px; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.jg-fichas li { position:relative; background:#fff; color:var(--dark-soft); border-radius:6px; padding:14px 14px 16px; box-shadow:0 14px 26px rgba(0,0,0,.35); transform:rotate(var(--r, -2deg)); transition:transform .25s ease, box-shadow .25s ease; display:grid; gap:6px; align-content:start; }
.jg-fichas li:nth-child(2n) { --r:2.2deg; } .jg-fichas li:nth-child(3n) { --r:-1deg; }
.jg-fichas li::before { content:''; position:absolute; top:-9px; left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ff8a8a, var(--rojo)); box-shadow:0 3px 5px rgba(0,0,0,.4); }
.jg-fichas li:hover { transform:rotate(0) translateY(-4px); box-shadow:0 20px 34px rgba(0,0,0,.45); }
.jg-ini { display:grid; place-items:center; aspect-ratio:1; border-radius:4px; background:linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 55%, #0b1020)); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:2rem; font-weight:800; letter-spacing:-.03em; filter:saturate(.85); }
.jg-fichas b { font-family:'Plus Jakarta Sans',sans-serif; color:var(--navy); font-size:.98rem; line-height:1.2; }
.jg-fichas small { font-size:.82rem; line-height:1.45; color:var(--text-main); }

/* ─────────── Pasos, marcadores y temas ─────────── */
.jg-pasos { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px; counter-reset:p; }
.jg-pasos li { counter-increment:p; position:relative; padding-left:2.6em; font-size:.96rem; color:var(--dark-soft); max-width:780px; }
.jg-pasos li::before { content:counter(p); position:absolute; left:0; top:-.1em; display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; background:var(--navy); color:#6ee7b7; font-weight:800; font-size:.82rem; }
.jg-pasos b { color:var(--navy); }
.jg-h3 { font-size:1.02rem; margin:24px 0 10px; }

.jg-mets { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.jg-mets li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:4px 8px; background:var(--bg-body); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.jg-met-n { font-size:.84rem; color:var(--text-muted); }
.jg-met-n b { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; color:var(--navy); }
.jg-met-v { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.5rem; font-weight:800; color:var(--navy); }
.jg-met-bar { grid-column:1 / -1; height:8px; border-radius:100px; background:#e6eaf0; overflow:hidden; }
.jg-met-bar i { display:block; height:100%; width:max(4%, calc(var(--v) * 100%)); border-radius:inherit; background:linear-gradient(90deg, #2fb39a, #5fd3b8); }
.jg-mets .m2 .jg-met-bar i { background:linear-gradient(90deg, #7b5cd6, #a58cf0); }
.jg-mets .m3 .jg-met-bar i { background:linear-gradient(90deg, #e39a1f, #f2c35e); }
.jg-mets .m4 .jg-met-bar i { background:linear-gradient(90deg, #2f80d0, #6aa8e8); }
.jg-mets small { grid-column:1 / -1; font-size:.8rem; line-height:1.4; color:var(--text-main); }

/* Los temas, como etiquetas de prueba. */
.jg-temas { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; counter-reset:t; }
.jg-temas li { counter-increment:t; display:inline-flex; align-items:baseline; gap:8px; font-size:.86rem; font-weight:600; color:var(--navy); background:var(--navy-tint); border:1px solid #dde2ec; border-radius:8px 100px 100px 8px; padding:5px 14px 5px 6px; }
.jg-temas li::before { content:counter(t); display:inline-grid; place-items:center; min-width:1.8em; height:1.8em; border-radius:6px; background:#fff; font-size:.74rem; font-weight:800; color:var(--text-muted); }

/* ─────────── /juegos/: la sala con los carteles ─────────── */
.jg-sala { position:relative; isolation:isolate; overflow:hidden; color:#fff; padding:52px 0 90px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(95,208,166,.22), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(123,92,214,.25), transparent 60%),
    linear-gradient(180deg, var(--noche), var(--noche-2)); }
.jg-sala::after { content:''; position:absolute; inset:auto 0 0; height:90px; z-index:-1; background:linear-gradient(0deg, var(--bg-body), transparent); }
.jg-sala-t { color:#fff; font-size:clamp(2.4rem, 6vw, 4.4rem); line-height:.98; letter-spacing:-.045em; max-width:820px; margin-bottom:16px; text-wrap:balance; }
.jg-sala-t span { color:#6ee7b7; }
.jg-sala-lead { color:rgba(255,255,255,.8); font-size:1.08rem; max-width:680px; margin-bottom:34px; }
.jg-nota { color:rgba(255,255,255,.6); font-size:.88rem; margin-top:22px; max-width:680px; }

.jg-carteles { display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; perspective:1200px; }
.jg-cartel { position:relative; isolation:isolate; overflow:hidden; min-height:400px; border-radius:22px; display:flex; align-items:flex-end; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 60px rgba(0,0,0,.45); transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.jg-cartel img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:60% 50%; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.jg-cartel::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(8,11,22,.95) 0%, rgba(8,11,22,.55) 45%, rgba(8,11,22,.05) 75%); }
/* Un brillo que cruza el cartel al pasar por encima. */
.jg-cartel::after { content:''; position:absolute; inset:-50%; z-index:1; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%); transform:translateX(-60%); transition:transform .9s ease; }
a.jg-cartel:hover { transform:translateY(-8px) rotateX(4deg); box-shadow:0 44px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(95,208,166,.5); }
a.jg-cartel:hover img { transform:scale(1.05); }
a.jg-cartel:hover::after { transform:translateX(60%); }
.jg-cartel-nivel { position:absolute; top:18px; left:18px; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.25rem; font-weight:800; background:#5fd0a6; color:var(--noche); border-radius:12px; padding:4px 12px; }
.jg-cartel-c { position:relative; z-index:2; display:grid; gap:6px; padding:26px; }
.jg-cartel-c small { font-family:'Special Elite','Courier New',monospace; color:#ffd27a; font-size:.92rem; letter-spacing:.04em; }
.jg-cartel-c b { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.8rem, 3.6vw, 2.9rem); font-weight:800; line-height:1; letter-spacing:-.04em; }
.jg-cartel-c > span { color:rgba(255,255,255,.78); font-size:.92rem; }
.jg-cartel-ir { justify-self:start; display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-weight:800; font-size:.92rem; border-radius:100px; padding:9px 20px; background:#5fd0a6; color:var(--noche) !important; }
.jg-cartel-ir svg { width:15px; height:15px; }
.jg-cartel.pronto { background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #222b47, #121829); }
.jg-cartel.pronto::before { content:'?'; display:grid; place-items:center; background:none; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:13rem; line-height:1; color:rgba(255,255,255,.05); padding-bottom:90px; }
.jg-cartel.pronto .jg-cartel-nivel { background:rgba(255,255,255,.14); color:#fff; }
.jg-cartel.pronto .jg-cartel-c { padding-top:72px; }
.jg-cartel.pronto .jg-cartel-c b { font-size:1.6rem; }
.jg-cartel.pronto .jg-cartel-ir { background:rgba(255,255,255,.1); color:rgba(255,255,255,.75) !important; }

/* ─────────── Pantallas pequeñas ─────────── */
@media (max-width:1024px) {
  .jg-fichas { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .jg-carteles { grid-template-columns:1fr 1fr; }
  .jg-cartel-b1 { grid-column:1 / -1; }
  .jg-cartel.pronto { min-height:280px; }
}
@media (max-width:720px) {
  /* En vertical, la ilustración es una banda arriba y el texto va debajo, sobre la noche. */
  .jg-portada { display:block; min-height:auto; }
  .jg-arte { height:360px; object-position:64% 42%; }
  .jg-portada::before { background:linear-gradient(180deg, rgba(8,11,22,.1) 0, rgba(8,11,22,.3) 190px, var(--noche) 350px, var(--noche) calc(100% - 140px), var(--bg-body) 100%); }
  .jg-portada-c { padding:24px 16px 110px; }
  .jg-migas { margin-bottom:220px; }
  .jg-chapa { top:84px; bottom:auto; right:18px; width:84px; padding:20px 0 10px; }
  .jg-chapa b { font-size:1.8rem; }
  .jg-lema { font-size:1.02rem; }
  .jg-datos, .jg-mets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jg-fichas { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .jg-sello { position:static; display:inline-block; margin-bottom:10px; }
  .jg-carteles { grid-template-columns:1fr; }
  .jg-cartel { min-height:360px; }
  .jg-cartel.pronto { min-height:200px; }
  .jg-cartel.pronto::before { font-size:8rem; padding-bottom:40px; }
}

@media (prefers-reduced-motion: reduce) {
  .jg-arte, .jg-portada-c > *, .jg-cta, .jg-chapa { animation:none; }
  .jg-cartel, .jg-cartel img, .jg-cartel::after, .jg-fichas li { transition:none; }
}