/* =============================================================================
   CUENTA de /juego: Crear cuenta (registro.html), Entrar (entrar.html) y
   Mi cuenta (cuenta.html). Lo común (cabecera, botones, monedas, marcos,
   formularios, avisos) está en juego.css; aquí va solo lo de estas tres.

   Índice:
     1. Pantalla de acceso (registro y entrar): fondo, figuras, texto y panel
     2. El formulario de acceso (pestañas, fuerza, bloq mayús, casillas)
     3. La bienvenida tras crear la cuenta
     4. Mi cuenta: ficha del jugador, subnavegación, saldo, nombre,
        movimientos, compras, equipos y sesión
     5. Adaptación al móvil
   ========================================================================== */

/* [hidden] tiene que ganar siempre: varias piezas de aquí llevan display (grid,
   flex) y sin esto el atributo hidden no las esconde (las pestañas seguían a la
   vista en la bienvenida). Este archivo solo lo cargan las tres páginas de cuenta. */
main [hidden] { display: none !important; }

/* 1. PANTALLA DE ACCESO ---------------------------------------------------------
   Como la pantalla de entrada de un juego: un mapa del juego de fondo, pasado a
   noche con un filtro (las fotos de los mapas son de día y con cielo azul, y un
   formulario encima de un cielo azul se ve de plantilla), los personajes
   míticos de pie en medio y el panel del formulario a la derecha. */
.acceso { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 860px); padding: calc(var(--alto-cab) + 44px) 0 72px; display: flex; align-items: center; background: #05060a; }
.acceso-fondo { position: absolute; inset: -2%; z-index: -5; background: var(--foto) var(--posicion, 50% 50%) / cover no-repeat; filter: saturate(.45) brightness(.34) contrast(1.15) hue-rotate(-8deg); animation: acercar 24s ease-out both; }
.acceso::before { /* noche: azul frío arriba, rojo del juego abajo y el lado del formulario más oscuro */
  content: ""; position: absolute; inset: 0; z-index: -4; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(217,25,43,.30), transparent 70%),
    linear-gradient(180deg, rgba(20,34,70,.45) 0%, rgba(8,9,14,0) 45%),
    linear-gradient(90deg, rgba(4,5,8,.88) 0%, rgba(4,5,8,.45) 34%, rgba(4,5,8,.15) 52%, rgba(4,5,8,.55) 70%, rgba(4,5,8,.9) 100%);
}
.acceso::after { /* se funde con la página por abajo */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--carbon), rgba(13,15,18,0));
}
/* Rejilla de líneas finas, como la pantalla de un visor táctico. */
.acceso-rejilla-fondo { position: absolute; inset: 0; z-index: -4; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent); }

/* Chispas que suben (las brasas del póster, con otro nombre para no pisar las de portada.css). */
.chispas { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.chispas i {
  position: absolute; bottom: -10px; width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #ffae3a 35%, rgba(255,70,20,.9) 60%, rgba(255,40,10,0) 72%);
  box-shadow: 0 0 8px 2px rgba(255,110,30,.55); opacity: 0; animation: chispa var(--d) linear var(--r) infinite;
}
@keyframes chispa {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: var(--o); }
  100% { transform: translate(var(--dx), -900px) scale(.4); opacity: 0; }
}

/* Los personajes, de pie entre el texto y el formulario. */
.figuras { --solape: -110px; position: absolute; z-index: -3; bottom: 0; left: calc(50% + 5px); height: min(88%, 900px); display: flex; align-items: flex-end; transform: translateX(-50%); pointer-events: none; }
/* Luz de contorno carmesí: la armadura negra del Rey sobre un fondo de noche se
   perdía sin ella. */
.figuras img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: brightness(1.15) contrast(1.05) drop-shadow(0 0 1.5px rgba(255,90,100,.85)) drop-shadow(0 0 22px rgba(217,31,43,.4)) drop-shadow(0 30px 40px rgba(0,0,0,.8)); animation: figura-sube 1.2s cubic-bezier(.2,.7,.2,1) backwards; }
.figuras img + img { margin-left: var(--solape); }
/* Los de atrás entran con los demás (sin retraso): con el retraso, en algunos
   navegadores se quedaban sin pintar y solo se veía el Rey Oscuro. */
