/* MustPlay — estilo «Liquid Glass» (el de toda la web).
   Todo va dentro de html.liquid para no afectar al estilo normal. */

html.liquid {
  --fondo: #EEF1F7;
  --tarjeta: rgba(255, 255, 255, .58);
  --suave: rgba(255, 255, 255, .45);
  --linea: rgba(255, 255, 255, .7);
  --linea-2: rgba(20, 30, 60, .07);
  --borde-control: rgba(20, 30, 60, .1);
  --control: rgba(255, 255, 255, .6);
  --texto: #111318;
  --texto-2: #2C313B;
  --apagado: #5E6573;
  --acento: #0A84FF;
  --acento-oscuro: #0066D6;
  --acento-suave: rgba(10, 132, 255, .12);
  --vidrio-borde: rgba(255, 255, 255, .75);
  --vidrio-brillo: rgba(255, 255, 255, .9);
  --vidrio-sombra: 0 10px 40px rgba(30, 40, 80, .12), 0 2px 6px rgba(30, 40, 80, .06);
  --vidrio-blur: blur(28px) saturate(180%);
}
html.liquid[data-tema="oscuro"] {
  --fondo: #07090E;
  --tarjeta: rgba(40, 44, 58, .45);
  --suave: rgba(255, 255, 255, .06);
  --linea: rgba(255, 255, 255, .12);
  --linea-2: rgba(255, 255, 255, .07);
  --borde-control: rgba(255, 255, 255, .14);
  --control: rgba(255, 255, 255, .08);
  --texto: #F4F6FA;
  --texto-2: #D5DAE3;
  --apagado: #9EA6B6;
  --acento: #3D9BFF;
  --acento-oscuro: #6CB4FF;
  --acento-suave: rgba(61, 155, 255, .16);
  --vidrio-borde: rgba(255, 255, 255, .14);
  --vidrio-brillo: rgba(255, 255, 255, .22);
  --vidrio-sombra: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
}

/* Fondo de colores difuminados: es lo que hace que el cristal «se vea» */
html.liquid body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Roboto', system-ui, sans-serif;
  letter-spacing: -.01em;
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(10, 132, 255, .28), transparent 60%),
    radial-gradient(800px 700px at 100% 10%, rgba(191, 90, 242, .24), transparent 60%),
    radial-gradient(900px 700px at 60% 105%, rgba(255, 159, 10, .2), transparent 60%),
    radial-gradient(700px 600px at 0% 80%, rgba(48, 209, 88, .16), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
html.liquid[data-tema="oscuro"] body {
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(10, 132, 255, .32), transparent 60%),
    radial-gradient(800px 700px at 100% 10%, rgba(191, 90, 242, .26), transparent 60%),
    radial-gradient(900px 700px at 60% 105%, rgba(255, 100, 60, .18), transparent 60%),
    radial-gradient(700px 600px at 0% 80%, rgba(48, 209, 88, .12), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
html.liquid h1, html.liquid h2, html.liquid .titulo-pagina { letter-spacing: -.025em; font-weight: 700; }

/* ---------- El cristal ---------- */
html.liquid .tarjeta,
html.liquid .ficha-mini,
html.liquid .noticia-mini,
html.liquid .tarjeta-lanz,
html.liquid .mc-caja,
html.liquid .reto-sug {
  background: var(--tarjeta);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid var(--vidrio-borde);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), inset 0 -1px 0 rgba(255, 255, 255, .08), var(--vidrio-sombra);
}
html.liquid .ficha-mini, html.liquid .tarjeta-lanz { border-radius: 20px; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
html.liquid .ficha-mini:hover, html.liquid .tarjeta-lanz:hover { transform: translateY(-3px) scale(1.01); border-color: var(--vidrio-borde); }
html.liquid .portada { border-radius: 14px; }
html.liquid .ficha-mini .portada, html.liquid .tl-portada .portada { border-radius: 19px 19px 0 0; }
html.liquid .resumen-bloque { background: var(--suave); border: 1px solid var(--linea-2); border-radius: 16px; }
html.liquid .titulo-seccion { border-bottom: none; }

/* ---------- Barra de arriba flotante (cápsula de cristal) ---------- */
html.liquid .cabecera { background: transparent; position: sticky; top: 0; z-index: 50; padding: 12px 16px 0; }
html.liquid .cabecera .contenedor {
  background: var(--tarjeta);
  -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur);
  border: 1px solid var(--vidrio-borde);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
  padding: 8px 10px 8px 22px;
}
html.liquid .logo { color: var(--texto); }
html.liquid .nav a { color: var(--apagado); padding: 6px 12px; border-radius: 999px; transition: background .2s, color .2s; }
html.liquid .nav a:hover { color: var(--texto); background: var(--suave); }
html.liquid .nav a[aria-current="page"] { color: var(--texto); background: var(--control); box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 1px 4px rgba(0, 0, 0, .08); }
html.liquid .nav-punto { display: none; }
html.liquid .buscador input { border-radius: 999px; background: var(--suave); border: 1px solid var(--linea-2); height: 40px; }
html.liquid .selector-idioma select, html.liquid .boton-tema { border-radius: 999px; background-color: var(--suave); border-color: var(--linea-2); color: var(--texto); height: 40px; }
html.liquid .boton-tema { width: 40px; }
html.liquid .selector-idioma svg { stroke: var(--apagado); }
html.liquid .selector-idioma select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A93A3' stroke-width='1.6'/%3E%3C/svg%3E"); }
html.liquid .cabecera .zona-usuario .boton { height: 40px; }

/* ---------- Botones en forma de píldora ---------- */
html.liquid .boton, html.liquid .pastilla, html.liquid .estados button, html.liquid .valoraciones button {
  border-radius: 999px; box-shadow: none; background-image: none;
}
html.liquid .boton {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 88%, #fff), var(--acento));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px color-mix(in srgb, var(--acento) 35%, transparent);
}
html.liquid .boton.secundario, html.liquid .pastilla, html.liquid .estados button, html.liquid .valoraciones button {
  background: var(--control);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--borde-control);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo);
  color: var(--texto);
}
html.liquid .boton:active:not(:disabled), html.liquid .pastilla:active, html.liquid .estados button:active { transform: scale(.96); }
html.liquid .pastilla[aria-pressed="true"], html.liquid .estados button[aria-pressed="true"] {
  background: var(--acento); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px color-mix(in srgb, var(--acento) 35%, transparent);
}
html.liquid .huella { display: none; }

