/*
==========================================
 PixxelCraft Encyclopedia
 style.css
 Phase 2A - Part 1
 Foundation + Layout
==========================================
*/


/* ======================================
   Variables
====================================== */

:root {

    --bg-main: #f4f6fb;

    --bg-panel: #ffffff;

    --bg-sidebar: #20243a;

    --bg-sidebar-hover: #303653;

    --accent: #724df7;

    --accent-light: #ede8ff;

    --text-main: #202124;

    --text-secondary: #6b7280;

    --border: #e5e7eb;

    --shadow:

        0 8px 24px rgba(
            0,
            0,
            0,
            0.08
        );

    --radius:

        14px;

    --transition:

        0.25s ease;

}


/* ======================================
   Reset
====================================== */


* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    font-family:

        "Segoe UI",
        Arial,
        sans-serif;

    background:

        var(--bg-main);

    color:

        var(--text-main);

}


/* ======================================
   App Container
====================================== */


#app {

    display:

        flex;

    width:

        100vw;

    height:

        100vh;

    overflow:

        hidden;

}


/* ======================================
   Sidebar
====================================== */


#sidebar {

    width:

        260px;

    height:

        100vh;

    background:

        var(--bg-sidebar);

    color:

        white;

    display:

        flex;

    flex-direction:

        column;

    padding:

        24px 16px;

    flex-shrink:

        0;

}


/* ======================================
   Logo
====================================== */


.logo {

    text-align:

        center;

    margin-bottom:

        32px;

}


.logo img {

    width:

        70px;

    height:

        70px;

    object-fit:

        contain;

    margin-bottom:

        10px;

}


.logo h1 {

    margin:

        0;

    font-size:

        24px;

    font-weight:

        700;

}


.logo span {

    display:

        block;

    margin-top:

        5px;

    font-size:

        14px;

    color:

        rgba(
            255,
            255,
            255,
            0.7
        );

}


/* ======================================
   Navigation
====================================== */


#sidebar nav {

    display:

        flex;

    flex-direction:

        column;

    gap:

        8px;

}


/* ======================================
   Navigation Buttons
====================================== */


.nav-item {

    border:

        none;

    background:

        transparent;

    color:

        white;

    padding:

        12px 16px;

    border-radius:

        10px;

    text-align:

        left;

    font-size:

        15px;

    cursor:

        pointer;

    transition:

        var(--transition);

}


.nav-item:hover {

    background:

        var(--bg-sidebar-hover);

}


.nav-item.active {

    background:

        var(--accent);

}


/* ======================================
   Sidebar Footer
====================================== */


.sidebar-footer {

    margin-top:

        auto;

    text-align:

        center;

    font-size:

        12px;

    color:

        rgba(
            255,
            255,
            255,
            0.5
        );

}


/* ======================================
   Main Content
====================================== */


#main {

    flex:

        1;

    height:

        100vh;

    overflow-y:

        auto;

    padding:

        24px;

}


/* ======================================
   Pages
====================================== */


.page {

    width:

        100%;

}

/* ======================================
   Top Bar
====================================== */


#topbar {

    display:

        flex;

    justify-content:

        space-between;

    align-items:

        center;

    background:

        var(--bg-panel);

    padding:

        20px 24px;

    border-radius:

        var(--radius);

    box-shadow:

        var(--shadow);

    margin-bottom:

        24px;

}


/* ======================================
   Title Area
====================================== */


#topbar h2 {

    margin:

        0;

    font-size:

        24px;

    font-weight:

        700;

}


#characterCount {

    display:

        block;

    margin-top:

        6px;

    color:

        var(--text-secondary);

    font-size:

        14px;

}


/* ======================================
   Search Area
====================================== */


.search-area {

    display:

        flex;

    align-items:

        center;

    gap:

        8px;

}


/* ======================================
   Search Input
====================================== */


#searchBox {

    width:

        280px;

    padding:

        12px 16px;

    border:

        1px solid var(--border);

    border-radius:

        12px;

    outline:

        none;

    font-size:

        15px;

    background:

        #fafafa;

    transition:

        var(--transition);

}


#searchBox:focus {

    border-color:

        var(--accent);

    background:

        white;

    box-shadow:

        0 0 0 3px var(--accent-light);

}


/* ======================================
   Clear Search Button
====================================== */


