/* ═══════════ VIDEOJUEGO «Atrapa contactos» (assets/home/css/videojuego.css) ═══════════
   La página /videojuego-misdatos. Usa los tokens de site.css (--grad, --soft,
   --line) y la cara gris azulada de la tarjeta del login, /plans y el
   probador. El juego se dibuja en el canvas; esto viste el escenario, el
   marcador y las pantallas que van encima. */

.vj{
  --card-face:linear-gradient(145deg,#252a3a 0%,#1d2230 38%,#161a24 70%,#11141b 100%);
  --on-dark:#f4f7fb; --on-dark-2:#c3cdda; --accent:#ff8a4c;
  --ease-out:cubic-bezier(.23,1,.32,1);
  background:var(--soft);
}
.vj [hidden]{display:none !important}

.vj-hero h1{margin-bottom:14px}

/* ── Escenario ─────────────────────────────────────────────────────────── */
.vj-stage{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:16/10;max-height:680px;width:100%;
  border-radius:28px;
  background:
    radial-gradient(55% 60% at 78% 22%,rgba(122,61,240,.32),transparent 70%),
    radial-gradient(45% 50% at 10% 100%,rgba(255,116,82,.18),transparent 70%),
    var(--card-face);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 6px rgba(20,20,43,.2),0 50px 80px -34px rgba(20,20,43,.55);
  color:var(--on-dark);
  user-select:none;-webkit-user-select:none;
}
.vj-stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;
}
.vj-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:none}
.vj-stage:not(.is-playing) .vj-canvas{cursor:default}

