.watc-trivia{
  --watc-navy:#1f3a4d;
  --watc-navy-dark:#142a39;
  --watc-gold:#d5a53c;
  --watc-cream:#f7f1e5;
  --watc-paper:#fffdf8;
  --watc-ink:#1f2933;
  --watc-green:#2f7d55;
  --watc-red:#a43b35;
  --watc-border:#d9d2c4;
  max-width:820px;
  margin:32px auto;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--watc-ink);
}
.watc-trivia *{box-sizing:border-box}
.watc-card{
  background:var(--watc-paper);
  border:1px solid var(--watc-border);
  border-top:7px solid var(--watc-gold);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(20,42,57,.12);
  overflow:hidden;
}
.watc-screen{display:none;padding:clamp(24px,5vw,48px)}
.watc-screen.is-active{display:block}
.watc-start,.watc-results{text-align:center}
.watc-kicker{
  color:var(--watc-gold);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.18em;
  margin-bottom:10px;
}
.watc-trivia h2,.watc-trivia h3{color:var(--watc-navy-dark);margin-top:0}
.watc-trivia h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:10px}
.watc-lede{font-size:1.1rem;margin:0 auto 24px;max-width:520px}
.watc-start-meta{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:0 0 28px;
}
.watc-start-meta span{
  background:var(--watc-cream);border:1px solid var(--watc-border);
  border-radius:999px;padding:8px 13px;font-size:.9rem;
}
.watc-button{
  appearance:none;border:0;border-radius:10px;background:var(--watc-navy);
  color:white;font-weight:800;font-size:1rem;padding:13px 22px;
  cursor:pointer;transition:transform .12s ease,background .12s ease;
}
.watc-button:hover{background:var(--watc-navy-dark);transform:translateY(-1px)}
.watc-button:focus-visible,.watc-answer:focus-visible{outline:3px solid var(--watc-gold);outline-offset:3px}
.watc-topline{
  display:flex;justify-content:space-between;gap:16px;
  color:var(--watc-navy);font-weight:800;margin-bottom:10px;
}
.watc-progress{
  height:8px;background:#e9e4da;border-radius:999px;overflow:hidden;margin-bottom:28px;
}
.watc-progress-fill{height:100%;width:0;background:var(--watc-gold);transition:width .25s ease}
.watc-question{
  font-size:clamp(1.25rem,3vw,1.65rem);
  line-height:1.35;margin-bottom:22px;
}
.watc-answers{display:grid;gap:12px}
.watc-answer{
  width:100%;text-align:left;border:2px solid #d8d4cc;background:white;
  color:var(--watc-ink);border-radius:12px;padding:15px 17px;
  font-size:1rem;line-height:1.35;cursor:pointer;
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}
.watc-answer:hover:not(:disabled){border-color:var(--watc-gold);background:#fffaf0;transform:translateY(-1px)}
.watc-answer:disabled{cursor:default;opacity:1}
.watc-answer.is-correct{border-color:var(--watc-green);background:#e9f5ee}
.watc-answer.is-wrong{border-color:var(--watc-red);background:#f9e9e7}
.watc-feedback{
  min-height:28px;margin:18px 0 14px;font-weight:800;line-height:1.4;
}
.watc-feedback.correct{color:var(--watc-green)}
.watc-feedback.wrong{color:var(--watc-red)}
.watc-score-big{
  width:130px;height:130px;border-radius:50%;margin:8px auto 22px;
  background:var(--watc-navy);color:white;display:grid;place-items:center;
  font-size:2rem;font-weight:900;border:7px solid var(--watc-gold);
}
.watc-result-copy{max-width:520px;margin:0 auto 26px;font-size:1.05rem}
@media (max-width:600px){
  .watc-screen{padding:24px 18px}
  .watc-topline{font-size:.9rem}
  .watc-answer{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .watc-button,.watc-answer,.watc-progress-fill{transition:none}
}