@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@500;600;700;800;900&display=swap');


/* =========================================================
   BASE
========================================================= */

:root {
    --blue: #20caff;
    --blue-dark: #0069c5;

    --yellow: #ffe536;
    --orange: #ff9e00;

    --red: #ff3d63;
    --red-dark: #a40d31;

    --purple: #6236d5;
    --purple-dark: #24105b;

    --dark: #0c0224;
    --white: #ffffff;
}


* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;

    -webkit-tap-highlight-color: transparent;
}


html {
    width: 100%;

    overflow-x: hidden;

    scroll-behavior: smooth;

    background: var(--dark);
}


body {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;

    color: white;

    font-family: "Montserrat", sans-serif;

    background: #120430;
}


body.locked {
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
}


img {
    display: block;

    max-width: 100%;
}


button {
    border: 0;

    font-family: inherit;

    -webkit-user-select: none;
    user-select: none;
}


/* =========================================================
   FONDO GENERAL
========================================================= */

.background {
    position: fixed;

    inset: 0;

    z-index: -20;

    width: 100%;
    height: 100%;

    background-image:
        url("assets/fondo_brawl.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.background-overlay {
    position: fixed;

    inset: 0;

    z-index: -19;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(14, 3, 44, .30),
            rgba(34, 10, 86, .60) 38%,
            rgba(10, 2, 31, .94) 100%
        );
}


/* =========================================================
   PARTÍCULAS
========================================================= */

.particles {
    position: fixed;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


.particle {
    position: absolute;

    bottom: -20px;

    border-radius: 50%;

    opacity: .6;

    animation:
        particleFloat
        linear
        infinite;
}


@keyframes particleFloat {

    0% {
        opacity: 0;

        transform:
            translateY(0)
            rotate(0deg);
    }

    15% {
        opacity: .7;
    }

    85% {
        opacity: .5;
    }

    100% {
        opacity: 0;

        transform:
            translateY(-110vh)
            rotate(360deg);
    }
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    padding:
        max(16px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));

    overflow: hidden;

    background:
        linear-gradient(
            rgba(10, 2, 31, .42),
            rgba(18, 4, 48, .68)
        ),
        radial-gradient(
            circle at 50% 42%,
            rgba(90, 50, 203, .20) 0%,
            rgba(42, 16, 110, .35) 45%,
            rgba(11, 2, 31, .70) 100%
        ),
        url("assets/fondo_brawl.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.intro-rays {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(150vw, 680px);
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    opacity: .12;

    background:
        repeating-conic-gradient(
            rgba(255,255,255,.75) 0deg 5deg,
            transparent 5deg 16deg
        );

    animation:
        introRays
        35s
        linear
        infinite;
}


@keyframes introRays {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


.intro-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(105vw, 480px);
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(53, 205, 255, .37),
            transparent 68%
        );

    animation:
        introGlow
        2s
        ease-in-out
        infinite
        alternate;
}


@keyframes introGlow {

    from {
        opacity: .55;

        transform:
            translate(-50%, -50%)
            scale(.9);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}


.intro-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 410px;

    text-align: center;
}


.intro-logo {
    width: min(145px, 38vw);

    max-height: 82px;

    margin:
        0
        auto
        18px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 6px 8px
            rgba(0,0,0,.45)
        );
}


.mission-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        8px
        12px;

    border:
        3px
        solid
        white;

    border-radius: 9px;

    color: #372000;

    background:
        linear-gradient(
            #fff05a,
            #ffa600
        );

    box-shadow:
        0 5px 0 #984800;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            .62rem,
            2.8vw,
            .76rem
        );
}


.intro-small {
    margin-top: 24px;

    opacity: .75;

    font-size:
        clamp(
            .56rem,
            2.5vw,
            .7rem
        );

    font-weight: 900;

    letter-spacing: 1.8px;
}


.intro-title {
    margin-top: 9px;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            2.8rem,
            14vw,
            4.5rem
        );

    line-height: .88;

    text-shadow:
        0 4px 0 #25105a,
        0 10px 18px rgba(0,0,0,.5);
}


.intro-title span {
    display: block;

    margin-bottom: 8px;

    font-size: .34em;

    letter-spacing: 4px;
}


.intro-description {
    width: min(90%, 340px);

    margin:
        22px
        auto
        0;

    font-size:
        clamp(
            .82rem,
            3.7vw,
            1rem
        );

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   BOTÓN INICIAL
========================================================= */

.start-button {
    position: relative;

    width: min(100%, 310px);

    margin-top: 28px;

    overflow: hidden;

    cursor: pointer;

    border:
        3px
        solid
        white;

    border-radius: 13px;

    background:
        linear-gradient(
            #fff765,
            #ffc410 58%,
            #ff9900
        );

    box-shadow:
        0 7px 0 #9c4800,
        0 14px 25px rgba(0,0,0,.35);

    animation:
        buttonPulse
        1.5s
        infinite;
}


.button-content {
    position: relative;

    z-index: 2;

    display: block;

    padding:
        16px
        10px;

    color: #392100;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            .78rem,
            3.5vw,
            .95rem
        );
}


