/* ==========================================================================
   BASIS
   Kleuren, reset, body en algemene hulpklassen (alle pagina's).
   ========================================================================== */

:root {
  --bg-dark: #0a0f1d;
  --card-bg: rgba(30, 41, 59, 0.9);
  --card-border: rgba(255, 255, 255, 0.15);
  --accent-primary: #38bdf8;
  --accent-secondary: #818cf8;
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --success: #38bdf8;     /* Blauw i.p.v. fel groen */
  --gold: #f59e0b;        /* Goud voor Highlights, Beurt & Volgende */
  --purple-glow: #a855f7;   /* Paars voor Geraden & Finale */
  --danger: #ef4444;
  --warning: #f59e0b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.6rem 1.25rem;
  overflow: hidden;
  position: relative;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.footer-bar { margin-top: 1rem; display: flex; justify-content: center; }
.back-link { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.hidden { display: none !important; }