@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Poppins:wght@400;500;600;700;800&display=swap');
:root {

    /* Colors */

    --yellow: #f8d613;
    --navy: #111835;
    --blue: #0248c1;
    --light: #f4f4fc;

    /* Typography */

    --font-heading: 'Bungee', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* Borders */

    --border-width: 3px;
    --radius-large: 20px;
    --radius-small: 12px;

    /* Shadows */

    --shadow: 6px 6px 0px #000;

}
html,
body {

    background:
        var(--navy);

    min-height: 100%;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--navy);
    color: var(--light);
    font-family: var(--font-body);
	animation:
        pageFade .3s ease;
}

@keyframes pageFade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

input {
    width: 100%;
    padding: 16px;
    margin: 20px 0;
    border-radius: 16px;
    border: 3px solid var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
}

/* APP CONTAINER */
.app {
    max-width: 430px;
    margin: auto;
    min-height: 100vh;
    padding: 20px;
	padding-top: 60px;
}

/* WELCOME */
.welcome-card {

    text-align: center;

    max-width: 500px;

    margin: 0 auto;

}

.welcome-text {

    line-height: 1.8;

    margin-bottom: 24px;

    font-size: 1.2rem;

}

.welcome-link {

    display: block;

    margin-top: 12px;

    text-decoration: none;

    opacity: .8;

}
.welcome-logo-wrapper {

    display: flex;

    justify-content: center;

    margin-bottom: 10px;

}
/* BASE UI */
.page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.page-header h1 {
    font-family: var(--font-heading);
}

.home-header {

    display: flex;

    justify-content: center;

    margin-bottom: 24px;

}
.home-header .page-logo {

    max-width: 500px;

}

.logo {
    height: 350px;
    width: auto;
}
.page-logo {

    width: 100%;

    max-width: 340px;

    height: auto;

    display: block;
	animation:

        logoFloat

        5s

        ease-in-out

        infinite;

}
.welcome-logo {

    width: 110%;

    max-width: 500px;

    height: auto;

    display: block;

    transform:
        rotate(-4deg);

    animation:
        logoEnter .8s ease,
        logoFloat 4s ease-in-out .8s infinite;

}
@keyframes logoEnter {

    0% {

        opacity: 0;

        transform:
            translateY(-30px)
            rotate(-4deg);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            rotate(-4deg);

    }

}
@keyframes logoFloat {

    0% {

        transform:
            translateY(0)
            rotate(-4deg);

    }

    50% {

        transform:
            translateY(-8px)
            rotate(-4deg);

    }

    100% {

        transform:
            translateY(0)
            rotate(-4deg);

    }

}
.about-logo {

    width: 100%;

    max-width: 300px;

    display: block;

    margin: 0 auto 30px;

}
.player-info {
    display: flex;
    gap: 12px;
    align-items: center;
}
.welcome-section {

    margin-bottom: 24px;

}
.home-points {

    color: var(--yellow);

    font-size: 2rem;

    font-weight: 800;

    margin-top: 4px;

}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
	min-width: 50px;
    min-height: 50px;
	flex-shrink: 0;
}

/* CARDS */
.card {
    background: var(--light);
    color: var(--navy);
    border: 3px solid var(--navy);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 20px;
	margin-bottom: 32px;
}
.reward-card {
    background: var(--light);
    color: var(--navy);
    border:
        var(--border-width)
        solid
        var(--navy);
    border-radius:
        var(--radius-large);
    box-shadow:
        var(--shadow);
    padding: 24px;
    text-align: center;
    margin-top: 40px;
}
.card h2 {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 16px;

    border-radius: 999px;

    border: 3px solid var(--navy);

    box-shadow: 4px 4px 0px #000;

    margin-bottom: 16px;

}
.card p {

    line-height: 1.6;

    margin-bottom: 12px;

}
.card ul,
.card ol {

    padding-left: 20px;

    line-height: 1.8;

}
.card .btn {
    margin-top: 24px;
}
.card:last-child {

    padding-bottm: 30px;

}

/* ABOUT CARD TWEAKS */
.about-prizes h2 {

    background: var(--blue);

    color: white;

}
.about-gamers h2, .about-intro h2 {

    background: var(--yellow);

}
.about-gamers .btn {
    width: 100%;
    margin-top: 24px;
}
.about-gamers {
box-shadow:
        8px 8px 0px
        var(--yellow);
}
.section-chip {

    display: flex;

    justify-content: center;

    margin-bottom: 16px;

}

/* PROGRESS */
.progress-card {
    margin-bottom: 24px;
}
.progress-number {
    font-size: 3rem;
    font-weight: 900;
    margin: 12px 0;
}

.progress-bar {
    height: 24px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid var(--navy);
    background: white;
}

.progress-fill {
    width: 60%;
    height: 100%;
    background: var(--yellow);
}

/* BUTTONS */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: 3px solid var(--navy);
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    text-decoration: none;
    cursor: pointer;
}

.btn-yellow {
    background: var(--yellow);
    color: var(--navy);
}

.btn-blue {
    background: var(--blue);
    color: white;
}