.button-shine {
    position: absolute;

    top: 0;
    left: -80%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.85),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        buttonShine
        2.3s
        infinite;
}


@keyframes buttonShine {

    0% {
        left: -80%;
    }

    55%,
    100% {
        left: 140%;
    }
}


@keyframes buttonPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}


.sound-warning {
    margin-top: 18px;

    opacity: .58;

    font-size: .67rem;
}


/* =========================================================
   SALIDA INTRO
========================================================= */

.intro.intro-hide {
    animation:
        introHide
        .6s
        forwards;
}


@keyframes introHide {

    to {
        opacity: 0;

        transform: scale(1.12);

        visibility: hidden;
    }
}


/* =========================================================
   HISTORIA
========================================================= */

.story-overlay {
    position: fixed;

    inset: 0;

    z-index: 950;

    display: none;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    padding:
        max(12px, env(safe-area-inset-top))
        14px
        max(14px, env(safe-area-inset-bottom));

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            #4e29b6,
            #16063e 66%,
            #09001b
        );
}


.story-overlay.active {
    display: flex;
}


.story-overlay.story-finish {
    animation:
        storyFinish
        .65s
        forwards;
}


@keyframes storyFinish {

    to {
        opacity: 0;

        transform: scale(1.08);

        visibility: hidden;
    }
}


/* =========================================================
   DIÁLOGO
========================================================= */

.dialogue-stage {
    width: 100%;
    max-width: 430px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;
}


.dialogue-top {
    align-self: center;

    margin-bottom: 7px;

    padding:
        6px
        11px;

    border:
        1px
        solid
        rgba(255,255,255,.16);

    border-radius: 50px;

    background:
        rgba(255,255,255,.07);

    font-size: .54rem;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.dialogue-character-zone {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    width: 100%;

    height: min(43dvh, 330px);

    min-height: 210px;
}


.dialogue-glow {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: min(80vw, 300px);

    aspect-ratio: 1;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(43, 210, 255, .40),
            transparent 68%
        );
}


.dialogue-image {
    position: relative;

    z-index: 3;

    width: min(76vw, 290px);

    height: 100%;

    object-fit: contain;

    object-position: center bottom;

    filter:
        drop-shadow(
            0 13px 12px
            rgba(0,0,0,.55)
        );

    transition:
        opacity .18s,
        transform .18s;
}


.dialogue-image.change {
    opacity: 0;

    transform:
        translateY(10px)
        scale(.9);
}


.dialogue-box {
    position: relative;

    z-index: 5;

    width: 100%;

    min-height: 128px;

    margin-top: -2px;

    padding:
        25px
        16px
        12px;

    border:
        3px
        solid
        white;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #4924aa,
            #19074e
        );

    box-shadow:
        0 6px 0 #080019,
        0 14px 24px rgba(0,0,0,.4);

    text-align: left;
}


.dialogue-speaker {
    position: absolute;

    top: -16px;
    left: 12px;

    padding:
        6px
        14px;

    border:
        3px
        solid
        white;

    border-radius: 8px;

    background:
        linear-gradient(
            #21c9ff,
            #006ac1
        );

    box-shadow:
        0 4px 0 #00457f;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .68rem;
}


.dialogue-speaker.lawrie {
    background:
        linear-gradient(
            #ff4c6e,
            #b6103b
        );

    box-shadow:
        0 4px 0 #710824;
}


.dialogue-box p {
    min-height: 55px;

    font-size:
        clamp(
            .82rem,
            3.6vw,
            .98rem
        );

    font-weight: 700;

    line-height: 1.48;
}


