/* ================================================================
   FREE AID FOR ANSWERS
   Navy authority × Green money × Gold achievement
   Fonts: local system UI + Georgia-style display
   ================================================================ */

/* --- Tokens ----------------------------------------------- */
:root {
  --navy:         #1a2744;
  --navy-mid:     #243564;
  --navy-light:   #3d5188;
  --green:        #16a34a;
  --green-dark:   #15803d;
  --green-light:  #dcfce7;
  --green-xlight: #f0fdf4;
  --gold:         #f59e0b;
  --gold-dark:    #d97706;
  --gold-light:   #fef3c7;
  --gold-xlight:  #fffbeb;
  --red:          #ef4444;
  --red-dark:     #dc2626;
  --red-light:    #fee2e2;
  --bg:           #f1f5f9;
  --surface:      #ffffff;
  --border:       #e2e8f0;
  --border-dark:  #cbd5e1;
  --text:         #0f172a;
  --muted:        #64748b;
  --muted-light:  #94a3b8;
  --shadow-sm:    0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:    0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --shadow-lg:    0 12px 40px rgba(15,23,42,.10), 0 4px 16px rgba(15,23,42,.06);
  --shadow-navy:  0 8px 32px rgba(26,39,68,.28), 0 2px 8px rgba(26,39,68,.16);
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-pill:  999px;
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(22,163,74,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(26,39,68,.05) 0%, transparent 45%),
    var(--bg);
}

a { color: var(--green-dark); }
a:hover { color: var(--green); }

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

p { overflow-wrap: anywhere; }

/* --- Header ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 1.75rem);
  height: 64px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow: 0 2px 8px rgba(22,163,74,.4);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  user-select: none;
}

.brand strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
}

.brand small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 1px;
}

.site-nav {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.site-nav a {
  display: block;
  min-width: 68px;
  padding: 6px 14px;
  text-align: center;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition: background 140ms, color 140ms;
}

.site-nav a:hover { color: var(--text); background: var(--surface); }

.site-nav a[aria-current="page"] {
  color: #fff;
  background: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* --- Main layout ------------------------------------------ */
.quiz-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(18rem, 1fr);
  gap: 1rem;
  width: min(1200px, calc(100% - 2rem));
  margin: 1.25rem auto 2.5rem;
}

/* --- Intro / Stats Panel ---------------------------------- */
.intro-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-navy);
  color: #fff;
  min-height: 20rem;
  position: relative;
  overflow: hidden;
}

.intro-panel::before {
  content: '';
  position: absolute;
  top: -3rem; right: -3rem;
  width: 14rem; height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,163,74,.22) 0%, transparent 70%);
  pointer-events: none;
}

.intro-panel::after {
  content: '';
  position: absolute;
  bottom: -2rem; left: -2rem;
  width: 10rem; height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
  pointer-events: none;
}

.eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.08;
  color: #fff;
  max-width: 14ch;
  position: relative;
}

.lead {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  margin: 0;
  position: relative;
}

/* Stats grid */
.session-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-top: auto;
}

.stat {
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}

.stat span, .stat small { display: block; }

.stat-number {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}

.stat-number--sm {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  letter-spacing: -0.02em;
}

.stat-number.pulse {
  animation: statPulse 320ms cubic-bezier(.2,.9,.3,1.4);
}

@keyframes statPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); color: #4ade80; }
  100% { transform: scale(1); }
}

.stat small {
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Streak badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 14px rgba(245,158,11,.45), 0 0 0 1px rgba(245,158,11,.3);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--navy);
  animation: streakAppear 280ms cubic-bezier(.2,.9,.3,1.4);
  position: relative;
}

.streak-badge.hidden { display: none; }

