/* ==========================================================================
   Spellentijd.be — sitestylesheet (handgeschreven vanilla CSS)
   --------------------------------------------------------------------------
   Conventies:
   - st-  prefix voor gedeelde componenten (st-page, st-btn, st-overlay, ...)
   - Per-game kleuren komen uit CSS-variabelen die header.php in :root zet:
     --c-primary, --c-secondary, --c-primary-hover, --c-secondary-hover
     (+ extraColors uit games.php als --c-{naam})
   - Game-specifieke styles staan in de inline <style> van elke gamepagina
   - State-modifier: .is-open op overlays/modals
   ========================================================================== */

/* ---- Fonts: Poppins self-hosted (latin subset) ---- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Variabelen (fallback; header.php zet per pagina de echte waarden) ---- */
:root {
  --c-primary: #ff00ff;
  --c-secondary: #00ffff;
  --c-primary-hover: #ff00cc;
  --c-secondary-hover: #00ddff;
  --dark-bg: #1a1a2e;
  --darker-bg: #16213e;
}

/* ---- Reset (gedrag waar de site op gebouwd is) ---- */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}
ul, ol {
  list-style: none;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b, strong {
  font-weight: bolder;
}
img, svg, video, canvas {
  display: block;
  vertical-align: middle;
}
img, video {
  max-width: 100%;
  height: auto;
}
button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [type='button'], [type='submit'] {
  background-color: transparent;
  background-image: none;
  -webkit-appearance: button;
  cursor: pointer;
}
summary {
  display: list-item;
}
table {
  border-collapse: collapse;
  text-indent: 0;
  border-color: inherit;
}

/* ---- Basis ---- */
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background: linear-gradient(135deg, var(--dark-bg), var(--darker-bg));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Helpers ---- */
.hidden { display: none !important; }
/* Tekst die alleen op bredere schermen toont (bv. "Terug naar " in de topbar) */
.st-wide-only { display: none; }
@media (min-width: 640px) {
  .st-wide-only { display: inline; }
}

/* Gradient-tekst in de paginakleuren (paginatitels, 404-cijfer, win/verlies-koppen) */
.primary-gradient {
  background: linear-gradient(to right, var(--c-primary), var(--c-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   Topbar (header.php)
   ========================================================================== */
.st-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-title {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  transition: transform 0.2s;
}
.site-title:hover { transform: translateY(-2px); }
.site-title a {
  background: linear-gradient(to right, var(--c-primary), var(--c-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.st-home-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.st-home-btn:hover { background: rgba(0, 0, 0, 0.7); }
.st-home-btn svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   Layout-containers
   ========================================================================== */
/* Brede pagina-container met responsieve padding (game-pagina's) */
.st-page {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem 2.5rem;
}
@media (min-width: 640px) {
  .st-page { padding: 2.5rem 2rem; }
}

/* Compactere variant (mahjong, tetris, breakout, 2048, vier-op-een-rij) */
.st-wrap {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1.25rem;
  flex: 1 1 0%;
}
.st-wrap--narrow { max-width: 56rem; }

/* Game-zone: speelveld + zijpanelen naast elkaar op desktop */
.st-game-zone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .st-game-zone { flex-wrap: nowrap; }
}
.st-game-zone--tight { gap: 1.5rem; }

/* Kader rond het speelveld/canvas */
.st-board-frame {
  position: relative;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Zijbalk met info-panelen */
.st-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}
@media (min-width: 1024px) {
  .st-sidebar { width: 16rem; align-self: flex-start; }
}
.st-sidebar--slim { gap: 1rem; }
@media (min-width: 1024px) {
  .st-sidebar--slim { width: 12rem; }
}

.game-canvas-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ==========================================================================
   Knoppen
   ========================================================================== */
.st-btn {
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.st-btn:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Gradient-knop in de paginakleuren (basisknop op elke game) */
.btn-gradient {
  background: linear-gradient(to right, var(--c-primary), var(--c-secondary));
}
.btn-gradient:hover {
  background: linear-gradient(to right, var(--c-primary-hover), var(--c-secondary-hover));
}
/* Omgekeerde gradient (solitaire "opnieuw") */
.btn-gradient--reverse {
  background: linear-gradient(to right, var(--c-secondary), var(--c-primary));
}
.btn-gradient--reverse:hover {
  background: linear-gradient(to right, var(--c-secondary-hover), var(--c-primary-hover));
}

/* Transparante knop met rand (geen schaduw) */
.st-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}
.st-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

/* Maat- en vormvarianten */
.st-btn--lg { padding: 0.75rem 2rem; border-radius: 0.5rem; }
.st-btn--md { padding: 0.625rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.st-btn--sm { padding: 0.5rem 1rem; }
.st-btn--sm5 { padding: 0.5rem 1.25rem; }
.st-btn--sm6 { padding: 0.5rem 1.5rem; border-radius: 0.5rem; }
.st-btn--pill { padding: 0.75rem 1.75rem; border-radius: 9999px; font-size: 1rem; line-height: 1.5rem; }
.st-btn--block { display: block; width: 100%; }

/* Subtiele lift bij hover */
.st-btn--lift:hover { transform: translateY(-2px); }
.st-btn--lift-lg:hover { transform: translateY(-4px); }

/* ==========================================================================
   Panelen en labels
   ========================================================================== */
/* Klein donker info-paneel (scores, uitleg, status) */
.st-panel {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
}
.st-panel--text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.st-panel--grow { flex: 1 1 0%; }

/* Kop boven een paneel */
.st-panel-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
  text-align: center;
}
.st-panel-label--base { font-size: 1rem; line-height: 1.5rem; }

/* Highscore-box binnen overlays */
.st-overlay-scores {
  width: 16rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   Overlays (game over / pauze / win) en modals
   ========================================================================== */
.st-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
}
.st-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Start-overlay: zichtbaar tot het spel begint, klikbaar */
.st-overlay--static {
  opacity: 1;
  pointer-events: auto;
  transition: none;
  cursor: pointer;
}
/* Lichtere varianten (countdown, level-complete) */
.st-overlay--light {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.st-overlay--mid {
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.st-overlay--rounded { border-radius: 0.75rem; }
.st-overlay--rounded-sm { border-radius: 0.5rem; }

/* Binnenkader in een overlay (countdown-paneel) */
.st-overlay-card {
  background: rgba(0, 0, 0, 0.7);
  padding: 1.5rem;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.st-overlay-card-h {
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Fullscreen modal (solitaire help/win, bubble-shooter game-over) */
.st-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.st-modal.is-open { display: flex; }

/* Veelgebruikte overlay-typografie */
.st-overlay-h {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 0.75rem;
}
.st-overlay-h--bold { font-weight: 700; }
.st-overlay-text {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
.st-overlay-sub {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 0 1rem;
}

/* ==========================================================================
   Kleur-helpers op de themavariabelen + flex-rij
   ========================================================================== */
.t-primary { color: var(--c-primary); }
.t-secondary { color: var(--c-secondary); }
.t-accent { color: var(--c-accent); }
.t-mine { color: var(--c-mineRed); }

.st-row { display: flex; gap: 0.5rem; }
.st-row--md { gap: 0.75rem; }
.st-row--lg { gap: 1rem; }
.st-row--xl { gap: 1.5rem; }
.st-row--center { justify-content: center; }
.st-row--between { justify-content: space-between; align-items: center; }
.st-row--wrap { flex-wrap: wrap; }

/* Verticale stapel met vaste tussenruimte */
.st-stack > * + * { margin-top: 0.75rem; }
.st-stack--sm > * + * { margin-top: 0.5rem; }

.st-center { text-align: center; }

/* Alleen op desktop tonen */
.st-desktop-only { display: none; }
@media (min-width: 1024px) {
  .st-desktop-only { display: block; }
}

/* Titel op start-overlays */
.st-start-h {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.st-overlay-text--roomy { margin-bottom: 1.5rem; }
.st-overlay-text--tight { margin-bottom: 0.5rem; }

/* ==========================================================================
   SEO-contentsectie (op elke gamepagina)
   ========================================================================== */
.st-game-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 3rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
@media (min-width: 640px) {
  .st-game-section { padding: 2.5rem; }
}

/* Sectietitel met gradient-streep eronder */
.st-section-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--c-secondary);
  position: relative;
  padding-bottom: 1rem;
}
.st-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 3px;
  background: linear-gradient(to right, var(--c-primary), var(--c-secondary));
  border-radius: 0.375rem;
}
.st-section-title--primary { color: var(--c-primary); }

/* Lopende content: kale elementen krijgen hier hun opmaak */
.st-content h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--c-primary);
}
.st-content p {
  margin-bottom: 1.5rem;
  line-height: 1.75rem;
}
.st-content ul {
  list-style: disc;
  padding: 1rem 1rem 1rem 2.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
}
@media (min-width: 640px) {
  .st-content ul { padding: 1.5rem 1.5rem 1.5rem 3.5rem; }
}
.st-content li { margin-bottom: 0.75rem; }
/* Slotparagraaf zonder ondermarge */
.st-content .st-p-flush { margin-bottom: 0; }

/* Gradient-scheidingslijn tussen secties */
.st-divider {
  height: 1px;
  width: 90%;
  max-width: 72rem;
  margin: 4rem auto;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
}

/* ==========================================================================
   Cross-links + footer (footer.php)
   ========================================================================== */
.st-crosslinks {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 1.5rem;
}
@media (min-width: 640px) {
  .st-crosslinks { padding: 0 2rem 1.5rem; }
}
.st-crosslinks-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 640px) {
  .st-crosslinks-card { padding: 2rem; }
}
.st-crosslinks-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--c-secondary);
}
.st-crosslinks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .st-crosslinks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.st-crosslink {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  overflow: hidden;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.st-crosslink:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}
.st-crosslink-img { overflow: hidden; }
.st-crosslink-img img { width: 100%; height: auto; }
.st-crosslink-body { padding: 0.75rem; }
.st-crosslink-name {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #fff;
}
.st-crosslink-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.25rem;
}

.st-footer {
  width: 100%;
  padding: 1rem 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: rgba(0, 0, 0, 0.2);
  margin-top: auto;
}
.st-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .st-footer-inner { flex-direction: row; gap: 0; }
}
.st-footer a {
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.st-footer a:hover { color: #fff; }
.st-footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.st-footer-credit svg { margin-left: 0.25rem; }

/* ==========================================================================
   Fout-overlay (common.js showCompatibilityWarning)
   ========================================================================== */
.st-error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 2rem;
  text-align: center;
  z-index: 50;
}
.st-error-overlay h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #d946ef;
}
.st-error-overlay p { margin-bottom: 1rem; }