/* ── Marcador ──────────────────────────────────────────────────────────── */
.vj-hud{
  position:absolute;top:16px;left:16px;right:72px;z-index:2;
  display:flex;gap:10px;pointer-events:none;
}
.vj-hud__item{
  display:flex;flex-direction:column;gap:2px;min-width:84px;
  padding:8px 14px;border-radius:14px;
  background:rgba(10,14,24,.55);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.vj-hud__item span{font-size:.7rem;letter-spacing:.04em;color:var(--on-dark-2)}
.vj-hud__item b{font-size:1.35rem;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vj-hud__combo{transition:border-color 160ms ease,background-color 160ms ease}
.vj-hud__combo[data-combo="2"]{border-color:rgba(255,138,76,.45)}
.vj-hud__combo[data-combo="3"]{border-color:rgba(255,91,131,.6)}
.vj-hud__combo[data-combo="4"]{border-color:rgba(155,60,255,.75);background:rgba(76,29,149,.45)}
.vj-hud__combo.is-up b{animation:vj-pop 260ms var(--ease-out)}
@keyframes vj-pop{from{transform:scale(1.35)}}

.vj-mute{
  position:absolute;top:16px;right:16px;z-index:3;
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;cursor:pointer;
  background:rgba(10,14,24,.55);border:1px solid rgba(255,255,255,.12);color:var(--on-dark);
  transition:transform 150ms var(--ease-out),border-color 150ms ease;
}
.vj-mute:active{transform:scale(.95)}
.vj-mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vj-mute[aria-pressed="true"] .vj-mute__on,.vj-mute[aria-pressed="false"] .vj-mute__off{display:none}

/* ── Pantallas encima del canvas ───────────────────────────────────────── */
.vj-screen{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px;
  background:rgba(8,11,20,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:vj-fade 200ms var(--ease-out);
}
@keyframes vj-fade{from{opacity:0}}
.vj-screen__box{width:min(460px,100%);text-align:center;display:grid;justify-items:center;gap:14px;animation:vj-rise 260ms var(--ease-out)}
@keyframes vj-rise{from{opacity:0;transform:translateY(8px) scale(.98)}}
.vj-title{margin:0;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.08;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.vj-lead{margin:0;color:var(--on-dark-2);font-size:1rem;line-height:1.5;text-wrap:pretty}
.vj-lead b{color:#fff;white-space:nowrap}
.vj-hint{margin:2px 0 0;font-size:.82rem;color:var(--on-dark-2);line-height:1.45}

/* La tarjeta MisDatos de la portada del juego: es la que se mueve al jugar. */
.vj-card{
  position:relative;width:176px;aspect-ratio:1.586;border-radius:14px;margin-bottom:6px;
  background:var(--card-face);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 34px -12px rgba(0,0,0,.7);transform:rotate(-6deg);
}
.vj-card__mark{position:absolute;left:14px;top:14px;width:26px;height:26px}
.vj-card__name{position:absolute;left:14px;bottom:12px;font-weight:700;font-size:.95rem;color:#fff}
.vj-card__nfc{position:absolute;right:12px;top:12px;width:20px;height:20px;fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.8;stroke-linecap:round}

.vj-legend{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:.86rem;color:var(--on-dark-2)}
.vj-legend li{display:flex;align-items:center;gap:8px}
.vj-legend b{color:#fff;font-variant-numeric:tabular-nums}
.vj-legend b.vj-neg{color:#ff9aa8}
.vj-chip{width:18px;height:18px;border-radius:50%;flex-shrink:0}
.vj-chip--contact{background:conic-gradient(#25d366 0 25%,#6476ff 0 50%,#ff5b83 0 75%,#0a66c2 0)}
.vj-chip--gold{width:24px;height:15px;border-radius:4px;background:linear-gradient(135deg,#ffe29a,#f5b83d 55%,#b8862a)}
.vj-chip--paper{width:24px;height:15px;border-radius:3px;background:#efe9dc;box-shadow:inset 0 -3px 0 #d6cfbf}

.vj-play{min-width:200px;padding:16px 34px;font-size:1.05rem}
.vj-play:active,.vj-cta:active,.vj-again:active,.vj-share:active,.vj-code__copy:active{transform:scale(.97)}

.vj-screen--count{background:rgba(8,11,20,.3);-webkit-backdrop-filter:none;backdrop-filter:none}
.vj-count{font-size:clamp(4rem,12vw,7.5rem);font-weight:700;letter-spacing:-.04em;color:#fff;text-shadow:0 10px 40px rgba(155,60,255,.55)}
.vj-count.is-tick{animation:vj-tick 600ms var(--ease-out)}
@keyframes vj-tick{from{opacity:.2;transform:scale(1.4)}}

/* Final */
.vj-end__label{margin:0;font-size:.8rem;letter-spacing:.04em;color:var(--on-dark-2)}
.vj-end__score{margin:-6px 0 0;font-size:clamp(3rem,8vw,4.6rem);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.vj-end__best{margin:0;font-size:.9rem;color:var(--on-dark-2)}
.vj-end__best b{color:#fff;font-variant-numeric:tabular-nums}
.vj-result{display:grid;justify-items:center;gap:12px;margin-top:6px}
.vj-code{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,138,76,.7)}
.vj-code__value{font-size:1.4rem;font-weight:700;letter-spacing:.08em;color:#fff;font-variant-numeric:tabular-nums}
.vj-code__copy{white-space:nowrap;border:0;border-radius:11px;padding:10px 14px;background:#fff;color:#0b1320;font-weight:600;font-size:.86rem;cursor:pointer;transition:transform 150ms var(--ease-out)}
.vj-end__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.vj-share{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:14px 20px;background:rgba(255,255,255,.04);color:#fff;font-weight:600;font-size:.92rem;cursor:pointer;transition:transform 150ms var(--ease-out),background-color 150ms ease}
.vj-end__plans{font-size:.88rem;color:var(--on-dark-2);text-decoration:underline;text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){
  .vj-share:hover{background:rgba(255,255,255,.1)}
  .vj-mute:hover{border-color:rgba(255,255,255,.3)}
  .vj-end__plans:hover{color:#fff}
}
.vj button:focus-visible,.vj a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.vj-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Debajo del juego */
.vj-about{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:48px}
.vj-about .section-title{margin:0 0 12px;font-size:clamp(1.8rem,3.2vw,2.6rem)}
.vj-about .lead{margin:0;max-width:620px}
.vj-about .btn{flex-shrink:0}

/* ── Celular: el escenario se para ─────────────────────────────────────── */
@media (max-width:760px){
  .vj-stage{aspect-ratio:auto;height:min(78vh,640px);min-height:520px;border-radius:22px}
  .vj-hud{top:12px;left:12px;right:64px;gap:6px}
  .vj-hud__item{min-width:0;flex:1;padding:6px 10px}
  .vj-hud__item b{font-size:1.1rem}
  .vj-mute{top:12px;right:12px}
  .vj-code{padding-left:14px}
  .vj-code__value{font-size:1.15rem;letter-spacing:.05em}
  .vj-about{flex-direction:column;align-items:flex-start;gap:20px;margin-top:36px}
}

/* ── Movimiento reducido: sin saltos; las pantallas solo aparecen ──────── */
@media (prefers-reduced-motion:reduce){
  .vj-screen,.vj-screen__box,.vj-count.is-tick,.vj-hud__combo.is-up b{animation:none}
  .vj-card{transform:none}
}