/* ---------- Campos de texto ---------- */
html.liquid input:not([type=checkbox]):not([type=radio]), html.liquid select, html.liquid textarea { border-radius: 14px; }
html.liquid .buscador input, html.liquid .selector-idioma select { border-radius: 999px; }

/* ---------- Pie ---------- */
html.liquid .pie { background: transparent; border-top: 1px solid var(--linea-2); }

/* Sellos y marcas un poco más «iOS» */
html.liquid .sello { border-radius: 999px; }
html.liquid .marca { box-shadow: 0 2px 8px rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .9); }

/* Sin desenfoque si el sistema pide reducir transparencias */
@media (prefers-reduced-transparency: reduce) {
  html.liquid .tarjeta, html.liquid .ficha-mini, html.liquid .noticia-mini, html.liquid .cabecera .contenedor { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fondo); }
}
@media (max-width: 760px) {
  html.liquid .cabecera { padding: 8px 8px 0; position: relative; z-index: 50; } /* relative (no fija) para que el menú del avatar quede por encima del contenido */
  html.liquid .cabecera .contenedor { border-radius: 26px; padding: 10px 12px; }
  html.liquid .tarjeta { border-radius: 20px; }
  html.liquid .ficha-mini { border-radius: 14px; }
  html.liquid .ficha-mini .portada { border-radius: 13px 13px 0 0; }
}
html.liquid .reto-cuadro { border-radius: 12px; }
html.liquid .reto-portada { border-radius: 18px; }
html.liquid .reto-buscar input { border-radius: 999px; }
/* La «A» del logo: el triángulo de cristal */
.logo .logo-a { display: inline-block; height: .78em; width: auto; margin: 0 .5px 0 1px; align-self: baseline; transform: translateY(1px); filter: drop-shadow(0 0 4px rgba(30, 120, 255, .55)); }
/* Nota numérica de IGDB */
.nota-igdb { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 8px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .18); }
.nota-igdb.nota-alta { background: linear-gradient(180deg, #34C759, #229A46); }
.nota-igdb.nota-media { background: linear-gradient(180deg, #FFCC00, #E0A800); color: #3A2A00; }
.nota-igdb.nota-baja { background: linear-gradient(180deg, #FF453A, #D12F2F); }
.nota-igdb.grande { min-width: 64px; height: 64px; border-radius: 18px; font-size: 28px; }
.tarjeta.media { display: flex; align-items: center; gap: 14px; }
.tarjeta.media strong { font-weight: 600; }
@media (max-width: 640px) { .ficha-mini .nota-igdb { min-width: 22px; height: 18px; padding: 0 3px; font-size: 10.5px; border-radius: 6px; } }
.tarjeta.media .nota-igdb { color: #fff; }
.tarjeta.media .nota-igdb.nota-media { color: #3A2A00; }
/* Colección / Wishlist en la ficha */
.estados.estados-grupo { grid-template-columns: 1fr 1fr; }
.estados.estados-grupo button { height: 48px; font-size: 16px; }
.estados button.estado-wishlist[aria-pressed="true"] { background: linear-gradient(180deg, #FF6B8B, #E0365E); color: #fff; border-color: transparent; }
.col-detalles { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: var(--suave); border: 1px solid var(--linea-2); }
.col-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.col-fila .plataforma-pregunta { flex-basis: 100%; }
.col-fila .pastilla { height: 36px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.col-fila .pastilla svg { width: 15px; height: 15px; }
.col-sub { padding-left: 4px; }
.col-sub .resultado-terminado[aria-pressed="true"] { background: #2E9E5B; border-color: #2E9E5B; color: #fff; }
.col-sub .resultado-droppeado[aria-pressed="true"] { background: #C8463D; border-color: #C8463D; color: #fff; }
.col-campo { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--apagado); }
.col-campo input, .col-campo select { height: 38px; padding: 0 12px; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font: inherit; font-size: 14px; border-radius: 12px; }
[data-tema="oscuro"] .col-campo input { color-scheme: dark; }
.col-compra { gap: 12px; }
.col-precio { display: inline-flex; align-items: center; gap: 6px; }
.col-precio input { width: 110px; }
.col-precio b { color: var(--texto); font-weight: 600; }
.col-estado { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linea-2); }
.col-notas select { width: 84px; }
.col-pie { margin: 0; font-size: 12.5px; }
.formato-ambos { background: linear-gradient(90deg, #E07B2A 50%, #3A7BD5 50%); }
/* Estado del juego físico: el título arriba y las tres notas en columnas iguales */
.col-fila.col-notas { display: grid; grid-template-columns: repeat(3, minmax(0, 140px)); gap: 8px 10px; align-items: end; }
.col-fila.col-notas .plataforma-pregunta { grid-column: 1 / -1; }
.col-notas .col-campo { min-width: 0; }
.col-notas select { width: 100%; }
@media (max-width: 760px) { .col-fila.col-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Menú del botón derecho sobre una portada: casi opaco para que se lea bien */
html.liquid .menu-juego { background: rgba(250, 251, 254, .97); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-color: rgba(0, 0, 0, .1); box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .14); border-radius: 18px; }
html.liquid[data-tema="oscuro"] .menu-juego { background: rgba(28, 31, 42, .97); border-color: rgba(255, 255, 255, .12); box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4); }
/* ---------- Menú del avatar en vertical, con los colores de la web ---------- */
html.liquid .menu-avatar.abierto { transform: none; }
html.liquid .burbujas { left: 50%; top: 50%; }
html.liquid .burbujas-goo .b1, html.liquid .burbuja.b1 { background: linear-gradient(160deg, #64C6FC 0%, #1A6CFC 55%, #0138EA 100%); }
html.liquid .burbujas-goo .b2, html.liquid .burbuja.b2 { background: linear-gradient(160deg, #D59BFF 0%, #A55BF2 55%, #7A2FD6 100%); }
html.liquid .burbujas-goo .b3, html.liquid .burbuja.b3 { background: linear-gradient(160deg, #FF7A8A 0%, #F2495C 55%, #C9283F 100%); }
html.liquid .burbujas-goo span, html.liquid .burbuja { transform: translateY(0) scale(.2); }
html.liquid .menu-avatar.abierto .b1 { transform: translateY(54px) scale(1); }
html.liquid .menu-avatar.abierto .b2 { transform: translateY(102px) scale(1); }
html.liquid .menu-avatar.abierto .b3 { transform: translateY(150px) scale(1); }
html.liquid .burbuja::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px rgba(0, 0, 0, .35); }
html.liquid .menu-avatar.abierto .avatar-boton { box-shadow: 0 0 0 3px rgba(100, 198, 252, .85), 0 0 18px rgba(30, 120, 255, .55); }
/* La etiqueta va a la izquierda de cada burbuja y se ve siempre que el menú está abierto */
html.liquid .etiqueta-burbuja { top: 50%; left: auto; right: calc(100% + 10px); transform: translate(6px, -50%); background: rgba(24, 27, 36, .92); color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); padding: 6px 12px; font-size: 13.5px; }
html.liquid:not([data-tema="oscuro"]) .etiqueta-burbuja { background: rgba(255, 255, 255, .95); color: #1A1F29; border-color: rgba(0, 0, 0, .08); box-shadow: 0 6px 18px rgba(20, 28, 42, .18); }
html.liquid .menu-avatar.abierto .etiqueta-burbuja { opacity: 1; filter: blur(0); transform: translate(0, -50%); transition-delay: calc(var(--i) * 45ms + 120ms); }
html.liquid .burbuja:hover .etiqueta-burbuja, html.liquid .burbuja:focus-visible .etiqueta-burbuja { transform: translate(0, -50%); }
html.liquid .menu-avatar.abierto .burbuja:hover .etiqueta-burbuja, html.liquid .menu-avatar.abierto .burbuja:focus-visible .etiqueta-burbuja { background: var(--acento, #0A84FF); color: #fff; border-color: transparent; }
/* Los mejor puntuados por… */
.zona-puntuados .ajustes-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.zona-puntuados h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.puntuados-orden { display: inline-flex; gap: 6px; }
.puntuados-orden .pastilla { height: 34px; font-size: 13px; }
/* La portada de la ficha conserva siempre su proporción, aunque la columna de la derecha crezca */
.ficha-cabecera .portada { align-self: flex-start; height: auto; }
/* Marca «En tu colección»: el triángulo del logo, con sus tonos de azul */
.marca.marca-coleccion { background: #0E1420; }
.marca-coleccion img { width: 64%; height: auto; margin-top: -1px; filter: drop-shadow(0 0 3px rgba(30, 120, 255, .6)); }
/* Sección destacada del Inicio (Steam Next Fest…) */
.seccion-destacada { position: relative; padding: 20px 22px 22px; border-radius: 26px; margin-bottom: 8px;
  background: radial-gradient(600px 220px at 0% 0%, rgba(10, 132, 255, .22), transparent 70%), radial-gradient(600px 240px at 100% 100%, rgba(191, 90, 242, .2), transparent 70%), var(--tarjeta);
  border: 1px solid rgba(100, 198, 252, .35); box-shadow: 0 10px 40px rgba(10, 60, 160, .18); }
.seccion-destacada h2 { background: linear-gradient(90deg, #64C6FC, #A55BF2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.destacado-juego { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.destacado-steam { align-self: stretch; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 8px; border-radius: 999px; background: rgba(23, 26, 33, .85); color: #C7D5E0; border: 1px solid rgba(102, 192, 244, .45); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.destacado-steam:hover { background: #1B2838; color: #fff; border-color: #66C0F4; }
html.liquid:not([data-tema="oscuro"]) .destacado-steam { background: #1B2838; color: #fff; }
@media (max-width: 760px) { .seccion-destacada { padding: 14px 12px 16px; border-radius: 20px; } .destacado-steam { font-size: 10.5px; padding: 5px 4px; } }
.destacado-steam .corto { display: none; }
@media (max-width: 760px) { .destacado-steam .largo { display: none; } .destacado-steam .corto { display: inline; } }
.destacado-juego > .ficha-mini { flex: 1; }
/* Plataformas anunciadas de cada juego destacado */
.destacado-plat { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.destacado-plat span { font-size: 11.5px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--texto); white-space: nowrap; }
html.liquid:not([data-tema="oscuro"]) .destacado-plat span { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .1); }
@media (max-width: 760px) { .destacado-plat { gap: 3px; } .destacado-plat span { font-size: 9px; padding: 3px 4px; } }
.destacado-juego > .ficha-mini { flex: none; }
.destacado-juego .destacado-plat { flex: 1; align-content: flex-start; }
.destacado-juego .ficha-mini .meta { min-height: 24px; }
/* Listas dentro del menú del botón derecho */
.menu-juego { max-height: calc(100vh - 16px); overflow-y: auto; }
.mj-listas-boton { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde-control); background: var(--control); color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mj-listas-boton:hover { border-color: var(--acento); }
.mj-listas-boton[aria-expanded="true"] { border-color: var(--acento); }
.mj-listas.panel-listas { max-width: none; padding: 10px; gap: 8px; border-radius: 14px; }
.mj-listas .listas-check { max-height: 200px; overflow-y: auto; }
.mj-listas .lista-check { font-size: 14px; }