:root {
  --dark: #15151c;
  --dark-2: #22222b;
  --dark-3: #33333d;
  --light: #f4efe8;
  --muted: #b8b4c2;
  --red: #e8283b;
  --red-deep: #c8102e;
  --gold: #f2b544;
  --opt-0: #e8283b;
  --opt-1: #2f6fde;
  --opt-2: #f2b544;
  --opt-3: #1fa88f;
  --right: #1fa88f;
  --wrong: #e8283b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--dark);
  color: var(--light);
  font-family: "Rubik", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .display { font-family: "Oswald", Arial, sans-serif; font-weight: 700; line-height: 1.05; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.flag { display: inline-flex; flex-direction: column; width: 36px; height: 24px; border-radius: 3px; overflow: hidden; flex: none; }
.flag i { flex: 1; background: var(--red); }
.flag i:nth-child(2) { background: var(--light); }

.btn {
  background: var(--red-deep);
  color: var(--light);
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 20px;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--dark-3); }

.opt-0 { background: var(--opt-0); color: #fff; }
.opt-1 { background: var(--opt-1); color: #fff; }
.opt-2 { background: var(--opt-2); color: var(--dark); }
.opt-3 { background: var(--opt-3); color: #fff; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .7; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.2) both; }
.rise { animation: rise .45s ease both; }
.shake { animation: shake .4s ease 2; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.conn { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); background: var(--dark-3); color: var(--muted); font-size: 14px; padding: 6px 14px; border-radius: 99px; opacity: 0; transition: opacity .3s; }
.conn.show { opacity: 1; }