/* ==========================================
   BATLINGO SOLO EFFECTS
========================================== */

.game-container {
    position: relative;
}

/* MASCOT HUD */


/* ==========================================
   SOLO MASCOT - FULL WIDTH
========================================== */

.solo-fx-mascot {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: none;
    box-sizing: border-box;

    min-height: 105px;

    gap: 20px;
    padding: 12px 24px;
    margin: 10px 0 16px;

    border: 1px solid rgba(125,211,252,.3);
    border-radius: 16px;

    background: linear-gradient(
        110deg,
        rgba(9,19,36,.96),
        rgba(25,44,76,.88)
    );

    color: #e2e8f0;
}


/* MASCOT IMAGE */

.solo-fx-mascot-portrait {
    width: 85px;
    height: 85px;
    flex: 0 0 85px;

    display: grid;
    place-items: center;
    position: relative;
}

.solo-fx-mascot-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter: drop-shadow(
        0 4px 12px rgba(56,189,248,.4)
    );
}

.solo-fx-mascot-portrait span {
    font-size: 52px;
}

/* MASCOT INFORMATION */

.solo-fx-mascot-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.solo-fx-mascot-info strong {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.solo-fx-mascot-info > span {
    font-size: 14px;
    font-weight: 700;
    color: #93c5fd;
}

/* SKILL PROGRESS BAR */

.solo-fx-skill-track {
    width: 100%;
    height: 12px;

    background: #26384f;
    border-radius: 99px;
    overflow: hidden;
}

#soloFxSkillFill {
    width: 0;
    height: 100%;

    background: linear-gradient(
        90deg,
        #38bdf8,
        #a78bfa
    );

    border-radius: inherit;
    transition: width .3s ease;
}

/* FULL EFFECT OVERLAY */

.solo-fx-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;

    display: grid;
    place-items: center;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .15s ease,
        visibility .15s ease;

    overflow: hidden;
    border-radius: 20px;
}

.solo-fx-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* LIGHT BURST */

.solo-fx-burst {
    position: absolute;
    inset: -20%;

    background: radial-gradient(
        circle,
        rgba(251,191,36,.22),
        transparent 60%
    );

    transform: scale(.4);
    opacity: 0;
}

.solo-fx-overlay.visible .solo-fx-burst {
    animation: soloFxBurst
        var(--solo-fx-duration, 2200ms)
        ease-out both;
}

/* COMBO CARD */

.solo-fx-card {
    position: relative;
    max-width: 94%;

    padding: 16px 26px;
    text-align: center;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        rgba(17,24,39,.92),
        rgba(53,35,14,.92)
    );

    border: 1px solid rgba(251,191,36,.6);

    box-shadow:
        0 16px 50px rgba(0,0,0,.48),
        0 0 38px rgba(251,191,36,.16);

    transform: translateY(20px) scale(.65);
    opacity: 0;
}

.solo-fx-overlay.visible .solo-fx-card {
    animation: soloFxPop
        var(--solo-fx-duration, 2200ms)
        cubic-bezier(.2,1.2,.3,1) both;
}

.solo-fx-kicker {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 900;
    color: #fde68a;
}

.solo-fx-title {
    font-size: clamp(27px,6vw,50px);
    line-height: 1.15;

    font-weight: 1000;
    letter-spacing: 1px;

    color: #fff0a0;

    text-shadow:
        0 2px 2px #78350f,
        0 0 15px #f59e0b;
}

.solo-fx-subtitle {
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
}

/* PERFECT */

.solo-fx-overlay.perfect .solo-fx-card {
    border-color: #67e8f9;

    background: linear-gradient(
        135deg,
        rgba(8,47,73,.95),
        rgba(17,24,39,.94)
    );
}

.solo-fx-overlay.perfect .solo-fx-title {
    color: #a5f3fc;
    text-shadow: 0 0 20px #06b6d4;
}

/* MASCOT SKILL */

.solo-fx-overlay.skill .solo-fx-card {
    border-color: #86efac;

    background: linear-gradient(
        135deg,
        rgba(6,78,59,.96),
        rgba(15,23,42,.95)
    );
}

.solo-fx-overlay.skill .solo-fx-title {
    color: #bbf7d0;
    text-shadow: 0 0 20px #22c55e;
}

/* MASCOT REACTIONS */

.solo-fx-mascot.cheer
.solo-fx-mascot-portrait {
    animation: soloMascotCheer .6s ease-out;
}

.solo-fx-mascot.ouch
.solo-fx-mascot-portrait {
    animation: soloMascotOuch .4s ease-in-out;
}

.solo-fx-mascot.skill-active
.solo-fx-mascot-portrait {
    animation: soloMascotSkill .85s ease-out;
}

/* ==========================================
   KEYFRAMES
========================================== */


@keyframes soloFxPop {

    0% {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.65)
            rotate(-4deg);
    }

    10% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1.15)
            rotate(2deg);
    }

    18% {
        opacity: 1;
        transform: scale(.98);
    }

    25% {
        opacity: 1;
        transform: scale(1);
    }

    /* Hold for reading */

    80% {
        opacity: 1;
        transform: scale(1);
    }

    92% {
        opacity: 1;
        transform:
            scale(1.04)
            translateY(-4px);
    }

    100% {
        opacity: 0;
        transform:
            scale(1.08)
            translateY(-10px);
    }
}


