@font-face {
  font-family:GardenSans;
  src:local('Aptos'),local('Segoe UI')}
* {
  box-sizing:border-box}
 :root {
  --primary:#344f3d;
  --accent:#a64e32;
  --ink:#273b2f;
  --paper:#f8f2e6;
  --line:#d5d6c4;
  font-family:GardenSans,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper)}
body {
  margin:0;
  background:#dce9d8}
#app:not(.is-home) {
  min-height:100svh;
  background:
    linear-gradient(180deg,#f4f0e2d9 0%,#e9edddd9 100%),
    url('../../assets/topics/food-health/scene/background.png') center top/cover fixed,
    #dce9d8}
#app:not(.is-home) .main {
  min-height:calc(100svh - 72px);
  background:#fbf7edeb;
  box-shadow:0 0 45px #263a3124}
button,select,input {
  font:inherit}
button,select {
  touch-action:manipulation}
button {
  cursor:pointer}
button:disabled {
  cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #a94725;
  outline-offset:4px}
h1,h2,p {
  margin-top:0}
h1,h2,.reading,.word {
  font-family:Georgia,serif}
button {
  color:inherit}
button:disabled {
  opacity:.57}
button[hidden],[hidden] {
  display:none!important}
.toolbar {
  position:relative;
  z-index:50;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:12px 3vw;
  background:#faf6eb;
  border-bottom:1px solid #d7d7c6}
.toolbar-tools {
  display:flex;
  margin-left:auto;
  gap:8px;
  align-items:center}
.brand {
  border:0;
  background:none;
  font-family:Georgia,serif;
  font-weight:bold;
  font-size:19px;
  text-align:left;
  max-width:280px}
.quiet {
  background:transparent;
  border:1px solid #6b795f;
  border-radius:24px;
  padding:10px 16px;
  min-height:44px;
  font-size:14px;
  font-weight:600}
.quiet:hover {
  background:#e8eadc}
.main {
  max-width:1360px;
  margin:0 auto;
  padding:36px 32px 64px}
.page-title {
  font-size:clamp(30px,3.2vw,48px);
  font-weight:normal;
  letter-spacing:-.03em;
  margin-bottom:12px}
.intro,.scope {
  color:#5c6858;
  line-height:1.6}
.intro {
  max-width:780px;
  font-size:18px}
.scope {
  font-size:15px;
  margin-bottom:24px}
.mode-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin-top:30px}
#app[data-screen="menu"] .main {
  border-radius:0 0 28px 28px}
.mode-card {
  border:1px solid #ced1bb;
  border-radius:20px;
  overflow:hidden;
  background:#fffaf0;
  text-align:left;
  padding:20px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 6px 16px #283d2d08;
  transition:transform .15s,box-shadow .15s}
.mode-card:not(:disabled):hover {
  transform:translateY(-3px);
  box-shadow:0 12px 24px #283d2d15}
.mode-card>strong {
  font-family:Georgia,serif;
  font-size:23px;
  font-weight:normal}
.mode-card>span:last-child {
  font-size:14px;
  line-height:1.5;
  color:#596653}
.mode-number {
  font-family:Georgia,serif;
  font-size:34px;
  color:#9a5a3f}
.mode-card .picture {
  height:130px;
  min-height:130px;
  background:#eee8d9;
  border-radius:12px}
.category-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:28px 0}
.category {
  border:1px solid #a2ac91;
  background:#fffaf0;
  border-radius:14px;
  padding:20px 14px;
  min-height:74px;
  line-height:1.4}
.category[aria-pressed=true] {
  background:var(--primary);
  color:#fffaf0;
  border-color:var(--primary)}
.session-options {
  padding:24px;
  background:#eeedde;
  border-radius:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.session-options>.scope {
  flex-basis:100%;
  margin:0}
.button {
  border:1px solid var(--primary);
  border-radius:28px;
  background:var(--primary);
  color:#fffdf6;
  padding:13px 25px;
  min-height:48px;
  font-weight:600}
.button:hover {
  background:#253b2d}
.button.secondary {
  color:var(--primary);
  background:#faf6e9}
.button.secondary:hover {
  background:#e1e6d4}
.activity {
  max-width:1050px;
  margin:auto;
  text-align:center;
  background:#fffaf1;
  border:1px solid #d7d8c5;
  border-radius:24px;
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px}
.picture {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:300px;
  max-width:600px;
  overflow:hidden;
  border-radius:18px;
  background:#f0eddf}
.picture img {
  height:100%;
  width:100%;
  object-fit:contain}
.picture-missing {
  display:block;
  padding:24px;
  color:#596853;
  font-size:14px;
  font-style:italic}
.word {
  font-size:clamp(30px,4vw,52px);
  margin:0;
  overflow-wrap:anywhere}
.definition {
  font-size:22px;
  max-width:720px;
  line-height:1.5;
  margin:0}
.sentence {
  font-size:20px;
  line-height:1.5;
  color:#596653;
  margin:0}
.answer-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  width:100%}
.answer {
  border:2px solid #a3ae90;
  border-radius:17px;
  padding:16px;
  background:#f4f3e5;
  min-height:70px;
  font-size:21px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px}
.answer:hover {
  background:#e3e8d4;
  border-color:#536747}
.answer .picture {
  height:190px;
  background:#fffaf0}
.answer.text-only,.text-only .answer {
  font-size:clamp(20px,2vw,28px);
  min-height:125px;
  padding:24px}
.answer strong {
  overflow-wrap:anywhere}
.category-answers {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.toggles {
  display:flex;
  gap:28px;
  justify-content:center;
  flex-wrap:wrap}
.toggles label {
  display:flex;
  gap:10px;
  align-items:center;
  min-height:44px}
.toggles input {
  width:22px;
  height:22px;
  accent-color:var(--primary)}
.feedback {
  padding:16px 24px;
  background:#e3ecd7;
  border-radius:14px;
  color:#244a2d;
  font-weight:600;
  font-size:20px;
  line-height:1.5;
  margin:0;
  width:100%}
.feedback.retry {
  background:#f7ead3;
  color:#6b491b}
.question {
  font-size:clamp(25px,3vw,36px);
  font-weight:normal;
  line-height:1.3;
  margin:0}
.notice {
  font-size:14px;
  color:#62654e;
  line-height:1.6;
  max-width:700px;
  margin:0}
.letter-word {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center}
.letter {
  display:grid;
  place-items:center;
  min-width:38px;
  height:51px;
  border-bottom:3px solid #758366;
  font-size:30px;
  font-weight:600}
.letter-space {
  width:16px;
  font-size:30px}
.chances {
  font-size:18px;
  margin:0}
.keyboard {
  display:flex;
  justify-content:center;
  gap:8px;
  max-width:830px;
  flex-wrap:wrap}
.spelling-trail {
  position:relative;
  width:min(720px,88%);
  height:44px;
  margin:2px 0 4px;
  border-bottom:4px dotted #91a47a}
.spelling-trail::before,
.spelling-trail::after {
  position:absolute;
  bottom:-11px;
  width:18px;
  height:18px;
  border-radius:50% 50% 45% 55%;
  background:#d89a49;
  box-shadow:10px -3px 0 #f0c65e,-8px -2px 0 #c86b55;
  content:''}
.spelling-trail::before {left:4px}
.spelling-trail::after {right:4px}
.spelling-scout {
  position:absolute;
  left:0;
  bottom:-8px;
  width:28px;
  height:22px;
  border-radius:55% 55% 45% 45%;
  background:linear-gradient(90deg,#9d3f2d 0 46%,#273b2f 47% 53%,#9d3f2d 54%);
  border:2px solid #273b2f;
  box-shadow:0 3px 0 #ffffffb8;
  transform-origin:center}
.spelling-scout::before,
.spelling-scout::after {
  position:absolute;
  top:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#f4d286;
  content:''}
.spelling-scout::before {left:5px}
.spelling-scout::after {right:5px}
.key {
  background:#e8ecdb;
  border:1px solid #859572;
  border-radius:9px;
  min-width:48px;
  height:50px;
  font-size:24px}
.key:hover {
  background:#d2dec1}
.key:disabled {
  background:#dad9cd;
  opacity:.5}
.reading {
  font-size:clamp(32px,5vw,60px);
  line-height:1.35;
  max-width:900px;
  margin:0}
.discussion {
  font-size:22px;
  line-height:1.6;
  max-width:780px;
  margin:0}
.results {
  max-width:800px;
  margin:50px auto;
  text-align:center;
  background:#fffaf0;
  border:1px solid #d3d9c4;
  border-radius:25px;
  padding:50px}
.results h2 {
  font-size:38px}
.results p {
  line-height:1.6}
.results .button {
  margin:10px}
.result-stars {
  color:#ac762b;
  font-size:60px;
  letter-spacing:8px}
.detective-controls {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center}
.detective-controls select {
  padding:10px;
  border:1px solid #859572;
  border-radius:8px;
  background:#f5f3e6}
.mystery-stage {
  width:min(100%,720px);
  background:#f0eddf;
  border-radius:18px;
  overflow:hidden}
.mystery-canvas {
  display:block;
  width:100%;
  height:auto}
.flip-grid {
  display:grid;
  width:100%;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px}
.flip-20 {
  grid-template-columns:repeat(8,minmax(0,1fr))}
.flip-30 {
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:8px}
.flip-tile {
  border:2px solid #7b8e67;
  background:#dce4cc;
  border-radius:12px;
  min-width:0;
  aspect-ratio:1/1.12;
  padding:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px}
.flip-tile.is-open {
  background:#fffaf0}
.flip-tile.is-matched {
  background:#e1ebd8;
  opacity:1;
  border-color:#47683d}
.flip-tile .picture {
  height:80%;
  min-height:0;
  border-radius:8px;
  flex:1}
.flip-tile strong {
  font-size:clamp(12px,1.15vw,18px);
  overflow-wrap:anywhere}
.tile-back {
  font-family:Georgia,serif;
  font-size:45px;
  color:#5a7147}
.wheel-stage {
  position:relative;
  width:min(78vw,600px);
  aspect-ratio:1;
  max-width:100%;
  margin:14px auto}
.wheel-disc {
  position:absolute;
  inset:0;
  background:conic-gradient(#e4e9d6 0 30deg,#f5e4cb 30deg 60deg,#d9e5d1 60deg 90deg,#f0e5ce 90deg 120deg,#e4e9d6 120deg 150deg,#f5e4cb 150deg 180deg,#d9e5d1 180deg 210deg,#f0e5ce 210deg 240deg,#e4e9d6 240deg 270deg,#f5e4cb 270deg 300deg,#d9e5d1 300deg 330deg,#f0e5ce 330deg);
  border:8px solid #566b49;
  border-radius:50%}
.wheel-marker {
  position:absolute;
  transform:translate(-50%,-50%);
  width:17%;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
  line-height:1.1}
.wheel-marker .picture {
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  background:#fffaf0}
.wheel-marker .picture-missing {
  padding:6px;
  font-size:9px}
.wheel-marker>span {
  padding:3px;
  background:#faf6e9;
  border-radius:5px;
  max-width:100%;
  overflow-wrap:anywhere}
.wheel-pointer {
  position:absolute;
  right:-12px;
  top:calc(50% - 15px);
  width:30px;
  height:30px;
  border-radius:50%;
  background:#bb3f2e;
  border:5px solid #fff8e9;
  box-shadow:0 1px 6px #0003;
  z-index:2}
.spin-button {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:100px;
  height:100px;
  background:var(--primary);
  color:#fff8e9;
  border:5px solid #faf4e4;
  border-radius:50%;
  font-size:25px;
  font-weight:bold;
  z-index:3}
.wheel-reading {
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:40px}
.home-stage {
  min-height:calc(100svh - 72px)}

@media(max-width:1000px) {
  .mode-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.category-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.toolbar {
  gap:6px}
.toolbar-tools {
  gap:5px}
.quiet {
  padding:9px 11px}
.brand {
  font-size:16px}
.flip-30 {
  grid-template-columns:repeat(8,minmax(0,1fr))}
.flip-20 {
  grid-template-columns:repeat(7,minmax(0,1fr))}
}

@media(max-width:650px) {
  .toolbar {
  flex-wrap:wrap;
  padding:10px 12px}
.brand {
  max-width:calc(100% - 80px)}
.toolbar-tools {
  flex-basis:100%;
  justify-content:flex-end}
.main {
  padding:24px 14px 45px}
#app:not(.is-home) .main {
  min-height:calc(100svh - 112px)}
.mode-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px}
.mode-card {
  padding:15px;
  min-height:205px}
.mode-card>strong {
  font-size:21px}
.category-grid {
  gap:8px}
.category {
  padding:14px 7px;
  font-size:14px}
.activity {
  padding:18px 12px;
  border-radius:18px}
.picture {
  height:230px}
.answer-grid {
  grid-template-columns:1fr}
.category-answers {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.answer-grid:not(.text-only):not(.category-answers) {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px}
.answer {
  padding:8px;
  font-size:16px}
.answer .picture {
  height:110px}
.text-only .answer {
  min-height:70px;
  font-size:22px}
.definition {
  font-size:19px}
.letter {
  min-width:28px;
  height:42px;
  font-size:25px}
.key {
  min-width:40px;
  height:45px}
.keyboard {
  gap:6px}
.flip-grid,.flip-20,.flip-30 {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px}
.flip-tile strong {
  font-size:12px}
.wheel-marker {
  font-size:9px}
.spin-button {
  width:76px;
  height:76px;
  font-size:21px}
.results {
  padding:30px 16px}
.toolbar .quiet {
  font-size:12px}
.wheel-reading {
  min-height:300px}
.detective-controls .button {
  padding:10px 15px}
}

/* All Words occupies its own row; nine collections use deliberate 4 + 5 rows. */
@media(min-width:1001px) {
  .category-grid { grid-template-columns:repeat(20,minmax(0,1fr)); }
  .category-grid>.category { grid-column:span 4; }
  .category-grid>.category:nth-child(n+2):nth-child(-n+5) { grid-column:span 5; }
  .category-grid>.category:first-child { grid-column:1 / -1; }
}
@media(max-width:1000px) {
  .category-grid>.category:first-child { grid-column:1 / -1; }
}
.fullscreen-message { flex-basis:100%; margin:0; font-size:14px; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  scroll-behavior:auto!important;
  transition:none!important}
}


.category .picture { height:115px; margin-bottom:12px; background:#f6f1e5; }
.paper-prompt { font-size:18px; color:#5c6858; line-height:1.5; margin:0; }