/* Gedeelde stijl voor /pc, /games en /clips */
:root {
  --primary-blue: #2457f5;
  --primary-gold: #f39c12;
  --bg-dark: #0f1015;
  --dim: #9aa3bd;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.1);
  --grad: linear-gradient(135deg, var(--primary-gold), var(--primary-blue));
}

* { box-sizing: border-box; }

html { background: var(--bg-dark); }

body {
  margin: 0; padding: 40px 20px 60px; min-height: 100vh;
  color: #fff; font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Achtergrond op vaste lagen i.p.v. background-attachment: fixed:
   dat laat scrollen anders op veel apparaten haperen. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(circle at top right, #1e2a4a, var(--bg-dark));
}

/* subtiel raster, vervaagt naar beneden */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}

.container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.container.wide { max-width: 1200px; }

.back-btn {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff; background: rgba(255,255,255,0.05);
  padding: 10px 20px; border-radius: 50px; border: 1px solid var(--glass-border);
  font-weight: 700; font-size: 0.85em; transition: 0.3s;
}
.back-btn:hover { background: var(--primary-blue); border-color: var(--primary-blue); }

.page-head { text-align: center; margin: 34px 0 40px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--primary-gold);
  background: rgba(243,156,18,0.1); border: 1px solid rgba(243,156,18,0.3);
  padding: 6px 14px; border-radius: 50px; margin-bottom: 18px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -1px; margin: 0 0 10px; line-height: 1.1; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--dim); margin: 0 auto; max-width: 560px; line-height: 1.6; }

.footer-area { margin-top: 90px; text-align: center; position: relative; }
.footer-gif { position: absolute; width: 100px; top: -52px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.copyright { opacity: 0.4; font-size: 0.8em; }

/* chips (filters) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.chip {
  font: 700 0.78rem 'Montserrat', sans-serif; letter-spacing: 0.5px; color: #cfd6ec;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  padding: 8px 16px; border-radius: 50px; cursor: pointer; transition: 0.25s;
}
.chip:hover { border-color: rgba(243,156,18,0.5); color: #fff; }
.chip.active { background: var(--grad); border-color: transparent; color: #fff; }

/* gestaffelde intro */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal 0.6s ease forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

a:focus-visible, button:focus-visible, .chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}