@keyframes streakAppear {
  from { transform: scale(0.65) translateY(6px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.streak-flame { font-size: 1.1em; }
.streak-label { font-size: 0.7em; font-weight: 700; opacity: 0.7; }

/* --- Bowl Stage ------------------------------------------- */
.bowl-stage {
  position: relative;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 42rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.bowl-stage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(26,39,68,.04) 0%, transparent 100%);
  pointer-events: none;
}

.counter-ribbon {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(85%, 22rem);
  padding: 0.55rem 1.25rem;
  background: var(--navy);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Bowl visual */
.bowl-wrap {
  position: relative;
  width: min(90vw, 32rem);
  height: 22rem;
  margin-top: 3rem;
}

.bean-shelf {
  position: absolute;
  z-index: 3;
  left: 10%;
  right: 10%;
  bottom: 9.6rem;
  height: 9.4rem;
  overflow: hidden;
  border-radius: 50% 50% 34% 34%;
}

.bean {
  position: absolute;
  width: clamp(1.1rem, 3.5vw, 1.65rem);
  height: clamp(0.68rem, 2.2vw, 1rem);
  background:
    radial-gradient(circle at 28% 30%, rgba(255,255,255,.28), transparent 0.25rem),
    linear-gradient(135deg, #22c55e 0%, var(--green) 50%, var(--green-dark) 100%);
  border-radius: 58% 42% 54% 46%;
  box-shadow: inset -0.18rem -0.1rem 0 rgba(0,0,0,.18), 0 0.14rem 0.28rem rgba(0,0,0,.14);
  transform: rotate(var(--r));
  animation: beanDrop 520ms cubic-bezier(.2,.9,.28,1.18);
}

.bean::after {
  content: '';
  position: absolute;
  top: 16%; left: 48%;
  width: 30%; height: 58%;
  border-left: 1.5px solid rgba(255,255,255,.32);
  border-radius: 50%;
  transform: rotate(18deg);
}

.bowl {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: 12rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 32%),
    linear-gradient(160deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  border: 0.42rem solid rgba(30,64,175,.28);
  border-top: 0.9rem solid rgba(255,255,255,.72);
  border-radius: 0 0 16rem 16rem / 0 0 8.5rem 8.5rem;
  box-shadow:
    inset 0 -2rem 2.5rem rgba(30,64,175,.28),
    0 2.2rem 2.8rem rgba(26,39,68,.18);
}

.bowl::before {
  content: '';
  position: absolute;
  z-index: 4;
  left: 6%; right: 6%;
  top: -1.5rem;
  height: 2.2rem;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border: 0.36rem solid rgba(30,64,175,.22);
  border-radius: 50%;
  box-shadow: inset 0 0.4rem 0.8rem rgba(37,99,235,.12);
}

.bowl-gloss {
  position: absolute;
  z-index: 2;
  left: 22%;
  top: 42%;
  width: 10rem;
  height: 1rem;
  background: rgba(255,255,255,.28);
  border-radius: var(--radius-pill);
  transform: rotate(-8deg);
}

.bowl-stage h2 {
  margin-top: 1rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: center;
  color: var(--navy);
}

.bowl-stage p {
  max-width: 28rem;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
}

/* --- Realistic Impact Scenes ------------------------------ */
.impact-stage {
  isolation: isolate;
}

.impact-stage::after {
  content: '';
  position: absolute;
  inset: auto 14% 4.8rem;
  height: 2rem;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.14), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

.impact-stage--rice {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(245, 158, 11, 0.08), transparent 42%),
    var(--surface);
}

.impact-stage--beans {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(120, 53, 15, 0.08), transparent 44%),
    var(--surface);
}

.impact-stage--kibble {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(217, 119, 6, 0.1), transparent 43%),
    var(--surface);
}

.impact-stage--trees {
  background:
    linear-gradient(180deg, #f0fdf4 0%, #ffffff 62%);
}

.impact-stage--ocean {
  background:
    linear-gradient(180deg, #eff6ff 0%, #ffffff 58%);
}

.impact-scene {
  position: relative;
  width: min(90vw, 32rem);
  height: 22rem;
  margin-top: 3rem;
  z-index: 1;
}

.impact-bowl-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 0;
}

.impact-layer,
.impact-fill {
  position: absolute;
  z-index: 3;
  left: 10%;
  right: 10%;
  bottom: 9.25rem;
  height: 9.65rem;
  overflow: hidden;
  border-radius: 50% 50% 34% 34%;
}

.impact-fill {
  z-index: 2;
  opacity: 0.9;
  pointer-events: none;
}

.impact-fill::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0.3rem;
  height: var(--fill, 0%);
  max-height: 72%;
  border-radius: 50% 50% 18% 18%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.42), transparent 0.4rem),
    linear-gradient(180deg, rgba(120, 53, 15, 0.22), rgba(120, 53, 15, 0.38));
  transition: height 420ms ease;
}

.impact-stage--rice .impact-fill::before {
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.95) 0 0.08rem, transparent 0.09rem),
    radial-gradient(circle at 32% 52%, rgba(255,255,255,.85) 0 0.08rem, transparent 0.09rem),
    radial-gradient(circle at 58% 30%, rgba(252,231,193,.9) 0 0.08rem, transparent 0.09rem),
    linear-gradient(180deg, #fff8e7, #ead7ab);
  background-size: 1rem 0.6rem, 1.1rem 0.65rem, 1.2rem 0.62rem, auto;
}