.dialogue-continue {
    display: flex;

    justify-content: flex-end;

    gap: 5px;

    margin-top: 7px;

    opacity: .48;

    font-size: .48rem;

    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================================
   RECOMPENSA
========================================================= */

.reward-stage {
    display: none;

    width: 100%;
    max-width: 410px;

    text-align: center;
}


.reward-stage.active {
    display: block;

    animation:
        rewardIn
        .55s
        ease-out;
}


@keyframes rewardIn {

    from {
        opacity: 0;

        transform: scale(.8);
    }

    to {
        opacity: 1;

        transform: scale(1);
    }
}


.reward-small {
    opacity: .68;

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.reward-stage h2 {
    margin-top: 8px;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            2.3rem,
            11vw,
            4rem
        );

    line-height: .9;

    text-shadow:
        0 4px 0 #25105b;
}


.reward-stage h2 span {
    display: block;

    color: var(--yellow);
}


.reward-description {
    width: min(90%, 330px);

    margin:
        17px
        auto
        0;

    opacity: .78;

    font-size: .82rem;

    line-height: 1.45;
}


/* =========================================================
   CAJA
========================================================= */

.reward-box {
    position: relative;

    display: block;

    width: 165px;
    height: 175px;

    margin:
        24px
        auto
        15px;

    cursor: pointer;

    background: transparent;

    animation:
        rewardFloat
        1.5s
        ease-in-out
        infinite;
}


@keyframes rewardFloat {

    50% {
        transform:
            translateY(-8px);
    }
}


.box-glow {
    position: absolute;

    inset: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,230,50,.5),
            transparent 68%
        );
}


.box-body {
    position: absolute;

    left: 17px;
    bottom: 23px;

    width: 131px;
    height: 89px;

    border:
        5px
        solid
        white;

    border-radius:
        15px
        15px
        22px
        22px;

    background:
        linear-gradient(
            135deg,
            #754be7,
            #3a1a99
        );

    box-shadow:
        0 8px 0 #190b4c;
}


.box-lid {
    position: absolute;

    z-index: 4;

    top: 37px;
    left: 10px;

    width: 145px;
    height: 54px;

    border:
        5px
        solid
        white;

    border-radius:
        18px
        18px
        10px
        10px;

    background:
        linear-gradient(
            #fff15a,
            #ffa800
        );

    box-shadow:
        0 5px 0 #914400;

    transform-origin:
        20px
        100%;

    transition:
        transform .45s;
}


.box-lid-line {
    position: absolute;

    left: 18%;
    bottom: 7px;

    width: 64%;
    height: 4px;

    border-radius: 10px;

    background:
        rgba(100,49,0,.32);
}


.box-symbol {
    position: absolute;

    top: 19px;
    left: 50%;

    z-index: 7;

    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    transform:
        translateX(-50%);

    border:
        4px
        solid
        white;

    border-radius: 50%;

    background:
        linear-gradient(
            #ffef4c,
            #ff9500
        );

    color: #4b2500;

    font-size: 1.5rem;
}


.box-shadow {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 115px;
    height: 18px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(0,0,0,.45);

    filter: blur(6px);
}


.reward-box.opening {
    animation:
        boxShake
        .5s;
}


.reward-box.opening .box-lid {
    transform:
        translateY(-38px)
        rotate(-22deg);
}


@keyframes boxShake {

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }
}


.reward-touch {
    opacity: .7;

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .8px;
}


/* =========================================================
   CONTENIDO
========================================================= */

.birthday-content {
    position: relative;

    z-index: 5;

    width: 100%;

    overflow-x: hidden;

    opacity: 0;

    visibility: hidden;
}


.birthday-content.active {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        max(42px, env(safe-area-inset-top))
        15px
        65px;

    overflow: hidden;

    text-align: center;
}


.hero-light {
    position: absolute;

    top: 15%;
    left: 50%;

    width: min(105vw, 480px);
    aspect-ratio: 1;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40,201,255,.34),
            transparent 68%
        );
}


.hero-rays {
    position: absolute;

    top: 38%;
    left: 50%;

    width: min(115vw, 500px);
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    opacity: .08;

    background:
        repeating-conic-gradient(
            white 0deg 5deg,
            transparent 5deg 18deg
        );

    animation:
        heroRotate
        28s
        linear
        infinite;
}


@keyframes heroRotate {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


.brawl-logo {
    position: relative;

    z-index: 4;

    width: min(130px, 34vw);

    max-height: 75px;

    margin-bottom: 18px;

    object-fit: contain;
}


.unlock-text {
    position: relative;

    z-index: 5;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            .58rem,
            2.7vw,
            .75rem
        );

    letter-spacing: 1.8px;
}


/* =========================================================
   NIVEL
========================================================= */

.level-wrapper {
    position: relative;

    z-index: 5;

    width: 100%;

    margin-top: 17px;
}


.level {
    position: relative;

    display: inline-block;

    cursor: pointer;

    background: transparent;
}


.level-rays {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(78vw, 320px);
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    opacity: .22;

    background:
        repeating-conic-gradient(
            rgba(255,229,54,.85) 0deg 7deg,
            transparent 7deg 20deg
        );

    animation:
        levelRotate
        18s
        linear
        infinite;
}


