/* ============================================================
   Find Your Forest Vibe
   ============================================================ */

:root {
  --bark:       #2f2418;
  --moss-900:   #0d2418;
  --moss-800:   #16382a;
  --moss-700:   #1d4a35;
  --moss-500:   #2f7a52;
  --moss-300:   #6fae83;
  --fern:       #8fce9b;
  --cream:      #f6f1e4;
  --cream-dim:  #e4dcc7;
  --paper:      #fffdf7;
  --amber:      #d8973c;
  --amber-soft: #f0c987;
  --berry:      #b4453c;

  --radius:     20px;
  --radius-sm:  12px;
  --shadow:     0 26px 70px -30px rgba(6, 24, 15, .8);
  --ring:       0 0 0 3px rgba(216, 151, 60, .55);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* subtle paper grain, inlined so the page stays a single self-contained folder */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* beats layout rules like `.choices { display: grid }` */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--cream);
  background: radial-gradient(150% 105% at 50% -10%, #23573f 0%, #14351f 42%, #081a10 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* page text can't be selected, so it can't be copied out either */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* …except inside the boxes students type in, where they still need to select
   and correct their own words. Pasting into them is blocked in app.js. */
textarea, input[type="text"] {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ============================================================
   1. THE FOREST (decorative background)
   ============================================================ */

.canopy { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* light filtering down through the trees */
.rays {
  position: absolute; top: -30%; left: 50%; width: 160vmax; height: 160vmax;
  transform: translateX(-50%);
  background: conic-gradient(
    from 200deg at 50% 0%,
    transparent 0deg, rgba(240, 201, 135, .10) 8deg, transparent 16deg,
    transparent 24deg, rgba(240, 201, 135, .07) 30deg, transparent 38deg,
    transparent 50deg, rgba(240, 201, 135, .09) 56deg, transparent 66deg
  );
  animation: sweep 26s ease-in-out infinite alternate;
}
@keyframes sweep {
  from { transform: translateX(-50%) rotate(-4deg); opacity: .75; }
  to   { transform: translateX(-50%) rotate(4deg);  opacity: 1; }
}

.fog {
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgba(143, 206, 155, .18), transparent 72%);
  animation: breathe 12s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .65; } to { opacity: 1; } }

/* two parallax tree layers, each drifting a little */
.trees { position: absolute; inset: auto 0 0 0; }
.trees--far  { height: 40vh; opacity: .38; animation: sway 19s ease-in-out infinite alternate; }
.trees--near { height: 52vh; opacity: .72; animation: sway 13s ease-in-out infinite alternate-reverse; }

@keyframes sway {
  from { transform: translateX(-14px); }
  to   { transform: translateX(14px); }
}

.tree {
  position: absolute; bottom: -3vh;
  width: 0; height: 0;
  border-left: 6.5vw solid transparent;
  border-right: 6.5vw solid transparent;
  border-bottom: 30vh solid var(--moss-900);
  filter: drop-shadow(0 0 26px rgba(0, 0, 0, .4));
  transform: scale(var(--s, 1));
  transform-origin: 50% 100%;
}
.trees--far .tree { border-bottom-color: #123020; }

.trees--far  .tree:nth-child(1) { left: -6vw;  --s: .8; }
.trees--far  .tree:nth-child(2) { left:  7vw;  --s: .62; }
.trees--far  .tree:nth-child(3) { left: 19vw;  --s: .74; }
.trees--far  .tree:nth-child(4) { left: 33vw;  --s: .58; }
.trees--far  .tree:nth-child(5) { left: 48vw;  --s: .7; }
.trees--far  .tree:nth-child(6) { left: 62vw;  --s: .6; }
.trees--far  .tree:nth-child(7) { left: 76vw;  --s: .78; }
.trees--far  .tree:nth-child(8) { left: 90vw;  --s: .66; }

.trees--near .tree:nth-child(1) { left: -8vw;   --s: 1.2; }
.trees--near .tree:nth-child(2) { left:  9vw;   --s: .88; }
.trees--near .tree:nth-child(3) { left: 24vw;   --s: 1.02; }
.trees--near .tree:nth-child(4) { right: 21vw;  --s: .95; }
.trees--near .tree:nth-child(5) { right: 6vw;   --s: 1.25; }
.trees--near .tree:nth-child(6) { right: -8vw;  --s: 1.05; }

/* fireflies */
.fireflies { position: absolute; inset: 0; }
.fireflies i {
  position: absolute; bottom: -20px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber-soft);
  box-shadow: 0 0 10px 3px rgba(240, 201, 135, .55);
  opacity: 0;
  animation: float linear infinite, glow 2.6s ease-in-out infinite;
}
.fireflies i:nth-child(1)  { left:  5%; animation-duration: 21s, 2.2s; animation-delay:  0s, .1s; }
.fireflies i:nth-child(2)  { left: 13%; animation-duration: 26s, 3.1s; animation-delay:  3s, .6s; }
.fireflies i:nth-child(3)  { left: 22%; animation-duration: 18s, 2.5s; animation-delay:  7s, .2s; }
.fireflies i:nth-child(4)  { left: 30%; animation-duration: 29s, 3.4s; animation-delay:  1s, .9s; }
.fireflies i:nth-child(5)  { left: 39%; animation-duration: 23s, 2.1s; animation-delay:  9s, .4s; }
.fireflies i:nth-child(6)  { left: 47%; animation-duration: 20s, 2.9s; animation-delay:  5s, .7s; }
.fireflies i:nth-child(7)  { left: 56%; animation-duration: 27s, 2.4s; animation-delay: 12s, .3s; }
.fireflies i:nth-child(8)  { left: 65%; animation-duration: 22s, 3.2s; animation-delay:  2s, .8s; }
.fireflies i:nth-child(9)  { left: 73%; animation-duration: 25s, 2.6s; animation-delay:  8s, .5s; }
.fireflies i:nth-child(10) { left: 81%; animation-duration: 19s, 3.0s; animation-delay: 14s, .1s; }
.fireflies i:nth-child(11) { left: 89%; animation-duration: 28s, 2.3s; animation-delay:  4s, .6s; }
.fireflies i:nth-child(12) { left: 96%; animation-duration: 24s, 2.8s; animation-delay: 10s, .9s; }

@keyframes float {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  8%   { opacity: 1; }
  35%  { transform: translate(34px, -38vh) scale(1); }
  70%  { transform: translate(-26px, -74vh) scale(.85); }
  92%  { opacity: .5; }
  100% { transform: translate(14px, -108vh) scale(.5); opacity: 0; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(240, 201, 135, .3); }
  50%      { box-shadow: 0 0 16px 5px rgba(240, 201, 135, .75); }
}

/* drifting leaves */
.leaffall { position: absolute; inset: 0; }
.leaffall span {
  position: absolute; top: -8vh; font-size: 20px; opacity: .5;
  animation: tumble linear infinite;
}
.leaffall span:nth-child(1) { left: 12%; animation-duration: 17s; animation-delay: 0s;  font-size: 18px; }
.leaffall span:nth-child(2) { left: 28%; animation-duration: 23s; animation-delay: 6s;  font-size: 22px; }
.leaffall span:nth-child(3) { left: 45%; animation-duration: 19s; animation-delay: 11s; font-size: 16px; }
.leaffall span:nth-child(4) { left: 63%; animation-duration: 25s; animation-delay: 3s;  font-size: 20px; }
.leaffall span:nth-child(5) { left: 78%; animation-duration: 21s; animation-delay: 15s; font-size: 17px; }
.leaffall span:nth-child(6) { left: 92%; animation-duration: 27s; animation-delay: 8s;  font-size: 21px; }

@keyframes tumble {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .55; }
  25%  { transform: translate(-40px, 25vh) rotate(120deg); }
  50%  { transform: translate(45px, 52vh) rotate(220deg); }
  75%  { transform: translate(-30px, 78vh) rotate(340deg); }
  95%  { opacity: .3; }
  100% { transform: translate(20px, 112vh) rotate(460deg); opacity: 0; }
}