.impact-stage--kibble .impact-fill::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.2), transparent .35rem),
    linear-gradient(180deg, #b86a2b, #7c3d16);
}

.realistic-bowl {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12rem;
  border-radius: 0 0 16rem 16rem / 0 0 8.5rem 8.5rem;
  box-shadow:
    inset 0 -2rem 2.6rem rgba(15, 23, 42, 0.2),
    0 2.1rem 2.8rem rgba(15, 23, 42, 0.18);
}

.realistic-bowl::before {
  content: '';
  position: absolute;
  z-index: 4;
  left: 6%;
  right: 6%;
  top: -1.5rem;
  height: 2.2rem;
  border-radius: 50%;
  box-shadow: inset 0 0.5rem 0.8rem rgba(15, 23, 42, 0.12);
}

.realistic-bowl--ceramic {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 32%),
    linear-gradient(155deg, #f8fafc 0%, #cbd5e1 45%, #64748b 100%);
  border: 0.42rem solid rgba(100, 116, 139, 0.32);
  border-top: 0.9rem solid rgba(255, 255, 255, 0.8);
}

.realistic-bowl--ceramic::before {
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  border: 0.36rem solid rgba(100, 116, 139, 0.28);
}

.impact-stage--beans .realistic-bowl--ceramic {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(155deg, #e7f0ff 0%, #93c5fd 48%, #2563eb 100%);
}

.realistic-bowl--dog {
  height: 11rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(155deg, #ef4444 0%, #b91c1c 58%, #7f1d1d 100%);
  border: 0.45rem solid rgba(127, 29, 29, 0.34);
  border-top: 0.9rem solid rgba(254, 226, 226, 0.86);
  border-radius: 0 0 13rem 13rem / 0 0 5.8rem 5.8rem;
}

.realistic-bowl--dog::before {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border: 0.36rem solid rgba(127, 29, 29, 0.26);
}

.impact-piece {
  position: absolute;
  display: block;
  transform: rotate(var(--r)) scale(var(--s));
  animation: impactDrop 560ms cubic-bezier(.2,.9,.28,1.16) both;
  animation-delay: var(--d, 0ms);
}

.impact-piece.settled {
  animation: none;
}

.bean-piece {
  width: clamp(1.08rem, 3.2vw, 1.62rem);
  height: clamp(0.68rem, 2vw, 0.98rem);
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.26), transparent .24rem),
    linear-gradient(135deg, #a16207 0%, #7c2d12 54%, #431407 100%);
  border-radius: 58% 42% 54% 46%;
  box-shadow: inset -0.18rem -0.1rem 0 rgba(0,0,0,.22), 0 0.16rem 0.3rem rgba(67,20,7,.18);
}

.bean-piece::after {
  content: '';
  position: absolute;
  top: 16%;
  left: 47%;
  width: 31%;
  height: 60%;
  border-left: 1.5px solid rgba(255, 237, 213, 0.42);
  border-radius: 50%;
  transform: rotate(18deg);
}

.bean-piece--2 { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.22), transparent .24rem), linear-gradient(135deg, #92400e, #5f2a12 58%, #2c1208); }
.bean-piece--3 { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.24), transparent .24rem), linear-gradient(135deg, #b45309, #78350f 58%, #451a03); }

.rice-grain {
  width: 0.72rem;
  height: 0.22rem;
  background: linear-gradient(90deg, #fffdf5, #f5e8c6 70%, #d6bd82);
  border-radius: 999px;
  box-shadow: 0 0.08rem 0.12rem rgba(120, 53, 15, 0.12);
}

.kibble-piece {
  width: clamp(0.95rem, 2.8vw, 1.35rem);
  height: clamp(0.86rem, 2.5vw, 1.18rem);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 226, 166, 0.55), transparent 0.18rem),
    radial-gradient(circle at 62% 62%, rgba(67, 20, 7, 0.22), transparent 0.16rem),
    linear-gradient(145deg, #c47a35, #8a4618 65%, #57250d);
  border-radius: 42% 58% 49% 51%;
  box-shadow: inset -0.16rem -0.14rem 0 rgba(67,20,7,.22), 0 0.16rem 0.28rem rgba(67,20,7,.16);
}

.kibble-piece--2 { border-radius: 52% 44% 60% 40%; }
.kibble-piece--3 { border-radius: 36% 64% 43% 57%; }
.kibble-piece--4 { border-radius: 48% 52% 35% 65%; }

.ocean-scene,
.tree-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ocean-sky {
  position: absolute;
  inset: 0 0 44%;
  background: linear-gradient(180deg, #dbeafe, #f8fafc);
}

.ocean-water {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 58%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.42), transparent 22%),
    linear-gradient(180deg, #38bdf8, #0f766e);
  border-radius: 48% 52% 0 0 / 16% 16% 0 0;
}

.ocean-water::after {
  content: '';
  position: absolute;
  inset: 16% 6% auto;
  height: 1rem;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 2rem, transparent 2rem 4rem);
  border-radius: 50%;
  opacity: 0.55;
}