@keyframes levelRotate {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


.level-14 {
    display: block;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            7.2rem,
            35vw,
            11rem
        );

    line-height: .77;

    letter-spacing: -7px;

    background:
        linear-gradient(
            #fff987,
            #ffe131 40%,
            #ff9b00 75%,
            #ff6900
        );

    background-clip: text;

    -webkit-background-clip: text;

    color: transparent;

    -webkit-text-stroke:
        2px
        rgba(255,255,255,.92);

    filter:
        drop-shadow(
            0 7px 0 #973700
        )
        drop-shadow(
            0 12px 12px rgba(0,0,0,.45)
        );
}


.level-label {
    position: absolute;

    left: 50%;
    bottom: -25px;

    min-width: 105px;

    transform:
        translateX(-50%);

    padding:
        6px
        15px;

    border:
        3px
        solid
        white;

    border-radius: 16px;

    color: white;

    background:
        linear-gradient(
            #ff4d6c,
            #d1123c
        );

    box-shadow:
        0 4px 0 #790820;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .7rem;

    letter-spacing: 1.7px;
}


/* =========================================================
   NOMBRE PERSONALIZADO
========================================================= */

.evenie-logo-wrapper {
    position: relative;

    z-index: 6;

    width: 100%;

    margin-top: 43px;
}


.evenie-logo {
    width: min(96vw, 460px);

    max-height: 205px;

    margin: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 9px 12px
            rgba(0,0,0,.5)
        );
}


.birthday-date {
    position: relative;

    z-index: 6;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding:
        7px
        13px;

    border:
        1px
        solid
        rgba(255,255,255,.2);

    border-radius: 50px;

    background:
        rgba(11,3,38,.58);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .63rem;

    letter-spacing: 1px;
}


.birthday-date span {
    color: var(--yellow);
}


.hero-message {
    position: relative;

    z-index: 6;

    margin-top: 13px;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .9rem;

    letter-spacing: 1.5px;
}


.scroll-indicator {
    position: absolute;

    bottom: 13px;
    left: 50%;

    z-index: 7;

    transform:
        translateX(-50%);

    opacity: .55;

    font-size: .5rem;

    font-weight: 900;

    letter-spacing: 2px;
}


.scroll-arrow {
    margin-top: 2px;

    font-size: 1.3rem;

    animation:
        scrollDown
        1s
        infinite;
}


@keyframes scrollDown {

    50% {
        transform: translateY(5px);
    }
}


/* =========================================================
   PERSONAJES
========================================================= */

.character-section {
    position: relative;

    width: 100%;

    min-height: 80vh;

    padding:
        65px
        10px
        70px;

    overflow: hidden;
}


.section-title {
    position: relative;

    z-index: 4;

    text-align: center;
}


.mini-title {
    opacity: .7;

    font-size: .55rem;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.section-title h2 {
    margin-top: 9px;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            2rem,
            9vw,
            3.7rem
        );

    line-height: .92;

    text-shadow:
        0 4px 0 #251058;
}


.section-title h2 span {
    color: var(--yellow);
}


.characters-wrapper {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        30px
        minmax(0, 1fr);

    align-items: end;

    width: 100%;
    max-width: 600px;

    margin:
        22px
        auto
        0;

    min-height: 320px;
}


.character-card {
    position: relative;

    width: 100%;

    min-width: 0;

    height: 315px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    cursor: pointer;
}


.character-light {
    position: absolute;

    left: 50%;
    bottom: 25px;

    width: 105%;
    aspect-ratio: 1;

    transform:
        translateX(-50%);

    border-radius: 50%;

    opacity: .5;

    filter: blur(18px);
}


.blue-light {
    background:
        radial-gradient(
            circle,
            rgba(0,203,255,.72),
            transparent 68%
        );
}


.red-light {
    background:
        radial-gradient(
            circle,
            rgba(255,40,90,.67),
            transparent 68%
        );
}


.character-circle {
    position: absolute;

    left: 50%;
    bottom: 45px;

    width: 90%;
    aspect-ratio: 1;

    transform:
        translateX(-50%);

    border-radius: 50%;

    opacity: .32;
}


.blue-circle {
    background:
        radial-gradient(
            circle,
            #2fd7ff,
            #0058db 66%,
            transparent 68%
        );
}


.red-circle {
    background:
        radial-gradient(
            circle,
            #ff5270,
            #b7103d 66%,
            transparent 68%
        );
}


.character-image {
    position: relative;

    z-index: 5;

    width: 100%;

    height: 285px;

    object-fit: contain;

    object-position: center bottom;

    filter:
        drop-shadow(
            0 15px 10px
            rgba(0,0,0,.55)
        );
}


.larry-card {
    transform:
        translateX(-120%);
}


.lawrie-card {
    transform:
        translateX(120%);
}