/* ============================================================
   2. LAYOUT
   ============================================================ */

.stage {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  padding-bottom: 84px; /* room for the motion toggle */
}

/* ---------- stop-animations toggle ---------- */
.motion-toggle {
  position: fixed; z-index: 70;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .78rem; font-weight: 600;
  color: rgba(246, 241, 228, .75);
  background: rgba(10, 30, 20, .6);
  border: 1px solid rgba(143, 206, 155, .28);
  border-radius: 999px;
  padding: 7px 15px; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .18s, background .18s, border-color .18s, opacity .18s;
  opacity: .7;
}
.motion-toggle:hover { opacity: 1; color: #fff; border-color: var(--fern); background: rgba(10, 30, 20, .85); }
.motion-toggle:focus-visible { outline: none; opacity: 1; box-shadow: var(--ring); }

.motion-toggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fern);
  box-shadow: 0 0 8px rgba(143, 206, 155, .9);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* the switch itself: kill every keyframe animation, keep interface transitions */
body.still *,
body.still *::before,
body.still *::after { animation: none !important; }

body.still .leaffall,
body.still .fireflies,
body.still .rays,
body.still .confetti { display: none; }

body.still .motion-toggle__dot { background: #8d8676; box-shadow: none; }

.screen { display: none; width: 100%; max-width: 760px; }
.screen.is-active { display: block; animation: rise .55s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- cards ---------- */
.card {
  position: relative;
  background: linear-gradient(170deg, rgba(255,253,247,.98), rgba(240,234,218,.95));
  color: var(--bark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4.5vw, 44px);
  border: 1px solid rgba(255,255,255,.55);
  isolation: isolate;
}

/* paper grain */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: .22; mix-blend-mode: multiply;
  border-radius: inherit; pointer-events: none;
}

.card + .card { margin-top: 20px; }

.card--question { overflow: hidden; }
.card--question::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(var(--moss-500), var(--fern), var(--amber-soft));
  background-size: 100% 200%;
  animation: creep 6s ease-in-out infinite alternate;
}
@keyframes creep { from { background-position: 0 0; } to { background-position: 0 100%; } }