.shoreline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, #fde68a, #d6a75d);
}

.mesh-bag {
  position: absolute;
  z-index: 3;
  left: 21%;
  right: 21%;
  bottom: 12%;
  height: 54%;
  border: 0.18rem solid rgba(15, 23, 42, 0.38);
  border-top: 0;
  border-radius: 0 0 4.8rem 4.8rem / 0 0 5.8rem 5.8rem;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 -1rem 1.5rem rgba(14, 116, 144, 0.18), 0 1rem 1.8rem rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.mesh-bag-mouth {
  position: absolute;
  left: -3%;
  right: -3%;
  top: -0.3rem;
  height: 1.1rem;
  border: 0.2rem solid rgba(15, 23, 42, 0.4);
  border-radius: 50%;
  background: rgba(226, 232, 240, 0.64);
  z-index: 5;
}

.mesh-weave {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(15,23,42,.2) 0 1px, transparent 1px 0.8rem),
    repeating-linear-gradient(-45deg, rgba(15,23,42,.16) 0 1px, transparent 1px 0.8rem);
  z-index: 4;
  pointer-events: none;
}

.mesh-bag .impact-layer {
  inset: 0.6rem 0.8rem 0.7rem;
  height: auto;
  border-radius: 0 0 4rem 4rem;
}

.plastic-piece {
  box-shadow: 0 0.12rem 0.24rem rgba(15,23,42,.14);
}