.larry-card.enter {
    animation:
        larryEnter
        .9s
        cubic-bezier(.2,1.25,.3,1)
        forwards;
}


.lawrie-card.enter {
    animation:
        lawrieEnter
        .9s
        cubic-bezier(.2,1.25,.3,1)
        forwards;
}


@keyframes larryEnter {

    to {
        transform:
            translateX(0)
            rotate(-3deg);
    }
}


@keyframes lawrieEnter {

    to {
        transform:
            translateX(0)
            rotate(3deg);
    }
}


.character-name {
    position: absolute;

    left: 50%;
    bottom: 0;

    z-index: 8;

    transform:
        translateX(-50%);

    min-width: 88px;

    padding:
        6px
        8px;

    border:
        3px
        solid
        white;

    border-radius: 8px;

    text-align: center;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            .6rem,
            3vw,
            .78rem
        );

    white-space: nowrap;
}


.larry-name {
    background:
        linear-gradient(
            #20caff,
            #006bc3
        );

    box-shadow:
        0 4px 0 #004884;
}


.lawrie-name {
    background:
        linear-gradient(
            #ff4c6b,
            #bb103b
        );

    box-shadow:
        0 4px 0 #750826;
}


.character-plus {
    align-self: center;

    z-index: 10;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 2rem;

    text-align: center;

    text-shadow:
        0 3px 0 #913700;
}


.characters-message {
    width: min(90%, 380px);

    margin:
        27px
        auto
        0;

    text-align: center;

    font-size: .8rem;

    font-weight: 800;

    line-height: 1.5;
}


/* =========================================================
   MENSAJE DE CUMPLEAÑOS
========================================================= */

.birthday-message-section {
    width: 100%;

    padding:
        65px
        14px;
}


.birthday-card {
    position: relative;

    width: 100%;
    max-width: 620px;

    margin: auto;

    padding:
        35px
        18px;

    overflow: hidden;

    border:
        3px
        solid
        white;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(76,41,179,.94),
            rgba(26,8,73,.97)
        );

    box-shadow:
        0 8px 0 #09001e,
        0 20px 35px rgba(0,0,0,.4);

    text-align: center;
}


.card-glow {
    position: absolute;

    top: -100px;
    left: 50%;

    width: 280px;
    height: 220px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(51,205,255,.2);

    filter: blur(35px);
}


.stars {
    position: relative;

    color: var(--yellow);

    font-size: 1.25rem;

    letter-spacing: 6px;
}


.card-small-title {
    position: relative;

    margin-top: 17px !important;

    opacity: .67;

    font-size: .55rem !important;

    font-weight: 900;

    letter-spacing: 2px;
}


.birthday-card h2 {
    position: relative;

    margin-top: 6px;

    color: #4bdcff;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            2.4rem,
            12vw,
            4.5rem
        );

    line-height: 1;

    text-shadow:
        0 4px 0 #07559b;
}


.birthday-card h3 {
    position: relative;

    margin-top: 8px;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            .78rem,
            3.7vw,
            1.2rem
        );

    line-height: 1.3;
}


.message-divider {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin:
        22px
        auto;
}


.message-divider span {
    width: 50px;
    height: 2px;

    background:
        rgba(255,255,255,.5);
}


.birthday-card p {
    position: relative;

    margin-top: 17px;

    font-size:
        clamp(
            .84rem,
            3.8vw,
            1rem
        );

    line-height: 1.65;
}


.main-message {
    margin-top: 0 !important;
}


.main-message strong {
    display: block;

    margin-top: 10px;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 1.05rem;
}


.highlight-message {
    position: relative;

    margin-top: 24px;

    padding:
        20px
        14px;

    border:
        1px
        solid
        rgba(255,255,255,.16);

    border-radius: 15px;

    background:
        rgba(255,255,255,.06);
}


.highlight-message > span {
    display: block;

    font-size: 1.9rem;
}


.highlight-message p {
    margin-top: 8px;
}


.highlight-message strong {
    display: block;

    margin-top: 15px;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .9rem;
}


/* =========================================================
   REGISTRO DE CUMPLEAÑOS
========================================================= */

.battle-record-section {
    width: 100%;
    padding: 60px 12px 70px;
}

.battle-record {
    width: 100%;
    max-width: 650px;
    margin: auto;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 5%, rgba(84,200,255,.22), transparent 38%),
        linear-gradient(180deg, #715e94, #453767);
    box-shadow:
        0 8px 0 #160b36,
        0 22px 38px rgba(0,0,0,.42);
}

.battle-record-title {
    padding: 13px 10px 11px;
    border-bottom: 3px solid rgba(25,13,57,.75);
    background: #1265d1;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.82rem, 4.2vw, 1.35rem);
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 3px 0 #073478;
}

