:root { --bg:#0e0f16; --text:#eef2ff; --muted:#a8b0c8; --card:#151824; --chip:#1d2132; --accent:#7cffc4; --accent2:#7bdcff; }
body.sunset{ --bg:#0f0a1f; --text:#ffeade; --muted:#eec4b3; --card:#1a1230; --chip:#23183f; --accent:#ff7a59; --accent2:#ffb703; }
body.mint{ --bg:#061616; --text:#eafffb; --muted:#b7e0d8; --card:#0c2222; --chip:#103030; --accent:#3ddc97; --accent2:#7bdcff; }
body.noir{ --bg:#0d0d0d; --text:#f3f3f3; --muted:#bdbdbd; --card:#151515; --chip:#1e1e1e; --accent:#9b9bff; --accent2:#6ee7ff; }
body.retro {
  --bg:#0d0d0d; --text:#fffbf5; --muted:#ff9ed6;
  --card:#1a1a1a; --chip:#222; 
  --accent:#ff4f92; --accent2:#00ff9c;
}
body.cyber {
  --bg:#070b17; --text:#e0f0ff; --muted:#a4b6c7;
  --card:#101520; --chip:#182030; 
  --accent:#9b7bff; --accent2:#00f6ff;
}
body.lava {
  --bg:#1a0a0a; --text:#fff4e6; --muted:#ffb899;
  --card:#2a0f0f; --chip:#3a1515;
  --accent:#ff5c00; --accent2:#ffb703;
}
body.forest {
  --bg:#06120a; --text:#eafbee; --muted:#a6d3b3;
  --card:#0c2212; --chip:#12331c;
  --accent:#3ddc97; --accent2:#7cffc4;
}
body.ocean {
  --bg:#02141f; --text:#e6f8ff; --muted:#a4cbe3;
  --card:#062030; --chip:#0b3248;
  --accent:#00b4d8; --accent2:#90e0ef;
}
body.golden {
  --bg:#0a0a0a; --text:#fffbea; --muted:#d1c089;
  --card:#1a1a1a; --chip:#2a2a2a;
  --accent:#ffcc00; --accent2:#ffdd55;
}

/* Footer */
.footer .container { text-align: center; }
.footer .container a { margin: 0 10px; font-size: 15px; text-decoration: none; }
.footer .container a:hover { text-decoration: underline; }

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}

/* Header */
.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.container{max-width:1080px;margin:0 auto;padding:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 24px rgba(255,255,255,.15)}
.brand h1{font-size:18px;margin:0}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.nav a{padding:8px 10px;border:1px solid rgba(255,255,255,.1);background:var(--chip);border-radius:999px;color:var(--text)}
.nav a.active{outline:2px solid var(--accent)}
.search{display:flex;gap:8px;margin-top:12px}
.search input{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--chip);color:var(--text)}
.search button{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--card);color:var(--text);cursor:pointer}

/* Grid (tek tanım) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0 24px}

/* Card */
.card{background:var(--card);border-radius:14px;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.thumb{aspect-ratio:16/9;width:100%;display:block;object-fit:cover;background:#000}
.card .body{padding:10px}
.card h3{margin:0 0 6px;font-size:16px}
.badge{font-size:12px;color:var(--muted)}

/* Misc */
.cat-desc{margin:8px 0 16px;color:var(--muted)}
.game-frame{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);margin:10px 0 16px}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.footer{color:var(--muted);font-size:13px;padding:24px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:24px}
.intro{background:var(--card);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:12px}
.pagination{display:flex;gap:8px;justify-content:center;margin:12px 0}
.pagination a{padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text);background:var(--chip)}

/* Mobil: 2 sütun */
@media (max-width: 768px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
/* Fullscreen controls (overlay) */
.fs-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.fs-btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
}
.fs-btn:hover { filter: brightness(1.08); }

/* Pseudo fullscreen fallback (if Fullscreen API unavailable) */
.pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  border-radius: 0 !important;
  z-index: 9998 !important;
}
body.no-scroll { overflow: hidden; }

/* When truly fullscreen, many browsers add :fullscreen */
:fullscreen .fs-controls,
:-webkit-full-screen .fs-controls {
  /* keep controls visible on top */
  z-index: 2147483647;
}