/* Czarna owieczka: colours + decoration (the variables are documented in /js/quiz/quiz.css) */
:root {
  --bg: #FAF4E8; --card: #FFFFFF; --card2: #EFE6D2; --b2: rgba(107,139,92,.22);
  --primary: #6B8B5C; --primary2: #4F6F40; --accent: #D4928A; --second: #4F6F40;
  --on-primary: #1c1810;
  --c-correct: #6B8B5C; --c-wrong: #B4736B;
  --ok-tint: rgba(107,139,92,.12); --bad-tint: rgba(180,115,107,.12);
  --p-tint: rgba(107,139,92,.12); --p-glow: rgba(107,139,92,.4);
  --text: #2B2419; --muted: #5A5046;
  --shadow: 0 8px 30px rgba(43,36,25,.13);
  --nav-bg: rgba(43,36,25,.85);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1810; --card: #2a2418; --card2: #352d1d; --b2: rgba(156,179,136,.22);
    --primary: #9CB388; --primary2: #B7CFA3; --accent: #D4928A;
    --c-correct: #9CB388; --c-wrong: #D4928A;
    --text: #F1E9D9; --muted: #C9BEA8;
    --shadow: 0 8px 30px rgba(0,0,0,.45);
  }
}
body {
  background-image:
    radial-gradient(ellipse at 12% 14%, rgba(107,139,92,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 82%, rgba(212,146,138,.10) 0%, transparent 55%);
}
html::before, html::after, body::before, body::after {
  position: fixed; opacity: .07; 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(15deg); }
html::after { content: '🌿'; left: 84%; top: 16%; font-size: 3.5rem; transform: rotate(-20deg); }
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); }
.logo-title { color: var(--text); font-size: clamp(1.9rem, 5.5vw, 2.8rem); letter-spacing: -.01em; }
.logo-title em { font-style: normal; color: var(--primary2); display: inline-block; transform: rotate(-2deg); }
.hero-img { filter: drop-shadow(0 8px 16px rgba(43,36,25,.15)); animation: bob 3.5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-10px) rotate(2.5deg); } }
@media (prefers-color-scheme: dark) {
  .hero-img { filter: drop-shadow(0 0 12px rgba(241,233,217,.45)); }
  .end-hero { filter: drop-shadow(0 0 10px rgba(241,233,217,.45)); }
}
.ovl-h, .ovl-sub { color: var(--primary2); }