#clearSearch {

    width:

        42px;

    height:

        42px;

    border:

        none;

    border-radius:

        10px;

    background:

        var(--accent-light);

    color:

        var(--accent);

    cursor:

        pointer;

    font-size:

        18px;

    transition:

        var(--transition);

}


#clearSearch:hover {

    background:

        var(--accent);

    color:

        white;

}


/* ======================================
   Scrollbar Styling
====================================== */


#main::-webkit-scrollbar {

    width:

        10px;

}


#main::-webkit-scrollbar-track {

    background:

        transparent;

}


#main::-webkit-scrollbar-thumb {

    background:

        #c7c9d4;

    border-radius:

        20px;

}


#main::-webkit-scrollbar-thumb:hover {

    background:

        #a7a9b8;

}
/* ======================================
   Character Grid
====================================== */


.card-grid {

    display:

        grid;

    grid-template-columns:

        repeat(
            auto-fill,
            minmax(
                260px,
                1fr
            )
        );

    gap:

        20px;

}


/* ======================================
   Character Card
====================================== */


.character-card {

    background:

        var(--bg-panel);

    border-radius:

        var(--radius);

    overflow:

        hidden;

    box-shadow:

        var(--shadow);

    cursor:

        pointer;

    transition:

        transform var(--transition),
        box-shadow var(--transition);

    display:

        flex;

    flex-direction:

        column;

}


.character-card:hover {

    transform:

        translateY(-6px);

    box-shadow:

        0 14px 32px rgba(
            0,
            0,
            0,
            0.12
        );

}


/* ======================================
   Character Image
====================================== */


.character-thumb {

    width:

        100%;

    height:

        260px;

    object-fit:

        contain;

    background:

        #fafafa;

    padding:

        18px;

}


/* ======================================
   Character Information
====================================== */


.character-body {

    padding:

        18px;

}


/* ======================================
   Character Name
====================================== */


.character-name {

    font-size:

        20px;

    font-weight:

        700;

    margin-bottom:

        8px;

}


/* ======================================
   Character Metadata
====================================== */


.character-info {

    color:

        var(--text-secondary);

    font-size:

        14px;

    line-height:

        1.5;

}


/* ======================================
   Fade Animation
====================================== */


.fade-in {

    animation:

        fadeIn
        0.3s
        ease;

}


@keyframes fadeIn {


    from {

        opacity:

            0;

        transform:

            translateY(10px);

    }


    to {

        opacity:

            1;

        transform:

            translateY(0);

    }

}


/* ======================================
   Empty State
====================================== */


.empty-state {

    background:

        var(--bg-panel);

    padding:

        40px;

    border-radius:

        var(--radius);

    text-align:

        center;

    box-shadow:

        var(--shadow);

}


.empty-state h2 {

    margin-top:

        0;

}


.empty-state p {

    color:

        var(--text-secondary);

}
/* ======================================
   Entry Header
====================================== */


.entry-header {

    display:

        flex;

    justify-content:

        space-between;

    align-items:

        center;

    margin-bottom:

        24px;

}


#backButton,
#favoriteButton {

    border:

        none;

    padding:

        10px 18px;

    border-radius:

        10px;

    cursor:

        pointer;

    font-size:

        15px;

    transition:

        var(--transition);

}


/* Back Button */

#backButton {

    background:

        var(--bg-panel);

    color:

        var(--text-main);

    box-shadow:

        var(--shadow);

}


#backButton:hover {

    transform:

        translateX(-3px);

}


/* Favorite Button */

#favoriteButton {

    background:

        var(--accent);

    color:

        white;

}


#favoriteButton:hover {

    opacity:

        0.85;

}


/* ======================================
   Entry Top Area
====================================== */


.entry-top {

    display:

        flex;

    gap:

        32px;

    align-items:

        center;

    background:

        var(--bg-panel);

    padding:

        30px;

    border-radius:

        var(--radius);

    box-shadow:

        var(--shadow);

    margin-bottom:

        24px;

}


/* ======================================
   Entry Image
====================================== */


.entry-image {

    width:

        280px;

    height:

        320px;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    background:

        #fafafa;

    border-radius:

        var(--radius);

    overflow:

        hidden;

}


#detailImage {

    width:

        100%;

    height:

        100%;

    object-fit:

        contain;

    padding:

        20px;

}


/* ======================================
   Entry Title
====================================== */


