/* vgames.cl — estilo consola. Tokens arriba; todo lo demás los usa. Sin fuentes externas: Segoe UI Variable viene con Windows 11. */
@property --glow { syntax: '<color>'; inherits: true; initial-value: #c9372c; }

:root {
  --negro: #050506;          /* OLED */
  --fondo: #0b0c0e;
  --carbon: #14161a;         /* BG actual de consola.py */
  --panel: #1c1f25;          /* PANEL actual */
  --panel-2: #262a31;
  --linea: rgba(255, 255, 255, .08);
  --texto: #e8e8e8;
  --tenue: #9aa0a6;
  --acento: #c9372c;         /* rojo de la marca */
  --ok: #3ddc84;
  --error: #ff5a52;
  --aviso: #e0a030;
  --glow: #c9372c;           /* lo cambia el JS según el juego enfocado */
  --u: clamp(12px, .8vw, 24px);   /* unidad base: 15 px a 1920, crece en monitores anchos */
  --radio: calc(var(--u) * 1.1);
  --ancho-tarjeta: calc(var(--u) * 15);
  --alto-tarjeta: calc(var(--ancho-tarjeta) * 4 / 3);
  --hueco: calc(var(--u) * 1.4);
  --margen: calc(var(--u) * 4.5);
  --curva: cubic-bezier(.2, .8, .2, 1);
  --fuente: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--negro);
  color: var(--texto);
  font: 400 calc(var(--u) * 1.05)/1.45 var(--fuente);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ---------- fondo: negro + glow que toma el color del juego enfocado ---------- */
#ambiente {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60vw 55vh at 18% 34%, color-mix(in oklab, var(--glow) 30%, transparent), transparent 70%),
    radial-gradient(45vw 45vh at 85% 105%, color-mix(in oklab, var(--glow) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--fondo), var(--negro) 70%);
  transition: --glow 1.1s var(--curva);
}
#fondo-arte {
  position: fixed; top: 0; right: 0; z-index: -1;
  width: 62vw; height: 78vh; object-fit: cover;
  opacity: .32; filter: saturate(1.1);
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 35%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 35%, transparent 75%);
  transition: opacity .6s var(--curva);
}
body[data-vista="market"] #fondo-arte { opacity: .12; }

/* ---------- barra superior ---------- */
.barra {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  height: calc(var(--u) * 5.2); padding: 0 var(--margen);
}
.marca { font-weight: 700; font-size: calc(var(--u) * 1.5); letter-spacing: -.02em; }
.marca span { color: var(--acento); }
.marca.grande { font-size: calc(var(--u) * 3); text-align: center; margin-bottom: calc(var(--u) * 1.5); }
.tabs { display: flex; gap: calc(var(--u) * .4); }
.tab {
  padding: calc(var(--u) * .45) calc(var(--u) * 1.2); border-radius: 999px;
  color: var(--tenue); font-weight: 600; letter-spacing: .01em;
  transition: color .2s, background .2s;
}
.tab.activa { color: var(--texto); background: rgba(255, 255, 255, .09); }
.icono-btn { display: grid; place-items: center; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; color: var(--tenue); }
.icono-btn:hover, .tab:hover { color: var(--texto); }
.nav.foco { outline: 2px solid var(--texto); outline-offset: 3px; color: var(--texto); }

.estado-sistema { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.3); color: var(--tenue); font-size: calc(var(--u) * .9); }
.chip { display: inline-flex; align-items: center; gap: .45em; }
.chip.off { opacity: .55; }
.conexion { display: inline-flex; align-items: center; gap: .55em; font-size: calc(var(--u) * .8); letter-spacing: .14em; }
.conexion b { font-weight: 600; }
.punto { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 .6em var(--ok), 0 0 1.6em color-mix(in oklab, var(--ok) 55%, transparent); }
.conexion.on b { color: var(--texto); }
.conexion.off .punto { background: var(--error); box-shadow: 0 0 .6em var(--error), 0 0 1.6em color-mix(in oklab, var(--error) 55%, transparent); }
.conexion.demo .punto { background: var(--aviso); box-shadow: 0 0 .6em var(--aviso); }
.hora { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; font-size: calc(var(--u) * 1.05); }
.perfil { display: inline-flex; align-items: center; gap: .6em; padding: .25em .9em .25em .25em; border-radius: 999px; color: var(--tenue); }
.perfil:hover { color: var(--texto); }
.avatar { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 700; }

