:root{
  --cream:#f2efe1;        /* warm parchment, like paper under a canopy */
  --peach:#e8c993;        /* dried bark / amber highlight */
  --coral:#c4573b;        /* berry red, echoes the red mushroom cap */
  --coral-dark:#9e4530;
  --teal:#5f8a52;         /* moss green, primary forest accent */
  --teal-dark:#3f6640;
  --navy:#33423a;         /* deep pine, used for body text + footer */
  --yellow:#d9bf74;       /* muted gold, like mushroom spots */
  --yellow-deep:#c7a955;
  --bark:#7c5b3f;         /* tree-bark brown, used sparingly for texture */
  --moss-pale:#e3ead9;    /* pale moss, for alternating section backgrounds */
  --soft:#fffdf8;
  --shadow:0 6px 20px rgba(51,66,58,.12);
  --user-font:"Trebuchet MS","Comic Sans MS",Verdana,sans-serif;
  --base-size:16px;
}
*{box-sizing:border-box}

/* ICONS (replace emoji throughout the site) */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0}
.ic-inline{width:.85em;height:.85em;vertical-align:-0.1em;margin-right:.3em}
/* icon wrapped in a plain div.ic (mission/hub/tip/inv cards): size the bare svg to match */
div.ic svg{width:1em;height:1em;display:inline-block;vertical-align:-0.1em}
html{scroll-behavior:smooth;font-size:var(--base-size)}
body{
  margin:0;
  font-family:var(--user-font);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.4) 0, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 60% 70%, rgba(95,138,82,.06) 0, rgba(95,138,82,0) 30%),
    var(--cream);
  color:var(--navy);
  line-height:1.8;
  letter-spacing:.4px;
  font-size:1.375rem;
}
h1,h2,h3{line-height:1.3}
a{color:var(--coral-dark)}
.wrap{max-width:1050px;margin:0 auto;padding:0 22px}
main{padding:56px 0 20px}

/* STICKY HEADER */
.topbar{position:sticky;top:0;z-index:60}

