/* 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: static; }
  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)); }