.battle-result-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 13px 12px;
    border-bottom: 2px solid rgba(28,15,59,.55);
    background: rgba(24,13,56,.22);
}

.battle-result-row > div:first-child {
    min-width: 0;
}

.battle-mode {
    display: block;
    opacity: .7;
    font-size: clamp(.42rem, 2.2vw, .62rem);
    font-weight: 900;
    letter-spacing: 1px;
}

.battle-result-row > div:first-child strong {
    display: block;
    margin-top: 3px;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.72rem, 3.4vw, 1.05rem);
}

.battle-victory {
    color: #43f153;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.92rem, 5vw, 1.6rem);
    -webkit-text-stroke: 1px #06320a;
    text-shadow: 0 3px 0 #096719;
}

.battle-record.visible .battle-victory {
    animation: battleVictoryIn .65s cubic-bezier(.2,1.5,.4,1);
}

@keyframes battleVictoryIn {
    0% { opacity: 0; transform: scale(.35) rotate(-6deg); }
    70% { transform: scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: scale(1); }
}

.battle-trophies {
    white-space: nowrap;
    color: var(--yellow);
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.75rem, 3.5vw, 1.1rem);
}

.battle-team {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: end;
    gap: 7px;
    padding: 26px 10px 18px;
}

.battle-player {
    min-width: 0;
    text-align: center;
}

.battle-avatar {
    position: relative;
    display: grid;
    place-items: end center;
    width: 100%;
    aspect-ratio: .92;
    overflow: hidden;
    border: 3px solid #13092f;
    border-radius: 9px;
    box-shadow: 0 5px 0 rgba(15,5,37,.75);
}

.battle-avatar::after {
    content: "NIVEL 14";
    position: absolute;
    right: 4px;
    bottom: 3px;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(0,0,0,.72);
    font-size: clamp(.35rem, 1.7vw, .52rem);
    font-weight: 900;
}

.battle-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.blue-player { background: linear-gradient(#21bff4, #0754bd); }
.red-player { background: linear-gradient(#ff5c79, #a70e3b); }
.evenie-player { background: linear-gradient(#ffdb35, #d63b19); }

.evenie-player img {
    width: 94%;
    height: auto;
    margin: auto;
}

.battle-player > strong {
    display: block;
    margin-top: 9px;
    overflow: hidden;
    color: white;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.58rem, 3vw, .9rem);
    text-overflow: ellipsis;
}

.battle-player > span {
    display: block;
    margin-top: 2px;
    color: #d9cff1;
    font-size: clamp(.36rem, 1.8vw, .55rem);
    font-weight: 900;
}

.star-player {
    position: relative;
    transform: translateY(-7px);
}

.star-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 4;
    width: 108%;
    transform: translateX(-50%);
    padding: 5px 3px;
    border: 2px solid #8e3a00;
    border-radius: 5px;
    color: #482300;
    background: linear-gradient(#fff15a, #ff9d00);
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.48rem, 2.6vw, .75rem);
    box-shadow: 0 3px 0 #773000;
}

.battle-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
    padding: 0 10px 17px;
}

.battle-stats div {
    min-width: 0;
    padding: 10px 5px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: rgba(18,7,47,.38);
    text-align: center;
}

.battle-stats span,
.battle-stats strong {
    display: block;
}

.battle-stats span {
    min-height: 20px;
    opacity: .66;
    font-size: clamp(.36rem, 1.7vw, .52rem);
    font-weight: 900;
}

.battle-stats strong {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: var(--yellow);
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.65rem, 3vw, 1rem);
}

.battle-actions {
    display: block;
    padding: 13px 10px 16px;
    background: rgba(18,7,47,.3);
}

.battle-actions button {
    width: 100%;
    padding: 12px 7px;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 8px;
    color: white;
    background: linear-gradient(#318cff, #0862d8);
    box-shadow: 0 4px 0 #053b88;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(.52rem, 2.5vw, .74rem);
}

.battle-actions button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #071a4c;
}


/* =========================================================
   MENSAJE PERSONAL
========================================================= */

.personal-section {
    width: 100%;

    padding:
        55px
        14px
        70px;
}


.personal-card {
    width: 100%;
    max-width: 580px;

    margin: auto;

    padding:
        34px
        18px;

    border:
        2px
        solid
        rgba(255,255,255,.55);

    border-radius: 20px;

    background:
        rgba(17,5,51,.82);

    box-shadow:
        0 18px 35px rgba(0,0,0,.36);

    text-align: center;
}


.personal-heart {
    font-size: 2.8rem;

    animation:
        heartBeat
        1.4s
        infinite;
}


@keyframes heartBeat {

    20% {
        transform: scale(1.16);
    }

    40% {
        transform: scale(1);
    }
}


.personal-small {
    margin-top: 14px;

    opacity: .6;

    font-size: .55rem;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.personal-card h2 {
    margin-top: 6px;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            2.2rem,
            11vw,
            4rem
        );
}


.personal-divider {
    width: 60px;
    height: 3px;

    margin:
        16px
        auto
        20px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--yellow)
        );
}