/* READING TOOLS / ACCESSIBILITY BAR */
.a11y-bar{
  background:var(--teal-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  padding:8px 16px;font-size:.95rem;font-family:var(--user-font)
}
.a11y-bar .lead{font-weight:bold}
.a11y-bar .grp{display:flex;align-items:center;gap:8px}
.a11y-bar label{font-weight:bold}
.a11y-bar select{
  font-family:inherit;font-size:.95rem;padding:6px 12px;border-radius:20px;border:none;
  background:#fff;color:var(--navy);cursor:pointer;font-weight:bold
}
.a11y-bar .sizes{display:inline-flex;gap:6px}
.a11y-bar .sizes button{
  border:none;border-radius:16px;cursor:pointer;font-weight:bold;font-family:inherit;
  background:rgba(255,255,255,.22);color:#fff;padding:4px 14px;line-height:1.1;transition:.15s
}
.a11y-bar .sizes button:hover{background:rgba(255,255,255,.4)}
.a11y-bar .sizes button.active{background:var(--yellow);color:var(--navy)}
.a11y-bar .sizes button.s{font-size:.8rem}
.a11y-bar .sizes button.m{font-size:1rem}
.a11y-bar .sizes button.l{font-size:1.3rem}

/* NAV */
nav{
  background:rgba(242,239,225,.97);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--peach);
  position:relative;
}
.nav-inner{display:flex;align-items:center;justify-content:flex-start;padding:8px 22px;max-width:1120px;margin:0 auto;flex-wrap:nowrap;gap:18px}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;height:110px}
.logo img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block}
.nav-toggle{display:none;background:none;border:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--coral-dark)}
.nav-toggle .ic{width:26px;height:26px;vertical-align:middle}
.nav-links{display:flex;gap:6px 8px;flex-wrap:wrap;justify-content:center;flex:1}
.nav-links a{
  text-decoration:none;color:var(--navy);font-weight:bold;
  padding:8px 14px;border-radius:20px;font-size:.95rem;transition:.2s;
}
.nav-links a:hover{background:var(--peach);color:var(--coral-dark)}
.nav-links a.active{background:var(--coral);color:#fff}

/* HERO */
.hero{
  background:linear-gradient(160deg,#f7f5e9 0%,#e5edd6 55%,#d3e0bf 100%);
  text-align:center;padding:70px 0 60px;position:relative;overflow:hidden;
}
.hero-logo{width:150px;height:150px;border-radius:50%;box-shadow:var(--shadow);display:block;margin:0 auto 12px}
.hero-name{font-size:2rem;font-weight:bold;color:var(--coral-dark);margin:0 0 20px}
.hero h1{font-size:3.1rem;margin:0 0 16px;color:var(--coral-dark)}
.hero p{font-size:1.45rem;max-width:720px;margin:0 auto 30px;color:var(--navy)}
.badge{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:bold;padding:8px 18px;border-radius:20px;margin-bottom:22px;font-size:1.05rem}
.btn{
  display:inline-block;text-decoration:none;font-weight:bold;
  padding:14px 30px;border-radius:30px;font-size:1.05rem;
  background:var(--coral);color:#fff;border:none;cursor:pointer;
  box-shadow:var(--shadow);transition:.2s;margin:6px;font-family:var(--user-font)
}
.btn:hover{transform:translateY(-2px);background:var(--coral-dark)}
.btn.alt{background:var(--teal)}
.btn.alt:hover{background:var(--teal-dark)}
.blob{position:absolute;opacity:.4;filter:blur(1px)}
.blob.a{width:130px;height:110px;background:var(--peach);top:24px;left:5%;border-radius:42% 58% 63% 37%/47% 44% 56% 53%;transform:rotate(-8deg)}
.blob.b{width:90px;height:76px;background:var(--coral);bottom:34px;right:9%;opacity:.3;border-radius:58% 42% 40% 60%/55% 48% 52% 45%;transform:rotate(12deg)}
.blob.c{width:64px;height:54px;background:var(--teal);top:64px;right:21%;opacity:.28;border-radius:50% 50% 38% 62%/62% 40% 60% 38%;transform:rotate(-16deg)}

/* Decorative forest character accents — real illustrated art, not generic shapes */
.forest-deco{position:absolute;opacity:.9;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(51,66,58,.15))}

/* Hand-drawn tree-line divider between the hero and the rest of the page */
.canopy-divider{
  display:block;width:100%;height:46px;margin-top:-2px;
  background-repeat:repeat-x;background-size:220px 46px;background-position:bottom;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='46' viewBox='0 0 220 46'%3E%3Cpath fill='%23f2efe1' d='M0 46V22c4-8 10-14 16-14 5 0 8 4 10 8 2-9 8-16 16-16 9 0 15 8 17 17 3-7 8-12 15-12 8 0 14 7 16 15 3-8 9-14 17-14 9 0 15 8 17 17 3-8 9-13 16-13 7 0 13 6 15 13 2-6 7-10 13-10 7 0 12 6 14 13 2-5 6-9 11-9 6 0 10 5 12 11V46z'/%3E%3C/svg%3E");
}

/* HOME QUICK LINKS */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px}
.hub a{
  text-decoration:none;color:var(--navy);background:var(--soft);border-radius:22px 10px 22px 10px;
  padding:26px;box-shadow:var(--shadow);transition:.2s;display:block
}
.hub a:nth-child(even){border-radius:10px 22px 10px 22px}
.hub a:hover{transform:translateY(-4px)}
.hub .ic{font-size:2rem;color:var(--teal-dark)}
.hub h3{margin:8px 0 4px;color:var(--teal-dark)}
.hub p{margin:0;font-size:1rem;color:#5c6b7a}
.hub a:nth-child(5n+1) .ic{color:var(--coral-dark)}
.hub a:nth-child(5n+2) .ic{color:var(--teal-dark)}
.hub a:nth-child(5n+3) .ic{color:var(--yellow-deep)}
.hub a:nth-child(5n+4) .ic{color:var(--navy)}
.hub a:nth-child(5n+5) .ic{color:var(--coral-dark)}

/* STAT CARDS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:10px}
.stat{
  background:var(--soft);border-radius:20px;padding:28px 24px;text-align:center;
  box-shadow:var(--shadow);border-bottom:6px solid var(--coral);
}
.stat .num{font-size:2.6rem;font-weight:bold;color:var(--coral-dark);display:block}
.stat.teal{border-bottom-color:var(--teal)}
.stat.teal .num{color:var(--teal-dark)}
.stat.yellow{border-bottom-color:var(--yellow-deep)}
.stat p{margin:8px 0 0;font-size:1rem}

h2.title{font-size:2.5rem;color:var(--coral-dark);text-align:center;margin:0 0 6px;position:relative}
h2.title::after{
  content:"";display:block;width:86px;height:12px;margin:10px auto 0;
  background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='12' viewBox='0 0 86 12'%3E%3Cpath d='M2 8c8-8 14 2 22-2s14 8 22 3 14-7 22-2 12 3 16-2' fill='none' stroke='%23c4573b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.subtitle{text-align:center;max-width:720px;margin:0 auto 20px;color:#5c6b7a;font-size:1.15rem}
h3{font-size:1.4rem}

/* LISTEN button */
.listen-wrap{text-align:center;margin:0 auto 34px}
.listen-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--teal);color:#fff;border:none;cursor:pointer;
  font-family:var(--user-font);font-weight:bold;font-size:1.05rem;
  padding:10px 22px;border-radius:26px;box-shadow:var(--shadow);transition:.2s;
}
.listen-btn:hover{background:var(--teal-dark);transform:translateY(-2px)}
.listen-btn.playing{background:var(--coral-dark)}
.listen-btn .spk{display:inline-flex;font-size:1.2rem}
.listen-btn .spk .ic-pause{display:none}
.listen-btn.playing .spk .ic-volume{display:none}
.listen-btn.playing .spk .ic-pause{display:inline-block}

