:root{font-family:'Trebuchet MS',Verdana,sans-serif;
  color:#173f3b;
  background:#c3dce0;
  font-synthesis:none;
  --ink:#173f3b;
  --cream:#fff6df;
  --teal:#235b57;
  --ochre:#edbb52}

*{box-sizing:border-box}
body{margin:0;
  min-width:300px;
  min-height:100vh;
  background-image:var(--scene);
  background-size:cover;
  background-position:center;
  background-attachment:fixed}
button,input,select{font:inherit}
button{color:var(--ink);
  border:2px solid #235b5740;
  background:var(--cream);
  border-radius:16px;
  padding:12px 20px;
  min-height:48px;
  cursor:pointer;
  box-shadow:0 4px 0 #173f3b17}
button:hover:enabled{border-color:var(--teal);
  background:#fff9e9}
button:active:enabled{transform:translateY(2px)}
button:disabled{cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid #bf571f;
  outline-offset:4px}
button.primary{background:var(--teal);
  color:#fff9e9;
  border-color:var(--teal)}
h1,h2{font-family:Georgia,serif;
  text-wrap:balance}
h1{font-size:clamp(1.65rem,3.3vw,2.8rem);
  margin:12px 0 22px}
h1:focus{outline:none}
p{line-height:1.5}
select{padding:12px;
  border:2px solid #66877f;
  border-radius:12px;
  background:#fffbef;
  color:var(--ink);
  min-height:48px}
label{display:flex;
  align-items:center;
  gap:12px}
fieldset{border:0;
  padding:0;
  margin:12px 0 24px}
legend{font-size:1.15rem;
  font-weight:bold;
  text-align:left;
  margin-bottom:14px}
.site-header{height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  gap:12px;
  position:relative;
  z-index:10}
.home{display:flex;
  align-items:center;
  gap:10px;
  background:#fff6dfdf;
  padding:5px 15px 5px 5px;
  border-radius:60px;
  font-weight:bold}
.home img{width:60px;
  height:60px;
  object-fit:cover;
  border-radius:50%}
.utilities{display:flex;
  gap:10px}
.utilities button{background:#fff6dfef}
.screen{width:100%;
  min-height:calc(100svh - 96px);
  padding:12px 30px 36px;
  margin:0}
.intro{min-height:calc(100svh - 144px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0}
.eyebrow{text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
  font-weight:bold;
  margin:0 0 8px}
.intro h1{font-size:clamp(2.4rem,5.5vw,4.9rem);
  margin:0 0 16px;
  text-shadow:0 2px 1px #fff6df}
.intro h1 span{display:block;
  font-size:.39em;
  letter-spacing:.11em;
  margin:7px 0 0}
.explore{position:relative;
  width:clamp(210px,30vw,335px);
  height:clamp(210px,30vw,335px);
  padding:0;
  border-radius:50%;
  border:0;
  background:#fff6df;
  box-shadow:0 12px 30px #173f3b30;
  transition:transform .22s}
.explore img{width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%}
.explore span{position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  border-radius:24px;
  padding:7px 23px;
  color:white;
  background:var(--teal);
  font-size:1.2rem;
  font-weight:bold}
.invitation{font-size:clamp(.95rem,1.5vw,1.2rem);
  font-weight:bold;
  background:#fff6dfc9;
  border-radius:18px;
  padding:9px 18px;
  margin:20px 0 0}
.page-title{text-align:center;
  margin:0 0 22px}
.page-title h1{margin:0}
.menu-grid{display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  max-width:1140px;
  margin:auto}
.mode-card{flex:0 1 calc(25% - 18px);
  padding:8px 10px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  background:#fff6dff2;
  min-width:185px;
  position:relative}
.mode-card strong{font-size:1.03rem}
.mode-card:disabled{opacity:1;
  background:#eee7d8e8}
.coming{font-size:.72rem;
  font-weight:bold;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:7px;
  color:#6d6350}
.mode-art{width:100%;
  aspect-ratio:1.125;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  margin-bottom:6px}
.mode-art img{position:absolute;
  width:400%;
  height:300%;
  max-width:none}
.teacher-notes{max-width:800px;
  background:#fff6dfec;
  border-radius:12px;
  margin:24px auto 0;
  padding:12px 18px}
.teacher-notes summary{cursor:pointer}
.panel{width:min(1120px,100%);
  margin:0 auto;
  background:#fff6dfee;
  border:1px solid #fff8e8;
  border-radius:28px;
  padding:24px 32px;
  text-align:center;
  box-shadow:0 12px 40px #173f3b1c}
.setup-panel{max-width:1050px}
.setup-form{width:100%;
  max-width:960px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px}
.setup-form>label{justify-content:center}
.start{align-self:center;
  min-width:200px}
.category-grid{display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px}
.category-card{flex:0 1 calc(25% - 12px);
  min-width:145px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center}
.category-card strong{font-size:.95rem}
.category-card>span{font-size:.8rem;
  margin-top:4px}
.category-card.selected{border:3px solid var(--teal);
  background:#e0e9cf}
.picture{position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  aspect-ratio:1;
  border-radius:12px;
  background:#fff6df}
.picture img{position:absolute;
  max-width:none;
  object-fit:fill}
.image-fallback{display:none;
  position:absolute;
  inset:0;
  place-content:center;
  font-size:1rem;
  padding:12px}
.picture.art-failed .image-fallback{display:grid}
.picture.category-picture{width:110px}
.topline{display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-weight:bold}
.topline>span:last-child{white-space:nowrap}
.progress{display:flex;
  align-items:center;
  gap:14px;
  margin:16px 0;
  font-size:.85rem}
.progress progress{width:100%;
  height:9px;
  accent-color:var(--teal)}
.learning-layout{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:32px;
  align-items:center}
.hero-picture{width:min(100%,440px);
  justify-self:center}
.word-detail{text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px}
.definition{font-size:clamp(1.25rem,2vw,1.65rem);
  margin:0 0 10px}
.reading-sentence{font-family:Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.2rem);
  margin:0 0 10px}
.word-detail details{padding:14px;
  border:1px solid #8ba69c;
  border-radius:14px}
.actions{display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap}
.feedback-row{display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  min-height:74px;
  margin-top:12px}
.feedback-row p{margin:0;
  min-height:24px;
  font-weight:bold}
.next{min-width:120px}
.unavailable{visibility:hidden;
  pointer-events:none}
.answer-grid{display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin:22px auto 0;
  max-width:950px}
.answer-grid>button{flex:1 1 25%;
  max-width:300px;
  font-size:1.2rem;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px}
.answer-grid.categories>button{flex-basis:28%;
  font-size:1rem;
  min-height:70px}
.answer-grid>button:disabled{opacity:.75}
.answer-grid.text-only{min-height:170px;
  align-items:center}
.answer-grid.text-only>button{min-height:100px;
  padding:22px}
.question-picture{width:clamp(160px,26vw,270px);
  margin:auto}
.target-picture{width:140px;
  margin:10px auto}
.teacher-toggles{display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:.85rem;
  margin:12px}
.teacher-toggles input{width:22px;
  height:22px;
  accent-color:var(--teal)}
.scope-note{font-size:.9rem;
  margin-top:-12px}
.explanation{font-size:1.2rem;
  max-width:700px;
  margin:24px auto}
.spelling-clue{display:flex;
  justify-content:center;
  gap:20px;
  align-items:center;
  max-width:660px;
  margin:auto}
.spelling-clue p{text-align:left;
  max-width:410px}
.clue-picture{width:130px;
  flex-shrink:0}
.feather-trail{display:flex;
  justify-content:center;
  gap:10px;
  margin:8px auto 0;
  height:70px}
.feather{display:block;
  width:24px;
  color:#bc6436;
  transition:opacity .15s,transform .15s}
.feather:nth-child(even){color:#38776c}
.feather svg{width:100%;
  height:100%}
.feather.spent{opacity:.16;
  transform:translateY(4px)}
.feather-trail.won .feather{opacity:1;
  color:#b57b13}
.chances{font-size:.85rem;
  margin:5px}
.letter-word{display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:20px auto;
  max-width:100%}
.word-part{display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:center}
.letter{border-bottom:3px solid var(--teal);
  background:#fffef5;
  min-width:32px;
  padding:5px 6px;
  font-size:1.5rem;
  line-height:1.2}
.word-space{width:8px}
.keyboard{display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  max-width:750px;
  margin:auto}
.keyboard button{width:48px;
  padding:7px;
  min-height:48px;
  text-transform:uppercase;
  border-radius:10px}
.keyboard .right-letter{background:#b5d4a1;
  opacity:.6}
.keyboard .wrong-letter{background:#eed0b8;
  opacity:.4}
.used-letters{font-size:.8rem;
  min-height:20px}
.flip-board{display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:8px;
  max-width:1050px;
  margin:auto}
.flip-card{padding:5px;
  min-width:0;
  border-radius:10px;
  aspect-ratio:1.12;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--teal);
  color:#fff6df}
.flip-card.face-up{background:#fff9e9;
  color:var(--ink)}
.flip-card .picture{width:100%;
  flex:1;
  aspect-ratio:auto;
  min-height:0}
.flip-card>span{font-size:.8rem;
  margin-top:3px}
.flip-card .card-back{font-family:Georgia,serif;
  font-size:2rem}
.flip-card.matched{border-color:#88ae70;
  background:#deedcd}
.board-20{grid-template-columns:repeat(16,minmax(0,1fr))}
.board-30{grid-template-columns:repeat(20,minmax(0,1fr))}
.wheel-wrap{position:relative;
  width:min(67vh,530px,90vw);
  aspect-ratio:1;
  margin:26px auto}
.wheel-disc{width:100%;
  height:100%;
  border-radius:50%;
  border:12px solid #dca94c;
  background:conic-gradient(#e6bd70 0deg 30deg,#a5c9b8 30deg 60deg,#f0d8a6 60deg 90deg,#a5c9b8 90deg 120deg,#e6bd70 120deg 150deg,#a5c9b8 150deg 180deg,#f0d8a6 180deg 210deg,#a5c9b8 210deg 240deg,#e6bd70 240deg 270deg,#a5c9b8 270deg 300deg,#f0d8a6 300deg 330deg,#a5c9b8 330deg);
  position:relative;
  transition:transform 1.6s cubic-bezier(.16,.65,.16,1);
  box-shadow:0 9px 0 #967540}
.wheel-marker{position:absolute;
  left:50%;
  top:50%;
  width:17%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateX(calc(min(67vh,530px,90vw)*.385)) rotate(var(--counter));
  }
.wheel-marker .picture{border-radius:50%}
.wheel-pointer{position:absolute;
  right:-10px;
  top:calc(50% - 12px);
  width:24px;
  height:24px;
  background:#be443b;
  border:4px solid #fff6df;
  border-radius:50%;
  z-index:2}
.spin{position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  width:95px;
  height:95px;
  background:var(--teal);
  color:white;
  border:4px solid #fff6df;
  z-index:2}
.spin:active:enabled{transform:translate(-50%,-50%)}
.wheel-reading{font-family:Georgia,serif;
  font-size:clamp(3rem,9vw,7rem);
  min-height:340px;
  display:grid;
  place-content:center;
  overflow-wrap:anywhere}
.detective-settings,.detective-controls{display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap}
.detective-canvas{max-width:510px;
  margin:15px auto;
  position:relative}
.detective-canvas canvas{width:100%;
  height:auto;
  display:block;
  border-radius:20px}
.image-status{position:absolute;
  left:0;
  right:0;
  bottom:8px;
  text-align:center;
  background:#fff6dfbf}
.image-status:empty{display:none}
.timer{min-width:50px}
.result-stars{font-size:clamp(3rem,8vw,6rem);
  color:#bd8220;
  letter-spacing:.15em;
  margin:40px 0}
.score{font-size:2rem}
.results{max-width:800px;
  margin-top:7vh;
  padding:50px 25px}
.notice{position:fixed;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:#173f3b;
  color:white;
  z-index:20;
  border-radius:12px;
  padding:10px 18px}
.notice:empty{display:none}
@media(hover:hover){.explore:hover{transform:scale(1.05)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}



/* The outcome title and Next row reserve their maximum space. */
.play-panel[data-mode="spelling"] h1 { min-height: 2.4em; line-height: 1.2; }
.results-badge { width: 130px; height: 130px; border-radius: 50%; }
.results .result-stars { margin: 12px 0 20px; }

/* Two grid tracks per card allow a precisely centred incomplete row. */
.flip-card { grid-column: var(--start-wide,auto) / span 2; container-type: size; }
.flip-card .picture { width: min(100cqw,calc(100cqh - 28px)); height: min(100cqw,calc(100cqh - 28px)); flex: none; aspect-ratio: 1; }