/* Cukierku, ty łobuzie!: colours + decoration (the variables are documented in /js/quiz/quiz.css) */
:root {
  --bg: #fff9f0; --card: #ffffff; --card2: #fef3c7; --b2: rgba(245,158,11,.22);
  --primary: #f59e0b; --primary2: #d97706; --accent: #fb923c; --second: #d97706;
  --on-primary: #2d1b06; --on-second: #2d1b06;
  --c-correct: #16a34a; --c-wrong: #dc2626;
  --ok-tint: rgba(62,201,138,.13); --bad-tint: rgba(224,85,106,.13);
  --p-tint: rgba(245,158,11,.12); --p-glow: rgba(245,158,11,.4);
  --text: #2d1b06; --muted: #8a6d3b;
  --shadow: 0 8px 30px rgba(146,64,14,.12);
  --nav-bg: rgba(146,64,14,.88);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a130a; --card: #2a1f10; --card2: #352614; --b2: rgba(245,185,66,.22);
    --primary: #f5b942; --primary2: #fbbf24; --accent: #fb923c; --second: #b45309;
    --on-primary: #2d1b06; --on-second: #ffffff;
    --c-correct: #3ec98a; --c-wrong: #e0556a;
    --text: #fef3c7; --muted: #c9a86a;
    --shadow: 0 8px 30px rgba(0,0,0,.45);
  }
}
body {
  background-image:
    radial-gradient(ellipse at 12% 14%, rgba(245,158,11,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 82%, rgba(251,146,60,.10) 0%, transparent 55%);
}
html::before, html::after, body::before, body::after {
  content: '🐾'; position: fixed; opacity: .06; pointer-events: none; user-select: none; z-index: 0; line-height: 1;
}
html::before { left: 8%; top: 10%; font-size: 4.5rem; transform: rotate(15deg); }
html::after { left: 84%; top: 16%; font-size: 3.5rem; transform: rotate(-20deg); }
body::before { left: 6%; top: 74%; font-size: 5rem; transform: rotate(10deg); }
body::after { left: 88%; top: 80%; font-size: 3rem; transform: rotate(-15deg); }