.btn-light {
    background: var(--light);
    color: var(--navy);
}

.btn:active {
    transform:
        translate(6px, 6px);
    box-shadow: none;
}

.btn i {
    margin-right: 10px;
}
.back-btn {
    width: 50px;
    height: 50px;
    background: var(--yellow);
    color: var(--navy);
    border: 3px solid var(--navy);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--shadow);
}

/* COLLECTION GRID */
.filter-bar {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;

}
.filter-btn {

    display: flex;

    align-items: center;

    gap: 6px;

    background: var(--light);

    border: 3px solid var(--navy);

    border-radius: 999px;

    padding: 8px 14px;

    font-weight: 700;

    box-shadow: 4px 4px 0px #000;

}
.filter-btn.active {

    background: var(--yellow);

}
.filter-count {

    background: var(--navy);

    color: white;

    border-radius: 999px;

    padding: 2px 8px;

    font-size: .75rem;

}
.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}


/* CHARACTERS */
.character-card {
    background: var(--light);
    border: 3px solid var(--navy);
    border-radius: 20px;
    box-shadow: var(--shadow);
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
	padding: 12px;
	transition: .15s ease;
}

.character-card:active {
    transform:
        translate(4px,4px);
    box-shadow: none;
}

.character-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.character-image img {
    width: 95%;
    max-height: 130px;
    object-fit: contain;
}

.character-name {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--navy);
	min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	font-family: 'Poppins', sans-serif;
}

.locked {
    background: #777;
}
.locked .character-name {
    color: white;
}

.locked .character-image {
    color: white;
	font-size: 3rem;
}

/*RARITIES*/
.common {
    background: var(--light);
}
.rare {
    background: var(--blue);
	color:white;
}
.rare .character-name {
    color: white;
}
.epic {
    background: var(--yellow);
	color: var(--navy);
}

/* SCAN */
.reward-card {

    animation:
        rewardEnter
        1.2s
        cubic-bezier(
            .18,
            1.25,
            .4,
            1
        );

}
@keyframes rewardEnter {

    0% {

        opacity: 0;

        transform:

            translateY(100px)

            scale(.7);

    }

    60% {

        opacity: 1;

        transform:

            translateY(-10px)

            scale(1.05);

    }

    80% {

        transform:

            translateY(5px)

            scale(.98);

    }

    100% {

        transform:

            translateY(0)

            scale(1);

    }

}
.reward-badge {
    display: inline-block;
    background: var(--blue);
    color: white;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 20px;
}

.reward-art {
    margin: 20px 0;
	height: 400px;

    display: flex;

    justify-content: center;

    align-items: center;
	
	overflow: visible;
	
}
.reward-art img {

    width: 100%;

    max-width: 350px;

    object-fit: contain;
	animation:
        characterReveal
        1.4s
        ease;
}
@keyframes characterReveal {

    0% {

        opacity: 0;

        transform:

            scale(.2)

            rotate(-15deg);

    }

    40% {

        opacity: 1;

        transform:

            scale(1.2)

            rotate(8deg);

    }

    60% {

        transform:

            scale(.95)

            rotate(-3deg);

    }

    80% {

        transform:

            scale(1.05);

    }

    100% {

        transform:

            scale(1);

    }

}
.reward-title {
    font-size: 1rem;
    letter-spacing: 3px;
	font-family: var(--font-heading);
	opacity: 0;

    animation:

        fadeUp .5s ease forwards;

    animation-delay: .5s;
}
.character-title {
    font-size: 2rem;
    margin: 10px 0;
	font-family: var(--font-heading);
	opacity: 0;

    animation:

        fadeUp .5s ease forwards;

    animation-delay: .8s;
}
.reward-points {
    background: var(--yellow);
    border: 3px solid var(--navy);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 18px;
    margin: 24px 0;
    font-size: 2rem;
    font-weight: 900;
	opacity: 0;

    animation:

        fadeUp .5s ease forwards;

    animation-delay: 1.1s;
}
@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}
.reward-progress {
    margin-bottom: 24px;
    font-weight: 700;
}

/* CHARACTER DETAILS */
.character-detail {

    text-align: center;

}
.character-detail-image {

    display: flex;

    justify-content: center;

}
.character-detail-image img {

    max-width: 280px;

}
.detail-points {

    background: var(--yellow);

    color: var(--navy);

    border: 3px solid var(--navy);

    border-radius: 16px;

    box-shadow: var(--shadow);

    padding: 12px;

    font-weight: 800;

    margin: 20px 0;

}
.rarity-badge {

    display: inline-block;

    margin: 12px 0;

    padding: 8px 16px;

    border-radius: 999px;

    font-weight: 700;

}
.found-date {

    margin-top: 16px;

    font-weight: 600;

    opacity: .8;

}
/* DETAIL CARD RARITY COLORS */
.reward-card.rare {

    border-color:
        var(--blue);

    box-shadow:
        8px 8px 0px
        var(--blue);

}
.reward-card.epic {

    border-color:
        var(--yellow);

    box-shadow:
        0 0 30px
        rgba(
            248,
            214,
            19,
            .8
        );
	animation:

        rewardEnter
        1.2s
        cubic-bezier(
            .18,
            1.25,
            .4,
            1
        ),

        epicGlow
        2s
        ease-in-out
		1.2s
        infinite;

}

