/* games.ninjastic2008.com - zelfde merk en stijl als ninjastic2008.com.
   De tokens, fonts en componenten (head, hero, buttons, foot) komen één op één
   van de hoofdsite; alleen de gameskaarten zijn hier nieuw, in dezelfde taal. */

:root {
  --bg: oklch(0.16 0.008 250);
  --bg-deep: oklch(0.13 0.008 250);
  --bg-soft: oklch(0.19 0.008 250);
  --panel: oklch(0.20 0.010 250);
  --panel-2: oklch(0.24 0.012 250);
  --border: oklch(0.31 0.012 250);
  --border-soft: oklch(0.26 0.010 250);
  --text: oklch(0.95 0.004 250);
  --muted: oklch(0.76 0.008 250);
  --faint: oklch(0.62 0.008 250);
  --accent: oklch(0.80 0.14 180);
  --accent-dim: oklch(0.42 0.07 180);
  --accent-soft: oklch(0.80 0.14 180 / 0.12);
  --ember: oklch(0.74 0.16 45);

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Archivo', system-ui, sans-serif;

  --radius: 12px;
  --shadow: 0 1px 2px oklch(0 0 0 / .4), 0 10px 30px oklch(0 0 0 / .3);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-bg: 0; --z-content: 1; --z-head: 20;
}

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1060px; width: 100%; margin: 0 auto; padding: 0 22px; }

/* ---------- head ---------- */
.site-head {
  position: sticky; top: 0; top: env(safe-area-inset-top, 0px); z-index: var(--z-head);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft);
}
.site-head .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.brand { font-family: var(--display); font-weight: 650; font-size: 16.5px; letter-spacing: -.02em; color: var(--text); }
.brand:hover { color: var(--accent); text-decoration: none; }
.brand-sep { color: var(--faint); font-family: var(--display); }
.brand-section { font-family: var(--display); font-weight: 650; font-size: 16.5px; color: var(--accent); }
.brand-section:hover { text-decoration: none; }
.site-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; font-size: 14.5px; }
.site-nav a { color: var(--muted); }
.site-nav a:hover, .site-nav a.active { color: var(--text); text-decoration: none; }
.site-nav .btn { padding: 6px 14px; font-size: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 14.5px;
  font-weight: 550; cursor: pointer; transition: background .14s, border-color .14s, opacity .14s;
}
.btn:hover { background: var(--panel); border-color: var(--faint); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #04211e; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); border-color: var(--accent); }
.btn-ghost { background: transparent; }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(64px, 11vw, 128px) 0 clamp(44px, 7vw, 84px);
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-deep), var(--bg) 70%);
  border-bottom: 1px solid var(--border-soft);
}
.hero-inner { position: relative; z-index: var(--z-content); }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 18px; }
.hero h1 { font-size: clamp(36px, 6vw, 68px); font-weight: 800; margin: 0 0 24px; max-width: 18ch; }
.hero h1 .hero-accent { color: var(--accent); }
.hero p.lead { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.65; color: var(--muted); max-width: 56ch; margin: 0 0 20px; }
.hero .note { font-size: 12.5px; color: var(--faint); margin: 0; }
.hero .note a { color: var(--accent); }

.atmosphere {
  position: absolute; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 115% at 70% 40%, #000 34%, transparent 92%);
  mask-image: radial-gradient(135% 115% at 70% 40%, #000 34%, transparent 92%);
}
.sweep {
  position: absolute; top: -60%; bottom: -60%; width: 46%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 42%, transparent) 34%, color-mix(in srgb, var(--accent) 58%, transparent) 50%, color-mix(in srgb, var(--accent) 42%, transparent) 66%, transparent 100%);
  filter: saturate(.85); opacity: .42; transform: rotate(-16deg) translate3d(-40vw, 0, 0);
  animation: sweepAcross 125s linear infinite; will-change: transform;
}
.sweep-2 {
  width: 62%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ember) 34%, transparent) 40%, color-mix(in srgb, var(--ember) 46%, transparent) 50%, color-mix(in srgb, var(--ember) 34%, transparent) 60%, transparent 100%);
  opacity: .24; animation-duration: 195s; animation-delay: -70s;
}
.grain {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat; opacity: .09;
}
@keyframes sweepAcross { from { transform: rotate(-16deg) translate3d(-40vw, 0, 0); } to { transform: rotate(-16deg) translate3d(140vw, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .sweep { animation: none; } }

/* ---------- games ---------- */
.work { padding: clamp(36px, 6vw, 68px) 0; }
.work-head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 40px); }
.work-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 10px; }
.work-head p { margin: 0; color: var(--muted); }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.game-card {
  position: relative; display: flex; flex-direction: column; min-height: 190px;
  padding: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background:
    radial-gradient(130% 80% at 85% -10%, var(--accent-soft), transparent 60%),
    var(--panel);
  color: var(--text); overflow: hidden;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.game-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-3px); box-shadow: var(--shadow); }
.game-card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: auto; }
.game-card h3 { font-size: 23px; font-weight: 800; margin: 14px 0 6px; }
.game-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.game-card .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; color: var(--accent); }
.game-card .go::after { content: "\2192"; transition: transform .16s var(--ease); }
.game-card:hover .go::after { transform: translateX(3px); }
.game-card .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .85; }

.work-empty { color: var(--muted); padding: 10px 0 24px; }

/* skeletons */
.game-card.skel { pointer-events: none; }
.game-card.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, oklch(1 0 0 / .045), transparent); transform: translateX(-100%); animation: sh 1.1s infinite; }
@keyframes sh { to { transform: translateX(100%); } }

/* ---------- foot ---------- */
.site-foot { border-top: 1px solid var(--border-soft); margin-top: auto; padding: 34px 0 calc(50px + env(safe-area-inset-bottom, 0px)); color: var(--faint); font-size: 13.5px; }
.site-foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }
.site-foot .spacer { margin-left: auto; }

.hide-sm { }
@media (max-width: 620px) { .hide-sm { display: none; } }