/* SuperGolex · juego.css — lo que la página del juego necesita además de chapas.css (portado de Exclivia). */
html, body.sg-juego { height: 100%; }
body.sg-juego { overflow: hidden; background: #06110a; }
body.sg-juego main { margin: 0; padding: 0; }
/* Hoy los duelos son amistosos: el chip de tickets no tiene nada que decir. */
#cha-pvp-saldo { display: none !important; }
/* Los avisos del sitio por encima del juego */
.sg-toasts { z-index: 5000; }
/* Las monedas todavía no existen: no se enseña el chip de tickets en la ficha */
.cha-chip-tk { display: none !important; }

/* ══ El MENÚ del juego, como la propuesta del diseñador (2026-10-20) ══════════
   Fondo en capas con parallax (js/menu.js escribe --px/--py entre -1 y 1), logo con
   corona, ficha del jugador con laureles y cuatro tarjetas con su arte a la derecha.
   Todo el texto es HTML (se traduce); las láminas solo aportan las ilustraciones. */
#cha-menu { background: #04140a; }
#cha-menu > .cha-barra, #cha-menu > .cha-m { position: relative; z-index: 1; }

.sgm-px { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --px: 0; --py: 0; }
.sgm-capa { position: absolute; inset: 0; will-change: transform; }
.sgm-fondo { inset: -4%; transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -10px), 0); }
.sgm-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.sgm-luces { transform: translate3d(calc(var(--px) * -28px), calc(var(--py) * -14px), 0); }
.sgm-luces img { position: absolute; left: 50%; top: -3%; width: min(78vw, 1100px); height: auto; translate: -50% 0; mix-blend-mode: screen; opacity: .5; animation: sgm-luz 5s ease-in-out infinite alternate; }
.sgm-medio { transform: translate3d(calc(var(--px) * -40px), calc(var(--py) * -24px), 0); }
.sgm-balon { position: absolute; right: 3vw; top: 12vh; width: clamp(64px, 7vw, 120px); height: auto; animation: sgm-flota 6s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.sgm-frente { transform: translate3d(calc(var(--px) * -70px), calc(var(--py) * -36px), 0); }
.sgm-d1 { position: absolute; left: -5vw; bottom: -9vh; width: clamp(150px, 22vw, 360px); height: auto; filter: blur(2px) brightness(.9) drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation: sgm-flota 9s ease-in-out -2s infinite; }
.sgm-d2 { position: absolute; right: -4vw; bottom: 3vh; width: clamp(120px, 17vw, 280px); height: auto; filter: blur(1.5px) brightness(.85) drop-shadow(0 18px 26px rgba(0,0,0,.6)); animation: sgm-flota 8s ease-in-out -5s infinite; }
.sgm-vineta { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(0,0,0,.25), transparent 22%, transparent 75%, rgba(0,0,0,.45)); }
@keyframes sgm-flota { 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes sgm-luz { from { opacity: .35; } to { opacity: .6; } }

/* La barra: botones de cristal verde con borde dorado */
#cha-menu .cha-barra .cha-btn, #cha-menu .cha-barra .cha-ib {
  background: linear-gradient(180deg, rgba(14, 70, 36, .88), rgba(4, 32, 16, .92));
  border: 1.5px solid #d9ad47; border-radius: 12px; color: #fff;
  box-shadow: 0 0 14px rgba(217, 173, 71, .28), inset 0 1px 0 rgba(255,255,255,.12);
}
#cha-menu .cha-barra .cha-btn { padding: .5rem 1rem; font-weight: 700; }