@keyframes epicGlow {

    0% {

        box-shadow:
            0 0 15px
            rgba(
                248,
                214,
                19,
                .4
            );

    }

    50% {

        box-shadow:
            0 0 35px
            rgba(
                248,
                214,
                19,
                .9
            );

    }

    100% {

        box-shadow:
            0 0 15px
            rgba(
                248,
                214,
                19,
                .4
            );

    }

}
/* LEADERBOARD */
.leader-card {

    text-align: center;

    margin-bottom: 24px;

}
.leader-icon {

    font-size: 4rem;

    color: var(--yellow);

    margin-bottom: 12px;

}
.section-title {

    margin: 24px 0 16px;

    font-family: var(--font-heading);

}
.gold {

    color: #f8d613;

    font-size: 1.8rem;

}
.silver {

    color: #c7c7c7;

    font-size: 1.8rem;

}
.bronze {

    color: #cd7f32;

    font-size: 1.8rem;

}
.leaderboard-card {

    background: var(--light);

    color: var(--navy);

    border: 3px solid var(--navy);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow);

    padding: 16px;

    margin-bottom: 16px;

    display: flex;

    align-items: center;

    gap: 16px;

}
.rank {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: var(--yellow);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.4rem;

    font-weight: bold;

}
.player-details {

    flex: 1;

}
.player-name {

    font-weight: 700;

}
.player-score {

    opacity: .8;

}
.your-rank {

    top: 20px;

    z-index: 100;
    margin-top: 24px;

    text-align: center;
	background: var(--blue);

    color: var(--light);

}
.rank-label {

    display: inline-block;

    background: var(--navy);

    color: white;

    padding: 6px 14px;

    border-radius: 999px;

    margin-bottom: 12px;

    font-size: .8rem;

    font-weight: 700;

}
#lastFoundContainer {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 12px;

}
#lastFoundImage {

    width: 70px;

    height: 70px;

    object-fit: contain;

}
#lastFoundName {

    font-weight: 700;

    font-size: 1.1rem;

}
.last-found-card {

    cursor: pointer;

}
.last-found-card:active {

    transform:
        translate(4px,4px);

    box-shadow: none;

}
.card-hint {

    font-size: 0.8rem;

    opacity: 0.6;

    margin-top: 8px;

}

/* COMPLETE */
.completion-score {

    font-size: 2rem;

    font-weight: 800;

    color: var(--yellow);

    margin: 16px 0;

}
#lastFoundCard {

    transition: .3s ease;

}
.master-collector {

    text-align: center;

}

.master-collector i {

    font-size: 3rem;

    color: var(--yellow);

    margin-bottom: 10px;

}

.completion-score {

    font-size: 2rem;

    font-weight: 800;

    color: var(--yellow);

    margin: 16px 0;

}

/* VICTORY */
.victory-card {

    text-align: center;

    margin-top: 60px;
	animation:

        rewardEnter

        1.2s

        cubic-bezier(
            .18,
            1.25,
            .4,
            1
        );

}
.victory-crown {

    font-size: 5rem;

    color: var(--yellow);

    margin-bottom: 20px;
	animation:

        epicGlow

        2s

        infinite;

}
.victory-score {

    font-size: 3rem;

    font-weight: 900;

    color: var(--yellow);

    margin: 20px 0;

}
/* STARTING */
.starting-screen {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;
	animation:

        pageFade
        .5s ease;

}
.starting-logo {

    width: 115%;

    max-width: 520px;

    transform:
        translateX(15px)
        rotate(-4deg);

    animation:
        logoEnter .8s ease,
        logoFloat 4s ease-in-out .8s infinite;

}
.starting-text {

    margin-top: 30px;

    font-size: 1.2rem;

    font-weight: 700;

}
.loading-dots {

    display: flex;

    gap: 8px;

    margin-top: 16px;

}
.loading-dots span {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--yellow);

    animation:
        loadingBounce
        1s
        infinite;

}
.loading-dots span:nth-child(2) {

    animation-delay: .2s;

}
.loading-dots span:nth-child(3) {

    animation-delay: .4s;

}
@keyframes loadingBounce {

    0%,
    80%,
    100% {

        transform:
            translateY(0);

    }

    40% {

        transform:
            translateY(-8px);

    }

}
.fade-out {

    animation:

        pageFadeOut

        .6s

        ease

        forwards;

}
@keyframes pageFadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

        transform:
            translateY(10px);

    }

}
.fade-out .starting-logo {

    opacity: 0;

    transform:

        translateX(15px)

        translateY(-20px)

        rotate(-4deg);

    transition:
        .6s ease;

}
.fade-out .starting-text,

.fade-out .loading-dots {

    opacity: 0;

    transition:
        .4s ease;

}

.home-footer {

    text-align: center;

    margin-top: 40px;

    opacity: .7;

    font-size: .9rem;

}