.card--question.is-entering { animation: slidein .42s cubic-bezier(.2, .75, .3, 1) both; }
@keyframes slidein {
  from { opacity: 0; transform: translateX(30px) rotate(.4deg); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

.eyebrow {
  margin: 0 0 10px; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss-500); font-weight: 700;
}

.title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 6.5vw, 3.4rem);
  line-height: 1.05; margin: 0 0 14px; color: var(--moss-800);
  letter-spacing: -.01em;
}
.title em {
  font-style: italic;
  background: linear-gradient(100deg, var(--amber) 20%, #f3d9a5 45%, var(--amber) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

.lede { margin: 0 0 26px; font-size: 1.03rem; line-height: 1.6; color: #4b4335; }
.lede strong { color: var(--moss-700); }

.question {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 1.95rem);
  line-height: 1.25; margin: 0 0 8px; color: var(--moss-800);
}
.question:last-of-type { margin-bottom: 22px; }

/* directions block for the written questions */
.directions {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: linear-gradient(100deg, rgba(240, 201, 135, .22), rgba(240, 201, 135, .08));
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.directions__text {
  margin: 0; font-size: 1.02rem; line-height: 1.55; color: #52493a;
}
.directions__req {
  margin: 8px 0 0;
  font-size: 1.02rem; font-weight: 800; line-height: 1.4;
  color: var(--moss-700);
  display: flex; align-items: center; gap: 8px;
}
.directions__req::before { content: "✍️"; font-size: 1.05rem; }

/* ============================================================
   4. FORM CONTROLS
   ============================================================ */

.start-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: .82rem; font-weight: 700; color: var(--moss-700); letter-spacing: .02em; }

input[type="text"], textarea {
  font: inherit; color: var(--bark);
  background: var(--paper);
  border: 2px solid #d9d0b8; border-radius: var(--radius-sm);
  padding: 12px 14px; width: 100%;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
input[type="text"]:focus, textarea:focus {
  outline: none; border-color: var(--moss-500); box-shadow: var(--ring);
}
input[type="text"]:focus { transform: translateY(-1px); }

/* notebook-paper writing area */
textarea {
  resize: vertical;
  min-height: 240px;
  font-size: 16px;
  line-height: 28px;
  padding: 14px 16px;
  background-image: repeating-linear-gradient(
    transparent 0px, transparent 27px, rgba(47, 122, 82, .16) 27px, rgba(47, 122, 82, .16) 28px
  );
  background-attachment: local;
  background-origin: content-box;
}

/* only appears once a student tries to paste */
.nopaste {
  margin: 12px 0 0; padding: 9px 13px;
  border-radius: 8px;
  background: #fdeceb; border-left: 3px solid var(--berry);
  font-size: .87rem; line-height: 1.45; font-weight: 600; color: #8e2f28;
}
.nopaste.is-flagged { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }

/* ---------- choices ---------- */
.choices { display: grid; gap: 10px; margin-bottom: 22px; }

.choice {
  position: relative; display: block;
  animation: dealin .42s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 65ms + 90ms);
}
@keyframes dealin {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.choice__box {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px;
  background: var(--paper);
  border: 2px solid #ded5bd; border-radius: var(--radius-sm);
  cursor: pointer; line-height: 1.45;
  transition: transform .16s ease, border-color .18s, box-shadow .18s;
}
.choice__box:hover { border-color: var(--moss-300); transform: translateX(4px); }

/* wash that sweeps in behind the selected answer */
.choice__box::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, #e6f5ea, #f8fcf6);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}
.choice__box > * { position: relative; z-index: 1; }

.choice__key {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700;
  background: #ece4cf; color: #7d7460;
  transition: background .2s, color .2s, transform .2s;
}
.choice__key::before { content: attr(data-num); }

.choice input:checked + .choice__box {
  border-color: var(--moss-500);
  box-shadow: 0 12px 28px -18px rgba(31, 90, 58, .95);
}
.choice input:checked + .choice__box::before { transform: scaleX(1); }
.choice input:checked + .choice__box .choice__key {
  background: var(--moss-500); color: #fff;
}
.choice input:checked + .choice__box .choice__key::before { content: "✓"; }
.choice input:focus-visible + .choice__box { box-shadow: var(--ring); }

.choice__key.is-picked { animation: stamp .42s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes stamp {
  0%   { transform: scale(.5) rotate(-25deg); }
  60%  { transform: scale(1.22) rotate(6deg); }
  100% { transform: scale(1); }
}

.choices.nudge { animation: shake .4s; }

/* ---------- errors ---------- */
.error {
  margin: 14px 0 0; padding: 10px 14px;
  background: #fdeceb; border-left: 3px solid var(--berry);
  border-radius: 8px; color: #8e2f28; font-size: .9rem;
}
.error.shake, .shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn {
  position: relative; overflow: hidden;
  font: inherit; font-weight: 700; letter-spacing: .01em;
  border: 2px solid transparent; border-radius: 999px;
  padding: 12px 22px; cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.4), box-shadow .18s, background .18s, color .18s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .65; cursor: default; }

.btn--primary {
  background: linear-gradient(160deg, var(--moss-700), var(--moss-500));
  color: #fff;
  box-shadow: 0 14px 28px -16px rgba(23, 74, 47, .95);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(23, 74, 47, 1); }

/* light sweeping across the button on hover */
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-20deg);
}
.btn--primary:hover::after { animation: sheen .75s ease-out; }
@keyframes sheen { to { left: 130%; } }

.btn--ghost { background: transparent; color: var(--moss-700); border-color: #d3c9ae; }
.btn--ghost:hover { border-color: var(--moss-500); background: rgba(47,122,82,.08); transform: translateY(-1px); }
.btn--quiet { color: #8d8676; border-color: transparent; }
.btn--big { justify-self: start; padding: 15px 30px; font-size: 1.02rem; }
.btn--big { animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.btn--big:hover { animation: none; }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--moss-500);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn--quiet { color: #8d8676; font-weight: 400; }

/* kept well away from the export buttons so nobody wipes their work by reflex */
.danger-zone {
  margin: 34px 0 0; text-align: center;
  font-size: .82rem; line-height: 1.6; color: rgba(246, 241, 228, .45);
}
.linkbtn--danger { color: rgba(246, 241, 228, .62); font-weight: 600; }
.linkbtn--danger:hover { color: var(--amber-soft); }
.resume { margin: 20px 0 0; font-size: .9rem; color: #6a6152; }

.nav { display: flex; gap: 12px; align-items: center; }
.nav .btn--primary { margin-left: auto; }

/* ============================================================
   6. QUIZ CHROME — the trail
   ============================================================ */

.quizbar { margin-bottom: 18px; }
.quizbar__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.counter { font-size: .86rem; color: var(--cream-dim); letter-spacing: .04em; }
.counter b { color: #fff; display: inline-block; }
.counter b.tick { animation: tick .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tick {
  0%   { transform: translateY(9px) scale(.7); opacity: .2; }
  100% { transform: none; opacity: 1; }
}

.pill {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: rgba(143, 206, 155, .16); color: var(--fern);
  border: 1px solid rgba(143, 206, 155, .3);
}

.trail { display: flex; align-items: center; gap: 12px; }
.trail__track { position: relative; flex: 1; }
.trail__goal { font-size: 1.15rem; filter: saturate(1.2); }

.progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.progress__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--moss-500), var(--fern) 60%, var(--amber-soft));
  background-size: 220% 100%;
  border-radius: 999px;
  transition: width .55s cubic-bezier(.2, .8, .25, 1);
  animation: slide 3.5s linear infinite;
}
@keyframes slide { to { background-position: 220% 0; } }

.trail__walker {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -62%);
  transition: left .55s cubic-bezier(.2, .8, .25, 1);
  will-change: left;
}
.trail__walker b { display: block; font-size: 1.2rem; }
.trail__walker.is-hopping b { animation: hop .55s ease-out; }
@keyframes hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-11px) scale(1.12) rotate(-8deg); }
  70%  { transform: translateY(-3px) scale(.97) rotate(4deg); }
  100% { transform: translateY(0) scale(1); }
}

