@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;
  --space-1:8px;
  --space-2:12px;
  --space-3:18px;
  --space-4:24px;
  --space-5:36px;
  --content-gutter:clamp(16px,3vw,40px);
  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:none}
#app:not(.is-home) .main {
  min-height:calc(100svh - 72px);
  background:transparent;
  box-shadow:none}
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:10px;
  min-height:68px;
  padding:10px var(--content-gutter);
  background:transparent;
  border-bottom:0;
  box-shadow:none}
.toolbar-tools {
  display:flex;
  margin-left:auto;
  gap:8px;
  align-items:center}
.brand {
  border:0;
  background:none;
  font-family:Georgia,serif;
  font-weight:bold;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-height:44px;
  font-size:clamp(15px,1.3vw,18px);
  line-height:1;
  text-align:left;
  white-space:nowrap}
.quiet {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffaf0;
  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;
  text-shadow:0 1px 3px #fff9e8;
  padding:clamp(24px,3vw,40px) var(--content-gutter) clamp(44px,5vw,68px)}
.page-title {
  font-size:clamp(30px,3.2vw,48px);
  font-weight:normal;
  letter-spacing:-.03em;
  line-height:1.08;
  margin:0 0 8px}
.intro,.scope {
  color:#5c6858;
  line-height:1.6}
.intro {
  max-width:780px;
  margin:0;
  font-size:18px}
.scope {
  font-size:15px;
  margin-bottom:18px}
.mode-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:24px}
#app[data-screen="menu"] .main {
  background:transparent;
  box-shadow:none;
  border-radius:0}
#app[data-screen="menu"] {
  background:url('../../assets/topics/food-health/scene/menu-garden.png') center center/cover fixed #dce9d8}
#app[data-screen="menu"] .page-title,
#app[data-screen="menu"] .intro {
  color:#273b2f;
  text-shadow:0 1px 3px #fff9e8}
#app.is-home {
  position:relative}
#app.is-home .toolbar {
  position:absolute;
  top:0;
  left:0;
  width:100%}
.toolbar .brand,
.toolbar .quiet {
  border-radius:24px;
  color:var(--ink);
  background:#fffaf0;
  border:1px solid #49614466;
  box-shadow:none;
  text-shadow:none}
.toolbar .brand {
  padding:10px 16px}
.toolbar button:hover {
  background:#f1eadb;
  border-color:#3f5d3d99;
  box-shadow:0 3px 12px #263c2933}
.mode-card {
  border:1px solid #ced1bb;
  border-radius:20px;
  overflow:hidden;
  background:#fffaf0;
  text-shadow:none;
  text-align:left;
  padding:18px;
  min-height:205px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 6px 16px #283d2d1f;
  transition:transform .15s,box-shadow .15s}
.mode-card:not(:disabled):hover {
  transform:translateY(-3px);
  box-shadow:0 12px 24px #283d2d38}
.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:120px;
  min-height:120px;
  background:#fffaf0;
  border-radius:12px}
.category-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:24px 0 18px}
.category {
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:1px solid #a2ac91;
  background:#fffaf0;
  text-shadow:none;
  border-radius:14px;
  padding:14px 16px;
  min-height:74px;
  line-height:1.4}
.category-count {
  display:block;
  font-size:13px;
  line-height:1.2;
  opacity:.78}
.category[aria-pressed=true] {
  background:var(--primary);
  color:#fffaf0;
  text-shadow:none;
  border-color:var(--primary)}
