@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Quicksand:wght@500;600;700&display=swap');
/* The village look for the games that have no theme of their own (Doug, 6 Nov 2026): Animal Quiz, What Could I Be?,
   Word Search, Wilf's Sound Safari and the games list. Each page links this AFTER its own <style> and marks its body
   (class="vt vt-<page>"); its own colour variables are remapped below, so the page's layout is untouched.
   Palette as the houses: cream cards, warm brown ink, honey lines, rose and sage buttons. Headings Baloo 2, text
   Quicksand; anything Aela reads that used Andika keeps Andika (dyslexia-friendly). */
:root{ --v-cream:#FFFBF2; --v-paper:#F6EEDF; --v-ink:#4A3426; --v-soft:#7A6858; --v-line:#E3D2BC; --v-rose:#E79AB8; --v-rosed:#C9789A;
  --v-red:#C8473B; --v-redd:#9C342A; --v-sage:#6FA05A; --v-saged:#557F44; --v-honey:#D8BE98; --v-gold:#F2C46B; --v-sky:#9DC7D8; }
body.vt{ background:#F3E9D6 url(village/theme-bg.webp) center / cover fixed !important; color:var(--v-ink); }
body.vt h1, body.vt h2, body.vt h3{ font-family:'Baloo 2', sans-serif; color:var(--v-ink); }

/* the host standing on the title */
.vt-host{ display:block; height:clamp(96px, 16vh, 150px); margin:0 auto -6px; filter:drop-shadow(0 4px 5px #0003);
  animation:vtPop .55s cubic-bezier(.3,1.7,.5,1) both; transform-origin:50% 100%; pointer-events:none; }
@keyframes vtPop{ from{ transform:translateY(25%) scale(.6); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .vt-host{ animation:none } }

/* ---------- Animal Quiz (was a beige field guide) ---------- */
body.vt-animal{ --paper:var(--v-cream); --paper-2:var(--v-paper); --ink:var(--v-ink); --ink-soft:var(--v-soft); --moss:var(--v-sage);
  --teal:#5E9AAE; --coral:var(--v-red); --gold:var(--v-gold); --line:var(--v-line); --accent:var(--v-sage); font-family:'Quicksand', sans-serif; }
body.vt-animal *:not(.vt-keep){ font-family:'Quicksand', sans-serif; }
body.vt-animal h1, body.vt-animal h2, body.vt-animal h3, body.vt-animal button{ font-family:'Baloo 2', sans-serif !important; }
body.vt-animal .stage{ background:var(--v-cream); border-radius:26px; box-shadow:0 8px 0 rgba(122,104,88,.18), 0 10px 30px #0001; padding-top:18px; padding-bottom:22px; }

/* ---------- What Could I Be? (was a dark blueprint) ---------- */
body.vt-future{ --amber:var(--v-gold); --teal:var(--v-sage); --ink:var(--v-ink); --label:var(--v-soft); --sub:var(--v-soft); --dim:#A08E7C; --navy:var(--v-cream);
  font-family:'Quicksand', sans-serif; }
body.vt-future h1, body.vt-future h2, body.vt-future button{ font-family:'Baloo 2', sans-serif; }
body.vt-future .wrap{ background:var(--v-cream); border-radius:26px; padding:18px 20px 24px; box-shadow:0 8px 0 rgba(122,104,88,.18), 0 10px 30px #0001; }
body.vt-future .accent{ color:var(--v-red) !important; }
/* its boxes were see-through white on dark navy: on cream they need a soft tint and honey lines instead */
body.vt-future input, body.vt-future .opt, body.vt-future .card, body.vt-future .job-tile, body.vt-future [class*="tile"], body.vt-future .join input{
  background:var(--v-paper) !important; border-color:var(--v-line) !important; color:var(--v-ink) !important; }
body.vt-future .opt.picked{ background:#FBE6B0 !important; border-color:var(--v-gold) !important; }
body.vt-future .card.accent-teal, body.vt-future .join{ background:#E4EFDC !important; border-color:#BFD6B0 !important; }
body.vt-future .invented-card{ background:#FBEFD2 !important; border-color:var(--v-gold) !important; }
body.vt-future .btn-primary{ color:var(--v-ink) !important; }

/* ---------- Word Search (was night purple) ---------- */
body.vt-words .accent{ color:var(--v-red) !important; }
body.vt-words{ --night:#8A5A3C; --night2:#A97B5A; --paper:var(--v-cream); --ink:var(--v-ink); --coral:var(--v-red); --sun:var(--v-gold);
  --lilac:#E8CFE0; --leaf:var(--v-sage); --dim:var(--v-soft); }

/* ---------- Wilf's Sound Safari ---------- */
body.vt-safari{ --cream:var(--v-cream); --ink:var(--v-ink); --sun:var(--v-gold); --coral:var(--v-red); --sky:#7FB7C9; --leaf:var(--v-sage); --card:var(--v-cream);
  --shadow:0 6px 0 rgba(122,104,88,.22); }

/* ---------- the games list (index.html) ---------- */
body.vt-list{ --cream:var(--v-cream); --ink:var(--v-ink); --sun:var(--v-gold); --coral:var(--v-red); --sky:#7FB7C9; --leaf:var(--v-sage); --card:var(--v-cream); --line:var(--v-line); }
body.vt-list .hero{ background:url(village/card.jpg) center 40% / cover; box-shadow:0 8px 0 rgba(122,104,88,.18); }
body.vt-list .hero .board{ display:none; }
body.vt-list .card{ box-shadow:0 8px 0 rgba(122,104,88,.18); }
/* Word Search in-game bits that were white-on-night: the top bar, and the word list under the grid */
body.vt-words .topbar{ color:var(--v-ink); }
body.vt-words .topbar button, body.vt-words .pill{ background:var(--v-cream) !important; color:var(--v-ink) !important; box-shadow:0 3px 0 var(--v-line); }
body.vt-words .word{ background:var(--v-cream) !important; color:var(--v-ink); box-shadow:0 3px 0 var(--v-line); }
body.vt-words .word.found{ background:#E4EFDC !important; }
body.vt-words .word .pre{ color:var(--v-red) !important; }
body.vt-words .cover{ color:var(--v-cream); }