/* =========================================================
   PLAYER 2 — MUNDO: fondos, pantalla de carga y equipo
   ========================================================= */

:root {
    --m-anemo-a: #1f7f73;
    --m-anemo-b: #74dcc4;
    --m-electro-a: #4b2f8f;
    --m-electro-b: #c49bff;
    --m-oro-a: #9a5f30;
    --m-oro-b: #ecb459;
    --m-luna-a: #3c4a7e;
    --m-luna-b: #c9d4ff;
}

/* ---------- Fondos ---------- */

.m-fondo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--fondo, #0b1425);
}

.m-fondo-capa {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.3s ease;
    animation: m-respirar 38s ease-in-out infinite alternate;
}

.m-fondo-capa.m-activa {
    opacity: 1;
}

/* Velo para que el texto siempre se lea bien */
.m-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse at 50% 0%, rgba(255, 220, 160, 0.12), transparent 55%),
            linear-gradient(to bottom, rgba(8, 17, 33, 0.25), rgba(8, 17, 33, 0.6) 55%, rgba(8, 17, 33, 0.92));
}

/* El fondo ahora lo pone .m-fondo */
body.m-con-fondos #contenido-web,
body.m-con-fondos #contenido-web.portada {
    background: transparent;
}

/* Paneles un poco translúcidos para que se vea el paisaje detrás */
body.m-con-fondos #menu-misiones {
    background: linear-gradient(135deg, rgba(24, 36, 58, 0.86), rgba(10, 18, 34, 0.9));
    backdrop-filter: blur(6px);
}

body.m-con-fondos .tarjeta-recuerdo {
    background: rgba(19, 32, 52, 0.82);
    backdrop-filter: blur(6px);
}

@keyframes m-respirar {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.07) translate(-1.2%, -1%); }
}

/* ---------- Pantalla de carga ---------- */

