/* ==========================
   BALLISTIC STUDIOS THEME
========================== */

:root{

--bg:#07080d;

--bg-soft:#0d1118;

--panel:rgba(255,255,255,.04);

--panel-hover:rgba(255,255,255,.07);

--text:#ffffff;

--muted:#a8b0be;

--accent:#6fa7ff;

--accent-soft:#4e7de6;

--border:rgba(255,255,255,.08);

}

/* RESET */

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

body{

font-family:
Inter,
Segoe UI,
sans-serif;

background:
linear-gradient(
180deg,
#05070d,
#090d17,
#07080d
);

color:var(--text);

min-height:100vh;
}

/* ==========================
NAV
========================== */

.navbar{

position:sticky;

top:0;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 40px;

background:
rgba(8,10,18,.82);

backdrop-filter:
blur(18px);

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

z-index:100;
}

.navbar h1{

font-size:30px;

font-weight:800;

letter-spacing:-1px;
}

.nav-actions{

display:flex;

gap:10px;
}

.nav-actions button{

padding:10px 18px;

background:transparent;

color:white;

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

border-radius:12px;

cursor:pointer;

transition:.25s;
}

.nav-actions button:hover{

background:var(--panel);
}

/* ==========================
HERO
========================== */

.hero{

padding:140px 30px 80px;

text-align:center;

max-width:1200px;

margin:auto;
}

.hero h2{

font-size:72px;

font-weight:900;

line-height:.95;

margin-bottom:18px;
}

.hero p{

max-width:700px;

margin:auto;

font-size:22px;

color:var(--muted);

line-height:1.7;
}

.studio-tags{

margin-top:40px;

display:flex;

justify-content:center;

gap:14px;

flex-wrap:wrap;
}

.studio-tags span{

padding:10px 20px;

border-radius:999px;

background:var(--panel);

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

color:#d7e2ff;
}

/* ==========================
ABOUT
========================== */

.about{

max-width:1100px;

margin:auto;

padding:90px 40px;

text-align:center;
}

.about h2{

font-size:42px;

margin-bottom:28px;
}

.about p{

color:var(--muted);

line-height:2;

font-size:18px;

max-width:900px;

margin:auto auto 20px;
}

/* ==========================
FEATURE
========================== */

.featured{

margin:40px;

padding:70px;

border-radius:28px;

background:
linear-gradient(
135deg,
rgba(22,26,39,.95),
rgba(10,13,22,.95)
);

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

cursor:pointer;

transition:.3s;
}

.featured:hover{

transform:
translateY(-6px);

background:
linear-gradient(
135deg,
rgba(28,33,50,.95),
rgba(10,13,22,.95)
);
}

.featured h3{

font-size:40px;

margin-bottom:20px;
}

.featured p{

font-size:18px;

color:var(--muted);

max-width:800px;
}

/* ==========================
PROJECT GRID
========================== */

.game-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(320px,1fr)
);

gap:24px;

padding:40px;
}

.game-card{

background:var(--panel);

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

padding:40px;

border-radius:24px;

transition:.25s;

cursor:pointer;
}

.game-card:hover{

transform:
translateY(-8px);

background:
var(--panel-hover);
}

.game-title{

font-size:30px;

margin-bottom:14px;
}

.game-desc{

color:var(--muted);

line-height:1.8;
}

.play-btn{

display:inline-flex;

margin-top:30px;

padding:12px 22px;

background:white;

color:black;

border-radius:14px;

font-weight:700;
}

/* ==========================
OVERLAY
========================== */

#gameOverlay{

position:fixed;

inset:0;

background:
rgba(0,0,0,.94);

display:none;

justify-content:center;

align-items:center;

z-index:9999;
}

#gameWindow{

width:92%;

height:92%;

background:black;

border-radius:24px;

overflow:hidden;
}

#gameWindow button{

position:absolute;

right:20px;

top:20px;

padding:10px 16px;

border:none;

border-radius:10px;
}

iframe{

width:100%;

height:100%;

border:none;
}

/* ==========================
FOOTER
========================== */

.footer{

padding:80px 30px;

text-align:center;

color:var(--muted);

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

.footer-links{

margin-top:25px;

display:flex;

justify-content:center;

gap:12px;
}

.footer button{

background:transparent;

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

color:white;

padding:12px 18px;

border-radius:12px;
}

/* ==========================
MOBILE
========================== */

@media(max-width:800px){

.hero h2{
font-size:46px;
}

.navbar{

padding:20px;

flex-direction:column;

gap:16px;
}

.featured{

margin:20px;

padding:40px;
}

.game-grid{

padding:20px;
}

}