.figuras .atras { height: 86%; filter: brightness(.9) drop-shadow(0 0 1.5px rgba(255,90,100,.6)) drop-shadow(0 30px 40px rgba(0,0,0,.8)); }
.figuras .delante { position: relative; z-index: 2; }
/* Sombra en el suelo y un halo rojo detrás, para que no parezcan pegados. */
.figuras::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 16%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85), transparent 70%); }
.figuras::after { content: ""; position: absolute; left: -10%; right: -10%; top: 12%; bottom: 10%; z-index: -2; background: radial-gradient(45% 50% at 50% 55%, rgba(217,31,43,.22), transparent 70%); }
@keyframes figura-entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* Los personajes solo suben, sin fundido: con el fundido de opacidad, en algunos
   navegadores se quedaban medio transparentes al acabar la animación. */
@keyframes figura-sube { from { transform: translateY(26px); } to { transform: none; } }

.acceso-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 40px; align-items: center; }
.acceso-texto { max-width: 480px; }
.acceso-texto .migas { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--texto-3); margin-bottom: 20px; letter-spacing: .06em; text-transform: uppercase; }
.acceso-texto .migas a:hover { color: #fff; }
.acceso-texto .migas span[aria-hidden] { color: var(--carmesi); }
.acceso-texto h1 { font-size: 78px; line-height: .88; text-transform: uppercase; letter-spacing: .005em; margin: 14px 0 18px; text-shadow: 0 6px 30px rgba(0,0,0,.7); }
.acceso-texto h1 em { font-style: normal; display: block; background: linear-gradient(180deg, #ff6a6f 0%, #ff2433 45%, #b50c19 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,30,50,.35)); }
.acceso-texto > p { font-size: 20px; line-height: 1.4; color: #cfd2d8; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.acceso-texto > p b { color: #fff; }

/* Lo que trae la cuenta: tres filas con icono. */
.ventajas { list-style: none; display: grid; gap: 4px; margin-top: 30px; }
.ventajas li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 12px 14px 12px 12px; background: linear-gradient(90deg, rgba(10,11,15,.8), rgba(10,11,15,.35) 80%, rgba(10,11,15,0)); border-left: 2px solid var(--carmesi); }
.ventajas .ic { display: grid; place-items: center; width: 46px; height: 46px; background: rgba(217,31,43,.14); box-shadow: inset 0 0 0 1px rgba(217,31,43,.45); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.ventajas .ic .ico { width: 22px; height: 22px; color: var(--carmesi-claro); }
.ventajas .ic img { width: 34px; height: 34px; }
.ventajas b { display: block; font-size: 18px; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; }
.ventajas small { display: block; font-size: 15px; color: var(--texto-2); line-height: 1.3; }

/* El panel del formulario. */
.acceso-panel { background: linear-gradient(180deg, rgba(20,22,28,.93), rgba(11,12,16,.96)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); }
.acceso-panel::before { /* brillo carmesí en el canto de arriba */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--carmesi-claro) 30%, var(--carmesi-claro) 70%, transparent); box-shadow: 0 0 18px rgba(255,61,72,.7); }
.acceso-panel .cuerpo-panel { padding: 26px 30px 30px; }

/* 2. EL FORMULARIO DE ACCESO ------------------------------------------------------- */
/* Pestañas Crear cuenta / Entrar: son enlaces entre las dos páginas, no un
   cambio de vista, para que cada una tenga su URL (el juego y la portada
   enlazan directo a una u otra). */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea-2); }
.pestanas a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); transition: color .2s, background .2s; }
.pestanas a:hover { color: #fff; background: rgba(255,255,255,.03); }
.pestanas a[aria-current] { color: #fff; background: linear-gradient(180deg, rgba(217,31,43,.16), rgba(217,31,43,0)); }
.pestanas a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--carmesi); box-shadow: 0 0 12px var(--carmesi); }
.pestanas .ico { width: 18px; height: 18px; }