/* ---------- vistas ---------- */
main { height: calc(100vh - var(--u) * 5.2 - var(--u) * 3.6); position: relative; }
.vista { position: absolute; inset: 0; animation: entrar .35s var(--curva); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* hero: el juego enfocado, a lo PS5 */
.hero { position: absolute; left: var(--margen); top: calc(var(--u) * 2.5); width: min(46vw, 900px); }
.hero-logo { height: calc(var(--u) * 11); justify-content: flex-start; }
.hero-logo .logo { max-width: 100%; max-height: 100%; object-position: left bottom; }
.hero-logo .logo-texto small { font-size: calc(var(--u) * 1.3); }
.hero-logo .logo-texto strong { font-size: calc(var(--u) * 5); }
.hero-meta { margin: calc(var(--u) * 1.4) 0 0; color: var(--tenue); font-size: calc(var(--u) * 1.05); }
.hero-meta b { color: var(--texto); font-weight: 600; }
.hero-partida { display: flex; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 1.1); flex-wrap: wrap; }
.hero-partida > div { display: grid; gap: .1em; padding: calc(var(--u) * .55) calc(var(--u) * 1.1); border-radius: calc(var(--radio) * .8); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--linea); backdrop-filter: blur(6px); }
.hero-partida small { color: var(--tenue); font-size: calc(var(--u) * .68); letter-spacing: .14em; text-transform: uppercase; }
.hero-partida b { font-weight: 600; font-size: calc(var(--u) * 1.15); font-variant-numeric: tabular-nums; }
.hero-estado { margin: calc(var(--u) * .4) 0 0; min-height: 1.5em; color: var(--tenue); }
.hero-acciones { display: flex; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.4); }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: calc(var(--u) * .75) calc(var(--u) * 1.8); border-radius: 999px;
  background: rgba(255, 255, 255, .1); font-weight: 600;
  transition: transform .15s var(--curva), background .2s;
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.btn.primario { background: var(--texto); color: #0b0c0e; }
.btn.primario:hover:not(:disabled) { background: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.foco { outline: 2px solid var(--texto); outline-offset: 3px; }
.glifo {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: 999px;
  font-size: .72em; font-weight: 700; background: rgba(0, 0, 0, .18); border: 1px solid currentColor; opacity: .75;
}

/* ---------- carrusel ---------- */
.carrusel { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 1.5); height: calc(var(--alto-tarjeta) * 1.16); padding-left: var(--margen); overflow: hidden; }
.pista { display: flex; align-items: flex-end; gap: var(--hueco); height: 100%; transition: transform .45s var(--curva); }

.tarjeta {
  position: relative; flex: 0 0 auto; width: var(--ancho-tarjeta); height: var(--alto-tarjeta);
  border-radius: var(--radio); overflow: hidden; text-align: left;
  background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transform-origin: left bottom;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), margin .35s var(--curva), opacity .3s;
  opacity: .78;
}
.tarjeta.foco {
  transform: scale(1.14); margin-right: calc(var(--ancho-tarjeta) * .14); opacity: 1; z-index: 2;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 18px 50px rgba(0, 0, 0, .6), 0 0 70px color-mix(in oklab, var(--c) 55%, transparent);
}

/* portada: imagen real si existe; si no, una generada con el color del juego */
.portada {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 70% 15%, color-mix(in oklab, var(--c) 75%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in oklab, var(--c) 30%, var(--panel)), #08090b 75%);
}
.portada[data-estilo="carreras"]::after {   /* líneas de velocidad */
  content: ""; position: absolute; inset: 0; opacity: .22;
  background: repeating-linear-gradient(-62deg, transparent 0 18px, rgba(255, 255, 255, .5) 18px 19px, transparent 19px 46px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.portada[data-estilo="estrategia"]::after { /* cuadrícula de mapa */
  content: ""; position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%); mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
}
.portada-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .78)); pointer-events: none; }