/* Logo y lema */
#cha-menu .sgm-logo { width: min(470px, 96%); filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6)); }
#cha-menu .sgm-lema { display: flex; align-items: center; gap: .7rem; margin-top: .2rem; }
#cha-menu .sgm-lema::before, #cha-menu .sgm-lema::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #d9ad47); }
#cha-menu .sgm-lema::after { background: linear-gradient(90deg, #d9ad47, transparent); }
#cha-menu .sgm-lema span { padding: .3rem 1rem; border-radius: 999px; border: 1.5px solid #d9ad47; background: rgba(4, 20, 10, .85); color: #ffd56b; font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* La ficha del jugador */
.sgm-yo-marco { position: relative; }
.sgm-laurel { position: absolute; z-index: 2; top: 10px; right: 12px; width: 108px; height: auto; opacity: .55; pointer-events: none; }
#cha-menu .cha-yo {
  position: relative; padding: 1.1rem 1.2rem 1rem; border-radius: 18px;
  background: linear-gradient(135deg, rgba(10, 52, 28, .94), rgba(4, 24, 13, .94));
  border: 1.5px solid #d9ad47;
  box-shadow: 0 0 22px rgba(217, 173, 71, .25), inset 0 0 40px rgba(40, 170, 90, .12), 0 18px 34px rgba(0, 0, 0, .45);
}
#cha-menu .cha-yo-cab { gap: 1rem; padding-right: 96px; }
#cha-menu .cha-yo-cab .cha-av { width: 66px; height: 66px; font-size: 1.6rem; border: 3px solid #d9ad47; box-shadow: 0 0 0 3px rgba(4, 24, 13, .9), 0 0 18px rgba(217, 173, 71, .45); }
#cha-menu .cha-yo-nom { font-size: 1.35rem; }
#cha-menu .cha-yo .cha-pill { background: rgba(0, 0, 0, .35); border: 1.5px solid #d9ad47; color: #fff; padding: .2rem .75rem; font-size: .85rem; }
#cha-menu .cha-yo .cha-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
#cha-menu .cha-yo .cha-pill::before { content: ''; width: 1em; height: .85em; background: #ffd23a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 6l5 4 5-8 5 8 5-4-2 11H4z M4 18h16v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 6l5 4 5-8 5 8 5-4-2 11H4z M4 18h16v2H4z'/%3E%3C/svg%3E") center / contain no-repeat; }
#cha-menu .cha-xp { height: 11px; margin-top: .9rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .08); }
#cha-menu .cha-xp span { background: linear-gradient(90deg, #1fbf5f, #4dff9a); box-shadow: 0 0 12px rgba(77, 255, 154, .6); }
#cha-menu .cha-invita-mini { color: #e8eef7; font-size: .92rem; }

/* Las cuatro tarjetas */
#cha-menu .cha-m-der { gap: .85rem; }
#cha-menu .cha-cta {
  position: relative; overflow: hidden; isolation: isolate; min-height: 92px; padding: .9rem 3rem .9rem 1rem; gap: 1rem;
  border: 1.5px solid #d9ad47; border-radius: 16px;
  box-shadow: 0 0 18px rgba(217, 173, 71, .22), 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s ease, box-shadow .2s ease;
}
#cha-menu .cha-cta:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(217, 173, 71, .4), 0 14px 30px rgba(0, 0, 0, .5); }
#cha-menu .cha-cta-uno  { background: linear-gradient(95deg, #06112b 0%, #0a2463 60%, #0d3a9a 100%); box-shadow: 0 0 22px rgba(47, 123, 255, .35), 0 12px 26px rgba(0,0,0,.45); }
#cha-menu .cha-cta-cpu  { background: linear-gradient(95deg, #04180c 0%, #0a3d1d 60%, #0f5a2a 100%); }
#cha-menu .cha-cta-pvp  { background: linear-gradient(95deg, #1a1104 0%, #3a2706 60%, #5a3c08 100%); }
#cha-menu .cha-cta-como { background: linear-gradient(95deg, #0d0f13 0%, #1c1f25 60%, #2a2e35 100%); min-height: 80px; }
#cha-menu .cha-cta-ico { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: none !important; }
#cha-menu .cha-cta-ico img { width: 100%; height: 100%; display: block; }
#cha-menu .cha-cta-tx { position: relative; z-index: 1; }
#cha-menu .cha-cta-tx b { font-size: 1.22rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#cha-menu .cha-cta-tx small { color: #d8dee9; font-size: .88rem; }
.sgm-art { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.sgm-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .9; }
.sgm-flecha { position: absolute; z-index: 2; right: .9rem; top: 50%; translate: 0 -50%; color: #ffd56b; display: grid; }
.sgm-flecha svg { width: 1.7rem !important; height: 1.7rem !important; rotate: 180deg; stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(255, 213, 107, .6)); }

/* Celular acostado: todo más compacto */
@media (max-height: 520px) {
  #cha-menu .sgm-logo { width: min(250px, 92%); }
  .sgm-laurel { display: none; }
  #cha-menu .cha-yo-cab { padding-right: 0; }
  #cha-menu .cha-yo-cab .cha-av { width: 40px; height: 40px; font-size: 1.05rem; border-width: 2px; }
  #cha-menu .cha-yo-nom { font-size: 1.05rem; }
  #cha-menu .cha-cta { min-height: 52px; padding: .4rem 2.4rem .4rem .7rem; gap: .7rem; border-radius: 12px; }
  #cha-menu .cha-cta-como { min-height: 46px; }
  #cha-menu .cha-cta-ico { width: 40px; height: 40px; }
  #cha-menu .cha-cta-tx b { font-size: 1rem; }
  .sgm-flecha svg { width: 1.3rem !important; height: 1.3rem !important; }
  .sgm-balon { display: none; }
}
@media (max-width: 560px) {
  #cha-menu .cha-cta { min-height: 84px; }
  #cha-menu .cha-cta-ico { width: 56px; height: 56px; }
  .sgm-laurel { width: 84px; }
  #cha-menu .cha-yo-cab { padding-right: 70px; }
  .sgm-art { width: 40%; }
  .sgm-art img { opacity: .55; }
  #cha-menu .cha-cta-tx small { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
}
@media (prefers-reduced-motion: reduce) {
  .sgm-capa { transform: none !important; }
  .sgm-balon, .sgm-d1, .sgm-d2, .sgm-luces img { animation: none !important; }
}