.form-titulo { margin-bottom: 2px; color: var(--texto-2); font-size: 15.5px; }
.form-titulo h2 { font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.form-titulo p { color: var(--texto-2); font-size: 15.5px; margin-top: 6px; }
.formulario .campo .etiqueta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.formulario .campo .etiqueta a { font-size: 13.5px; letter-spacing: .02em; text-transform: none; color: var(--texto-2); border-bottom: 1px solid rgba(217,31,43,.6); }
.formulario .campo .etiqueta a:hover { color: #fff; }
.formulario .campo .etiqueta .cuenta-letras { font-size: 13px; letter-spacing: .04em; color: var(--texto-3); text-transform: none; font-variant-numeric: tabular-nums; }
.campo .ayuda[hidden] { display: none; }
.campo.bien .caja::after { content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 7px; margin-top: -6px; border-left: 2.5px solid var(--cash); border-bottom: 2.5px solid var(--cash); transform: rotate(-45deg); }
.campo.bien .caja:has(.ver-clave)::after { right: 52px; }
/* La fuerza de la contraseña: barras de juego.css y una palabra al lado. */
.fuerza-fila { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.fuerza-txt { min-width: 76px; text-align: right; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.fuerza-txt[data-n="1"] { color: var(--no-alcanza); }
.fuerza-txt[data-n="2"] { color: var(--legendario); }
.fuerza-txt[data-n="3"] { color: var(--oro); }
.fuerza-txt[data-n="4"] { color: var(--cash); }
.mayus-aviso { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--oro); }
.mayus-aviso .ico { width: 15px; height: 15px; }
.mayus-aviso[hidden] { display: none; }
.formulario .casilla.error { color: var(--no-alcanza); }
.formulario .casilla.error input { outline: 2px solid var(--no-alcanza); outline-offset: 1px; }
.formulario .btn-grande { margin-top: 6px; }
.nota-form { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto-3); line-height: 1.35; }
.nota-form .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--texto-3); }
.o-bien { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.o-bien::before, .o-bien::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }
.pie-panel { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 16px 20px; border-top: 1px solid var(--linea); font-size: 15.5px; color: var(--texto-2); background: rgba(0,0,0,.18); }
.pie-panel a { color: #fff; border-bottom: 1px solid var(--carmesi); }
.pie-panel a:hover { color: var(--oro); }

/* Ya hay sesión abierta, o el registro está cerrado: un bloque en lugar del formulario. */
.ya-dentro { display: grid; gap: 16px; text-align: center; justify-items: center; padding: 8px 0 4px; }
.ya-dentro .avatar { width: 72px; height: 72px; font-size: 36px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.ya-dentro h2 { font-size: 30px; line-height: 1; text-transform: uppercase; }
.ya-dentro p { color: var(--texto-2); font-size: 16px; max-width: 360px; }
.ya-dentro .saldos { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-left: 14px; }
.ya-dentro .botones { display: grid; gap: 10px; width: 100%; }

/* 3. LA BIENVENIDA ----------------------------------------------------------------- */
.bienvenida { display: grid; gap: 22px; }
.bienvenida-cabeza { display: grid; justify-items: center; gap: 12px; text-align: center; padding-top: 6px; }
.sello-ok { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.sello-ok::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #ff4a4f, #8e0d15); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 30px rgba(255,40,60,.6); animation: sello-entra .7s cubic-bezier(.2,1.4,.4,1) both; }
.sello-ok::after { /* onda: el mismo hexágono, relleno y transparente, que crece y se apaga (un borde recortado a hexágono solo dejaba ver dos rayas) */
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,61,72,.45); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: sello-onda 2.4s ease-out .5s infinite; }
.sello-ok { isolation: isolate; }
.sello-ok .ico { position: relative; width: 38px; height: 38px; color: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
@keyframes sello-entra { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sello-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.bienvenida-cabeza h2 { font-size: 36px; line-height: .95; text-transform: uppercase; outline: 0; }
.bienvenida-cabeza h2 span { color: var(--carmesi-claro); display: block; overflow-wrap: anywhere; }
.bienvenida-cabeza p { color: var(--texto-2); font-size: 16px; max-width: 380px; }
.pasos-bienvenida { list-style: none; counter-reset: paso; display: grid; gap: 8px; }
.pasos-bienvenida li { counter-increment: paso; position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 14px 16px 14px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--linea); animation: figura-entra .6s cubic-bezier(.2,.7,.2,1) both; }
.pasos-bienvenida li:nth-child(2) { animation-delay: .12s; }
.pasos-bienvenida li:nth-child(3) { animation-delay: .24s; }
.pasos-bienvenida li::before { content: counter(paso); display: grid; place-items: center; width: 52px; height: 52px; font-size: 30px; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(180deg, rgba(255,74,79,.3), rgba(142,13,21,.3)); box-shadow: inset 0 0 0 1px rgba(255,61,72,.55); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.pasos-bienvenida b { display: block; font-size: 18px; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; }
.pasos-bienvenida small { display: block; font-size: 15px; color: var(--texto-2); line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
.pasos-bienvenida small em { font-style: normal; color: #fff; }
.pasos-bienvenida .monedas-paso { display: inline-flex; gap: 2px; vertical-align: middle; }
.bienvenida .botones { display: grid; gap: 10px; }

/* 4. MI CUENTA ---------------------------------------------------------------------- */
/* La ficha del jugador arriba: foto del juego de fondo (como .cabeza-pagina),
   el escudo con su inicial, el nombre grande, y el saldo a la derecha. */
.ficha { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--alto-cab) + 76px) 0 56px; border-bottom: 1px solid var(--linea-2); background: #07080a; }
.ficha::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--foto) var(--posicion, 50% 50%) / cover no-repeat; filter: saturate(.5) brightness(.42) contrast(1.1); animation: acercar 20s ease-out both; }
.ficha::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.7) 45%, rgba(6,7,9,.35) 100%), linear-gradient(0deg, var(--carbon) 0%, rgba(13,15,18,.2) 55%, rgba(6,7,9,.5) 100%); }
/* El personaje de cuerpo entero, de pie sobre el borde de abajo (antes salía
   cortado por la cintura y parecía flotar). Solo se funde un poco por los pies. */