.section-pad{padding:56px 0}
.alt-bg{background:#fff}
.teal-bg{background:linear-gradient(160deg,#eef4e5,#dfe9d1)}

/* MISSION / CARD GRID */
.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.m-card{background:var(--soft);border-radius:22px 10px 22px 10px;padding:26px;box-shadow:var(--shadow);transform:rotate(-.6deg);transition:.2s}
.m-card:nth-child(even){border-radius:10px 22px 10px 22px;transform:rotate(.6deg)}
.m-card:hover{transform:rotate(0deg) translateY(-3px)}
.m-card .ic{font-size:2rem;color:var(--teal-dark)}
.m-card:nth-child(4n+1) .ic{color:var(--coral-dark)}
.m-card:nth-child(4n+2) .ic{color:var(--teal-dark)}
.m-card:nth-child(4n+3) .ic{color:var(--yellow-deep)}
.m-card:nth-child(4n+4) .ic{color:var(--navy)}
.m-card h3{margin:10px 0 6px;color:var(--teal-dark)}

/* CHALLENGES */
.chal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.chal{background:var(--soft);border-radius:8px 26px 8px 26px;padding:26px;box-shadow:var(--shadow);border-top:6px solid var(--peach)}
.chal:nth-child(even){border-radius:26px 8px 26px 8px}
.chal h3{margin:0 0 12px;color:var(--coral-dark);display:flex;align-items:center;gap:10px}
.chal h3 .ic{font-size:1.3rem}
.chal ul{margin:0;padding-left:20px}
.chal li{margin-bottom:10px}

/* TEACHERS */
.tip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.tip{background:var(--soft);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start}
.tip .ic{font-size:1.6rem;flex-shrink:0;color:var(--teal-dark)}
.tip:nth-child(4n+1) .ic{color:var(--coral-dark)}
.tip:nth-child(4n+2) .ic{color:var(--teal-dark)}
.tip:nth-child(4n+3) .ic{color:var(--yellow-deep)}
.tip:nth-child(4n+4) .ic{color:var(--navy)}
.myth{
  background:#fff;border-left:5px solid var(--yellow-deep);border-radius:6px;padding:22px 30px;text-align:left;
  max-width:720px;margin:36px auto 0;box-shadow:var(--shadow);font-size:1.15rem;font-style:italic;color:var(--navy)
}
.myth u{font-style:normal}

/* SEMINAR */
.block-h{font-size:1.7rem;color:var(--teal-dark);text-align:center;margin:48px 0 6px}
.block-sub{text-align:center;max-width:700px;margin:0 auto 22px;color:#5c6b7a;font-size:1.02rem}
.mvf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.mvf{background:var(--soft);border-radius:18px;padding:24px;box-shadow:var(--shadow);border-top:6px solid var(--coral)}
.mvf .m{color:var(--coral-dark);font-weight:bold}
.mvf .f{color:var(--teal-dark);font-weight:bold;margin-top:10px}
.callout{
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;
  border-radius:22px;padding:30px 34px;max-width:820px;margin:44px auto 0;box-shadow:var(--shadow);
  text-align:center;font-size:1.08rem
}
.callout b{color:var(--yellow)}

/* WORK IN PROGRESS */
.wip-banner{
  background:var(--yellow);border:3px dashed var(--coral-dark);border-radius:22px;
  padding:26px 30px;text-align:center;color:var(--navy);box-shadow:var(--shadow);max-width:860px;margin:0 auto 10px
}
.wip-banner h2{margin:0 0 8px;color:var(--coral-dark);font-size:1.9rem}
.wip-banner p{margin:0 auto;font-size:1.05rem;max-width:720px}

/* WORD GAME */
.game-box{
  background:var(--soft);border-radius:24px;padding:34px;box-shadow:var(--shadow);
  max-width:660px;margin:0 auto;text-align:center;border:3px dashed var(--teal)
}
#wordDisplay{
  font-size:3rem;font-weight:bold;letter-spacing:8px;color:var(--teal-dark);
  margin:14px 0 6px;min-height:64px
}
.game-prompt{font-size:1.15rem;margin-bottom:14px;color:#5c6b7a}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 8px}
.tile{
  font-size:1.7rem;font-weight:bold;min-width:64px;height:64px;padding:0 16px;border-radius:14px;
  border:none;background:var(--peach);color:var(--navy);cursor:pointer;
  box-shadow:var(--shadow);transition:.15s;letter-spacing:1px;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--user-font)
}
.tile:hover{transform:translateY(-3px);background:var(--coral);color:#fff}
.tile.team{background:var(--teal);color:#fff}
.tile.team:hover{background:var(--teal-dark);color:#fff}
.tile:disabled{opacity:.35;cursor:not-allowed;transform:none}
.tile-legend{font-size:.9rem;color:#5c6b7a;margin:2px auto 10px;max-width:440px}
.tile-legend b{color:var(--teal-dark)}
.swatch{display:inline-block;width:13px;height:13px;border-radius:4px;background:var(--teal);vertical-align:-2px;margin-right:5px}
#feedback{font-size:1.25rem;font-weight:bold;min-height:34px;margin:6px 0}
.correct{color:var(--teal-dark)}
.wrong{color:var(--coral-dark)}
.score{font-size:1rem;color:#5c6b7a;margin-top:6px}
.picture{font-size:3.4rem;margin:10px 0}

/* ARCADE */
.arcade-box{
  background:var(--soft);border-radius:24px;padding:26px;box-shadow:var(--shadow);
  max-width:860px;margin:44px auto 0;text-align:center;border:3px dashed var(--coral)
}
.arcade-box h3{margin:0 0 6px;color:var(--coral-dark)}
#arcadeCanvas{
  width:100%;max-width:800px;aspect-ratio:16/9;background:#bfe3b0;
  border-radius:16px;display:block;margin:14px auto;touch-action:none;box-shadow:var(--shadow)
}
.keys{display:inline-flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.key{display:inline-flex;align-items:center;gap:6px;background:var(--peach);border-radius:10px;padding:8px 14px;font-weight:bold;color:var(--navy);box-shadow:var(--shadow);font-size:1rem}
.key .ic{width:1.1em;height:1.1em}
.touch-pad{display:none;margin:12px auto 0;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center}
.touch-pad button{display:flex;align-items:center;justify-content:center;border:none;border-radius:12px;background:var(--teal);color:#fff;height:60px;cursor:pointer;box-shadow:var(--shadow)}
.touch-pad button .ic{width:26px;height:26px}
.touch-pad button:active{background:var(--teal-dark)}
@media(hover:none) and (pointer:coarse){.touch-pad{display:grid}}

/* APP BANNER */
.app-banner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff;border-radius:24px;padding:30px 34px;margin-top:34px;box-shadow:var(--shadow);
}
.app-banner h3{color:#fff;margin:0 0 6px}
.app-banner p{margin:0;max-width:520px;font-size:1.02rem}
.soon-tag{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:bold;padding:5px 14px;border-radius:20px;font-size:.95rem;margin-bottom:10px}
.app-banner .btn{background:var(--yellow);color:var(--navy);white-space:nowrap}
.app-banner .btn:hover{background:var(--yellow-deep)}
.app-note{text-align:center;font-size:.95rem;color:#8a99a8;margin-top:12px}

/* DEMO / QR */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px;align-items:stretch}
@media(max-width:720px){.demo-grid{grid-template-columns:1fr}}
.demo-card{background:var(--soft);border-radius:20px;padding:26px;box-shadow:var(--shadow);text-align:center}
.video-holder{background:var(--navy);border-radius:14px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#fff;flex-direction:column;gap:8px;font-size:1.1rem;cursor:pointer}
.video-holder .play{font-size:3rem}
.qr{width:170px;height:170px;margin:10px auto;background:#fff;padding:10px;border-radius:14px;box-shadow:var(--shadow)}

/* GET INVOLVED */
.involve-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.inv{background:var(--soft);border-radius:18px;padding:26px;text-align:center;box-shadow:var(--shadow)}
.inv .ic{font-size:2.2rem;color:var(--teal-dark)}
.inv:nth-child(3n+1) .ic{color:var(--coral-dark)}
.inv:nth-child(3n+2) .ic{color:var(--teal-dark)}
.inv:nth-child(3n+3) .ic{color:var(--yellow-deep)}

footer{background:var(--navy);color:#fff;text-align:center;padding:40px 22px;margin-top:40px;border-top:5px solid var(--teal-dark)}
footer a{color:var(--peach)}
footer .logo{position:static;transform:none;flex:none;width:fit-content;max-width:94%;margin:0 auto 10px;justify-content:center;background:#fff;padding:10px 18px;border-radius:20px;overflow:hidden;height:auto}
footer .logo img{width:auto;height:120px;max-width:78vw;object-fit:contain;object-position:center;display:block}
.sources{font-size:.8rem;color:#9fb0c0;max-width:820px;margin:16px auto 0;line-height:1.5}
.sources a{color:#c9d6e2}

/* MOBILE */
@media(max-width:760px){
  .nav-toggle{display:block}
  .nav-inner{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;flex-wrap:wrap}
  .logo{width:auto;height:70px}
  .logo img{width:auto;height:70px;max-width:260px}
  .nav-links{display:none;width:100%;flex-direction:column;gap:4px;padding-bottom:8px;flex-basis:100%}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 12px}
  .a11y-bar{gap:12px;padding:6px 10px;font-size:.82rem}
  .a11y-bar .lead{display:none}
  .a11y-bar label{display:none}
  .a11y-bar select{padding:5px 8px;font-size:.85rem}
  main{padding:34px 0 10px}
  .hero{padding:48px 0 54px}
  .hero-logo{width:110px;height:110px}
  .hero-name{font-size:1.5rem}
  .hero h1{font-size:2.3rem}
  .hero p{font-size:1.2rem}
  h2.title{font-size:2rem}
  .app-banner{padding:24px}
  .forest-deco{display:none}
}

/* CHARACTER SHOWCASE (Play the Game page) - all characters in one box */
.char-showcase{background:var(--soft);border-radius:24px;padding:40px 30px;box-shadow:var(--shadow);max-width:840px;margin:14px auto 0;border:3px dashed var(--teal)}
.char-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px}
.char-row+.char-row{margin-top:30px}
.char-item{text-align:center;margin:0;width:190px}
/* fixed height + bottom anchor keeps every name on the same line as the others */
.char-item img{width:100%;max-width:175px;height:185px;object-fit:contain;object-position:center bottom;display:block;margin:0 auto 10px}
.char-item figcaption{position:relative;z-index:2;font-weight:bold;color:var(--teal-dark);font-size:1.5rem;background:var(--soft)}
/* top row (Dottie, Moosh, Spark) enlarged and cropped so they sit close to their names */
.char-item.big{width:230px}
.char-item.big img{max-width:215px;height:185px;object-fit:cover;object-position:center 28%;margin-bottom:-16px}
.char-item.big.moosh img{object-position:center 42%;transform:translateY(6px) scale(1.22);transform-origin:center center}
.char-item.flav img{transform:translateX(14px)}
@media(max-width:560px){
  .char-item,.char-item.big{width:140px}
  .char-item img{height:150px}
  .char-item img,.char-item.big img{max-width:130px}
  .char-item.big img{height:130px}
}