.plastic-piece--straw {
  width: 2rem;
  height: 0.22rem;
  background: linear-gradient(90deg, #ef4444 0 22%, #fff 22% 42%, #ef4444 42% 62%, #fff 62% 82%, #ef4444 82%);
  border-radius: 999px;
}

.plastic-piece--bag {
  width: 1.25rem;
  height: 1.45rem;
  background: rgba(226, 232, 240, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.5);
  border-radius: 0.2rem 0.2rem 0.45rem 0.45rem;
}

.plastic-piece--bag::before {
  content: '';
  position: absolute;
  left: 28%;
  right: 28%;
  top: -0.18rem;
  height: 0.42rem;
  border: 1px solid rgba(100, 116, 139, 0.5);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.plastic-piece--wrapper {
  width: 1.6rem;
  height: 0.78rem;
  background: linear-gradient(135deg, #facc15, #fb7185);
  border-radius: 0.16rem;
}

.plastic-piece--cap {
  width: 0.9rem;
  height: 0.9rem;
  background: radial-gradient(circle at 35% 35%, #bfdbfe, #2563eb);
  border-radius: 50%;
}

.plastic-piece--bottle {
  width: 0.72rem;
  height: 1.72rem;
  background: linear-gradient(90deg, rgba(191,219,254,.64), rgba(59,130,246,.48), rgba(191,219,254,.68));
  border: 1px solid rgba(37, 99, 235, 0.36);
  border-radius: 0.25rem 0.25rem 0.42rem 0.42rem;
}

.tree-sky {
  position: absolute;
  inset: 0 0 24%;
  background:
    radial-gradient(circle at 22% 22%, rgba(250,204,21,.35), transparent 12%),
    linear-gradient(180deg, #dcfce7, #f8fafc);
}

.soil-bed {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 28%;
  background:
    radial-gradient(circle at 20% 10%, rgba(120, 53, 15, 0.16), transparent 10%),
    linear-gradient(180deg, #7c4a20, #3f2210);
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
}

.soil-bed span {
  position: absolute;
  left: 40%;
  right: 40%;
  top: -0.35rem;
  height: 0.7rem;
  background: rgba(63, 34, 16, 0.25);
  border-radius: 50%;
}

.current-tree {
  --growth: 0.08;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22%;
  width: 8rem;
  height: 14rem;
  transform: translateX(-50%);
  transform-origin: bottom center;
}

.tree-trunk {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(0.42rem + 0.5rem * var(--growth));
  height: calc(2.1rem + 7rem * var(--growth));
  background: linear-gradient(90deg, #78350f, #a16207, #5f2d0c);
  border-radius: 999px 999px 0.25rem 0.25rem;
  transform: translateX(-50%);
  transition: height 420ms ease, width 420ms ease;
}

.tree-leaf {
  position: absolute;
  left: 50%;
  bottom: calc(1.7rem + 7.2rem * var(--growth));
  width: calc(1.5rem + 4.6rem * var(--growth));
  height: calc(1rem + 3.5rem * var(--growth));
  background: radial-gradient(circle at 35% 32%, #86efac, #16a34a 62%, #166534);
  border-radius: 62% 38% 58% 42%;
  opacity: calc(0.34 + 0.66 * var(--growth));
  transform-origin: bottom center;
  transition: all 420ms ease;
}

.tree-leaf--left { transform: translateX(-82%) rotate(-24deg); }
.tree-leaf--right { transform: translateX(-18%) rotate(24deg) scaleX(-1); }
.tree-leaf--top { transform: translateX(-50%) translateY(-18%) rotate(5deg); }

.tree-grove {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.completed-tree {
  position: absolute;
  bottom: 22%;
  width: 4.8rem;
  height: 9rem;
  transform: translateX(-50%) scale(0.78);
  opacity: 0.72;
}

.completed-tree::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.55rem;
  height: 5rem;
  background: linear-gradient(90deg, #78350f, #a16207);
  border-radius: 999px;
  transform: translateX(-50%);
}

.completed-tree::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3.6rem;
  width: 4.8rem;
  height: 4.2rem;
  background: radial-gradient(circle at 34% 30%, #bbf7d0, #16a34a 62%, #166534);
  border-radius: 50% 45% 52% 48%;
  transform: translateX(-50%);
}

.completed-tree--2 { transform: translateX(-50%) scale(0.64); opacity: 0.58; }
.completed-tree--3 { transform: translateX(-50%) scale(0.72); opacity: 0.64; }

.tree-count-marker {
  position: absolute;
  right: 10%;
  bottom: 34%;
  padding: 0.25rem 0.48rem;
  color: #166534;
  background: rgba(220, 252, 231, 0.9);
  border: 1px solid rgba(22, 101, 52, 0.18);
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.8rem;
}

.tag-mark,
.charity-icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.tag-mark {
  width: 1rem;
  height: 1rem;
  margin-right: 0.35rem;
  vertical-align: -0.16rem;
}

.tag-mark--rice,
.charity-icon--rice {
  background:
    radial-gradient(ellipse at 38% 42%, #fffdf5 0 13%, transparent 14%),
    radial-gradient(ellipse at 56% 58%, #f5e8c6 0 13%, transparent 14%),
    #f8fafc;
  border: 1px solid #d6bd82;
  border-radius: 50%;
}

.tag-mark--beans,
.charity-icon--beans {
  background: linear-gradient(135deg, #a16207, #431407);
  border-radius: 58% 42% 54% 46%;
  box-shadow: inset -0.12rem -0.08rem 0 rgba(0,0,0,.2);
}

.tag-mark--kibble,
.charity-icon--kibble {
  background: radial-gradient(circle at 32% 30%, #f7c66b, transparent 20%), linear-gradient(135deg, #b86a2b, #57250d);
  border-radius: 44% 56% 48% 52%;
}

.tag-mark--ocean,
.charity-icon--ocean {
  background: linear-gradient(180deg, #bae6fd 0 45%, #0ea5e9 46% 100%);
  border-radius: 50%;
}

.tag-mark--trees,
.charity-icon--trees {
  background: radial-gradient(circle at 50% 36%, #86efac 0 34%, transparent 35%), linear-gradient(90deg, transparent 42%, #92400e 43% 57%, transparent 58%);
  border-radius: 50%;
}

.charity-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.15rem;
  box-shadow: inset 0 -0.16rem 0 rgba(15,23,42,.12), 0 0.2rem 0.5rem rgba(15,23,42,.12);
}

@keyframes impactDrop {
  0% {
    opacity: 0;
    transform: translateY(-11rem) rotate(var(--r)) scale(calc(var(--s) * .82));
  }
  68% {
    opacity: 1;
    transform: translateY(0.42rem) rotate(var(--r)) scale(calc(var(--s) * 1.06));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--r)) scale(var(--s));
  }
}

/* --- Quiz Card -------------------------------------------- */
.quiz-card {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Tier / difficulty selector */
.tier-panel {
  margin-bottom: 0.85rem;
  padding: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tier-label {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.tier-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.tier-controls button {
  min-height: 3.5rem;
  padding: 0.5rem 0.65rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, transform 130ms, background 140ms, color 140ms;
}

.tier-controls button:hover,
.tier-controls button:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
  outline: none;
  transform: translateY(-1px);
}

.tier-controls button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: var(--navy);
  box-shadow: 0 3px 14px rgba(245,158,11,.32);
  transform: none;
}

.tier-controls span {
  display: block;
  font-weight: 700;
}

.tier-controls small {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}

.tier-controls button[aria-pressed="true"] small {
  color: rgba(26,39,68,.6);
}

/* XP / progress bar */
.xp-track {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
  overflow: hidden;
}

.xp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, #4ade80 100%);
  border-radius: var(--radius-pill);
  transition: width 450ms cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(22,163,74,.55);
}

/* Question meta */
.question-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#question-category { color: var(--green-dark); }
#deck-status { color: var(--muted); }

/* Question text */
#question-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--navy);
  min-height: 5.5rem;
}

/* Answer buttons */
.answers {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.answer-button {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 3.2rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 130ms, box-shadow 130ms, transform 130ms, background 130ms, color 130ms;
}

.answer-button:hover,
.answer-button:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12), var(--shadow-sm);
  transform: translateY(-1px);
  outline: none;
  background: var(--green-xlight);
}

.answer-button[disabled] {
  cursor: default;
  opacity: 0.8;
  transform: none;
}

.answer-button.correct {
  background: var(--green);
  border-color: var(--green-dark);
  color: #fff;
  box-shadow: 0 4px 16px rgba(22,163,74,.32);
  transform: none;
  animation: correctPop 280ms cubic-bezier(.2,.9,.3,1.2);
}

@keyframes correctPop {
  0%   { transform: scale(0.97); }
  55%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.answer-button.wrong {
  background: var(--red);
  border-color: var(--red-dark);
  color: #fff;
  transform: none;
}

.choice-key {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background 130ms;
}

.answer-button.correct .choice-key,
.answer-button.wrong .choice-key {
  background: rgba(255,255,255,.22);
}

/* Feedback */
.feedback {
  min-height: 2.5rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.45;
}

.feedback.bad { color: var(--red-dark); }

/* --- Milestone Toast -------------------------------------- */
.milestone-toast {
  position: fixed;
  top: 76px;
  right: 1.25rem;
  z-index: 200;
  min-width: 230px;
  max-width: 310px;
  padding: 0.85rem 1.1rem;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(245,158,11,.1);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  pointer-events: none;
  transform: translateX(calc(100% + 2rem));
  opacity: 0;
  transition: transform 360ms cubic-bezier(.2,.9,.3,1), opacity 360ms ease;
}

.milestone-toast.show {
  transform: translateX(0);
  opacity: 1;
}

/* --- Footer ----------------------------------------------- */
.site-footer {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto 2rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p { margin: 0.3rem 0; }
.site-footer a { color: var(--green-dark); font-weight: 600; }
.site-footer a:hover { color: var(--green); }

.fine-print {
  font-size: 0.78rem;
  color: var(--muted-light);
  line-height: 1.55;
}

/* --- About page ------------------------------------------- */
.about-shell {
  width: min(1100px, calc(100% - 2rem));
  margin: 1.5rem auto 3rem;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(14rem, 0.5fr);
  gap: 2rem;
  align-items: center;
  min-height: 22rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-navy);
  margin-bottom: 1.1rem;
  overflow: hidden;
  position: relative;
}

.about-hero::before {
  content: '';
  position: absolute;
  top: -4rem; right: -4rem;
  width: 22rem; height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,163,74,.18) 0%, transparent 70%);
  pointer-events: none;
}

.about-hero .eyebrow { color: rgba(255,255,255,.45); }

.about-hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  color: #fff;
  max-width: 18ch;
  margin: 0.65rem 0;
}

.about-hero .lead {
  color: rgba(255,255,255,.62);
  font-size: 0.9rem;
}

/* mini bowl decoration */
.mini-bowl {
  position: relative;
  height: 14rem;
  border-bottom: 6rem solid #2563eb;
  border-left: 1.1rem solid transparent;
  border-right: 1.1rem solid transparent;
  border-radius: 0 0 10rem 10rem;
  filter: drop-shadow(0 1.5rem 2rem rgba(26,39,68,.3));
}

.mini-bowl::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  bottom: 4.5rem;
  height: 1.8rem;
  background: #dbeafe;
  border: 0.28rem solid rgba(30,64,175,.25);
  border-radius: 50%;
}

.mini-bowl span {
  position: absolute;
  bottom: calc(4.7rem + var(--y, 0rem));
  left: var(--x, 20%);
  width: 1.55rem;
  height: 0.92rem;
  background: linear-gradient(135deg, #22c55e, var(--green-dark));
  border-radius: 58% 42% 54% 46%;
  transform: rotate(var(--r, 12deg));
}

.mini-bowl span:nth-child(1)  { --x: 19%; --y: 0.5rem;  --r: -16deg; }
.mini-bowl span:nth-child(2)  { --x: 31%; --y: 1.15rem; --r: 20deg;  }
.mini-bowl span:nth-child(3)  { --x: 44%; --y: 0.35rem; --r: 5deg;   }
.mini-bowl span:nth-child(4)  { --x: 57%; --y: 1.1rem;  --r: -25deg; }
.mini-bowl span:nth-child(5)  { --x: 68%; --y: 0.4rem;  --r: 18deg;  }
.mini-bowl span:nth-child(6)  { --x: 25%; --y: 2.4rem;  --r: 10deg;  }
.mini-bowl span:nth-child(7)  { --x: 39%; --y: 2.6rem;  --r: -18deg; }
.mini-bowl span:nth-child(8)  { --x: 53%; --y: 2.45rem; --r: 30deg;  }
.mini-bowl span:nth-child(9)  { --x: 64%; --y: 2.75rem; --r: -8deg;  }
.mini-bowl span:nth-child(10) { --x: 47%; --y: 4rem;    --r: 15deg;  }

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}

.about-grid article,
.note-band {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.15rem, 2.4vw, 1.65rem);
}

.about-grid h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--navy);
  margin-bottom: 0.55rem;
}

.about-grid p,
.note-band p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.9rem;
  margin: 0;
}

.note-band {
  margin-top: 0.9rem;
  background: var(--gold-xlight);
  border-color: rgba(245,158,11,.28);
}

.note-band h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--navy);
  margin-bottom: 0.55rem;
}

.button-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  padding: 0.7rem 1.3rem;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(22,163,74,.32);
  transition: background 140ms, transform 140ms, box-shadow 140ms;
}

