/* Wścibscy: colours + decoration (the variables are documented in /js/quiz/quiz.css) */
:root {
  --bg: #f6f7ff; --card: #ffffff; --card2: #edf0ff; --b2: rgba(66,99,235,.2);
  --primary: #4263eb; --primary2: #3b5bdb; --accent: #7048e8; --second: #364fc7;
  --c-correct: #2f9e44; --c-wrong: #e03131;
  --ok-tint: rgba(64,192,87,.14); --bad-tint: rgba(250,82,82,.13);
  --p-tint: rgba(66,99,235,.1); --p-glow: rgba(66,99,235,.38);
  --text: #1c2242; --muted: #6b7299;
  --shadow: 0 8px 30px rgba(33,47,120,.12);
  --nav-bg: rgba(33,47,120,.88);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1226; --card: #1a1f3d; --card2: #232a52; --b2: rgba(116,143,252,.25);
    --primary: #5c7cfa; --primary2: #748ffc; --accent: #7950f2; --second: #3b5bdb;
    --on-primary: #0f1226;
    --c-correct: #51cf66; --c-wrong: #ff6b6b;
    --p-tint: rgba(116,143,252,.14); --p-glow: rgba(92,124,250,.45);
    --text: #e7eaff; --muted: #9aa3d4;
    --shadow: 0 8px 30px rgba(0,0,0,.45);
  }
}
body {
  background-image:
    radial-gradient(ellipse at 12% 14%, rgba(66,99,235,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 82%, rgba(250,176,5,.10) 0%, transparent 55%);
}
html::before, html::after, body::before, body::after {
  position: fixed; opacity: .06; pointer-events: none; user-select: none; z-index: 0; line-height: 1;
}
html::before { content: '👀'; left: 8%; top: 10%; font-size: 4.5rem; transform: rotate(-12deg); }
html::after { content: '🔭'; left: 84%; top: 16%; font-size: 3.5rem; transform: rotate(18deg); }
body::before { content: '👂'; left: 6%; top: 74%; font-size: 5rem; transform: rotate(10deg); }
body::after { content: '🔍'; left: 88%; top: 80%; font-size: 3rem; transform: rotate(-15deg); }