.personal-main {
    font-size:
        clamp(
            1.05rem,
            4.8vw,
            1.4rem
        );

    line-height: 1.55;
}


.personal-main strong {
    color: var(--yellow);
}


.personal-love {
    margin-top: 10px;

    font-size:
        clamp(
            1.2rem,
            5.5vw,
            1.6rem
        );

    font-weight: 900;
}


.signature {
    margin-top: 24px;

    font-size: .82rem;

    font-weight: 700;
}


.signature span {
    display: block;

    margin-top: 4px;

    color: #55dcff;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 1.3rem;
}


/* =========================================================
   FINAL
========================================================= */

.final-section {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 90vh;
    min-height: 90dvh;

    padding:
        65px
        16px;

    text-align: center;
}


.final-content {
    width: 100%;
    max-width: 520px;
}


.final-small {
    opacity: .62;

    font-size: .55rem;

    font-weight: 900;

    letter-spacing: 3px;
}


.final-content h2 {
    margin-top: 12px;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            2.4rem,
            11vw,
            4.5rem
        );

    line-height: .94;

    text-shadow:
        0 5px 0 #25105a,
        0 12px 18px rgba(0,0,0,.4);
}


.final-content h2 span {
    display: block;

    color: var(--yellow);
}


.cake {
    margin-top: 22px;

    font-size: 4.2rem;

    animation:
        cakeBounce
        1.5s
        infinite;
}


@keyframes cakeBounce {

    50% {
        transform:
            translateY(-8px)
            rotate(3deg);
    }
}


.final-age {
    margin-top: 12px;

    color: #53dcff;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 1.2rem;

    letter-spacing: 2.5px;
}


.celebrate-button {
    width: min(100%, 340px);

    margin-top: 29px;

    padding:
        15px
        10px;

    cursor: pointer;

    border:
        3px
        solid
        white;

    border-radius: 13px;

    background:
        linear-gradient(
            #fff55f,
            #ffba00
        );

    color: #382000;

    box-shadow:
        0 7px 0 #994500;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            .68rem,
            3vw,
            .85rem
        );
}


.final-secret {
    margin-top: 25px;

    opacity: .7;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .58rem;

    letter-spacing: 1px;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    width: 100%;

    padding:
        24px
        15px
        calc(30px + env(safe-area-inset-bottom));

    opacity: .5;

    text-align: center;

    font-size: .65rem;
}


.footer-logo {
    width: 60px;
    height: 38px;

    margin:
        0
        auto
        8px;

    object-fit: contain;
}


/* =========================================================
   MUSIC
========================================================= */

.music-button {
    position: fixed;

    z-index: 900;

    top:
        max(
            12px,
            env(safe-area-inset-top)
        );

    right: 12px;

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    border:
        2px
        solid
        rgba(255,255,255,.75);

    border-radius: 50%;

    color: white;

    background:
        rgba(15,4,48,.75);

    font-size: 1rem;
}


.music-button.hidden {
    display: none;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(25px)
        scale(.96);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LOGRO SECRETO
========================================================= */

.achievement-overlay {
    position: fixed;

    inset: 0;

    z-index: 12000;

    display: none;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    padding: 18px;

    overflow: hidden;

    background:
        rgba(7,1,25,.95);
}


.achievement-overlay.active {
    display: flex;
}


.achievement-rays {
    position: absolute;

    width: min(130vw, 500px);
    aspect-ratio: 1;

    opacity: .2;

    background:
        repeating-conic-gradient(
            var(--yellow) 0deg 7deg,
            transparent 7deg 19deg
        );

    animation:
        achievementRotate
        18s
        linear
        infinite;
}


@keyframes achievementRotate {

    to {
        transform: rotate(360deg);
    }
}


.achievement-card {
    position: relative;

    z-index: 4;

    width: 100%;
    max-width: 350px;

    padding:
        32px
        17px;

    border:
        3px
        solid
        white;

    border-radius: 20px;

    background:
        linear-gradient(
            #5933c7,
            #24105c
        );

    box-shadow:
        0 8px 0 #09001b,
        0 22px 40px rgba(0,0,0,.55);

    text-align: center;
}


.achievement-icon {
    font-size: 4rem;
}


.achievement-card > p {
    margin-top: 14px;

    font-size: .55rem;

    font-weight: 900;

    letter-spacing: 2.3px;
}


.achievement-card h2 {
    margin-top: 4px;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 1.8rem;
}


.achievement-name {
    margin-top: 17px;

    padding:
        11px
        9px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.09);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: .9rem;
}