.session-options {
  padding:18px;
  background:transparent;
  border-radius:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.session-options>.scope {
  flex-basis:100%;
  margin:0}
.button {
  text-shadow:none;
  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:1120px;
  margin:auto;
  text-align:center;
  background:transparent;
  border:1px solid #d7d8c5;
  border-radius:24px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px}
.picture {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:clamp(220px,28vw,300px);
  max-width:600px;
  overflow:hidden;
  border-radius:18px;
  background:#fffaf0}
.picture img {
  height:100%;
  width:100%;
  object-fit:contain}
.food-origin {
  width:100%;
  max-width:720px;
  border:1px solid #cbd3bc;
  border-radius:18px;
  background:#fffaf0;
  text-shadow:none;
  text-align:left}
.food-origin-toggle {
  cursor:pointer;
  padding:16px 20px;
  min-height:48px;
  font-weight:600;
  color:var(--primary);
  border-radius:18px}
.food-origin-toggle:hover {
  background:#e8eadc}
.food-origin-toggle:focus-visible {
  outline:3px solid #a94725;
  outline-offset:4px}
.food-origin-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:0 20px 20px}
.food-origin .picture {
  height:auto;
  aspect-ratio:1;
  background:#fffaf0}
.food-origin-name {
  margin:0 0 10px;
  font:normal 26px Georgia,serif}
.food-origin-description {
  margin:0;
  line-height:1.6;
  overflow-wrap:anywhere}
@media(max-width:540px) {
  .food-origin-content {grid-template-columns:minmax(0,1fr)}
  .food-origin .picture {max-width:300px;justify-self:center}
}
.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:12px;
  width:100%}
.answer {
  border:2px solid #a3ae90;
  border-radius:17px;
  padding:14px;
  background:#fffaf0;
  text-shadow:none;
  min-height:70px;
  font-size:21px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px}
.answer:hover {
  background:#e3e8d4;
  border-color:#536747}
.answer .picture {
  height:170px;
  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:20px;
  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:#fffaf0;
  text-shadow:none;
  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:24px auto;
  text-align:center;
  background:transparent;
  border:1px solid #d3d9c4;
  border-radius:25px;
  padding:36px}
.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:10px}
.flip-10,
.flip-20 {
  grid-template-columns:repeat(10,minmax(0,1fr))}
.flip-30 {
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:8px}
.flip-tile {
  border:2px solid #7b8e67;
  background:#fffaf0;
  text-shadow:none;
  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(72vw,520px);
  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:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:24px}
.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-10,.flip-20,.flip-30 {
  grid-template-columns:repeat(8,minmax(0,1fr))}
}

@media(max-width:620px) {
  .toolbar {
  flex-wrap:wrap;
  padding:10px 12px}
.brand {
  max-width:calc(100% - 76px);
  font-size:15px}
.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(2,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-10,.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}
}

@media(max-width:430px) {
  .answer-grid:not(.text-only):not(.category-answers) {
    grid-template-columns:1fr}
}

@media(max-width:360px) {
  .toolbar {
    gap:4px}
  .toolbar .brand {
    max-width:none;
    padding:10px 12px;
    font-size:15px;
    white-space:nowrap}
  .toolbar>.quiet {
    padding-inline:9px}
}

/* 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:#fffaf0; }
.paper-prompt { font-size:18px; color:#5c6858; line-height:1.5; margin:0; }
.target-picture {
  display:flex;
  justify-content:center;
  width:100%}
.target-picture .picture {
  height:220px;
  max-width:520px}
#app[data-screen="activity"][data-mode="flip"] .activity {
  max-width:1240px}
#app[data-screen="activity"][data-mode="identify"] .activity {
  gap:12px;
  padding:20px}
#app[data-screen="activity"][data-mode="identify"] .target-picture .picture {
  height:180px}
#app[data-screen="activity"][data-mode="identify"] .answer .picture {
  height:145px}

/* Spelling Adventure: Salad Toss */
.activity.salad-toss-activity {
  max-width:1240px;
  padding:20px;
  background:transparent}
.salad-spelling-layout {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:24px;
  align-items:stretch;
  width:100%}
.salad-stage-host {
  min-width:0}
.salad-stage {
  position:relative;
  isolation:isolate;
  min-height:520px;
  height:100%;
  overflow:hidden;
  border:1px solid #718160;
  border-radius:22px;
  background:url('../../assets/topics/food-health/scene/menu-garden.png') center/cover #dce9d8;
  box-shadow:inset 0 0 38px #31453122}
.salad-stage::after {
  position:absolute;
  inset:auto 0 0;
  height:26%;
  z-index:-1;
  background:linear-gradient(180deg,#73543100,#61472a73);
  content:''}
.salad-stage-label {
  position:absolute;
  top:16px;
  left:16px;
  z-index:8;
  margin:0;
  padding:9px 16px;
  border:1px solid #6c775d;
  border-radius:999px;
  background:#fffaf0;
  text-shadow:none;
  color:#2e4737;
  font:700 18px Georgia,serif;
  box-shadow:0 5px 15px #2f42272e}
.salad-mistakes {
  position:absolute;
  top:18px;
  right:18px;
  z-index:8;
  display:flex;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:#fffaf0;
  box-shadow:0 5px 15px #2f422729}
.salad-mistake {
  width:15px;
  height:15px;
  border:2px solid #6d7e5c;
  border-radius:50%;
  background:#f5d17b}
.salad-mistake.is-used {
  border-color:#7d3d2d;
  background:#b5543d;
  box-shadow:inset 0 0 0 2px #f5c79a}
.salad-rabbit,
.salad-board,
.salad-whole,
.salad-chopped,
.salad-plate,
.salad-flight-piece {
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none}
.salad-rabbit {
  left:-5%;
  right:auto;
  bottom:15px;
  z-index:4;
  width:58%;
  aspect-ratio:1224 / 1285;
  max-height:94%;
  object-fit:contain;
  object-position:left bottom;
  filter:drop-shadow(0 10px 7px #25361f3d)}
.salad-rabbit-art,
.salad-rabbit-expression {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left bottom}
.salad-rabbit-expression {
  position:absolute;
  inset:0;
  object-fit:fill;
  /* Use the registered head only, keeping the current bowl-fill artwork. */
  clip-path:polygon(0 0,70% 0,70% 40%,61% 45%,47% 47%,27% 45%,0 43%)}
.salad-board {
  right:3%;
  left:auto;
  bottom:calc(-3% - 25px);
  z-index:2;
  width:50%;
  height:30%;
  object-fit:contain;
  /* Level the long edge already painted at an angle in the source artwork. */
  transform:rotate(12deg);
  transform-origin:50% 70%;
  filter:drop-shadow(0 9px 6px #263a2a40)}
.salad-whole,
.salad-chopped {
  right:16%;
  left:auto;
  bottom:calc(6% - 25px);
  z-index:5;
  width:24%;
  height:19%;
  object-fit:contain;
  filter:drop-shadow(0 5px 4px #263a2a35)}
.salad-chopped {
  visibility:hidden}
.salad-plate {
  right:5%;
  left:auto;
  bottom:calc(-9% + 30px);
  z-index:6;
  width:39%;
  height:26%;
  object-fit:contain;
  visibility:hidden;
  filter:drop-shadow(0 9px 7px #263a2a42)}
.salad-plate.is-served {
  visibility:visible}
.salad-flying {
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none}
.salad-flight-piece {
  left:68%;
  bottom:calc(25% - 25px);
  width:23%;
  height:17%;
  object-fit:contain}
.salad-knife {
  position:absolute;
  right:1%;
  left:auto;
  bottom:calc(15% - 25px);
  z-index:7;
  display:block;
  width:38%;
  height:14%;
  object-fit:contain;
  transform:rotate(12deg);
  transform-origin:88% 56%;
  filter:drop-shadow(0 5px 3px #263a2a45)}
.salad-spelling-controls {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  min-width:0;
  padding:20px 12px}
.salad-spelling-controls .picture {
  height:170px;
  max-width:300px}
.salad-spelling-controls .definition {
  margin:0}
.salad-spelling-controls .notice {
  text-align:center}
.salad-spelling-controls .keyboard {
  max-width:520px}
.salad-spelling-controls .key {
  min-width:43px;
  height:45px;
  font-size:21px}
.salad-stage.is-loss .salad-rabbit {
  transform:rotate(-4deg)}
.salad-rabbit.is-winner {
  transform:translateY(-6px) rotate(2deg)}

@media(max-width:900px) {
  .salad-spelling-layout {
    grid-template-columns:1fr}
  .salad-stage {
    min-height:390px}
  .salad-spelling-controls {
    padding:4px}
  .salad-spelling-controls .picture {
    height:145px}
}
@media(max-width:540px) {
  .activity.salad-toss-activity {
    padding:10px}
  .salad-stage {
    min-height:315px;
    border-radius:17px}
  .salad-stage-label {
    top:10px;
    left:10px;
    padding:7px 12px;
    font-size:15px}
  .salad-mistakes {
    top:10px;
    right:10px;
    gap:4px;
    padding:7px 8px}
  .salad-mistake {
    width:11px;
    height:11px;
    border-width:1px}
  .salad-spelling-controls .picture {
    height:120px}
}