.m-carga {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 20px;
    color: #4a4f5c;
    background: radial-gradient(ellipse at center, #ffffff 0%, #f3efe6 60%, #e4ddcf 100%);
    font-family: var(--f-ui, Arial, sans-serif);
    transition: opacity 0.7s ease;
}

.m-carga.m-fuera {
    opacity: 0;
    pointer-events: none;
}

.m-carga-fila {
    display: flex;
    gap: clamp(10px, 3vw, 22px);
}

.m-carga-icono {
    width: clamp(26px, 7vw, 40px);
    height: clamp(26px, 7vw, 40px);
    color: #c9c3b6;
    animation: m-encender 0.5s ease forwards;
}

.m-carga-icono svg {
    width: 100%;
    height: 100%;
}

.m-carga-icono.m-oro { --m-color: #d9a441; }
.m-carga-icono.m-anemo { --m-color: #3fbfa6; }
.m-carga-icono.m-luna { --m-color: #8a9be0; }
.m-carga-icono.m-electro { --m-color: #a874f0; }

.m-carga-texto {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.m-carga-consejo {
    position: absolute;
    bottom: 7vh;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 20px;
    color: #8a8478;
    font-size: 13px;
    text-align: center;
}

@keyframes m-encender {
    to {
        color: var(--m-color);
        filter: drop-shadow(0 0 6px var(--m-color));
    }
}

/* ---------- Equipo ---------- */

.m-equipo {
    max-width: 650px;
    margin: 0 auto 30px;
}

.m-equipo .etiqueta-mision {
    margin: 0;
    color: var(--dorado-claro);
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    text-align: center;
}

.m-equipo-titulo {
    margin: 8px 0 18px;
    font-family: var(--f-titulo, Georgia, serif);
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
}

.m-equipo-rejilla {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.m-miembro {
    --a: var(--m-oro-a);
    --b: var(--m-oro-b);
    position: relative;
    overflow: hidden;
    color: #3b4255;
    background: #ece5d8;
    border-radius: 6px 6px 24px 6px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    opacity: 0;
    animation: aparecer 0.5s ease forwards;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.m-miembro:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 26px color-mix(in srgb, var(--b) 60%, transparent);
}

.m-anemo { --a: var(--m-anemo-a); --b: var(--m-anemo-b); }
.m-electro { --a: var(--m-electro-a); --b: var(--m-electro-b); }
.m-oro { --a: var(--m-oro-a); --b: var(--m-oro-b); }
.m-luna { --a: var(--m-luna-a); --b: var(--m-luna-b); }

.m-miembro-retrato {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 3.6;
    overflow: hidden;
    background:
            radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--b) 70%, white), transparent 70%),
            linear-gradient(180deg, var(--a), var(--b));
}

.m-miembro-retrato img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-emblema-grande {
    width: 52%;
    color: rgba(255, 255, 255, 0.88);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.m-emblema-grande svg {
    width: 100%;
    height: auto;
    display: block;
}

.m-con-imagen .m-emblema-grande {
    display: none;
}

.m-emblema {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 4px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.m-emblema svg {
    width: 100%;
    height: 100%;
}

.m-miembro-pie {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px 12px;
    text-align: center;
}

.m-miembro-estrellas {
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    color: #ffcc32;
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.m-miembro-nombre {
    font-size: 15px;
    font-weight: 800;
}

.m-miembro-texto {
    color: #6b6457;
    font-size: 11px;
    line-height: 1.35;
}

@media (max-width: 600px) {
    .m-equipo-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .m-fondo-capa {
        animation: none;
    }
}


/* =========================================================
   "CERRAR SESIÓN" ESCONDIDO
   ========================================================= */

body.m-salir-oculto #boton-cerrar-sesion {
    display: none;
}

body.m-salir-oculto.m-salir-visible #boton-cerrar-sesion {
    display: block;
}

/* =========================================================
   AO HARU RIDE — cortinilla de último episodio
   ========================================================= */

.m-eyecatch {
    position: fixed;
    inset: 0;
    z-index: 4600;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 20px;
    cursor: pointer;
    background: linear-gradient(180deg, #6fbff0 0%, #a9dbf7 45%, #e9f6fd 80%, #fff7f2 100%);
    animation: g-entrar 0.6s ease;
    transition: opacity 0.6s ease;
}

.m-eyecatch.m-fuera {
    opacity: 0;
    pointer-events: none;
}

.m-nube {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    filter: blur(18px);
    animation: m-nube 18s linear infinite alternate;
}

.m-nube1 { top: 12%; left: -10%; width: 55vw; height: 16vh; }
.m-nube2 { top: 30%; right: -15%; width: 50vw; height: 14vh; animation-duration: 22s; }
.m-nube3 { bottom: 8%; left: 20%; width: 70vw; height: 20vh; opacity: 0.7; animation-duration: 26s; }

@keyframes m-nube {
    to { transform: translateX(8vw); }
}

.m-eyecatch-caja {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #24507a;
    animation: m-subir 1s cubic-bezier(.2, .8, .2, 1) 0.2s both;
}

.m-eyecatch-etiqueta {
    display: inline-block;
    padding: 5px 14px;
    color: #fff;
    background: #2f7fc0;
    border-radius: 999px;
    font-family: var(--f-ui, Arial, sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.m-eyecatch-titulo {
    margin: 16px 0 0;
    color: #fff;
    font-family: var(--f-libro, Georgia, serif);
    font-size: clamp(30px, 7vw, 58px);
    font-style: italic;
    font-weight: 600;
    text-shadow: 0 2px 18px rgba(36, 80, 122, 0.45);
}

.m-eyecatch-linea {
    width: min(60vw, 280px);
    height: 1px;
    margin: 18px auto;
    background: linear-gradient(90deg, transparent, #2f7fc0, transparent);
}

.m-eyecatch-serie {
    margin: 0;
    font-family: var(--f-titulo, Georgia, serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.m-eyecatch-texto {
    margin: 8px 0 0;
    color: #3a6890;
    font-family: var(--f-ui, Arial, sans-serif);
    font-size: 15px;
    font-weight: 700;
}

@keyframes m-subir {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pétalos */

.m-petalos {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.m-petalo {
    position: absolute;
    top: -20px;
    width: 12px;
    height: 9px;
    border-radius: 12px 1px 12px 1px;
    background: linear-gradient(135deg, #ffe3ec, #f6a9c1);
    opacity: 0.9;
    transform: scale(var(--escala, 1));
    animation: m-caer-petalo linear infinite;
}

@keyframes m-caer-petalo {
    0% { transform: translate(0, -20px) rotate(0deg) scale(var(--escala, 1)); }
    50% { transform: translate(calc(var(--deriva) * 0.5), 50vh) rotate(200deg) scale(var(--escala, 1)); }
    100% { transform: translate(var(--deriva), 105vh) rotate(420deg) scale(var(--escala, 1)); }
}

/* En el libro de la misión, solo cuando es la de Ao Haru Ride */

#menu-misiones #detalle-mision .m-petalos-libro {
    display: none;
}

#menu-misiones #detalle-mision.m-aoharu .m-petalos-libro {
    display: block;
    opacity: 0.55;
}

#menu-misiones #detalle-mision.m-aoharu {
    background:
            radial-gradient(ellipse at 50% 0%, rgba(140, 200, 245, 0.35), transparent 55%),
            radial-gradient(ellipse at 50% 100%, rgba(246, 169, 193, 0.15), transparent 70%),
            #ece5d8;
}

#menu-misiones #detalle-mision > :not(.m-petalos):not(.g-esquina) {
    position: relative;
    z-index: 2;
}

/* Logro oculto */

.m-logro {
    position: fixed;
    top: 22px;
    left: 50%;
    z-index: 6000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 92vw;
    padding: 10px 20px 10px 10px;
    color: #ece5d8;
    background: linear-gradient(90deg, rgba(20, 26, 44, 0.95), rgba(40, 48, 70, 0.92));
    border: 1px solid rgba(232, 199, 125, 0.6);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
    font-family: var(--f-ui, Arial, sans-serif);
    animation: m-logro 4.6s ease forwards;
}

.m-logro-icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: linear-gradient(135deg, #f3d27c, #c48a32);
    border-radius: 50%;
    font-size: 18px;
}

.m-logro-textos {
    display: flex;
    flex-direction: column;
}

.m-logro-etiqueta {
    color: #e8c77d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.m-logro strong {
    font-size: 14px;
}

@keyframes m-logro {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    85% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}

@media (prefers-reduced-motion: reduce) {
    .m-nube { animation: none; }
}


/* =========================================================
   TÍTULO "ENCIENDE LA RADIO" EN LA PORTADA
   ========================================================= */

h1.m-titulo-radio {
    font-size: clamp(40px, 9.5vw, 96px);
    line-height: 1.05;
    letter-spacing: 3px;
}

h1.m-titulo-radio span {
    display: block;
}

@media (max-width: 600px) {
    h1.m-titulo-radio {
        letter-spacing: 1px;
    }
}