.entry-title h1 {

    margin:

        0;

    font-size:

        36px;

}


#detailSubtitle {

    margin:

        12px 0;

    color:

        var(--text-secondary);

    font-size:

        18px;

}


#detailID {

    display:

        inline-block;

    background:

        var(--accent-light);

    color:

        var(--accent);

    padding:

        6px 12px;

    border-radius:

        20px;

    font-size:

        13px;

}


/* ======================================
   Entry Sections
====================================== */


.entry-section {

    background:

        var(--bg-panel);

    border-radius:

        var(--radius);

    padding:

        24px;

    margin-bottom:

        20px;

    box-shadow:

        var(--shadow);

}


.entry-section h2 {

    margin-top:

        0;

    font-size:

        22px;

    border-bottom:

        1px solid var(--border);

    padding-bottom:

        12px;

}


/* ======================================
   Detail Rows
====================================== */


.detail-row {

    display:

        flex;

    justify-content:

        space-between;

    padding:

        12px 0;

    border-bottom:

        1px solid var(--border);

}


.detail-row:last-child {

    border-bottom:

        none;

}


.detail-label {

    font-weight:

        600;

    color:

        var(--text-main);

}


.detail-value {

    color:

        var(--text-secondary);

    text-align:

        right;

}
/* ======================================
   Secondary Page Containers
====================================== */


#recentPage,
#favoritesPage,
#statisticsPage,
#settingsPage {

    animation:

        fadeIn
        0.25s
        ease;

}


/* ======================================
   Statistics Panel
====================================== */


#statisticsContent {

    display:

        grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    gap:

        20px;

}


.stat-card {

    background:

        var(--bg-panel);

    padding:

        24px;

    border-radius:

        var(--radius);

    box-shadow:

        var(--shadow);

}


.stat-card h3 {

    margin:

        0 0 10px 0;

    color:

        var(--text-secondary);

    font-size:

        15px;

}


.stat-card span {

    font-size:

        32px;

    font-weight:

        700;

    color:

        var(--accent);

}


/* ======================================
   Settings Page
====================================== */


#settingsPage {

    background:

        var(--bg-panel);

    padding:

        30px;

    border-radius:

        var(--radius);

    box-shadow:

        var(--shadow);

}


#settingsPage h2 {

    margin-top:

        0;

}


/* ======================================
   Cards Used In Recent/Favorites
====================================== */


#recentList .character-card,
#favoritesList .character-card {

    animation:

        fadeIn
        0.3s
        ease;

}


/* ======================================
   Section Divider
====================================== */


.section-title {

    font-size:

        24px;

    font-weight:

        700;

    margin-bottom:

        20px;

}


/* ======================================
   Badge System
====================================== */


.badge {

    display:

        inline-block;

    padding:

        4px 10px;

    margin-right:

        6px;

    border-radius:

        20px;

    background:

        var(--accent-light);

    color:

        var(--accent);

    font-size:

        12px;

    font-weight:

        600;

}


/* ======================================
   Loading State
====================================== */


.loading {

    display:

        flex;

    justify-content:

        center;

    align-items:

        center;

    height:

        200px;

    color:

        var(--text-secondary);

    font-size:

        18px;

}
/* ======================================
   Responsive Layout
====================================== */


/* Tablet */

@media (max-width: 1000px) {


    #sidebar {

        width:

            220px;

    }


    #topbar {

        flex-direction:

            column;

        align-items:

            stretch;

        gap:

            16px;

    }


    .search-area {

        width:

            100%;

    }


    #searchBox {

        flex:

            1;

        width:

            auto;

    }


    .entry-top {

        flex-direction:

            column;

        text-align:

            center;

    }


    .entry-image {

        width:

            240px;

        height:

            280px;

    }


}



/* Mobile */


@media (max-width: 700px) {


    #app {

        flex-direction:

            column;

    }


    #sidebar {

        width:

            100%;

        height:

            auto;

        padding:

            12px;

    }


    .logo {

        margin-bottom:

            10px;

    }


    .logo img {

        width:

            45px;

        height:

            45px;

    }


    #sidebar nav {

        flex-direction:

            row;

        overflow-x:

            auto;

    }


    .nav-item {

        white-space:

            nowrap;

    }


    .sidebar-footer {

        display:

            none;

    }


    #main {

        height:

            calc(
                100vh - 120px
            );

        padding:

            16px;

    }


    .card-grid {

        grid-template-columns:

            1fr;

    }


    #topbar h2 {

        font-size:

            20px;

    }


    .entry-title h1 {

        font-size:

            28px;

    }


}
/* ======================================
   Responsive Layout
====================================== */


/* Tablet */

@media (max-width: 1000px) {


    #sidebar {

        width:

            220px;

    }


    #topbar {

        flex-direction:

            column;

        align-items:

            stretch;

        gap:

            16px;

    }


    .search-area {

        width:

            100%;

    }


    #searchBox {

        flex:

            1;

        width:

            auto;

    }


    .entry-top {

        flex-direction:

            column;

        text-align:

            center;

    }


    .entry-image {

        width:

            240px;

        height:

            280px;

    }


}



/* Mobile */


@media (max-width: 700px) {


    #app {

        flex-direction:

            column;

    }


    #sidebar {

        width:

            100%;

        height:

            auto;

        padding:

            12px;

    }


    .logo {

        margin-bottom:

            10px;

    }


    .logo img {

        width:

            45px;

        height:

            45px;

    }


    #sidebar nav {

        flex-direction:

            row;

        overflow-x:

            auto;

    }


    .nav-item {

        white-space:

            nowrap;

    }


    .sidebar-footer {

        display:

            none;

    }


    #main {

        height:

            calc(
                100vh - 120px
            );

        padding:

            16px;

    }


    .card-grid {

        grid-template-columns:

            1fr;

    }


    #topbar h2 {

        font-size:

            20px;

    }


    .entry-title h1 {

        font-size:

            28px;

    }


}
.character-card {

    position: relative;

}


.character-subtitle {

    color:

        var(--text-secondary);

    font-size:

        14px;

    margin-bottom:

        12px;

}


.card-favorite {

    position:

        absolute;

    top:

        12px;

    right:

        12px;

    width:

        36px;

    height:

        36px;

    border:

        none;

    border-radius:

        50%;

    background:

        white;

    cursor:

        pointer;

    font-size:

        20px;

    box-shadow:

        0 4px 12px rgba(
            0,
            0,
            0,
            0.15
        );

}


.card-favorite:hover {

    transform:

        scale(1.1);

}
/* ==========================================
   Franchise Filter
========================================== */

.franchise-filter{

    margin-bottom:20px;

}

#franchiseList{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.franchise-button{

    padding:10px 18px;

    border:none;

    border-radius:999px;

    background:#2a2a2a;

    color:white;

    cursor:pointer;

    transition:.2s;

    font-size:14px;

}

.franchise-button:hover{

    background:#3b3b3b;

}

.franchise-button.active{

    background:#4f8cff;

}
/* =====================================
 PixxelCraft Update Popup
===================================== */


.update-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0,0,0,0.65);

    backdrop-filter:
        blur(8px);


    display: none;

    justify-content: center;

    align-items: center;

    z-index: 9999;

}



.update-overlay.show {

    display: flex;

    animation:
        fadeIn .25s ease;

}





.update-box {


    width: 380px;

    padding: 30px;


    background:
        rgba(30,30,45,0.95);


    border-radius: 20px;


    text-align: center;


    box-shadow:
        0 20px 50px rgba(0,0,0,.5);



    animation:

        popupIn .3s ease;


}





.update-logo {


    font-size: 50px;

    margin-bottom:10px;


}




.update-box h2 {


    margin-bottom:15px;


}





.update-box p {


    color:#ccc;


}




.update-version {


    margin:20px 0;


    padding:15px;


    border-radius:12px;


    background:

        rgba(255,255,255,.08);


}





.update-buttons {


    display:flex;


    gap:15px;


    justify-content:center;


}




.update-buttons button {


    padding:

        12px 25px;


    border:none;


    border-radius:12px;


    cursor:pointer;


    font-size:15px;


}




#updateNow {


    background:

        #7c5cff;


    color:white;


}




#updateLater {


    background:

        #444;


    color:white;


}





.update-loading {


    display:none;


    margin-top:20px;


    color:#aaa;


}




@keyframes popupIn {


    from {

        transform:
            scale(.8);

        opacity:
            0;

    }


    to {

        transform:
            scale(1);

        opacity:
            1;

    }


}





@keyframes fadeIn {


    from {

        opacity:
            0;

    }


    to {

        opacity:
            1;

    }


}