.button-link:hover {
  background: var(--green-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(22,163,74,.38);
}

/* --- Admin dashboard -------------------------------------- */
.admin-shell {
  width: min(1200px, calc(100% - 2rem));
  margin: 1.25rem auto 3rem;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.45fr);
  gap: 1rem;
  align-items: stretch;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-navy);
  margin-bottom: 1rem;
}

.admin-hero h1 {
  max-width: none;
  margin: 0.45rem 0;
}

.admin-scope-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  color: rgba(255,255,255,.74);
  font-size: 0.84rem;
}

.admin-scope-note strong {
  color: #fff;
  font-size: 0.9rem;
}

.admin-panel,
.admin-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.admin-panel {
  padding: clamp(1rem, 2vw, 1.35rem);
  margin-bottom: 1rem;
}

.admin-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.admin-panel-heading h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--navy);
}

.admin-filters,
.donation-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.donation-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-filters label,
.donation-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-filters input,
.admin-filters select,
.donation-form input,
.donation-form select,
.donation-form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.7rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
}

.donation-form textarea {
  resize: vertical;
  min-height: 5.6rem;
}

.donation-note {
  grid-column: 1 / -1;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-card {
  padding: 1rem;
}

.admin-card span,
.admin-card small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-card strong {
  display: block;
  margin: 0.3rem 0;
  color: var(--navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1;
}

.admin-card small {
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  gap: 1rem;
}

.impact-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.impact-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.impact-table th,
.impact-table td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.impact-table th {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.impact-table td:first-child {
  color: var(--navy);
}

.impact-table .tag-mark {
  margin-right: 0.45rem;
}

.empty-table {
  color: var(--muted);
  text-align: center;
}

.secondary-button,
.text-button {
  font: inherit;
  font-weight: 800;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.secondary-button {
  min-height: 2.35rem;
  padding: 0 0.9rem;
  color: var(--navy);
  background: var(--bg);
  border: 1px solid var(--border-dark);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: var(--green);
  outline: none;
}

.text-button {
  padding: 0.2rem 0.45rem;
  color: var(--red-dark);
  background: transparent;
  border: 0;
}

.text-button:hover,
.text-button:focus-visible {
  color: var(--red);
  outline: 2px solid rgba(239,68,68,.18);
  outline-offset: 2px;
}

/* --- Keyframes -------------------------------------------- */
@keyframes beanDrop {
  0% {
    opacity: 0;
    transform: translateY(-12rem) rotate(var(--r)) scale(0.8);
  }
  65% {
    opacity: 1;
    transform: translateY(0.4rem) rotate(var(--r)) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--r)) scale(1);
  }
}

/* --- Charity Picker Modal --------------------------------- */
.charity-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.5rem;
  animation: modalFadeIn 0.3s ease both;
}

.charity-modal.hidden { display: none; }

.charity-modal-card {
  background: var(--surface);
  border-radius: 1.375rem;
  padding: 2.75rem 2.25rem 2.25rem;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: cardSlideUp 0.45s cubic-bezier(.34, 1.56, .64, 1) both;
}

.charity-modal-card .eyebrow { margin-bottom: 0.25rem; }

.charity-modal-card h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.125rem);
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.625rem;
  line-height: 1.15;
}

