@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Lexend:wght@100..900&family=Outfit:wght@100..900&family=Petemoss&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Fredoka", sans-serif;
}

:root{
    --bg:#050505;
    --card:#111111b7;
    --border:#ffffff15;
    --text:#ffffff;
    --muted:#a8a8a8;
    --accent:#8b5cf6;
}

body{
    background:var(--bg);
    color:var(--text);
    
}

#particles-js{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
}

.navbar{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:92%;
    max-width:1300px;
    padding:14px 24px;
    background:rgba(15,15,15,.65);
    backdrop-filter:blur(14px);
    border:1px solid var(--border);
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:1000;
    box-shadow:0 0 35px rgba(0,0,0,.45);
}

.nav-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-left img{
    width:42px;
    height:42px;
    border-radius:14px;
    object-fit:cover;
    transition:.25s;
}

.nav-left img:hover{
    transform:scale(1.08);
}

.logo-text{
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:.5px;
}

.nav-links{
    display:flex;
    gap:26px;
}

.nav-links a{
    color:var(--muted);
    text-decoration:none;
    font-weight:500;
    transition:.25s;
    position:relative;
}

.nav-links a:hover{
    color:white;
}

.hero{
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.hero-logo{
    width:170px;
    height:170px;
    border-radius:100px;
    object-fit:cover;
    box-shadow:
        0 0 40px rgba(139,92,246,.45),
        0 0 90px rgba(139,92,246,.15);
    transition:.35s;
    animation: spin 6s linear infinite;
}

.hero-logo:hover{
    transform:translateY(-4px) scale(1.03);
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.title{
    font-size:4rem;
    font-weight:700;
    letter-spacing:2px;
}

.subtitle{
    margin-top:10px;
    color:var(--muted);
    font-size:1rem;
}

.search-box{
    margin-top:28px;
    position:relative;
    width:min(650px,90%);
}

.search-box input{
    width:100%;
    padding:18px 58px 18px 22px;
    border:none;
    outline:none;
    border-radius:18px;
    background:rgba(17,17,17,.7);
    backdrop-filter:blur(10px);
    color:white;
    font-size:1rem;
    border:1px solid rgba(255,255,255,.08);
    transition:.25s;
}

.search-box input:focus{
    border:1px solid rgba(139,92,246,.6);
    box-shadow:0 0 25px rgba(139,92,246,.2);
}

.search-box svg{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    fill:#bdbdbd;
}

.credits{
    position:fixed;
    bottom:18px;
    left:18px;
    padding:14px 18px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    color:#d4d4d4;
    font-size:.9rem;
    z-index:100;
}

.credits span{
    color:white;
    font-weight:600;
}

@media(max-width:700px){

    .navbar{
        padding:12px 16px;
    }

    .nav-links{
        gap:14px;
    }

    .nav-links a{
        font-size:.9rem;
    }

    .title{
        font-size:2.8rem;
    }

    .hero-logo{
        width:120px;
        height:120px;
    }
}

.title{
    font-size:5rem;
    font-family: "Petemoss", cursive;
    font-weight:800;
    color:#fff;
    letter-spacing:3px;
    text-shadow:
        0 0 5px #8b5cf6,
        0 0 10px #8b5cf6,
        0 0 20px #8b5cf6,
        0 0 40px #8b5cf6;
    animation:flicker 2s infinite;
}

@keyframes flicker{
    0%, 18%, 22%, 25%, 53%, 57%, 100%{
        opacity:1;
        text-shadow:
            0 0 5px #8b5cf6,
            0 0 10px #8b5cf6,
            0 0 20px #8b5cf6,
            0 0 40px #8b5cf6,
            0 0 80px #8b5cf6;
    }

    20%, 24%, 55%{
        opacity:.45;
        text-shadow:none;
    }
}

button {
        cursor: pointer;
        background:rgba(15,15,15,.65);
    backdrop-filter:blur(14px);
    border:1px solid var(--border);
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 20px;
        margin-top: 20px;
      }
      .game-link{
    
    width:220px;
    text-decoration:none;
    transition:.3s ease;
}

.game-tile{
    width:220px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    position:relative;
    backdrop-filter:blur(14px);
    box-shadow:
        0 0 0 rgba(139,92,246,0),
        0 10px 35px rgba(0,0,0,.55);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.game-tile::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            transparent 35%
        );
    pointer-events:none;
}

.game-tile:hover{
    transform:translateY(-7px) scale(1.025);
    border-color:rgba(139,92,246,.45);
    box-shadow:
        0 0 25px rgba(139,92,246,.22),
        0 0 60px rgba(139,92,246,.12),
        0 18px 40px rgba(0,0,0,.7);
}

.game-icon{
    width:100%;
    height:140px;
    object-fit:cover;
    display:block;
    transition:
        transform .35s ease,
        filter .35s ease;
    border-bottom:1px solid var(--border);
}

.game-tile:hover .game-icon{
    transform:scale(1.06);
    filter:
        brightness(1.1)
        saturate(1.1);
}

.game-title{
    color:var(--text);
    font-size:18px;
    font-weight:700;
    text-align:center;
    padding:16px;
    letter-spacing:.7px;
    text-shadow:
        0 0 12px rgba(139,92,246,.35);
}

.flex-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:22px;
    padding:24px;
}

.container{
    padding:0;
}

::selection {
  background-color: var(--accent);
  color: #fff;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: var(--bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 5px;
}

:root{
    --bg:#050505;
    --card:#111111b7;
    --border:#ffffff15;
    --text:#ffffff;
    --muted:#a8a8a8;
    --accent:#8b5cf6;
}

/* SETTINGS BOX */
.settingsbox {
  width: 100%;
  max-width: 1000px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin: 30px auto;
  color: var(--text);
  backdrop-filter: blur(10px);
}

.settingsbox h2 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

.settingsbox p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.settingsbox .box-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

.settingsbox button {
  background: #1b1b1b;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, border 0.2s ease;
}

.settingsbox button:hover {
  background: #242424;
  transform: translateY(-1px);
  border-color: var(--accent);
}

.settingsbox .secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.settingsbox .secondary:hover {
  border-color: var(--accent);
  color: var(--text);
}

#presetSelect {
  width: 100%;
  max-width: 300px;
  padding: 10px 16px;
  background: #1a1a1a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

#presetSelect:focus {
  border-color: var(--accent);
}