/* ══ «Cómo se juega», como la propuesta del diseñador (2026-10-20) ═══════════
   Números, ilustraciones, botón de cerrar y adornos son piezas de la lámina
   (assets/game/como/); el marco, el título, los textos y «Entendido» son CSS/HTML. */
.sgc { background: rgba(2, 10, 5, .78); }
.sgc .sgc-panel {
  position: relative; width: min(94vw, 760px); max-height: 94%; padding: 1.4rem 1.6rem 1.3rem; text-align: left;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; border: 2px solid #d9ad47;
  background:
    radial-gradient(circle at 0 0, rgba(80, 220, 130, .16) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(120% 70% at 50% 0%, rgba(40, 160, 80, .28), transparent 60%),
    linear-gradient(180deg, #0c3a1d 0%, #072713 55%, #04180c 100%);
  box-shadow: 0 0 0 4px rgba(4, 24, 13, .9), 0 0 0 5.5px rgba(217, 173, 71, .55), 0 0 40px rgba(217, 173, 71, .3), 0 30px 70px rgba(0, 0, 0, .65), inset 0 0 50px rgba(0, 0, 0, .35);
}
.sgc .sgc-panel::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -2px; height: 3px; border-radius: 3px; background: radial-gradient(closest-side, #b8ffd2, rgba(120, 255, 170, 0)); pointer-events: none; }
.sgc-x { position: absolute; z-index: 3; top: .7rem; right: .7rem; width: 46px; height: 46px; padding: 0; border: 0; background: none; transition: transform .15s; }
.sgc-x:hover { transform: scale(1.08) rotate(90deg); }
.sgc-x img { width: 100%; height: 100%; display: block; }
.sgc-trazo { position: absolute; z-index: 0; top: 1rem; width: 120px; height: auto; opacity: .55; pointer-events: none; }
.sgc-trazo-i { left: 1.2rem; }
.sgc-trazo-d { right: 4rem; width: 110px; }
.sgc .sgc-tit {
  position: relative; z-index: 1; margin: .3rem 0 0; text-align: center; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1;
  background: linear-gradient(180deg, #fff6cf 0%, #ffd56b 45%, #c8901c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(60, 35, 0, .85)) drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.sgc-balon { position: relative; z-index: 1; display: block; width: min(64%, 380px); height: auto; margin: 0 auto .3rem; }
.sgc .sgc-pasos { gap: 0; position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .7rem .2rem .2rem; margin: 0 -.2rem; scrollbar-width: thin; scrollbar-color: #d9ad47 transparent; }
.sgc .sgc-pasos li {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 128px; align-items: center; gap: 1rem;
  padding: .75rem 1rem; border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(120, 220, 150, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sgc .sgc-pasos li + li { margin-top: .95rem; }
.sgc .sgc-pasos li + li::before {     /* el separador dorado con su rombo */
  content: ''; position: absolute; left: 12%; right: 12%; top: calc(-.48rem - 1px); height: 2px; translate: 0 -50%;
  background: linear-gradient(90deg, transparent, #d9ad47 20%, #d9ad47 46%, transparent 47% 53%, #d9ad47 54%, #d9ad47 80%, transparent);
}
.sgc .sgc-pasos li + li::after {
  content: ''; position: absolute; left: 50%; top: calc(-.48rem - 1px); width: 8px; height: 8px; translate: -50% -50%; rotate: 45deg; background: #ffd56b; box-shadow: 0 0 8px rgba(255, 213, 107, .8);
}
.sgc-n { width: 64px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.sgc .sgc-tx b { display: block; margin-bottom: .25rem; font-size: 1.35rem; font-weight: 700; line-height: 1.15;
  background: linear-gradient(180deg, #fff3c4, #ffd56b 55%, #e2a52c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 24, 0, .7)); }
.sgc .sgc-tx p { color: #eef3f7; font-size: .95rem; line-height: 1.4; }
.sgc-i { width: 128px; height: 96px; object-fit: contain; justify-self: end; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.sgc-i4 { -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); }
.sgc .sgc-pie { position: relative; flex: none; margin-top: .9rem; }
.sgc-tit, .sgc-balon { flex: none; }
.sgc .sgc-pie::before, .sgc .sgc-pie::after { content: ''; position: absolute; top: 50%; width: 22%; height: 2px; background: linear-gradient(90deg, transparent, #d9ad47); }
.sgc .sgc-pie::before { left: 2%; }
.sgc .sgc-pie::after { right: 2%; rotate: 180deg; }
.sgc .sgc-ok {
  position: relative; min-width: min(60%, 320px); min-height: 60px; padding: .6rem 2rem; border-radius: 999px;
  font-size: 1.35rem; font-weight: 700; color: #1a1100; cursor: pointer;
  border: 2px solid #fff0b8;
  background:
    linear-gradient(60deg, transparent 47%, rgba(255, 255, 255, .18) 48% 52%, transparent 53%) 0 0 / 46px 40px,
    linear-gradient(180deg, #fff1b0 0%, #ffd25a 35%, #f1b229 65%, #c8860f 100%);
  box-shadow: 0 0 0 3px rgba(120, 80, 0, .6), 0 0 26px rgba(255, 200, 70, .55), 0 10px 22px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(120, 70, 0, .35);
  transition: transform .12s, filter .2s;
}
.sgc .sgc-ok:hover { filter: brightness(1.06); }
.sgc .sgc-ok:active { transform: translateY(2px); }

/* Teléfono de pie: la ilustración baja a la esquina y el texto toma el ancho */
@media (max-width: 600px) {
  .sgc .sgc-panel { padding: 1.1rem .9rem 1rem; border-radius: 22px; }
  .sgc-x { width: 40px; height: 40px; top: .5rem; right: .5rem; }
  .sgc-trazo { display: none; }
  .sgc .sgc-pasos li { grid-template-columns: 46px minmax(0, 1fr); gap: .7rem; padding: .8rem .8rem .8rem .7rem; }
  .sgc-n { width: 46px; align-self: start; }
  .sgc-i { position: absolute; right: 4px; bottom: 4px; width: 88px; height: 66px; opacity: .3; }
  .sgc .sgc-tx { position: relative; z-index: 1; }
  .sgc .sgc-tx b { font-size: 1.2rem; }
  .sgc .sgc-tx p { font-size: .9rem; }
  .sgc .sgc-ok { font-size: 1.15rem; min-height: 52px; }
}
/* Celular acostado: dos columnas de pasos para que quepa sin tanto desplazar */
@media (max-height: 520px) {
  .sgc .sgc-panel { width: min(96vw, 860px); padding: .7rem 1rem .8rem; }
  .sgc .sgc-tit { font-size: 1.6rem; }
  .sgc-balon, .sgc-trazo { display: none; }
  .sgc .sgc-pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .3rem; }
  .sgc .sgc-pasos li + li { margin-top: 0; }
  .sgc .sgc-pasos li + li::before, .sgc .sgc-pasos li + li::after { display: none; }
  .sgc .sgc-pasos li { grid-template-columns: 40px minmax(0, 1fr); padding: .55rem .7rem; }
  .sgc-n { width: 40px; align-self: start; }
  .sgc-i { position: absolute; right: 4px; bottom: 4px; width: 76px; height: 56px; opacity: .3; }
  .sgc .sgc-tx { position: relative; z-index: 1; }
  .sgc .sgc-tx b { font-size: 1.05rem; margin-bottom: .15rem; }
  .sgc .sgc-tx p { font-size: .8rem; line-height: 1.3; }
  .sgc .sgc-pie { margin-top: .6rem; }
  .sgc .sgc-ok { min-height: 38px; font-size: .95rem; padding: .3rem 1.6rem; }
  .sgc .sgc-pie { margin-top: .45rem; }
  .sgc-x { width: 36px; height: 36px; }
}

/* ══ ENTRENAMIENTO: los diez rivales como la propuesta (2026-10-20) ══════════
   Fondo con parallax (el mismo de menu.js), banderines, título dorado con balón y
   tarjetas con la ilustración de cada rival (assets/game/niv/). Efectos: entran en
   cascada, se elevan con brillo al pasar, la que toca late, la elegida se hunde y
   la bloqueada se sacude. */
#cha-cpu { background: #04140a; }
#cha-cpu > .cha-barra, #cha-cpu > .cha-sub, #cha-cpu > .cha-niveles { position: relative; z-index: 1; }
.sgn-band { position: absolute; top: -2vh; width: clamp(80px, 9vw, 150px); height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); transform-origin: 50% 0; animation: sgn-ondea 6s ease-in-out infinite; }
.sgn-band-i { left: 2vw; }
.sgn-band-d { right: 2vw; animation-delay: -3s; }
@keyframes sgn-ondea { 50% { transform: rotate(1.6deg) skewX(-1deg); } }

/* Botón Atrás (también el de las demás pantallas del juego) */
.cha .cha-barra .cha-btn-suave {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #1f8a3e, #0d5524); border: 1.5px solid #d9ad47; border-radius: 12px; color: #fff; font-weight: 700;
  box-shadow: 0 0 14px rgba(217, 173, 71, .3), inset 0 1px 0 rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.cha .cha-barra .cha-btn-suave:hover { filter: brightness(1.1); box-shadow: 0 0 22px rgba(217, 173, 71, .55), inset 0 1px 0 rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.35); }
.cha .cha-barra .cha-btn-suave:active { transform: translateY(2px); box-shadow: 0 0 10px rgba(217, 173, 71, .3), 0 2px 0 rgba(0,0,0,.35); }

/* Título y nota */
.sgn-tit { display: inline-flex; align-items: center; justify-content: center; gap: .1em; }
.sgn-tit span {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); font-weight: 700; font-style: italic; letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(180deg, #fff6cf 0%, #ffd56b 45%, #d39a22 75%, #8a5a08 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(40, 24, 0, .9)) drop-shadow(0 0 14px rgba(255, 200, 80, .35));
}
.sgn-tit img { width: clamp(34px, 4vw, 56px); height: auto; animation: sgn-gira 7s linear infinite; filter: drop-shadow(0 0 10px rgba(255, 210, 90, .55)); }
@keyframes sgn-gira { to { transform: rotate(360deg); } }
.sgn-sub { padding-bottom: .8rem; }
.sgn-sub span { display: inline-block; padding: .35rem 1.1rem; border-radius: 999px; background: rgba(2, 14, 7, .78); border: 1px solid rgba(217, 173, 71, .55); color: #eef3f7; font-weight: 600; font-size: .95rem; }

/* La rejilla: 5 + 5 */
#cha-cpu .cha-niveles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; width: min(1180px, 100%); margin: 0 auto; padding: .4rem 1.2rem 1.6rem; perspective: 1200px; }

/* La tarjeta */
#cha-cpu .sgn {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; text-align: left;
  border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff; opacity: 1; filter: none;
  background: linear-gradient(180deg, #1b1f22 0%, #0b0d0f 100%);
  border: 1.5px solid #c9a24a;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 14px rgba(217, 173, 71, .18), 0 14px 26px rgba(0,0,0,.5);
  animation: sgn-entra .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 45ms);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, filter .2s;
}
@keyframes sgn-entra { from { opacity: 0; transform: translateY(18px) scale(.94) rotateX(12deg); } }
#cha-cpu .sgn:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 28px rgba(217, 173, 71, .45), 0 22px 34px rgba(0,0,0,.55); }
#cha-cpu .sgn:focus-visible { outline: 3px solid #ffd56b; outline-offset: 3px; }
#cha-cpu .sgn::after {          /* el destello que cruza la tarjeta al pasar */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 245, 210, .28) 48%, transparent 62%); background-size: 260% 100%; background-position: 130% 0;
  transition: background-position .7s ease;
}
#cha-cpu .sgn:hover::after { background-position: -40% 0; }
#cha-cpu .sgn.is-elegido { transform: scale(.95); filter: brightness(1.25); transition-duration: .12s; }
#cha-cpu .sgn.is-niega { animation: sgn-niega .4s ease both; }
@keyframes sgn-niega { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.sgn-cab { position: relative; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem .45rem; }
#cha-cpu .sgn-num {
  flex: none; display: grid; place-items: center; width: 44px; height: 48px; font-size: 1.6rem; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6);
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
  background: linear-gradient(180deg, #4a4f55, #1d2125); box-shadow: inset 0 0 0 2px #b9bec4;
  position: relative;
}
#cha-cpu .sgn-num::before { content: ''; position: absolute; inset: 0; clip-path: inherit; background: linear-gradient(180deg, #d8dde2, #6e757c); z-index: -1; }
.sgn-nomb { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
#cha-cpu .sgn .cha-nivel-nom { font-size: 1.12rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sgn-est { display: flex; gap: .12rem; margin-top: .1rem; }
.sgn-est img { width: 22px; height: 22px; filter: grayscale(1) brightness(.55); }
.sgn-est img.on { filter: drop-shadow(0 0 4px rgba(255, 210, 80, .6)); }

.sgn-foto { position: relative; display: block; aspect-ratio: 180 / 112; overflow: hidden; }
.sgn-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
#cha-cpu .sgn:hover .sgn-foto img { transform: scale(1.08); }
.sgn-brillo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,15,.55), transparent 30%, transparent 70%, rgba(11,13,15,.6)); }

.sgn-pie { position: relative; z-index: 2; display: flex; align-items: center; gap: .55rem; margin: .5rem; padding: .45rem .55rem; border-radius: 10px; background: linear-gradient(180deg, #1c2024, #0e1013); border: 1px solid rgba(255,255,255,.12); min-height: 54px; }
.sgn-candado { width: 30px; height: auto; flex: none; }
.sgn-pie-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sgn-pie-tx b { font-size: .95rem; }
.sgn-pie-tx small { color: #c7ccd2; font-size: .75rem; }

/* Bloqueada: más oscura, sin perder la ilustración */
#cha-cpu .sgn.is-bloq .sgn-foto img { filter: saturate(.55) brightness(.6); }
#cha-cpu .sgn.is-bloq:hover { transform: translateY(-3px); }

/* La que toca: dorada y latiendo, con su pie verde y la recompensa */
#cha-cpu .sgn.is-actual, #cha-cpu .sgn.is-ok { flex-direction: column; }
#cha-cpu .sgn.is-actual {
  border: 2px solid #ffd56b; background: linear-gradient(180deg, #3a2c07 0%, #121008 60%, #0b0d0f 100%);
  animation: sgn-entra .5s cubic-bezier(.2, .9, .3, 1.2) both, sgn-late 2.2s ease-in-out .6s infinite;
}
@keyframes sgn-late { 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 34px rgba(255, 213, 107, .75), 0 14px 26px rgba(0,0,0,.5); } }
#cha-cpu .sgn.is-actual .sgn-num { background: linear-gradient(180deg, #ffe08a, #c8901c); color: #1d1300; text-shadow: none; box-shadow: inset 0 0 0 2px #fff0b8; }
.sgn-pie:has(.sgn-toca) { flex-direction: column; align-items: stretch; gap: .35rem; padding: .35rem; background: none; border: 0; }
.sgn-toca { display: block; text-align: center; padding: .35rem .5rem; border-radius: 10px; font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(180deg, #43c95f, #168a32); border: 1px solid #a8f5b8; box-shadow: 0 0 14px rgba(67, 201, 95, .45), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
#cha-cpu .sgn.is-ok .sgn-toca { background: linear-gradient(180deg, #2b3d31, #17221b); border-color: rgba(120, 220, 150, .45); box-shadow: none; color: #9ff0b9; font-size: .95rem; }
.sgn-rec { display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255, 213, 107, .35); }
.sgn-rec-e { width: 22px; height: 22px; flex: none; }
.sgn-rec-tx { display: flex; flex-direction: column; line-height: 1.1; flex: 1; min-width: 0; }
.sgn-rec-tx small { font-size: .68rem; color: #e8e2cf; }
.sgn-rec-tx b { font-size: .95rem; color: #ffd56b; }
.sgn-rec-xp { width: 30px; height: auto; flex: none; animation: sgn-xp 2.4s ease-in-out infinite; }
@keyframes sgn-xp { 50% { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(255, 213, 107, .8)); } }

/* Tamaños */
@media (max-width: 1000px) {
  #cha-cpu .cha-niveles { gap: .7rem; }
  #cha-cpu .sgn-num { width: 36px; height: 40px; font-size: 1.3rem; }
  #cha-cpu .sgn .cha-nivel-nom { font-size: .98rem; }
  .sgn-est img { width: 18px; height: 18px; }
}
@media (max-width: 700px) and (min-height: 521px) {
  #cha-cpu .cha-niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .3rem .8rem 1.4rem; }
  .sgn-band { width: 64px; opacity: .55; }
  .sgn-tit span { font-size: 1.55rem; }
  .sgn-tit img { width: 26px; }
  #cha-cpu .cha-barra .cha-btn-suave span { display: none; }
  .sgn-sub span { font-size: .82rem; padding: .3rem .8rem; }
}
@media (max-height: 520px) {                  /* celular acostado: 5 + 5, compactas */
  #cha-cpu .cha-niveles { gap: .45rem; padding: .2rem .7rem .8rem; }
  .sgn-tit span { font-size: 1.5rem; }
  .sgn-tit img { width: 26px; }
  .sgn-sub span { font-size: .75rem; padding: .2rem .7rem; }
  .sgn-band { display: none; }
  .sgn-cab { padding: .3rem .35rem .2rem; gap: .3rem; }
  #cha-cpu .sgn-num { width: 26px; height: 30px; font-size: .95rem; }
  #cha-cpu .sgn .cha-nivel-nom { font-size: .8rem; }
  .sgn-est img { width: 12px; height: 12px; }
  .sgn-foto { aspect-ratio: 180 / 80; }
  .sgn-pie { margin: .3rem; padding: .25rem .35rem; min-height: 0; gap: .3rem; }
  .sgn-candado { width: 18px; }
  .sgn-pie-tx b { font-size: .72rem; }
  .sgn-pie-tx small { font-size: .6rem; }
  .sgn-toca { font-size: .78rem; padding: .2rem; }
  .sgn-rec { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #cha-cpu .sgn, .sgn-band, .sgn-tit img, .sgn-rec-xp { animation: none !important; }
}

/* El mismo destello al pasar, en las tarjetas del menú principal */
#cha-menu .cha-cta::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 245, 210, .22) 48%, transparent 62%); background-size: 260% 100%; background-position: 130% 0;
  transition: background-position .7s ease;
}
#cha-menu .cha-cta:hover::after { background-position: -40% 0; }
#cha-menu .cha-cta:active { transform: translateY(1px) scale(.985); }
#cha-menu .cha-cta:hover .sgm-flecha { translate: 4px -50%; transition: translate .2s; }

/* ══ CONTRA PERSONAS (2026-10-20) ═════════════════════════════════════════════
   Mismo fondo con parallax, dos balones dorados a los lados, placa de título con
   la cresta, emblema VS y el panel «Necesitas tu cuenta». Piezas de assets/game/pvp/. */
#cha-pvp { background: #04140a; }
#cha-pvp > .cha-barra, #cha-pvp > .sgp-cab, #cha-pvp > .cha-invita, #cha-pvp > .cha-pvp { position: relative; z-index: 1; }
.sgp-balon { position: absolute; width: clamp(110px, 16vw, 260px); height: auto; animation: sgp-flota 7s ease-in-out infinite; }
.sgp-balon-i { left: 2vw; top: 34vh; }
.sgp-balon-d { right: 2vw; top: 22vh; animation-delay: -3.5s; }
@keyframes sgp-flota { 50% { transform: translateY(-16px) rotate(8deg); } }

.sgp-cab { display: flex; flex-direction: column; align-items: center; margin-top: -2.4rem; pointer-events: none; }
.sgp-tit { display: flex; flex-direction: column; align-items: center; flex: none; }
.sgp-cresta { width: 92px; height: auto; margin-bottom: -26px; position: relative; z-index: 2; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation: sgp-cresta 3.6s ease-in-out infinite; }
@keyframes sgp-cresta { 50% { filter: drop-shadow(0 0 14px rgba(255, 213, 107, .7)); } }
.sgp-placa {
  position: relative; display: inline-block; padding: .55rem 2.4rem .6rem; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.1; color: #fff;
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  background: linear-gradient(180deg, #d9ad47, #8a6418); text-shadow: 0 3px 0 rgba(0,0,0,.45);
}
.sgp-placa::before { content: ''; position: absolute; inset: 3px; z-index: -1; clip-path: inherit; background: linear-gradient(180deg, #0d4a24, #052512); }
.sgp-placa { isolation: isolate; }
.sgp-vs { width: clamp(220px, 30vw, 330px); height: auto; margin-top: .4rem; animation: sgp-vs 2.8s ease-in-out infinite; }
@keyframes sgp-vs { 50% { transform: scale(1.04); filter: drop-shadow(0 0 16px rgba(80, 255, 140, .45)); } }

/* El panel sin cuenta */
#cha-pvp .sgp-invita {
  width: min(92vw, 560px); margin: .6rem auto 1.4rem; padding: 1.4rem 1.6rem 1.5rem; gap: .5rem;
  border-radius: 20px; border: 1.5px solid #d9ad47;
  background: radial-gradient(120% 80% at 50% 0%, rgba(40, 160, 80, .25), transparent 60%), linear-gradient(180deg, rgba(10, 46, 25, .95), rgba(3, 20, 10, .96));
  box-shadow: 0 0 26px rgba(217, 173, 71, .28), 0 24px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  animation: sgn-entra .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
#cha-pvp .sgp-invita h3 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 700; }
#cha-pvp .sgp-invita p { color: #dfe6ee; font-size: 1rem; max-width: 40ch; }
#cha-pvp .cha-invita-b { gap: .9rem; margin-top: .7rem; }

/* Botones: dorado y oscuro con borde dorado, con brillo y destello */
.sgp-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px; padding: .6rem 1.6rem; border-radius: 14px; font-weight: 700; font-size: 1.12rem; text-decoration: none;
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.sgp-btn svg { width: 1.35em; height: 1.35em; stroke-width: 2.2; }
.sgp-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; transition: background-position .7s ease; }
.sgp-btn:hover::after { background-position: -40% 0; }
.sgp-btn:hover { transform: translateY(-2px); }
.sgp-btn:active { transform: translateY(1px) scale(.98); }
.sgp-btn-oro { color: #1d1300 !important; background: linear-gradient(180deg, #fff0b0 0%, #ffd25a 40%, #e9a923 100%); border: 2px solid #fff0b8;
  box-shadow: 0 0 0 2px rgba(120, 80, 0, .55), 0 0 22px rgba(255, 200, 70, .5), 0 8px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.6); }
.sgp-btn-oro:hover { box-shadow: 0 0 0 2px rgba(120, 80, 0, .55), 0 0 34px rgba(255, 200, 70, .8), 0 10px 22px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6); }
.sgp-btn-osc { color: #fff !important; background: linear-gradient(180deg, #0f3a20, #061a0d); border: 1.5px solid #d9ad47;
  box-shadow: 0 0 14px rgba(217, 173, 71, .25), 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1); }
.sgp-btn-osc:hover { box-shadow: 0 0 24px rgba(217, 173, 71, .5), 0 10px 22px rgba(0,0,0,.45); }

/* Con cuenta: el cuerpo en paneles verdes con borde dorado */
#cha-pvp .sgp-cuerpo { max-width: 980px; padding-top: .6rem; }
#cha-pvp .sgp-cuerpo.is-solo { grid-template-columns: minmax(0, 560px); justify-content: center; }
#cha-pvp .sgp-bloque { border: 1.5px solid rgba(217, 173, 71, .7); border-radius: 16px; background: linear-gradient(180deg, rgba(10, 46, 25, .93), rgba(3, 20, 10, .95)); box-shadow: 0 0 18px rgba(217, 173, 71, .18), 0 14px 28px rgba(0,0,0,.4); }
#cha-pvp .sgp-bloque h4 { color: #ffd56b; letter-spacing: .08em; }
#cha-pvp .sgp-bloque .sgp-btn { min-height: 44px; font-size: .98rem; padding: .45rem 1.1rem; }
#cha-pvp .cha-in { border: 1.5px solid rgba(217, 173, 71, .55); background: rgba(0, 0, 0, .45); color: #fff; border-radius: 12px; }
#cha-pvp .cha-in:focus { outline: none; border-color: #ffd56b; box-shadow: 0 0 0 3px rgba(255, 213, 107, .25); }
#cha-pvp .sgp-rapida {
  position: relative; overflow: hidden; isolation: isolate; min-height: 92px; padding-right: 3rem; border: 1.5px solid #d9ad47; border-radius: 16px;
  background: linear-gradient(95deg, #06112b 0%, #0a2463 60%, #0d3a9a 100%); box-shadow: 0 0 22px rgba(47, 123, 255, .35), 0 12px 26px rgba(0,0,0,.45);
  animation: sgn-late 2.6s ease-in-out infinite;
}
#cha-pvp .sgp-rapida .cha-cta-ico { width: 64px; height: 64px; border-radius: 50%; background: none; }
#cha-pvp .sgp-rapida .cha-cta-ico img { width: 100%; height: 100%; display: block; }
#cha-pvp .sgp-rapida .cha-cta-tx b { font-size: 1.25rem; }
#cha-pvp .sgp-rapida::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 245, 210, .22) 48%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; transition: background-position .7s ease; }
#cha-pvp .sgp-rapida:hover::after { background-position: -40% 0; }
#cha-pvp .sgp-rapida:hover { transform: translateY(-2px); }

@media (max-width: 600px) {
  .sgp-cab { margin-top: -1rem; }
  .sgp-cresta { width: 70px; margin-bottom: -20px; }
  .sgp-placa { padding: .45rem 1.6rem .5rem; }
  .sgp-balon { width: 90px; opacity: .7; }
  .sgp-balon-i { top: auto; bottom: 6vh; }
  #cha-pvp .cha-invita-b { flex-direction: column; width: 100%; }
  #cha-pvp .cha-invita-b .sgp-btn { width: 100%; }
}
@media (max-height: 520px) {
  .sgp-cab { flex-direction: row; justify-content: center; gap: 1rem; margin-top: -2.8rem; }
  .sgp-cresta { display: none; }
  .sgp-placa { font-size: 1.35rem; padding: .3rem 1.6rem; }
  .sgp-vs { width: 150px; margin: 0; }
  .sgp-balon { width: 90px; }
  #cha-pvp .sgp-invita { padding: .7rem 1.2rem .8rem; margin-top: .3rem; gap: .2rem; }
  #cha-pvp .sgp-invita h3 { font-size: 1.3rem; }
  #cha-pvp .sgp-invita p { font-size: .85rem; }
  #cha-pvp .cha-invita-b { margin-top: .3rem; }
  .sgp-btn { min-height: 42px; font-size: .95rem; padding: .4rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sgp-balon, .sgp-vs, .sgp-cresta, #cha-pvp .sgp-rapida, #cha-pvp .sgp-invita { animation: none !important; }
}
.sgp-placa em, #cha-pvp .sgp-invita h3 em { font-style: normal; background: linear-gradient(180deg, #fff1bf, #ffd56b 50%, #e2a52c); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }