/* ==========================================
   LearnIt v0.1.0
   Foundation
   Created by Ezradetta
========================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

/* ===========================
   CSS VARIABLES
=========================== */

:root{

    --bg:#0B1020;
    --surface:#131A2E;
    --card:#1B243A;
    --border:#2A3652;

    --primary:#4F8CFF;
    --accent:#FFC857;

    --text:#FFFFFF;
    --text-secondary:#AAB4C8;

    --success:#22C55E;
    --danger:#EF4444;

    --radius-small:16px;
    --radius:22px;
    --radius-large:28px;

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

    --transition:.25s ease;

}

/* ===========================
   RESET
=========================== */

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

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:
    radial-gradient(circle at top,
    #1B2D5A 0%,
    var(--bg) 45%);

    min-height:100vh;

    overflow-x:hidden;

}

/* ===========================
   TYPOGRAPHY
=========================== */

h1,h2,h3,h4{

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

    font-weight:700;

    letter-spacing:-.5px;

}

p{

    color:var(--text-secondary);

    line-height:1.6;

}

/* ===========================
   LINKS
=========================== */

a{

    color:inherit;

    text-decoration:none;

}

/* ===========================
   BUTTONS
=========================== */

button{

    cursor:pointer;

    border:none;

    outline:none;

    transition:var(--transition);

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

}

button:hover{

    transform:translateY(-2px);

}

/* ===========================
   INPUTS
=========================== */

input{

    width:100%;

    border:none;

    outline:none;

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

}

/* ===========================
   CONTAINER
=========================== */

.container{

    width:min(100%,430px);

    margin:auto;

    padding:24px;

}

/* ===========================
   SECTION TITLE
=========================== */

.sectionTitle{

    font-size:22px;

    margin-bottom:16px;

}

/* ===========================
   UTILITIES
=========================== */

.hidden{

    display:none !important;

}

/* ==========================================
   COMPONENTS
========================================== */

/* Hero Section */

.hero{

    text-align:center;

    padding:48px 0 32px;

}

.hero img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:18px;

}

.hero h1{

    font-size:42px;

    color:var(--text);

}

.hero p{

    margin-top:8px;

    font-size:16px;

}



/* Search */

.searchBox{

    margin:28px 0;

    position:relative;

}

.searchBox input{

    width:100%;

    height:58px;

    padding:0 22px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    color:white;

    font-size:16px;

    transition:var(--transition);

}

.searchBox input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(79,140,255,.15);

}

.searchBox input::placeholder{

    color:var(--text-secondary);

}



/* Card */

.card{

    background:rgba(27,36,58,.75);

    backdrop-filter:blur(14px);

    border:1px solid var(--border);

    border-radius:22px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-4px);

}



/* Game Card */

.gameCard{

    display:flex;

    align-items:center;

    gap:16px;

}

.gameIcon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    flex-shrink:0;

}

.gameInfo h3{

    font-size:20px;

    margin-bottom:4px;

}

.gameInfo p{

    font-size:14px;

}



/* Primary Button */

.primaryButton{

    width:100%;

    height:54px;

    border-radius:16px;

    background:var(--primary);

    color:white;

    font-size:16px;

    font-weight:600;

    box-shadow:0 10px 25px rgba(79,140,255,.25);

}

.primaryButton:hover{

    transform:translateY(-2px);

}



/* Secondary Button */

.secondaryButton{

    width:100%;

    height:54px;

    border-radius:16px;

    background:transparent;

    border:1px solid var(--border);

    color:white;

}



/* Section */

.section{

    margin-top:36px;

}

.sectionHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.sectionHeader h2{

    font-size:22px;

}

.sectionHeader a{

    color:var(--primary);

    font-size:15px;

}

/* ==========================================
   HOME PAGE LAYOUT
========================================== */

.home{

    min-height:100vh;

    padding:24px;

    padding-bottom:120px;

}

.logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-top:30px;

    margin-bottom:30px;

}

.logo img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:18px;

}

.logo h1{

    font-size:40px;

    font-weight:800;

}

.logo p{

    margin-top:6px;

    color:var(--text-secondary);

    font-size:15px;

}

.continueCard{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.continueCard h3{

    font-size:22px;

}

.continueCard p{

    margin-top:6px;

}

.playButton{

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.gamesGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.gameTile{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:22px;

    text-align:center;

    transition:var(--transition);

}

.gameTile:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

}

.gameTile img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:14px;

}

.gameTile h3{

    font-size:18px;

}

.newsCard{

    padding:22px;

}

.newsCard h3{

    margin-bottom:8px;

}

.newsCard p{

    font-size:14px;

}

/* ==========================
   BOTTOM NAVIGATION
========================== */

.bottomNav{

    position:fixed;

    bottom:18px;

    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 32px);

    max-width:420px;

    height:72px;

    background:rgba(19,26,46,.95);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:24px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:var(--shadow);

    z-index:100;

}

.navItem{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    color:var(--text-secondary);

    cursor:pointer;

    transition:var(--transition);

    font-size:13px;

}

.navItem svg{

    width:22px;

    height:22px;

}

.navItem.active{

    color:var(--primary);

}

.navItem:hover{

    color:var(--primary);

    transform:translateY(-2px);

}

/* ==========================================
   FINAL POLISH
   LearnIt v0.1.0
========================================== */

/* Background Glow */

body::before{

    content:"";

    position:fixed;

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    width:650px;
    height:650px;

    background:
    radial-gradient(circle,
    rgba(79,140,255,.18),
    transparent 70%);

    pointer-events:none;

    z-index:-1;

    animation:floatGlow 10s ease-in-out infinite;

}

/* Fade In */

.fadeIn{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Floating Glow */

@keyframes floatGlow{

    0%,100%{

        transform:
        translateX(-50%)
        translateY(0);

    }

    50%{

        transform:
        translateX(-50%)
        translateY(25px);

    }

}

/* Scrollbar */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

    background:var(--border);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* Text Selection */

::selection{

    background:var(--primary);

    color:white;

}

/* Images */

img{

    user-select:none;

    -webkit-user-drag:none;

}

/* Responsive */

@media(max-width:430px){

    .container{

        padding:18px;

    }

    .logo h1{

        font-size:34px;

    }

    .hero{

        padding-top:30px;

    }

    .gamesGrid{

        grid-template-columns:1fr;

    }

    .bottomNav{

        width:calc(100% - 20px);

    }

}

/* ==========================================
   SPLASH SCREEN
========================================== */

#splash{

    position:fixed;

    inset:0;

    background:var(--bg);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.5s ease;

}

#splash img{

    width:120px;

    height:120px;

    object-fit:contain;

    animation:popIn .8s ease;

}

#splash h1{

    margin-top:20px;

    font-size:42px;

    color:var(--text);

}

#splash p{

    margin-top:8px;

    color:var(--text-secondary);

}

.loader{

    display:flex;

    gap:8px;

    margin-top:30px;

}

.loader span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary);

    animation:bounce 1s infinite;

}

.loader span:nth-child(2){

    animation-delay:.2s;

}

.loader span:nth-child(3){

    animation-delay:.4s;

}

@keyframes bounce{

    0%,80%,100%{

        transform:scale(.6);

        opacity:.4;

    }

    40%{

        transform:scale(1.2);

        opacity:1;

    }

}

@keyframes popIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.backButton{

    display:inline-block;

    margin:20px 0;

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

}

.backButton:hover{

    opacity:.8;

}