.ficha .figura-ficha { position: absolute; right: calc(max(0px, 50% - 700px) + 350px); top: calc(var(--alto-cab) + 14px); bottom: 0; height: calc(100% - var(--alto-cab) - 14px); width: auto; z-index: -1; opacity: .95; pointer-events: none; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 12%); mask-image: linear-gradient(0deg, transparent 0%, #000 12%); filter: drop-shadow(0 0 1px rgba(255,80,90,.4)) drop-shadow(0 20px 30px rgba(0,0,0,.7)); }
.bolsa .cifra.en-juego { font-size: 28px; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; color: var(--oro-titulo); }
.otros-accesos { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.4; color: var(--texto-3); border-bottom: 1px solid var(--linea); }
.otros-accesos .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.otros-accesos .enlace { color: var(--texto-2); }
.ficha-rejilla { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.escudo-jugador { position: relative; display: grid; place-items: center; width: 132px; height: 148px; flex: none; }
.escudo-jugador svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.escudo-jugador b { position: relative; font-size: 64px; line-height: 1; color: #fff; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0,0,0,.5); margin-top: -8px; }
.ficha .migas { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--texto-3); margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ficha .migas a:hover { color: #fff; }
.ficha .migas span[aria-hidden] { color: var(--carmesi); }
.ficha h1 { font-size: 64px; line-height: .92; text-transform: uppercase; margin: 8px 0 12px; overflow-wrap: anywhere; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.ficha h1.sin-nombre { color: var(--texto-2); }
.datos-ficha { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; color: var(--texto-2); }
.datos-ficha span { display: inline-flex; align-items: center; gap: 8px; }
.datos-ficha .ico { width: 17px; height: 17px; color: var(--carmesi-claro); }
.datos-ficha b { color: #fff; font-weight: 700; }
/* El saldo en su propia tarjeta de cristal, para que no se mezcle con el personaje. */
.saldo-ficha { display: grid; gap: 14px; justify-items: stretch; min-width: 300px; padding: 16px 18px 18px; background: rgba(8,9,12,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--linea-2); border-top: 2px solid var(--carmesi); }
.saldo-ficha > small { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); }
.saldo-ficha .chips { display: flex; gap: 12px; flex-wrap: wrap; padding-left: 13px; }
.saldo-ficha .bc { width: 100%; }

/* Subnavegación de la página, pegada bajo la cabecera al bajar. */
.subnav { position: sticky; top: var(--alto-cab); z-index: 40; background: rgba(9,10,13,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.subnav ul { display: flex; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { position: relative; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px; font-size: 15.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.subnav a .ico { width: 17px; height: 17px; }
.subnav a:hover, .subnav a.activo { color: #fff; }
.subnav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--carmesi); transform: scaleX(0); transition: transform .25s; }
.subnav a:hover::after, .subnav a.activo::after { transform: scaleX(1); }

.cuenta-cuerpo { padding-top: 40px; display: grid; gap: 22px; }
.cuenta-cuerpo > section { scroll-margin-top: calc(var(--alto-cab) + 70px); }
/* Las dos columnas de cada fila con la misma altura: con align-items:start quedaba
   un hueco bajo la más corta que parecía un fallo. */
.fila-cuenta { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.fila-cuenta > .marco { display: flex; flex-direction: column; }
.fila-cuenta > .marco > .nota-saldo { margin-top: auto; }
.cab-panel .ico { width: 18px; height: 18px; color: var(--carmesi-claro); }
.cab-panel h2 { display: flex; align-items: center; gap: 10px; }

/* Saldo: dos bloques grandes con la moneda en 3D. */
.saldo-grande { display: grid; grid-template-columns: 1fr 1fr; }
.bolsa { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 6px 18px; align-items: center; padding: 24px 24px 22px; overflow: hidden; isolation: isolate; }
.bolsa + .bolsa { border-left: 1px solid var(--linea); }
.bolsa::before { content: ""; position: absolute; left: -40px; top: -40px; width: 220px; height: 220px; z-index: -1; border-radius: 50%; filter: blur(30px); opacity: .22; }
.bolsa.cash::before { background: var(--cash); }
.bolsa.oro::before { background: var(--oro); }
.bolsa > img { width: 96px; height: 96px; grid-row: span 2; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.bolsa .nombre-moneda { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); align-self: end; }
.bolsa .cifra { font-size: 52px; line-height: .9; font-variant-numeric: tabular-nums; align-self: start; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.bolsa.cash .cifra { color: var(--cash-titulo); }
.bolsa.oro .cifra { color: var(--oro-titulo); }
.bolsa .que-es { grid-column: 1 / -1; font-size: 15px; color: var(--texto-2); line-height: 1.35; margin-top: 10px; }
.bolsa .accion { grid-column: 1 / -1; margin-top: 12px; }
.nota-saldo { display: flex; gap: 10px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--linea); font-size: 14.5px; color: var(--texto-3); line-height: 1.4; }
.nota-saldo .ico { width: 16px; height: 16px; margin-top: 2px; }

/* Nombre en el juego: vista previa de cómo sale en la sala. */
.placa-sala { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; background: linear-gradient(90deg, rgba(217,31,43,.18), rgba(217,31,43,0) 70%), #0a0b0e; border: 1px solid var(--linea-2); border-left: 3px solid var(--carmesi); }
.placa-sala .avatar { width: 40px; height: 40px; font-size: 21px; }
.placa-sala small { display: block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.placa-sala b { display: block; font-size: 22px; line-height: 1.05; overflow-wrap: anywhere; }
.placa-sala b.vacio-nombre { color: var(--texto-3); }
.fila-guardar { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.fila-guardar .btn { height: 48px; }

/* Movimientos: filtros en píldora y tabla. */
.filtros { display: flex; gap: 6px; }
.filtros button { height: 32px; padding: 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea-2); }
.filtros button:hover { color: #fff; }
.filtros button[aria-pressed="true"] { color: #fff; background: rgba(217,31,43,.18); box-shadow: inset 0 0 0 1px var(--carmesi); }
.tabla .motivo { color: #fff; }
.tabla .cantidad { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .cantidad.mas { color: var(--cash); }
.tabla .cantidad.menos { color: var(--no-alcanza); }
.tabla .moneda-celda { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tabla .moneda-celda img { width: 24px; height: 24px; }
.tabla .fecha-celda { white-space: nowrap; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tabla .saldo-celda { font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
.x2-compra { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cash-titulo); }
.x2-compra b { display: inline-grid; place-items: center; height: 17px; padding: 0 5px; font-size: 12px; color: #04210f; background: linear-gradient(180deg, #8dffc0, #2fdc82); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.ref-compra { display: block; font-size: 12.5px; color: var(--texto-3); letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.mas-filas { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--linea); }
.estado-compra { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.estado-compra::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-compra.aprobado { color: var(--cash); }
.estado-compra.pendiente { color: var(--oro); }
.estado-compra.rechazado { color: var(--no-alcanza); }

/* Equipos donde está abierta la sesión del juego. */
.equipos { list-style: none; }
.equipo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.equipo:last-child { border-bottom: 0; }
.equipo .ic { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--linea-2); }
.equipo .ic .ico { width: 22px; height: 22px; color: var(--texto-2); }
.equipo b { display: block; font-size: 17px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipo small { display: block; font-size: 14px; color: var(--texto-3); line-height: 1.35; }
.equipo small .reciente { color: var(--cash); }
.equipo .confirmar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; color: var(--texto-2); }
.equipo.saliendo { opacity: .4; transition: opacity .3s; }

/* Seguridad y sesión: filas de dato + acción. */
.filas-dato { display: grid; }
.fila-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.fila-dato:last-child { border-bottom: 0; }
.fila-dato small { display: block; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.fila-dato b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-dato p { font-size: 14.5px; color: var(--texto-2); margin-top: 2px; }
.cuenta-cargando { display: grid; place-items: center; gap: 14px; min-height: 50vh; color: var(--texto-2); }

/* Llamada a descargar al pie de Mi cuenta. */
.franja-descarga { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 34px; }
.franja-descarga::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,11,14,.96) 30%, rgba(10,11,14,.55)), var(--foto) 50% 40% / cover no-repeat; }
.franja-descarga h2 { font-size: 34px; line-height: 1; text-transform: uppercase; }
.franja-descarga p { color: var(--texto-2); margin-top: 6px; max-width: 560px; }
.franja-descarga .botones { display: flex; gap: 12px; flex-wrap: wrap; }

/* 5. ADAPTACIÓN AL MÓVIL -------------------------------------------------------------- */
/* Las ventajas repetidas debajo del formulario solo se ven en pantallas estrechas. */
.ventajas-abajo { display: none !important; }
@media (max-width: 1360px) {
  .figuras { --solape: -130px; height: min(78%, 800px); }
  .acceso-texto h1 { font-size: 68px; }
}
@media (max-width: 1180px) {
  /* Sin sitio para los personajes entre el texto y el panel: se quedan atrás, apagados. */
  .figuras { left: 0; transform: none; opacity: .28; height: 70%; }
  .figuras .atras { display: none; }
  .acceso-rejilla { grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; }
  .ficha-rejilla { grid-template-columns: auto minmax(0, 1fr); }
  .saldo-ficha { grid-column: 1 / -1; justify-self: start; }
  .fila-cuenta { grid-template-columns: minmax(0, 1fr); }
  .ficha .figura-ficha { right: max(0px, calc(50% - 700px)); opacity: .35; }
}
@media (max-width: 900px) {
  .acceso { min-height: 0; align-items: flex-start; }
  .acceso-rejilla { grid-template-columns: minmax(0, 1fr); }
  .acceso-texto { max-width: none; }
  .acceso-panel { order: 2; }
  .acceso-texto .ventajas { display: none; }
  .ventajas-abajo { display: grid !important; order: 3; margin-top: 0; }
}
@media (max-width: 760px) {
  .acceso { padding: calc(var(--alto-cab) + 22px) 0 40px; }
  .acceso::before { background: radial-gradient(80% 40% at 50% 100%, rgba(217,25,43,.25), transparent 70%), linear-gradient(180deg, rgba(4,5,8,.55), rgba(4,5,8,.9) 40%); }
  /* En el móvil queda un solo personaje, detrás del título y apagado por abajo. */
  /* En el móvil, sin personajes: asomaba un brazo cortado detrás del título y del texto. */
  .figuras { display: none; }
  .figuras .delante { -webkit-mask-image: linear-gradient(0deg, transparent 5%, #000 45%); mask-image: linear-gradient(0deg, transparent 5%, #000 45%); }
  .figuras .atras, .figuras::before { display: none; }
  .acceso-texto { position: relative; }
  .acceso-texto .migas { display: none; }
  .acceso-texto h1 { font-size: 46px; margin: 10px 0 10px; }
  .acceso-texto h1 em { display: inline; }
  .acceso-texto > p { font-size: 16.5px; }
  .acceso-rejilla { gap: 20px; }
  .acceso-panel .cuerpo-panel { padding: 20px 18px 22px; }
  .pestanas a { height: 50px; font-size: 15.5px; }
  .form-titulo h2 { font-size: 26px; }
  .ventajas li { padding: 10px 12px 10px 10px; }
  .ventajas b { font-size: 16px; }
  .ventajas small { font-size: 14px; }
  .bienvenida-cabeza h2 { font-size: 30px; }

  .ficha { padding: calc(var(--alto-cab) + 26px) 0 28px; }
  .ficha .migas { display: none; }
  .ficha-rejilla { gap: 16px 18px; }
  .escudo-jugador { width: 78px; height: 88px; }
  .escudo-jugador b { font-size: 38px; margin-top: -4px; }
  .ficha h1 { font-size: 38px; margin: 4px 0 8px; }
  .datos-ficha { font-size: 14.5px; gap: 4px 14px; }
  .ficha .figura-ficha { display: none; }
  .saldo-ficha { justify-self: stretch; min-width: 0; }
  .subnav a { height: 48px; padding: 0 12px; font-size: 14px; }
  .subnav a::after { left: 12px; right: 12px; }
  .cuenta-cuerpo { padding-top: 24px; gap: 18px; }
  .saldo-grande { grid-template-columns: minmax(0, 1fr); }
  .bolsa + .bolsa { border-left: 0; border-top: 1px solid var(--linea); }
  .bolsa { grid-template-columns: 72px 1fr; padding: 20px 18px; }
  .bolsa > img { width: 72px; height: 72px; }
  .bolsa .cifra { font-size: 42px; }
  .fila-guardar { grid-template-columns: minmax(0, 1fr); }
  .cab-panel { flex-wrap: wrap; padding: 10px 16px; }
  /* La tabla de movimientos pasa a tarjetas: cuatro columnas no caben en 390 px. */
  .tabla.apilable thead { display: none; }
  .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr, .tabla.apilable td { display: block; }
  .tabla.apilable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
  .tabla.apilable td { padding: 0; border: 0; }
  .tabla.apilable td[data-col="fecha"] { grid-column: 1; grid-row: 2; font-size: 13.5px; }
  .tabla.apilable td[data-col="motivo"] { grid-column: 1; grid-row: 1; }
  .tabla.apilable td[data-col="cantidad"] { grid-column: 2; grid-row: 1; text-align: right; }
  .tabla.apilable td[data-col="saldo"] { grid-column: 2; grid-row: 2; text-align: right; font-size: 13.5px; }
  .tabla.apilable td[data-col="moneda"] { display: none; }
  .tabla.apilable td[data-col="estado"] { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .equipo { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; }
  .equipo .acciones-equipo { grid-column: 1 / -1; }
  .equipo .confirmar { justify-content: flex-start; }
  .fila-dato { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .franja-descarga { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .franja-descarga h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .chispas { display: none; }
}