@keyframes soloFxBurst {
    0% {
        opacity: 0;
        transform: scale(.2) rotate(0);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.6) rotate(30deg);
    }
}

@keyframes soloMascotCheer {
    0%, 100% {
        transform:
            translateY(0)
            rotate(0);
    }

    30% {
        transform:
            translateY(-12px)
            rotate(-10deg);
    }

    60% {
        transform:
            translateY(-5px)
            rotate(9deg);
    }
}

@keyframes soloMascotOuch {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform:
            translateX(-6px)
            rotate(-8deg);
    }

    55% {
        transform:
            translateX(6px)
            rotate(7deg);
    }
}

@keyframes soloMascotSkill {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    35% {
        transform:
            scale(1.27)
            rotate(-8deg);

        filter:
            brightness(1.9)
            drop-shadow(0 0 15px #4ade80);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* MOBILE */

@media (max-width: 520px) {

    .solo-fx-mascot {
        margin: 4px auto 6px;
        min-height: 51px;
        padding: 5px 9px;
    }

    .solo-fx-mascot-portrait {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .solo-fx-mascot-info strong {
        font-size: 11px;
    }

    .solo-fx-mascot-info > span {
        font-size: 10px;
    }

    .solo-fx-card {
        padding: 13px 17px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .solo-fx-overlay,
    .solo-fx-mascot * {
        animation: none !important;
        transition: none !important;
    }

    .solo-fx-overlay.visible .solo-fx-card {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .solo-fx-overlay.visible .solo-fx-burst {
        display: none;
    }
}


/* ==========================================
   SOLO GAME OVER - SAD MASCOT
========================================== */

.solo-gameover-mascot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    padding: 6px 10px 16px;
    text-align: center;
}

.solo-gameover-mascot-image {
    width: 110px;
    height: 110px;

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

    transform-origin: center bottom;
}

.solo-gameover-mascot-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter: drop-shadow(
        0 8px 12px rgba(0,0,0,.35)
    );
}

.solo-gameover-mascot-image span {
    font-size: 75px;
    line-height: 1;
}

.solo-gameover-mascot-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.solo-gameover-mascot-message strong {
    font-size: 17px;
    color: #93c5fd;
    letter-spacing: 1px;
}

.solo-gameover-mascot-message span {
    font-size: 12px;
    color: #94a3b8;
}

/* SAD STATE */

.solo-gameover-mascot.sad-active
.solo-gameover-mascot-image {
    animation: soloMascotSad 2.5s ease-out
        both;
}

.solo-gameover-mascot.sad-active
.solo-gameover-mascot-message {
    animation: soloSadMessage 2s ease-out
        both;
}

/* HEAD DOWN, LITTLE SHAKE, SAD POSE */

@keyframes soloMascotSad {

    0% {
        opacity: 0;
        transform:
            translateY(-15px)
            rotate(0deg)
            scale(1.05);

        filter: brightness(1);
    }

    15% {
        opacity: 1;
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);
    }

    35% {
        transform:
            translateY(5px)
            rotate(-7deg)
            scale(.97);
    }

    48% {
        transform:
            translateY(8px)
            rotate(5deg)
            scale(.96);
    }

    60% {
        transform:
            translateY(10px)
            rotate(-4deg)
            scale(.94);
    }

    80% {
        transform:
            translateY(12px)
            rotate(-6deg)
            scale(.92);
    }

    100% {
        opacity: 1;

        transform:
            translateY(12px)
            rotate(-7deg)
            scale(.92);

        filter:
            brightness(.68)
            saturate(.65);
    }
}

@keyframes soloSadMessage {

    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    50% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE */

@media (max-width: 520px) {

    .solo-gameover-mascot-image {
        width: 85px;
        height: 85px;
    }

    .solo-gameover-mascot-image span {
        font-size: 60px;
    }

    .solo-gameover-mascot {
        padding-bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .solo-gameover-mascot.sad-active
    .solo-gameover-mascot-image {
        animation: none;
        transform: rotate(-7deg) scale(.92);
        filter: brightness(.68) saturate(.65);
    }

    .solo-gameover-mascot.sad-active
    .solo-gameover-mascot-message {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width: 600px) {

    .solo-fx-mascot {
        width: 100%;
        min-height: 65px;

        gap: 10px;
        padding: 7px 12px;
        margin: 6px 0 10px;

        border-radius: 12px;
    }

    .solo-fx-mascot-portrait {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .solo-fx-mascot-portrait span {
        font-size: 34px;
    }

    .solo-fx-mascot-info {
        gap: 4px;
    }

    .solo-fx-mascot-info strong {
        font-size: 12px;
    }

    .solo-fx-mascot-info > span {
        font-size: 10px;
    }

    .solo-fx-skill-track {
        height: 6px;
    }
}