.charity-modal-sub {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 auto 2rem;
}

.charity-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0.75rem;
}

.charity-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.5rem 0.9rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 1rem;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s, box-shadow 0.16s;
  font-family: inherit;
  text-align: center;
  color: inherit;
}

.charity-option:hover {
  border-color: var(--green);
  background: var(--green-xlight);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.18);
}

.charity-option:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.charity-icon {
  font-size: 2.1rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.15rem;
}

.charity-option strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

.charity-option small {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
}

.charity-modal.dismissing {
  animation: modalFadeOut 0.28s ease forwards;
}

.cause-control,
.charity-tag {
  display: inline-flex;
  align-items: center;
}

.cause-control {
  gap: 0.35rem;
}

.charity-tag {
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.charity-tag.hidden { display: none; }

.cause-control.hidden { display: none; }

.impact-stage .cause-control {
  position: absolute;
  top: 4.2rem;
  z-index: 4;
}

.impact-stage .charity-tag {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.change-cause-button {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0 0.72rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--green-dark);
  background: rgba(240, 253, 244, 0.96);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.change-cause-button:hover,
.change-cause-button:focus-visible {
  background: var(--green-xlight);
  border-color: var(--green);
  outline: none;
  transform: translateY(-1px);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(28px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  .quiz-shell { grid-template-columns: 1fr; }
  .intro-panel { min-height: auto; }
  .bowl-stage { grid-row: auto; min-height: 34rem; order: -1; }
  h1 { max-width: 16ch; }
  .about-hero { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .admin-hero,
  .admin-grid { grid-template-columns: 1fr; }
  .admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .site-header { gap: 0.5rem; padding: 0 0.75rem; }
  .brand { gap: 0.45rem; }
  .brand-mark { width: 32px; height: 32px; }
  .brand strong { font-size: 0.82rem; }
  .brand small { display: none; }
  .site-nav { gap: 2px; padding: 2px; }
  .site-nav a {
    min-width: auto;
    padding: 6px 7px;
    font-size: 0.8rem;
  }

  .quiz-shell,
  .about-shell,
  .site-footer {
    width: calc(100% - 1rem);
  }

  .session-stats { grid-template-columns: 1fr; }
  .bowl-wrap { height: 18rem; margin-top: 3.5rem; }
  .bowl-stage { min-height: 28rem; }
  .question-meta { flex-direction: column; align-items: flex-start; gap: 2px; }

  .tier-controls { grid-template-columns: 1fr; }
  .tier-controls button {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .tier-controls small { text-align: right; }

  .admin-shell { width: calc(100% - 1rem); }
  .admin-summary,
  .admin-filters,
  .donation-form { grid-template-columns: 1fr; }
  .admin-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .secondary-button { width: 100%; justify-content: center; }

  .answer-button {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    min-height: 3.4rem;
    padding: 0.7rem 0.8rem;
  }

  .choice-key { width: 1.85rem; height: 1.85rem; font-size: 0.74rem; }
  .milestone-toast { right: 0.75rem; top: 70px; }
  .charity-modal-card { padding: 1.75rem 1rem 1.5rem; }
  .charity-options { grid-template-columns: repeat(3, 1fr); }
  .charity-icon { font-size: 1.7rem; }
}

/* --- Accessibility ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}