.achievement-stars {
    margin-top: 16px;

    color: var(--yellow);

    letter-spacing: 4px;
}


#closeAchievement {
    margin-top: 23px;

    padding:
        11px
        30px;

    border:
        3px
        solid
        white;

    border-radius: 10px;

    background:
        linear-gradient(
            #ffef52,
            #ff9b00
        );

    color: #352000;

    box-shadow:
        0 4px 0 #8e4000;

    font-family:
        "Archivo Black",
        sans-serif;
}


/* =========================================================
   FLASH
========================================================= */

.screen-flash {
    position: fixed;

    inset: 0;

    z-index: 13000;

    opacity: 0;

    pointer-events: none;

    background: white;
}


.screen-flash.flash {
    animation:
        screenFlash
        .55s
        forwards;
}


@keyframes screenFlash {

    20% {
        opacity: .9;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   DESBLOQUEADO
========================================================= */

.unlock-explosion {
    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 12900;

    display: none;

    width: 100%;

    padding: 0 15px;

    transform:
        translate(-50%, -50%);

    text-align: center;

    pointer-events: none;
}


.unlock-explosion.active {
    display: block;
}


.unlock-explosion span {
    display: inline-block;

    color: var(--yellow);

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(
            1.8rem,
            9vw,
            4rem
        );

    -webkit-text-stroke:
        1.5px
        white;

    text-shadow:
        0 5px 0 #963800;

    animation:
        unlockBoom
        .8s
        forwards;
}


@keyframes unlockBoom {

    0% {
        opacity: 0;

        transform: scale(.3);
    }

    45% {
        opacity: 1;

        transform: scale(1.08);
    }

    100% {
        opacity: 0;

        transform: scale(1.25);
    }
}


/* =========================================================
   CONFETI
========================================================= */

#confettiCanvas {
    position: fixed;

    inset: 0;

    z-index: 12500;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


.click-star {
    position: fixed;

    z-index: 11900;

    pointer-events: none;
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   320px - 360px
========================================================= */

@media (max-width: 360px) {

    .intro-logo {
        width: 120px;
    }


    .intro-description {
        margin-top: 17px;
    }


    .start-button {
        margin-top: 22px;
    }


    .dialogue-character-zone {
        height: 37dvh;

        min-height: 190px;
    }


    .dialogue-box {
        min-height: 115px;

        padding:
            23px
            13px
            10px;
    }


    .reward-box {
        width: 145px;
        height: 155px;

        transform: scale(.9);
    }


    .characters-wrapper {
        min-height: 280px;
    }


    .character-card {
        height: 275px;
    }


    .character-image {
        height: 250px;
    }


    .character-name {
        min-width: 78px;

        padding:
            5px
            6px;
    }


    .birthday-card {
        padding:
            31px
            15px;
    }

}


/* =========================================================
   TABLET / ESCRITORIO
========================================================= */

@media (min-width: 700px) {

    .character-section {
        padding-top: 90px;
    }


    .characters-wrapper {
        grid-template-columns:
            minmax(0, 1fr)
            70px
            minmax(0, 1fr);

        min-height: 500px;
    }


    .character-card {
        height: 480px;
    }


    .character-image {
        height: 450px;
    }


    .character-plus {
        font-size: 4rem;
    }


    .birthday-card {
        padding:
            55px
            55px;
    }


    .personal-card {
        padding:
            48px
            55px;
    }

}

/* =========================================================
   CONTENCIÓN DEL VIEWPORT EN MÓVILES
========================================================= */

html,
body {
    max-width: 100%;
    overscroll-behavior-x: none;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

body.locked {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100vw;
}

body.locked .birthday-content,
body.locked .story-overlay:not(.active) {
    display: none;
}

.intro,
.story-overlay,
.achievement-overlay {
    width: 100vw;
    max-width: 100%;
    isolation: isolate;
}

.intro-content,
.dialogue-stage,
.reward-stage {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 699px) {
    .mission-badge {
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }

    .intro-small,
    .intro-description,
    .dialogue-box p {
        overflow-wrap: anywhere;
    }
}

@media (max-height: 620px) {
    .intro {
        align-items: flex-start;
        overflow-y: auto;
    }

    .intro-content {
        margin: auto;
        padding-block: 8px 18px;
    }

    .story-overlay {
        align-items: flex-start;
        overflow-y: auto;
    }

    .dialogue-stage {
        height: auto;
        min-height: 100%;
    }
}