.hint { margin: 16px 2px 0; font-size: .8rem; color: rgba(246, 241, 228, .55); }
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
}

/* ============================================================
   7. RESULTS
   ============================================================ */

.card--result { text-align: center; overflow: hidden; }

/* slow shine crossing the result card */
.card--result::before {
  content: ""; position: absolute; top: -50%; left: -70%;
  width: 45%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: glide 5.5s ease-in-out 1s infinite;
  pointer-events: none;
}
@keyframes glide {
  0%   { left: -70%; }
  55%  { left: 150%; }
  100% { left: 150%; }
}

.result__badge {
  font-size: 4.4rem; line-height: 1; margin-bottom: 6px;
  animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) both .1s, hover 4s ease-in-out 1s infinite;
  filter: drop-shadow(0 10px 18px rgba(23, 74, 47, .3));
}
@keyframes pop {
  from { transform: scale(.3) rotate(-18deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes hover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

.result__title {
  font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.9rem);
  margin: 0 0 14px; color: var(--moss-800);
  animation: rise .6s cubic-bezier(.2,.7,.3,1) both .25s;
}
.result__desc {
  margin: 0 auto 28px; max-width: 54ch;
  font-size: 1.05rem; line-height: 1.65; color: #4b4335;
  animation: rise .6s cubic-bezier(.2,.7,.3,1) both .35s;
}

.tally { display: grid; gap: 10px; margin-bottom: 28px; text-align: left; }
.tally__row {
  display: grid; grid-template-columns: 160px 1fr 32px; align-items: center; gap: 10px;
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 400ms);
}
.tally__name { font-size: .84rem; font-weight: 700; color: #6a6152; }
.tally__track { height: 11px; background: #e7dfc8; border-radius: 999px; overflow: hidden; }
.tally__bar {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--moss-500), var(--fern));
  transition: width .9s cubic-bezier(.2, .8, .25, 1);
}
.tally__row.is-winner .tally__name { color: var(--moss-700); }
.tally__row.is-winner .tally__bar {
  background: linear-gradient(90deg, var(--amber), var(--amber-soft));
  box-shadow: 0 0 12px rgba(216, 151, 60, .55);
}
.tally__num {
  font-size: .84rem; font-weight: 700; color: #8d8676;
  text-align: right; font-variant-numeric: tabular-nums;
}

.result__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.result__actions .btn--big { justify-self: center; }

.turnin {
  margin: 14px 0 0; font-size: .92rem; line-height: 1.5; color: #6a6152;
  max-width: 42ch; margin-inline: auto;
}

.result__secondary {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 24px; padding-top: 22px;
  border-top: 1px dashed #ded5bd;
}
.result__secondary .btn { font-size: .86rem; padding: 9px 16px; }

/* ---------- backup panel ---------- */
.card--fallback { animation: rise .45s cubic-bezier(.2, .7, .3, 1) both; }

.fallback__title {
  font-family: var(--serif); font-size: 1.5rem; margin: 0 0 8px; color: var(--moss-800);
}
.fallback__lede { margin: 0 0 20px; font-size: .96rem; line-height: 1.6; color: #4b4335; }
.fallback__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.fallback__subtitle {
  font-family: var(--serif); font-size: 1.2rem;
  margin: 28px 0 14px; padding-top: 22px;
  border-top: 1px dashed #ded5bd; color: var(--moss-800);
}

.answers { margin: 0; padding-left: 22px; display: grid; gap: 18px; }
.answers li { color: #4b4335; }
.answers li::marker { color: var(--moss-500); font-weight: 700; }
.answers__q { font-weight: 700; color: var(--moss-700); margin: 0 0 5px; line-height: 1.4; }
.answers__a {
  margin: 0; line-height: 1.6; white-space: pre-wrap;
  padding-left: 12px; border-left: 2px solid #ded5bd;
}
.answers__a--empty { color: #a09884; font-style: italic; }

/* ---------- help note ---------- */
.helpnote {
  margin: 22px 0 0; text-align: left;
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: rgba(180, 69, 60, .07);
  border: 1px solid rgba(180, 69, 60, .22);
  transition: background .3s, border-color .3s, transform .3s;
}
.helpnote__title { margin: 0 0 6px; font-size: .92rem; font-weight: 800; color: #8e2f28; }
.helpnote__body { margin: 0; font-size: .89rem; line-height: 1.55; color: #6a5450; }

.helpnote.is-urgent {
  background: rgba(180, 69, 60, .16);
  border-color: var(--berry);
  transform: scale(1.02);
  animation: shake .5s;
}
.helpnote.is-urgent .helpnote__title::after { content: " — this means you, right now"; font-weight: 700; }

/* ---------- confetti ---------- */
.confetti {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; overflow: hidden;
}
.confetti__bit {
  position: absolute; top: -50px;
  animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(var(--drift, 0), 112vh) rotate(var(--spin, 360deg)); opacity: .15; }
}

/* ============================================================
   8. MODAL
   ============================================================ */

body.modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 20, 13, .68);
  backdrop-filter: blur(3px);
  animation: fadein .3s ease both;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  position: relative;
  width: min(100%, 480px);
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(170deg, var(--paper), #f1ebdc);
  color: var(--bark);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  padding: clamp(24px, 5vw, 36px);
  text-align: center;
  animation: popin .42s cubic-bezier(.2, 1.2, .35, 1) both;
}
@keyframes popin {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.modal__icon { font-size: 2.8rem; line-height: 1; margin-bottom: 10px; }
.modal__title {
  font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 1.85rem);
  margin: 0 0 18px; color: var(--moss-800);
}

.modal__body {
  margin: 0 0 16px; font-size: 1rem; line-height: 1.6; color: #4b4335;
}

.modal__note {
  margin: 0 0 20px; padding: 10px 14px;
  background: rgba(216, 151, 60, .14);
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  text-align: left; font-size: .87rem; line-height: 1.5; color: #6a6152;
}

.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ============================================================
   9. RESPONSIVE / MOTION / PRINT
   ============================================================ */

@media (max-width: 540px) {
  .nav { flex-direction: column-reverse; align-items: stretch; }
  .nav .btn--primary { margin-left: 0; }
  .tally__row { grid-template-columns: 118px 1fr 28px; }
  #keyhint { display: none; }
  .choice__box { padding: 13px 14px; gap: 11px; }
  .leaffall span:nth-child(n+4) { display: none; }
  textarea { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card--result::before, .leaffall, .fireflies, .rays { display: none; }
}

/* the printout / PDF — hidden on screen, the only thing that prints */
#print-sheet { display: none; }

@media print {
  @page { margin: 0.6in; }

  html, body {
    background: #fff !important; color: #000 !important;
    height: auto; overflow: visible;
  }

  /* everything the student sees is screen-only */
  .canopy, .confetti, .stage, .modal, .motion-toggle, .no-print { display: none !important; }

  #print-sheet {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11.5pt; line-height: 1.5; color: #000;
  }

  .sheet__head { border-bottom: 2px solid #000; padding-bottom: 10pt; margin-bottom: 16pt; }
  .sheet__head h1 { font-size: 19pt; margin: 0 0 10pt; letter-spacing: -.01em; }

  .sheet__meta { border-collapse: collapse; font-size: 10.5pt; }
  .sheet__meta th {
    text-align: left; padding: 1pt 14pt 1pt 0;
    font-size: 8.5pt; letter-spacing: .1em; text-transform: uppercase;
    color: #444; vertical-align: top; white-space: nowrap;
  }
  .sheet__meta td { padding: 1pt 0; }

  .sheet__list { margin: 0; padding-left: 20pt; }
  .sheet__item { margin-bottom: 15pt; page-break-inside: avoid; }
  .sheet__item--long { page-break-inside: auto; }
  .sheet__list li::marker { font-weight: bold; }

  .sheet__q { margin: 0 0 3pt; font-weight: bold; }
  .sheet__req { margin: 0 0 5pt; font-size: 9pt; font-style: italic; color: #555; }
  .sheet__a {
    margin: 0; white-space: pre-wrap;
    padding-left: 9pt; border-left: 2pt solid #bbb;
    orphans: 3; widows: 3;
  }
  .sheet__a--empty { color: #777; font-style: italic; border-left-color: #ddd; }
}