*{box-sizing:border-box}

:root{
    --bg:#070b12;
    --panel:#0d131d;
    --panel2:#111927;
    --line:#1e293b;
    --text:#f8fafc;
    --muted:#94a3b8;
    --pink:#ff3f86;
    --pink2:#ff5fa2;
    --purple:#3b2a69;
}

html,body{min-height:100%}

body{
    margin:0;
    background:
        radial-gradient(circle at 70px 40px, rgba(255,63,134,.12), transparent 26%),
        radial-gradient(circle at 75% 10%, rgba(129,70,255,.13), transparent 34%),
        linear-gradient(180deg,#070b12 0%,#090d17 45%,#070b12 100%);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* HEADER */

.topbar{
    background:rgba(7,11,18,.96);
    border-bottom:1px solid rgba(255,255,255,.075);
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(18px);
}

.topbar-inner{
    height:72px;
    padding:0 30px;
    display:grid;
    grid-template-columns:250px minmax(360px,560px) auto auto;
    gap:24px;
    align-items:center;
}

.logo{
    display:flex;
    flex-direction:column;
    line-height:1;
    width:max-content;
}

.logo div{
    font-size:30px;
    font-weight:950;
    letter-spacing:-1.2px;
    color:#fff;
}

.logo span{color:var(--pink)}
.logo small{
    margin-top:5px;
    color:#e5e7eb;
    font-size:13px;
    font-weight:500;
}

.top-search{
    justify-self:center;
    display:flex;
    width:100%;
    height:46px;
    background:#111827;
    border:1px solid #222c3c;
    border-radius:9px;
    overflow:hidden;
}

.top-search input{
    flex:1;
    background:transparent;
    border:0;
    color:#fff;
    padding:0 17px;
    outline:none;
    font-size:14px;
}

.top-search input::placeholder{color:#8d96a7}

.top-search button{
    width:54px;
    border:0;
    background:transparent;
    color:#cbd5e1;
    cursor:pointer;
}

.upload-btn{
    justify-self:end;
    display:inline-flex;
    height:42px;
    align-items:center;
    justify-content:center;
    padding:0 19px;
    border-radius:7px;
    background:linear-gradient(135deg,var(--pink),var(--pink2));
    color:#fff;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.header-icons{display:flex;gap:12px}
.header-icons a{
    width:42px;
    height:42px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111827;
    border:1px solid rgba(255,255,255,.055);
    color:#e5e7eb;
    font-size:17px;
}

/* IMPORTANT: dropdown is hidden unless hovered */
.topnav{
    height:44px;
    padding:0 30px;
    display:flex;
    align-items:center;
    gap:34px;
    flex-wrap:nowrap;
    overflow:visible;
    font-size:13px;
    color:#e5e7eb;
}

.topnav > a,
.nav-item > a{
    height:44px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#f3f4f6;
    position:relative;
    white-space:nowrap;
}

.topnav > a.active,
.topnav > a:hover,
.nav-item:hover > a{color:var(--pink2)}

.topnav > a.active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    border-radius:99px;
    background:var(--pink);
}

.nav-item{
    position:relative;
    height:44px;
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.dropdown{
    position:absolute;
    top:44px;
    left:0;
    min-width:205px;
    padding:10px;
    border-radius:10px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 45px rgba(0,0,0,.35);
    display:none !important;
}

.dropdown a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    color:#dbe3ef;
    white-space:nowrap;
    font-size:13px;
}

.dropdown a:hover{
    background:#1a2333;
    color:#fff;
}

.nav-item:hover .dropdown{
    display:block !important;
}

/* Category bar */

.subnav{
    background:rgba(12,18,30,.72);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.subnav-inner{
    padding:10px 30px;
    display:flex;
    gap:10px;
    overflow:auto;
    scrollbar-width:none;
}

.subnav-inner::-webkit-scrollbar{display:none}

.subnav a{
    flex:0 0 auto;
    padding:7px 12px;
    border-radius:7px;
    background:rgba(92,74,168,.28);
    border:1px solid rgba(255,255,255,.055);
    color:#d8d9ff;
    font-size:13px;
}

.subnav a:hover{
    background:rgba(255,63,134,.18);
    color:#fff;
}

/* GLOBAL */

.site-main{
    max-width:1920px;
    margin:0 auto;
    padding:0 30px 42px;
}

.layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    gap:28px;
    align-items:start;
}

.main{min-width:0}
.layout > .sidebar{display:none}

/* HERO */

.hero-box,.hero{
    min-height:300px;
    padding:58px 48px;
    border-radius:0 0 16px 16px;
    margin:0 0 28px;
    overflow:hidden;
    position:relative;
    background:
        linear-gradient(90deg,rgba(7,11,18,.98) 0%,rgba(7,11,18,.82) 37%,rgba(7,11,18,.32) 64%,rgba(7,11,18,.86) 100%),
        url("/assets/img/home-hero.jpg") center right / cover no-repeat,
        radial-gradient(circle at 72% 42%, rgba(255,63,134,.34), transparent 28%),
        linear-gradient(135deg,#0a0f18,#17101c 60%,#090d17);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.hero-box:after,.hero:after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:80px;
    background:linear-gradient(0deg,var(--bg),transparent);
    pointer-events:none;
}

.hero-box h1,.hero h1{
    max-width:620px;
    margin:0 0 16px;
    font-size:42px;
    line-height:1.08;
    font-weight:950;
    letter-spacing:-1.6px;
    position:relative;
    z-index:2;
}

.hero-box h1{font-size:0}
.hero-box h1:before{content:"Discover. Download. ";font-size:42px;color:#fff}
.hero-box h1:after{content:"Enjoy.";font-size:42px;color:var(--pink)}

.hero-box p,.hero p{
    max-width:460px;
    color:#f1f5f9;
    font-size:17px;
    line-height:1.58;
    margin:0 0 24px;
    position:relative;
    z-index:2;
}

.hero-box form,.hero-box .quick-tags{display:none}

.hero-box:before{
    content:"Browse Games";
    position:relative;
    z-index:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 23px;
    border-radius:8px;
    background:linear-gradient(135deg,var(--pink),var(--pink2));
    color:#fff;
    font-weight:850;
    box-shadow:0 14px 32px rgba(255,63,134,.25);
}

.category-strip{display:none}

/* Sections */

h2{margin:0 0 16px;font-size:21px;letter-spacing:-.3px}

.main > h2{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    margin:0 0 14px;
}

.main > h2:before{
    content:"";
    width:5px;
    height:22px;
    border-radius:10px;
    background:var(--pink);
    display:inline-block;
}

.grid + h2{margin-top:30px}

/* Cards */

.grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin:0 0 28px;
}

.card{
    display:block;
    background:linear-gradient(180deg,#121a28,#0c121d);
    border:1px solid rgba(255,255,255,.06);
    border-radius:9px;
    overflow:hidden;
    transition:.2s ease;
    min-height:100%;
    color:#fff;
}

.card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,63,134,.55);
    box-shadow:0 18px 40px rgba(0,0,0,.36);
}

.card > img{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    object-fit:cover;
    background:#101827;
    transition:.25s;
}

.thumb{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    background:#101827;
    overflow:hidden;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.25s;
}

.card:hover > img,.card:hover .thumb img{transform:scale(1.05)}

.card > h3{
    padding:12px 13px 4px;
    margin:0;
    font-size:15px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.card h3{margin:0 0 8px;font-size:15px;line-height:1.3}
.card > small{
    display:block;
    padding:0 13px 13px;
    color:#aeb7c7;
    font-size:12px;
}

.card:after{
    content:"Ren'Py";
    display:inline-flex;
    margin:0 0 13px 13px;
    padding:5px 9px;
    border-radius:5px;
    background:rgba(92,74,168,.48);
    color:#ddd6fe;
    font-size:11px;
}

/* Right sidebar */

.right{
    position:sticky;
    top:132px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.right .box{
    padding:18px;
    margin:0;
    background:linear-gradient(180deg,rgba(20,27,42,.96),rgba(13,18,30,.96));
    border:1px solid rgba(255,255,255,.055);
    border-radius:12px;
    box-shadow:none;
}

.right .box h3{
    margin:0 0 14px;
    font-size:18px;
}

.right .box h3:after{
    content:"View all ›";
    float:right;
    color:#cbd5e1;
    font-size:13px;
    font-weight:400;
    margin-top:4px;
}

.right .box a{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    color:#dbe3ef;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:14px;
}

.right .box a:last-child{border-bottom:0}
.right .box a:hover{color:var(--pink2)}
.right small{color:var(--muted)}

/* INNER PAGE STYLES */

.sidebar,.download-box,.description,.details-box,.info-box,.section-head{
    background:linear-gradient(180deg,rgba(17,25,39,.96),rgba(10,15,24,.96));
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    box-shadow:0 18px 45px rgba(0,0,0,.25);
}

.sidebar{
    padding:16px;
    position:sticky;
    top:132px;
}

.sidebar h3{margin:0 0 14px;font-size:17px}
.sidebar a{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:11px 12px;
    color:#d9e2ee;
    border-radius:10px;
    font-size:14px;
}

.sidebar a:hover{background:#151f2e;color:#fff}
.sidebar small{color:var(--muted)}

.tag-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:14px;
}

.tag-cloud a,.tags a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:999px;
    background:#151020;
    border:1px solid rgba(255,79,179,.3);
    color:#f0c8e2;
    font-size:13px;
}

.game-page{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);
    gap:24px;
    align-items:start;
}

.game-cover{
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:#0b111b;
}

.game-cover img{
    width:100%;
    max-height:720px;
    object-fit:cover;
    cursor:zoom-in;
}

.game-info h1{margin:8px 0 14px;font-size:34px}
.details-box,.description,.download-box{padding:20px;margin:18px 0}

.detail-row{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#cbd5e1;
}

.detail-row:last-child{border-bottom:0}
.detail-row strong{color:#fff}

.description{
    line-height:1.75;
    color:#d3dae8;
}

.description h2,.download-box h2{margin-top:0}

.prefix-badge{
    display:inline-flex;
    padding:6px 10px;
    margin:0 6px 6px 0;
    background:linear-gradient(135deg,var(--pink),var(--pink2));
    color:#fff;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.download-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:12px 16px;
    margin:6px;
    background:linear-gradient(135deg,var(--pink),var(--pink2));
    color:#fff;
    border-radius:9px;
    font-weight:800;
}

.screenshots{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
}

.screenshots img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
}

.search-box{
    margin-top:16px;
    display:flex;
    max-width:620px;
    background:#0e1521;
    border:1px solid #222c3c;
    border-radius:10px;
    overflow:hidden;
}

.search-box input{
    flex:1;
    background:transparent;
    border:0;
    color:#fff;
    padding:14px;
    outline:none;
}

.search-box button{
    border:0;
    padding:0 22px;
    background:linear-gradient(135deg,var(--pink),var(--pink2));
    color:#fff;
    font-weight:800;
}

.footer{
    max-width:1760px;
    margin:40px auto 0;
    padding:30px 34px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#9aa7bb;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:32px;
}

.footer p{max-width:460px;line-height:1.6}
.footer h4{margin:0 0 12px;color:#fff}
.footer a{display:block;margin:7px 0;color:#aab6c8}
.footer a:hover{color:var(--pink2)}

@media(max-width:1450px){
    .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .layout{grid-template-columns:minmax(0,1fr) 360px}
}

@media(max-width:1050px){
    .topbar-inner{
        height:auto;
        grid-template-columns:1fr;
        padding:14px;
        gap:12px;
    }

    .top-search{justify-self:stretch}
    .upload-btn,.header-icons{display:none}

    .topnav{
        overflow:auto;
        gap:22px;
        padding:0 14px;
    }

    .layout{grid-template-columns:1fr}
    .right{display:none}
    .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .game-page{grid-template-columns:1fr}
    .site-main{padding:0 14px 30px}
}

@media(max-width:700px){
    .hero-box,.hero{
        min-height:auto;
        padding:36px 22px;
    }

    .hero-box h1:before,.hero-box h1:after{font-size:32px}
    .hero-box p,.hero p{font-size:15px}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-grid{grid-template-columns:1fr}
    .detail-row{grid-template-columns:1fr;gap:4px}
}

@media(max-width:480px){
    .grid{grid-template-columns:1fr}
}