/* Verf Pesten — moderne game-look: donkerblauw met diagonale banen, dikke
   schuine letters met donkere outline, glossy knoppen met diepte en goud voor
   munten en prijzen. Geïnspireerd op moderne mobiele games, met eigen kleuren
   en eigen vormen. */

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

/* De spelletjesletter wordt lokaal meegeleverd, zodat het spel ook zonder
   internet (thuis op wifi) precies zo blijft ogen. */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lilita-one.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FFFD;
}
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lilita-one-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

:root {
  --font-display: 'Lilita One', 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
  --font-body: ui-rounded, 'Avenir Next Rounded', 'Trebuchet MS', system-ui, sans-serif;

  /* Donker speelveld met lichte letters. */
  --bg: #14245c;
  --bg-deep: #0d1840;
  --card: #21418f;
  --card-deep: #182f6b;
  --ink: #0a132e;            /* outlines en harde schaduwen */
  --text: #ffffff;
  --muted: #9fb0e4;
  --soft: #2c4d9e;           /* vlakken op een kaart */
  --soft-dark: #1d3878;

  --accent: #ff8a1e;         /* actieknoppen */
  --accent-hi: #ffb64f;
  --blue: #2fa4ff;
  --blue-hi: #6cc4ff;
  --green: #4ecb27;
  --green-hi: #8ae65c;
  --yellow: #ffc400;
  --yellow-hi: #ffe066;
  --pink: #ff5da2;
  --purple: #a06bff;
  --gold: #ffc400;

  --line: 3px;
  --radius: 18px;
  --radius-sm: 13px;
  --sticker: 0 6px 0 rgba(6, 10, 28, 0.55);
  --sticker-sm: 0 4px 0 rgba(6, 10, 28, 0.55);

  /* Dikke outline om koppen, zoals in spelletjeslogo's. */
  --outline:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    -2px 0 0 var(--ink), 2px 0 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink),
    0 5px 0 var(--ink);
}

body {
  font-family: var(--font-body);
  /* Diagonale banen over een diep blauw: het klassieke game-menu. */
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(55deg,
      rgba(255, 255, 255, 0.045) 0 46px,
      rgba(255, 255, 255, 0) 46px 92px),
    linear-gradient(180deg, #1b2f74 0%, var(--bg) 45%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Lilita One heeft één (dik) gewicht */
  line-height: 1.12;
  letter-spacing: 0.4px;
}

/* Grote koppen: wit met donkere outline en een lichte schuinte. */
h1 {
  text-shadow: var(--outline);
  transform: skewX(-4deg);
}

/* --- knoppen: glanzend, met een donkere onderrand die echt indrukt --- */
.btn {
  display: block;
  width: 100%;
  min-height: 66px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 52%, #e06e00 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.6px;
  cursor: pointer;
  padding: 12px 20px;
  transform: skewX(-3deg);
  text-shadow:
    -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.4),
    inset 0 -5px 0 rgba(0, 0, 0, 0.22),
    0 6px 0 var(--ink);
  transition: transform 0.07s, box-shadow 0.07s, filter 0.12s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active {
  transform: skewX(-3deg) translateY(5px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 1px 0 var(--ink);
}
.btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }

.btn.secondary {
  background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 52%, #156bb5 100%);
}
.btn.green {
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 52%, #2e8f12 100%);
}

.btn:disabled {
  background: linear-gradient(180deg, #56618c 0%, #414c75 60%, #333d61 100%);
  color: #9aa4c8;
  text-shadow: none;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.08), 0 6px 0 var(--ink);
  cursor: default;
}
.btn:disabled:hover { filter: none; }
.btn:disabled:active { transform: skewX(-3deg); }

/* --- panelen --- */
.card {
  background: linear-gradient(180deg, var(--card) 0%, var(--card-deep) 100%);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    var(--sticker);
}

.hidden { display: none !important; }

/* --- beweging: alles wipt binnen met een klein doorschieteffect --- */
@keyframes pop-in {
  0% { transform: scale(0.92) translateY(16px); opacity: 0; }
  65% { transform: scale(1.02) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes wiggle {
  0%, 100% { transform: skewX(-4deg) rotate(-2deg); }
  50% { transform: skewX(-4deg) rotate(2deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
/* Glansstreep die af en toe over een gouden element loopt. */
@keyframes shine {
  0%, 60% { transform: translateX(-130%) skewX(-20deg); }
  100% { transform: translateX(230%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}