:root{
  --bg-main:#050a14;
  --bg-soft:#0b1220;
  --bg-glow:#0f3a66;
  --card:rgba(255,255,255,0.06);
  --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.08);
  --text:#e8ecf3;
  --muted:#aab2c5;
  --accent:#38bdf8;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:'Poppins',Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #1b2a4a 0%, transparent 60%),
    radial-gradient(800px 500px at 90% 10%, var(--bg-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-main) 0%, var(--bg-soft) 60%, var(--bg-soft) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{color:#f1f5ff}
p,span,small{color:var(--muted)}

.container{max-width:1200px;margin:2rem auto;padding:1rem}

/* HEADER */
.site-header,.site-header-normal{
  position:fixed;
  top:0;left:0;right:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  background:rgba(12,18,32,.65);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

/* CONTENT OFFSET */
body{padding-top:90px}

/* NAV */
.brand{font-weight:800;font-size:1.5rem;color:#fff}
.brand img{height:48px}
.nav a{color:var(--text);margin-right:1rem;text-decoration:none;font-weight:600}
.nav a:hover{color:var(--accent)}

/* SEARCH */
.search{display:flex;gap:.5rem;align-items:center}
.search input,.search select{
  padding:.5rem .6rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.search button{
  padding:.5rem .9rem;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  color:#04121f;
  font-weight:700;
  cursor:pointer;
}

/* HERO */
.hero{
  padding:2rem;
  margin:1rem 0;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* GAME GRID */
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}

.game-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  transition:.25s;
}

.game-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.5)}

.game-card a{color:inherit;text-decoration:none;display:block;padding:.8rem}

.thumb{
  height:150px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  margin-bottom:.6rem;
}

.ribbon{
  position:absolute;
  right:12px;
  top:12px;
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  padding:6px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  color:#04121f;
}

/* CATEGORY / NOSTALGIC / PANELS */
.cat-card,.nost-card,.auth,.player-box,.related-card,.comments,table.admin-table{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  padding:1rem;
}

/* FORMS */
input,select,textarea{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  padding:.6rem;
}

button{
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  color:#04121f;
  border:0;
  padding:.6rem 1rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}

/* FOOTER */
.site-footer{text-align:center;padding:1rem;color:var(--muted);margin-top:2rem}

/* RESPONSIVE */
@media(max-width:700px){
  .site-header{flex-direction:column;gap:.6rem}
  .search{flex-wrap:wrap}
  body{padding-top:120px}
}