/* logo: PNG transparente flotando; si falta, un logotipo tipográfico */
.logo-caja { position: absolute; inset: 0 0 auto; height: 58%; display: flex; align-items: center; justify-content: center; padding: 10% 9%; z-index: 1; }
.logo { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .7)); }
.logo-texto { display: flex; flex-direction: column; max-width: 100%; overflow-wrap: anywhere; line-height: .95; text-shadow: 0 4px 20px rgba(0, 0, 0, .65); }
.logo-texto small { font-size: calc(var(--u) * .72); font-weight: 700; letter-spacing: .32em; color: color-mix(in oklab, var(--c) 55%, #fff); }
.logo-texto strong { font-size: calc(var(--u) * 1.55); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; font-style: italic; }
.logo-texto[data-estilo="estrategia"] strong { font-style: normal; font-weight: 300; letter-spacing: .08em; }
.logo-caja.con-logo .logo-texto { display: none; }
.con-portada .logo-caja { display: none; }   /* con portada real el logo ya está en la imagen */
.hero .logo-caja { position: static; padding: 0; height: calc(var(--u) * 11); align-items: flex-end; justify-content: flex-start; }

/* estado al pie de la tarjeta */
.estado { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(var(--u) * 1) calc(var(--u) * .9); z-index: 1; }
.titulo-tarjeta { display: block; font-weight: 600; font-size: calc(var(--u) * .95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insignia { display: inline-flex; align-items: center; gap: .45em; margin-top: .3em; font-size: calc(var(--u) * .8); color: var(--tenue); }
.insignia::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.insignia[data-t="instalado"] { color: var(--ok); }
.insignia[data-t="faltan_videos"], .insignia[data-t="sync"] { color: var(--aviso); }
.insignia[data-t="descargando"] { color: #6cb6ff; }
.insignia[data-t="jugando"] { color: var(--ok); }
.insignia[data-t="jugando"]::before { animation: latido 1.4s ease-in-out infinite; }
.insignia[data-t="bloqueado"] { color: var(--error); }
@keyframes latido { 50% { transform: scale(1.8); opacity: .4; } }
.progreso { height: 3px; margin-top: .6em; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.progreso i { display: block; height: 100%; width: 0; background: var(--texto); transition: width .5s linear; }

.vacio { position: absolute; left: var(--margen); bottom: 40%; max-width: 40em; color: var(--tenue); font-size: calc(var(--u) * 1.2); }

/* ---------- Market ---------- */
.market-cab { padding: calc(var(--u) * 1.5) var(--margen) calc(var(--u) * 1.2); }
.market-cab h2 { margin: 0; font-size: calc(var(--u) * 2.4); font-weight: 700; letter-spacing: -.02em; }
.market-cab p { margin: .3em 0 0; color: var(--tenue); max-width: 60em; }
.grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 22), 1fr)); gap: var(--hueco);
  padding: calc(var(--u) * .6) var(--margen) calc(var(--u) * 3); max-height: calc(100% - var(--u) * 8); overflow: hidden auto; scrollbar-width: none;
}
.item {
  position: relative; border-radius: var(--radio); overflow: hidden; background: var(--panel); text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
.item.foco { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 18px 44px rgba(0, 0, 0, .6), 0 0 60px color-mix(in oklab, var(--c) 50%, transparent); z-index: 1; }
.item-arte { position: relative; aspect-ratio: 16 / 8; }
.item-arte .logo-caja { height: 100%; padding: 8% 12%; }
.item-cuerpo { padding: calc(var(--u) * .9) calc(var(--u) * 1.1) calc(var(--u) * 1.1); }
.item-cuerpo h4 { margin: 0; font-size: calc(var(--u) * 1.05); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-cuerpo p { margin: .25em 0 .8em; color: var(--tenue); font-size: calc(var(--u) * .85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.item-pie { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.item-meta { color: var(--tenue); font-size: calc(var(--u) * .8); }
.etiqueta { position: absolute; top: calc(var(--u) * .7); left: calc(var(--u) * .7); z-index: 2; padding: .15em .7em; border-radius: 999px; font-size: calc(var(--u) * .72); font-weight: 600; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.etiqueta[data-t="libre"] { color: var(--ok); }
.item .btn { padding: calc(var(--u) * .45) calc(var(--u) * 1.1); font-size: calc(var(--u) * .85); }
.item.foco .btn:not(:disabled) { background: var(--texto); color: #0b0c0e; }

/* ---------- capas (buscar, modal, login) ---------- */
.capa { position: fixed; inset: 0; z-index: 10; display: grid; place-items: start center; background: rgba(3, 3, 4, .72); backdrop-filter: blur(18px) saturate(1.2); animation: aparecer .2s ease-out; }
@keyframes aparecer { from { opacity: 0; } }
.buscar-caja { width: min(980px, 88vw); margin-top: 9vh; }
.buscar-campo { display: flex; align-items: center; gap: calc(var(--u) * .9); padding: calc(var(--u) * .9) calc(var(--u) * 1.3); border-radius: calc(var(--radio) * 1.2); background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 20px 60px rgba(0, 0, 0, .5); color: var(--tenue); }
.buscar-campo svg { width: 1.5em; height: 1.5em; }
.buscar-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--texto); font: 500 calc(var(--u) * 1.6) var(--fuente); }
.buscar-campo input::-webkit-search-cancel-button { display: none; }
kbd { font: 600 calc(var(--u) * .7) var(--fuente); padding: .2em .55em; border-radius: 6px; border: 1px solid var(--linea); color: var(--tenue); }
.teclado { display: grid; gap: calc(var(--u) * .35); margin: calc(var(--u) * 1) 0; }
.teclado-fila { display: flex; justify-content: center; gap: calc(var(--u) * .35); }
.tecla { min-width: calc(var(--u) * 3); height: calc(var(--u) * 2.6); padding: 0 .8em; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--tenue); font-weight: 600; text-transform: uppercase; }
.tecla.ancha { min-width: calc(var(--u) * 9); text-transform: none; }
.tecla.foco { background: var(--texto); color: #0b0c0e; }
body:not(.usa-mando) .teclado { display: none; }   /* con teclado físico no estorba */
.resultados { display: grid; gap: calc(var(--u) * .3); max-height: 52vh; overflow: hidden auto; scrollbar-width: none; margin-top: calc(var(--u) * 1); }
.grupo { margin: calc(var(--u) * .8) 0 calc(var(--u) * .2) calc(var(--u) * .4); font-size: calc(var(--u) * .75); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.resultado { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .55) calc(var(--u) * .8); border-radius: calc(var(--radio) * .8); text-align: left; }
.resultado.foco { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mini { position: relative; flex: 0 0 auto; width: calc(var(--u) * 5.5); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.mini .logo-caja { height: 100%; padding: 8%; }
.mini .logo-texto small { font-size: calc(var(--u) * .4); }
.mini .logo-texto { overflow-wrap: normal; }
.mini .logo-texto strong { font-size: calc(var(--u) * .62); }
.resultado b { display: block; font-weight: 600; }
.resultado span { color: var(--tenue); font-size: calc(var(--u) * .85); }
.sin-resultados { padding: calc(var(--u) * 2); text-align: center; color: var(--tenue); }

.modal { margin-top: 26vh; width: min(620px, 90vw); padding: calc(var(--u) * 2.2); border-radius: calc(var(--radio) * 1.3); background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 30px 80px rgba(0, 0, 0, .6); }
.modal h3 { margin: 0 0 .5em; font-size: calc(var(--u) * 1.5); }
.modal p { margin: 0; color: var(--tenue); white-space: pre-line; }
.modal-botones { display: flex; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.8); }
.modal .btn.foco { background: var(--texto); color: #0b0c0e; }

.login { margin-top: 14vh; width: min(440px, 90vw); display: grid; gap: calc(var(--u) * .8); padding: calc(var(--u) * 2.4); border-radius: calc(var(--radio) * 1.3); background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 30px 80px rgba(0, 0, 0, .6); }
.login-tabs { display: flex; justify-content: center; gap: .4em; margin-bottom: .4em; }
.login-tabs .tab.activa { background: var(--acento); color: #fff; }
.campo { display: grid; gap: .35em; color: var(--tenue); font-size: calc(var(--u) * .85); }
.campo input { padding: .7em .9em; border-radius: 10px; border: 1px solid var(--linea); background: var(--carbon); color: var(--texto); font: inherit; font-size: calc(var(--u) * 1); outline: 0; }
.campo input:focus { border-color: rgba(255, 255, 255, .5); }
.login:not(.crear) .solo-crear { display: none; }
.login-msg { min-height: 1.4em; margin: 0; color: var(--error); font-size: calc(var(--u) * .9); }
.login-msg.ok { color: var(--ok); }
.login-msg.info { color: var(--tenue); }
.login .btn.primario { justify-content: center; background: var(--acento); color: #fff; }
.login-nota { margin: 0; text-align: center; color: var(--tenue); font-size: calc(var(--u) * .78); }

/* ---------- pie: guía de botones ---------- */
.ayuda { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 3.6); display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 1.8); padding: 0 var(--margen); color: var(--tenue); font-size: calc(var(--u) * .85); z-index: 11; }
.ayuda span { display: inline-flex; align-items: center; gap: .5em; }

/* banda de vista previa (solo en modo DEMO) */
.aviso-demo { position: fixed; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); z-index: 12; padding: .4em 1.1em; border-radius: 999px; background: rgba(224, 160, 48, .14); color: var(--aviso); font-size: calc(var(--u) * .8); border: 1px solid rgba(224, 160, 48, .35); }
.aviso-demo b { color: var(--texto); }

/* avisos */
.avisos { position: fixed; right: var(--margen); bottom: calc(var(--u) * 4.4); z-index: 20; display: grid; gap: .6em; justify-items: end; }
.aviso { max-width: 32em; padding: .75em 1.1em; border-radius: 12px; background: var(--panel-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); border-left: 3px solid var(--tenue); animation: aparecer .25s ease-out; }
.aviso.ok { border-left-color: var(--ok); }
.aviso.error { border-left-color: var(--error); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- selector de mando ---------- */
.chip.clic { cursor: pointer; transition: color .2s, opacity .2s; }
.chip.clic:hover { color: var(--texto); opacity: 1; }
.mandos-caja { width: min(900px, 90vw); margin-top: 4vh; max-height: 90vh; overflow: hidden auto; scrollbar-width: none; padding: calc(var(--u) * 2.2); border-radius: calc(var(--radio) * 1.4); background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 30px 80px rgba(0, 0, 0, .6); }
.mandos-cab h3 { margin: 0 0 .3em; font-size: calc(var(--u) * 1.6); }
.mandos-cab p { margin: 0 0 calc(var(--u) * 1.4); color: var(--tenue); font-size: calc(var(--u) * .92); max-width: 62ch; }
.m-sec { margin: calc(var(--u) * 1.2) 0 calc(var(--u) * .5); font-size: calc(var(--u) * .72); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.m-lista { display: grid; gap: calc(var(--u) * .4); }
.m-fila { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .8) calc(var(--u) * 1.1); border-radius: calc(var(--radio) * .9); background: rgba(255, 255, 255, .04); text-align: left; transition: background .15s, transform .2s var(--curva); }
.m-fila svg { width: 1.9em; height: 1.9em; color: var(--tenue); flex: none; }
.m-fila b { display: block; font-weight: 600; }
.m-fila small { display: block; color: var(--tenue); font-size: calc(var(--u) * .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
.m-fila .m-txt { flex: 1; min-width: 0; }
.m-fila .m-tag { font-size: calc(var(--u) * .72); padding: .25em .7em; border-radius: 999px; background: rgba(61, 220, 132, .14); color: var(--ok); letter-spacing: .06em; }
.m-fila.activo { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .4); }
.m-vacio { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2); border-radius: calc(var(--radio) * .9); border: 1px dashed rgba(255, 255, 255, .18); color: var(--tenue); font-size: calc(var(--u) * .92); }
.m-vacio svg { width: 2.6em; height: 2.6em; flex: none; animation: respirar 2.4s ease-in-out infinite; }
@keyframes respirar { 50% { opacity: .35; } }
.m-perfiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * .6); }
.m-perfil { display: grid; justify-items: center; gap: calc(var(--u) * .55); padding: calc(var(--u) * 1) calc(var(--u) * .5); border-radius: calc(var(--radio) * .9); background: rgba(255, 255, 255, .04); transition: background .15s, transform .2s var(--curva); }
.m-perfil strong { font-weight: 600; font-size: calc(var(--u) * .92); }
.m-perfil small { color: var(--tenue); font-size: calc(var(--u) * .72); text-align: center; }
.m-perfil.activo { box-shadow: inset 0 0 0 2px var(--ok); background: rgba(61, 220, 132, .07); }
.m-fila.foco, .m-perfil.foco { background: rgba(255, 255, 255, .13); box-shadow: 0 0 0 2px var(--texto); transform: translateY(-2px); }
.m-botones { display: flex; gap: .3em; }
.bt { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-size: calc(var(--u) * .85); font-weight: 700; background: #2c3038; color: #cfd3d8; transition: transform .08s, background .08s, box-shadow .08s; }
.bt.pill { width: auto; min-width: 2.6em; border-radius: 999px; padding: 0 .7em; font-size: calc(var(--u) * .72); }
.bt.cuad { border-radius: 8px; }
.m-botones.xbox .a { color: #3ddc84; } .m-botones.xbox .b { color: #ff5a52; } .m-botones.xbox .x { color: #4aa3ff; } .m-botones.xbox .y { color: #f2c744; }
.m-botones.ps .a { color: #6ea8ff; } .m-botones.ps .b { color: #ff6b6b; } .m-botones.ps .x { color: #f08ad0; } .m-botones.ps .y { color: #5ee0a0; }
.m-prueba { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1.2); border-radius: calc(var(--radio) * .9); background: rgba(0, 0, 0, .28); }
.m-cruz, .m-cara { display: grid; grid-template: repeat(3, 1.9em) / repeat(3, 1.9em); gap: .25em; font-size: calc(var(--u) * .95); }
.m-cruz .bt { border-radius: 8px; width: 100%; height: 100%; }
.m-cruz [data-b=arriba] { grid-area: 1 / 2; } .m-cruz [data-b=izq] { grid-area: 2 / 1; } .m-cruz [data-b=der] { grid-area: 2 / 3; } .m-cruz [data-b=abajo] { grid-area: 3 / 2; }
.m-cara [data-b=y] { grid-area: 1 / 2; } .m-cara [data-b=x] { grid-area: 2 / 1; } .m-cara [data-b=b] { grid-area: 2 / 3; } .m-cara [data-b=a] { grid-area: 3 / 2; }
.m-medio { display: grid; gap: calc(var(--u) * .6); justify-items: center; }
.m-medio .fila { display: flex; gap: calc(var(--u) * .6); }
.bt.on { background: var(--texto); color: #0b0c0e !important; transform: scale(1.14); box-shadow: 0 0 22px rgba(255, 255, 255, .5); }
.m-nota { margin: calc(var(--u) * .7) 0 0; color: var(--tenue); font-size: calc(var(--u) * .8); text-align: center; }
@media (max-width: 720px) { .m-perfiles { grid-template-columns: repeat(2, 1fr); } .m-prueba { flex-wrap: wrap; gap: calc(var(--u) * 1.5); } }
.m-perfil.activo.foco, .m-fila.activo.foco { box-shadow: 0 0 0 2px var(--texto), inset 0 0 0 2px var(--ok); }

.m-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .6); margin-bottom: calc(var(--u) * .6); }
.m-preset { display: grid; gap: .15em; justify-items: center; padding: calc(var(--u) * .7); border-radius: calc(var(--radio) * .9); background: rgba(255, 255, 255, .04); transition: background .15s, transform .2s var(--curva); }
.m-preset strong { font-weight: 600; font-size: calc(var(--u) * .92); }
.m-preset small { color: var(--tenue); font-size: calc(var(--u) * .72); }
.m-preset.activo { box-shadow: inset 0 0 0 2px var(--ok); background: rgba(61, 220, 132, .07); }
.m-preset.foco { background: rgba(255, 255, 255, .13); box-shadow: 0 0 0 2px var(--texto); transform: translateY(-2px); }
.m-preset.activo.foco { box-shadow: 0 0 0 2px var(--texto), inset 0 0 0 2px var(--ok); }
.m-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .4); }
.m-tecla { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: calc(var(--u) * .6) calc(var(--u) * .9); border-radius: calc(var(--radio) * .8); background: rgba(255, 255, 255, .04); text-align: left; font-size: calc(var(--u) * .88); transition: background .15s; }
.m-keys { display: inline-flex; gap: .3em; flex-wrap: wrap; justify-content: flex-end; }
.m-keys kbd { color: var(--texto); background: rgba(255, 255, 255, .08); }
.m-keys em { color: var(--tenue); font-size: .8em; font-style: normal; }
.m-tecla.foco { background: rgba(255, 255, 255, .13); box-shadow: 0 0 0 2px var(--texto); }
.m-tecla.esperando { background: rgba(224, 160, 48, .14); box-shadow: 0 0 0 2px var(--aviso); }
.m-tecla.esperando .m-keys em { color: var(--aviso); animation: respirar 1.4s ease-in-out infinite; }
@media (max-width: 720px) { .m-teclas, .m-presets { grid-template-columns: 1fr; } }

/* ---------- controles de ventana (solo en vgames.exe y en modo navegador) ---------- */
.ventana-ctl { display: inline-flex; gap: calc(var(--u) * .35); margin-left: calc(var(--u) * 1); }
.ventana-ctl[hidden] { display: none; }
.ventana-ctl button { display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; color: var(--tenue); background: rgba(255, 255, 255, .05); transition: background .15s, color .15s; }
.ventana-ctl button svg { width: 52%; height: 52%; }
.ventana-ctl button:hover { color: var(--texto); background: rgba(255, 255, 255, .14); }
.ventana-ctl button.cerrar:hover { background: var(--acento); color: #fff; }
.ventana-ctl button:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.login-nota a { color: var(--texto); }

.icono-btn.girando svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- perfil, amigos y mensajes ---------- */
.panel-perfil { margin-top: 8vh; width: min(900px, 94vw); max-height: 84vh; overflow: auto; padding: calc(var(--u) * 2); border-radius: calc(var(--radio) * 1.3); background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 30px 80px rgba(0, 0, 0, .6); }
.panel-perfil h3 { margin: 0 0 .8em; font-size: calc(var(--u) * 1.5); }
.panel-perfil input[type=text] { background: #14161b; color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: .55em .8em; font: inherit; min-width: 0; }
.panel-perfil .btn { white-space: nowrap; }
.avatar-p { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: #2a2d36 center/cover no-repeat; color: var(--texto); font-weight: 700; }
.avatar-p.clic { cursor: pointer; outline: 2px dashed transparent; outline-offset: 3px; }
.avatar-p.clic:hover { outline-color: var(--tenue); }
.perfil-cab { display: flex; align-items: center; gap: calc(var(--u) * 1.2); flex-wrap: wrap; }
.perfil-datos { display: grid; gap: 4px; flex: 1; min-width: 200px; }
.perfil-datos small, .tenue { color: var(--tenue); }
.perfil-cuerpo { display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 1.5); }
.perfil-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.perfil-col h4 { margin: 0; }
.amigo { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.amigo:hover, .amigo.sel { background: rgba(255, 255, 255, .06); }
.amigo-t { display: grid; flex: 1; min-width: 0; }
.amigo-t small { color: var(--tenue); }
.amigo-t small.linea { color: #43d17a; }
.agregar { display: flex; gap: 8px; }
.agregar input { flex: 1; }
.chat .mensajes { flex: 1; min-height: 200px; max-height: 38vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.msg { align-self: flex-start; max-width: 80%; padding: 6px 10px; border-radius: 12px; background: #23262e; overflow-wrap: anywhere; }
.msg.mio { align-self: flex-end; background: #3a5fa8; }
.perfil-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: calc(var(--u) * 1.5); flex-wrap: wrap; }
@media (max-width: 700px) { .perfil-cuerpo { grid-template-columns: 1fr; } }
#capa-perfil { z-index: 60; background: rgba(3, 3, 4, .86); }
.panel-perfil { background: #101216; }
#capa-perfil { backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; background: rgba(3, 3, 4, .94); }