/* THEME TOKENS */
:root {
  --bg:#0e0f16; --text:#eef2ff; --muted:#a8b0c8;
  --card:#151824; --chip:#1d2132;
  --accent:#7cffc4; --accent2:#7bdcff;

  /* Type scale */
  --fs-base: 15px;
  --fs-h1: 22px;
  --fs-h2: 18px;

  /* Radii / effects */
  --radius: 14px;
  --radius-pill: 999px;
  --border-soft: 1px solid rgba(255,255,255,.08);
  --border-subtle: 1px solid rgba(255,255,255,.12);
  --hairline: 1px solid rgba(255,255,255,.06);

  /* Transitions */
  --t-fast: .18s ease;
  --t-base: .3s ease;
}

/* Optional: auto-adapt if user prefers light (can be overridden by body.* themes) */
@media (prefers-color-scheme: light) {
  :root {
    --bg:#ffffff; --text:#0f172a; --muted:#64748b;
    --card:#f8fafc; --chip:#eef2f7;
    --accent:#0ea5e9; --accent2:#22c55e;
  }
}

/* PRESET THEMES */
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; }

/* 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;
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition: background var(--t-base), color var(--t-base);
}
a{color:var(--accent);text-decoration:none;transition:color var(--t-fast), opacity var(--t-fast)}
a:hover{opacity:.9}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
  border-radius:6px;
}

/* CONTAINER */
.container{max-width:1080px;margin:0 auto;padding:16px}

/* 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:var(--hairline);
  backdrop-filter:blur(6px);
  transition: background var(--t-base), border-color var(--t-base);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  /* Use accent glow for a more theme-cohesive effect */
  box-shadow:0 0 24px rgba(0,0,0,.12), 0 0 24px color-mix(in oklab, var(--accent) 35%, transparent);
  transition: box-shadow var(--t-base), transform var(--t-fast);
}
.logo:hover{ transform: translateY(-1px); }
.brand h1{font-size:18px;margin:0}

.nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.nav a{
  padding:8px 10px;border:var(--border-soft);background:var(--chip);
  border-radius:var(--radius-pill);color:var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav a:hover{ transform: translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.nav a.active{ outline:2px solid var(--accent); }

/* SEARCH (header-inline veya content içi varyantlar için ortak) */
.search{display:flex;gap:8px;margin-top:12px}
.search input{
  flex:1;padding:10px;border-radius:10px;border:var(--border-subtle);
  background:var(--chip);color:var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.search input:focus{ box-shadow:0 0 0 3px color-mix(in oklab, var(--accent2) 30%, transparent); }
.search button{
  padding:10px 14px;border-radius:10px;border:var(--border-subtle);
  background:var(--card);color:var(--text);cursor:pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.search button:hover{ transform: translateY(-1px); }

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

/* CARD */
.card{
  background:var(--card);border-radius:var(--radius);border:var(--border-soft);overflow:hidden;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22); }
.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 CONTENT */
.cat-desc{margin:8px 0 16px;color:var(--muted)}
.intro{
  background:var(--card);border:var(--border-soft);padding:16px;border-radius:12px;
  transition: background var(--t-base), border-color var(--t-base);
}

/* GAME FRAME */
.game-frame{
  position:relative;width:100%;padding-top:56.25%;
  background:#000;border-radius:var(--radius);overflow:hidden;border:var(--border-subtle);margin:10px 0 16px
}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* PAGINATION */
.pagination{display:flex;gap:8px;justify-content:center;margin:12px 0}
.pagination a{
  padding:8px 12px;border:var(--border-subtle);border-radius:8px;color:var(--text);background:var(--chip);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.pagination a:hover{ transform: translateY(-1px); }

/* FOOTER */
.footer{
  color:var(--muted);font-size:13px;padding:24px 0;border-top:var(--hairline);margin-top:24px;
  transition: color var(--t-base), border-color var(--t-base);
}
.footer .container { text-align: center; }
.footer .container a { margin: 0 10px; font-size: 15px; text-decoration: none; transition: opacity var(--t-fast); }
.footer .container a:hover { text-decoration: underline; opacity:.9; }

/* FULLSCREEN controls (overlay) */
.fs-controls{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  right:calc(10px + env(safe-area-inset-right, 0px));
  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);
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.fs-btn:hover{ filter:brightness(1.08); transform: translateY(-1px); }

/* 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; }

/* Keep controls visible on top when native fullscreen */
:fullscreen .fs-controls, :-webkit-full-screen .fs-controls{ z-index:2147483647; }

/* HOME title */
.home-title{ text-align:center; font-size:var(--fs-h1); }

/* TYPOGRAPHY utilities */
h1{ font-size:var(--fs-h1); margin:0; }
h2{ font-size:var(--fs-h2); margin:0; }

/* MOBILE */
@media (max-width: 768px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .brand h1{ font-size:16px; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}