:root {
 font-family: 'Trebuchet MS', Verdana, sans-serif;
 color: var(--ink, #173f35);
 background: #f5e8c5;
 font-synthesis: none;
 --ink: #173f35;
 --paper: #fff5dc;
 --primary: #214d38;
 --accent: #e7b649;
 --coral: #b84e32;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; background: var(--scene) center center / cover fixed; }
button, input, select { font: inherit; }
button { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 9px 15px 10px 13px; padding: 11px 19px; min-height: 46px; cursor: pointer; box-shadow: 0 3px 0 #173f3525; transition: background .15s, transform .15s; }
button:hover:enabled { background: #f5d47e; }
button:active:enabled { transform: translateY(2px); box-shadow: none; }
button:disabled { cursor: default; }
button.primary { background: var(--primary); color: var(--paper); }
button.primary:hover:enabled { background: #123c2a; color: #fff8e8; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 4px solid var(--coral); outline-offset: 4px; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.1; margin: 12px 0 22px; }
h1:focus { outline: none; }
p { line-height: 1.5; }
select { min-height: 46px; border: 2px solid #65846b; border-radius: 8px; padding: 10px 16px; color: var(--ink); background: #fff9ea; }
label { display: flex; align-items: center; gap: 12px; }
fieldset { border: 0; padding: 0; margin: 8px 0 12px; min-width: 0; }
legend { text-align: left; font-weight: bold; font-size: 1.1rem; margin-bottom: 14px; }
.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; gap: 12px; position: relative; z-index: 3; }
.home { display: flex; align-items: center; gap: 10px; border-radius: 50px; padding: 3px 18px 3px 3px; font-weight: bold; }
.home img { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; }
.utilities { display: flex; gap: 10px; }
.utilities button { background: #fff5dcf5; }
.screen { min-height: calc(100svh - 84px); padding: 8px 28px 28px; }
.intro { min-height: calc(100svh - 120px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: clamp(8px, 3.2vh, 38px); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .88rem; font-weight: bold; margin: 0 0 9px; }
.intro h1 { font-size: clamp(3.5rem, 7.4vw, 6.4rem); letter-spacing: -.045em; margin: 0 0 24px; text-shadow: 0 2px #fff2cb; }
.intro h1 span { display: block; font-family: 'Trebuchet MS', sans-serif; font-size: .25em; letter-spacing: .17em; text-transform: uppercase; margin-top: 12px; }
.explore { position: relative; width: clamp(220px, 29vw, 320px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: 0 9px 0 #153f3026; }
.explore img { width: 100%; height: 100%; object-fit: contain; display: block; }
.explore span { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); padding: 7px 22px; border: 2px solid var(--paper); border-radius: 30px; color: var(--paper); background: var(--primary); font-weight: bold; font-size: 1.14rem; }
@media (hover:hover) { .explore:hover:enabled { transform: scale(1.055); background: transparent; } }
.invitation:empty { display: none; }
.page-title { text-align: center; margin: 4px auto 20px; }
.page-title h1 { margin: 5px 0 0; }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1110px; margin: auto; gap: 14px; }
.mode-card { padding: 10px 9px 13px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: #fff5dcf5; min-width: 0; border-radius: 9px 17px 11px 14px; }
.mode-art { width: 100%; height: clamp(95px, 15vh, 145px); }
.mode-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mode-card strong { font-size: 1rem; }
.mode-card:disabled { opacity: 1; background: #ede6ceeF; border-color: #7a856b; }
.coming { margin-top: 3px; font-size: .78rem; color: #5d674b; }
.teacher-notes { max-width: 1110px; margin: 16px auto 0; padding: 10px 16px; background: #fff5dcf2; border-radius: 9px; font-size: .9rem; }
summary { cursor: pointer; }
.panel { width: min(1160px, 100%); margin: auto; padding: 22px 28px; text-align: center; background: #fff5dcf7; border: 2px solid #56734a; border-radius: 13px 24px 17px 19px; box-shadow: 0 8px 0 #153f301c; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: .95rem; }
.topline > span:last-child { white-space: nowrap; font-weight: bold; }
.topline > span:nth-child(2) { font-weight: bold; }
.setup-form { display: flex; flex-direction: column; gap: 12px; }
.setup-form > label { justify-content: center; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.category-card { display: flex; flex-direction: column; align-items: center; padding: 10px; min-width: 0; border-color: #789166; }
.category-card.selected { border: 3px solid var(--coral); background: #ffe6a3; padding: 9px; }
.category-card > span { font-size: .85rem; margin-top: 4px; }
.category-card .picture { width: min(135px, 100%); }
.start { align-self: center; min-width: 200px; }
.picture { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
.picture img { position: absolute; object-fit: contain; max-width: none; }
.image-fallback { display: none; }
.art-failed { display: grid; place-items: center; background: #efe4c7; border: 2px dashed #7b8469; }
.art-failed .image-fallback { display: block; padding: 15px; }
.progress { display: flex; align-items: center; gap: 16px; margin: 15px 0; font-size: .9rem; }
.progress progress { flex: 1; width: 0; height: 10px; border: 0; border-radius: 20px; background: #dce1bd; color: var(--primary); }
progress::-webkit-progress-bar { background: #dce1bd; border-radius: 20px; }
progress::-webkit-progress-value { background: var(--primary); border-radius: 20px; }
progress::-moz-progress-bar { background: var(--primary); border-radius: 20px; }
.learning-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px; max-width: 1010px; margin: auto; }
.hero-picture { width: min(100%, 490px); justify-self: center; }
.word-detail { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.word-detail p { margin: 0 0 14px; }
.definition { font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.4; }
.reading-sentence { font-size: clamp(1.5rem, 2.6vw, 2.2rem); white-space: pre-line; line-height: 1.65; }
.word-detail details { background: #edf0d9; padding: 12px 16px; border-radius: 9px; margin-bottom: 9px; }
.word-detail details p { margin: 10px 0 0; }
.feedback-row { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 14px; }
.feedback-row p { margin: 0; font-size: 1.05rem; }
.feedback { font-weight: bold; }
.next { min-width: 114px; }
.unavailable { visibility: hidden; pointer-events: none; }
.question-picture { width: min(300px, 45vh); margin: 5px auto 15px; }
.target-picture { width: min(160px, 25vh); margin: 8px auto; }
.scope-note { font-size: .9rem; margin: 8px; }
.answer-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin: 16px auto 5px; }
.answer-grid > button { flex: 1 1 25%; max-width: 310px; min-width: 0; padding: 13px; }
.answer-grid > button strong { display: block; font-size: 1.15rem; }
.answer-grid.categories { max-width: 920px; }
.answer-grid.categories button { flex-basis: 28%; }
.answer-grid.text-only { align-items: stretch; min-height: 145px; }
.answer-grid.text-only > button { padding: 24px 18px; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.35; }
.teacher-toggles { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 6px 0 12px; font-size: .9rem; }
input[type=checkbox] { width: 21px; height: 21px; accent-color: var(--primary); }
.explanation { font-size: 1.2rem; max-width: 800px; margin: 28px auto; }
.spelling-layout { display: grid; grid-template-columns: .85fr 1.4fr; align-items: center; gap: 24px; }
.spelling-world { padding: 5px 10px; }
.pond-emblem { position: relative; width: min(300px, 100%); margin: auto; aspect-ratio: 1; }
.pond-emblem img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.pond-rings { position: absolute; width: 88%; height: 23%; border: 3px solid #5e8c71; border-radius: 50%; left: 6%; bottom: 6%; background: #b5ceaf; box-shadow: 0 0 0 8px #b5ceaf70; }
.reward-flower { position: absolute; top: 4%; right: 16%; font-size: 48px; color: var(--coral); opacity: 0; }
.pond-spelling.won .reward-flower { opacity: 1; }
.pond-spelling.lost .reward-flower { visibility: hidden; }
.lily-lives { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 270px; margin: 12px auto; }
.lily-life { color: #3e7350; }
.lily-life svg { width: 100%; display: block; }
.lily-life.spent { color: #a7ad99; opacity: .45; }
.pond-spelling.won .lily-life { color: #c58b23; }
.spelling-clue { display: flex; justify-content: center; align-items: center; gap: 16px; text-align: left; }
.clue-picture { width: 120px; flex: 0 0 120px; }
.spelling-clue p { max-width: 450px; font-size: 1.1rem; }
.chances { margin: 8px 0; font-size: .95rem; }
.letter-word { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 18px auto; }
.word-part { display: inline-flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.word-space { width: 9px; }
.letter { min-width: 29px; border-bottom: 3px solid var(--ink); padding: 6px 4px; font-size: 1.65rem; font-weight: bold; text-align: center; }
.letter.punctuation { border: 0; }
.keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 650px; margin: auto; }
.keyboard button { width: calc((100% - 72px) / 13); min-width: 33px; height: 47px; padding: 3px; font-size: 1.2rem; font-weight: bold; }
.keyboard button.right-letter { background: var(--primary); color: var(--paper); }
.keyboard button.wrong-letter { background: #e0d4bc; color: #746b59; border-color: #948c77; text-decoration: line-through; }
.used-letters { font-size: .9rem; min-height: 1.5em; }
.flip-board { display: grid; grid-template-columns: repeat(var(--columns-wide),minmax(0,1fr)); grid-template-rows: repeat(var(--rows-wide),minmax(0,1fr)); gap: 9px; height: max(300px, calc(100svh - 310px)); max-height: 580px; }
.flip-card { grid-column: var(--start-wide,auto) / span 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; background: var(--primary); color: var(--paper); border-color: var(--primary); overflow: hidden; }
.flip-card:hover:enabled { background: #3b6546; color: var(--paper); }
.flip-card.face-up { background: var(--paper); color: var(--ink); }
.flip-card.matched { background: #dce7bd; border-color: #6f8a4f; }
.flip-card .picture { width: auto; height: calc(100% - 22px); max-width: 100%; flex: 0 1 auto; }
.flip-card > span:not(.card-back) { width: 100%; font-size: .875rem; line-height: 1.1; overflow-wrap: anywhere; }
.card-back { display: grid; place-items: center; width: 75%; height: 75%; font-family: Georgia,serif; font-size: clamp(1.6rem,4vw,3.2rem); line-height: 1; border: 2px solid #ebd48b70; border-radius: 50% 6% 50% 6%; color: #ecd289; }
.wheel-wrap { position: relative; width: min(60vh, 550px, 80vw); aspect-ratio: 1; margin: 22px auto; --diameter: min(60vh, 550px, 80vw); }
.wheel-disc { position: absolute; inset: 0; border-radius: 50%; border: 8px solid var(--primary); background: repeating-conic-gradient(from -15deg, #e9d49e 0deg 30deg, #f6ebc7 30deg 60deg); box-shadow: inset 0 0 0 3px #fff4d3, 0 8px 0 #173f352b; }
.wheel-marker { position: absolute; width: 17%; left: 50%; top: 50%; aspect-ratio: 1; transform: translate(-50%,-50%) rotate(var(--angle)) translateX(calc(var(--diameter) * .385)) rotate(var(--counter)); }
.wheel-pointer { position: absolute; z-index: 2; width: 25px; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff7e3; background: var(--coral); right: -8px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 2px var(--coral); }
.spin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 98px; height: 98px; border-radius: 50%; background: var(--primary); color: var(--paper); font-size: 1.15rem; }
.spin:active:enabled { transform: translate(-50%,-50%); }
.spin:hover:enabled { background: #143624; color: var(--paper); }
.wheel-reading { display: grid; place-items: center; min-height: min(48vh,420px); font-family: Georgia,serif; font-size: clamp(2.3rem,7vw,5.5rem); overflow-wrap: anywhere; }
.detective-settings { display: flex; justify-content: center; gap: 20px; margin: 12px 0; }
.detective-canvas { width: min(570px,100%,62vh); margin: auto; position: relative; }
.detective-canvas canvas { width: 100%; display: block; border: 2px solid #7d956b; border-radius: 12px; }
.image-status:empty { display: none; }
.detective-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.timer { min-width: 90px; font-variant-numeric: tabular-nums; font-weight: bold; }
.results { max-width: 790px; margin-top: 4vh; }
.results-badge { width: min(230px,40vw); }
.result-stars { font-size: clamp(2.8rem,6vw,4.6rem); color: #b17a15; letter-spacing: .15em; }
.score { font-size: 1.8rem; font-weight: bold; margin: 10px; }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.notice { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: min(600px,90vw); z-index: 20; background: var(--primary); color: var(--paper); padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 10px #0002; }
.notice:empty { display: none; }
@media (min-width:850px) {
 .screen:has(.play-panel[data-mode="flip"]) { height: calc(100svh - 84px); min-height: 0; padding-bottom: 14px; }
 .play-panel[data-mode="flip"] { height: 100%; display: flex; flex-direction: column; }
 .play-panel[data-mode="flip"] > :not(.flip-board) { flex-shrink: 0; }
 .play-panel[data-mode="flip"] .flip-board { flex: 1; min-height: 0; height: auto; max-height: none; }
}
@media (min-width:850px) and (max-height:780px) {
 .site-header { height: 70px; padding-block: 7px; }
 .home img { width: 46px; height: 46px; }
 .screen { min-height: calc(100svh - 70px); padding-top: 3px; }
 .screen:has(.play-panel[data-mode="flip"]) { height: calc(100svh - 70px); min-height: 0; }
 .intro { min-height: calc(100svh - 101px); padding-top: 0; }
 .intro h1 { font-size: clamp(3rem,7vw,5rem); margin-bottom: 16px; }
 .explore { width: min(265px,39vh); }
 .page-title { margin: 0 0 12px; }
 .page-title h1 { font-size: 2rem; }
 .mode-art { height: max(68px,calc((100svh - 345px) / 3)); }
 .mode-card { padding: 5px 9px 8px; }
 .menu-grid { gap: 10px; }
 .teacher-notes { margin-top: 12px; }
 .panel { padding: 14px 24px; }
 .play-panel h1 { font-size: 1.8rem; margin: 10px 0; }
 .progress { margin: 10px 0; }
 .hero-picture { max-width: min(440px,53vh); }
 .category-card .picture { max-width: 105px; }
 .feedback-row { min-height: 50px; margin-top: 10px; }
 .flip-board { height: max(275px,calc(100svh - 263px)); }
 .question-picture { width: 220px; }
 .pond-emblem { max-width: 250px; }
 .lily-lives { max-width: 230px; margin-block: 2px; }
 .clue-picture { width: 94px; flex-basis: 94px; }
 .letter-word { margin: 12px auto; }
 .wheel-wrap { --diameter: min(51vh,480px,80vw); width: var(--diameter); margin: 14px auto; }
 .detective-canvas { max-width: min(450px,50vh); }
}
@media (max-width:849px) {
 .site-header { padding: 12px 18px; }
 .screen { padding: 8px 18px 24px; }
 .menu-grid { grid-template-columns: repeat(3,1fr); }
 .mode-art { height: 130px; }
 .category-grid { grid-template-columns: repeat(3,1fr); }
 .learning-layout { gap: 20px; }
 .panel { padding: 18px; }
 .spelling-layout { grid-template-columns: .7fr 1.3fr; gap: 10px; }
 .clue-picture { width: 85px; flex-basis: 85px; }
 .spelling-clue p { font-size: 1rem; }
 .keyboard button { width: calc((100% - 42px) / 8); }
 .flip-board { grid-template-columns: repeat(var(--columns-tablet),minmax(0,1fr)); grid-template-rows: repeat(var(--rows-tablet),minmax(0,1fr)); height: calc(var(--rows-tablet) * 108px); max-height: none; }
 .flip-card { grid-column: var(--start-tablet,auto) / span 2; }
}
@media (max-width:560px) {
 .site-header { height: 74px; padding: 10px; gap: 6px; }
 .home { gap: 4px; padding-right: 10px; font-size: .88rem; }
 .home img { width: 40px; height: 40px; }
 .utilities { gap: 6px; }
 .utilities button { font-size: .88rem; padding: 8px; }
 .screen { min-height: calc(100svh - 74px); padding: 7px 10px 24px; }
 .intro { min-height: calc(100svh - 105px); padding-top: 5vh; }
 .intro .eyebrow { font-size: .8rem; letter-spacing: .1em; }
 .intro h1 { font-size: clamp(3.25rem,15vw,4.3rem); }
 .intro h1 span { font-size: .25em; }
 .explore { width: min(265px,72vw); }
 .page-title h1 { font-size: 1.9rem; }
 .page-title .eyebrow { font-size: .75rem; letter-spacing: .06em; }
 .menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
 .mode-art { height: 105px; }
 .mode-card { padding: 7px 6px 10px; }
 .mode-card strong { font-size: .9rem; }
 .coming { font-size: .75rem; }
 .panel { padding: 14px 10px; border-radius: 11px 18px 12px 15px; }
 .topline { gap: 7px; font-size: .875rem; }
 .topline > span:nth-child(2) { max-width: 55%; }
 .topline button { padding: 8px 12px; }
 .setup-panel .topline > span { font-size: .8rem; }
 .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .category-card strong { font-size: .92rem; }
 .category-card .picture { width: 108px; }
 .setup-form > label { flex-wrap: wrap; }
 .learning-layout { grid-template-columns: 1fr; gap: 10px; }
 .hero-picture { width: min(300px,100%); }
 .word-detail { text-align: center; align-items: center; }
 .word-detail details { text-align: left; }
 .definition { font-size: 1.3rem; }
 .reading-sentence { font-size: 1.6rem; }
 .feedback-row { gap: 9px; min-height: 74px; }
 .feedback-row p { font-size: .95rem; flex: 1; }
 .next { min-width: 85px; padding-inline: 13px; }
 .teacher-toggles { font-size: .875rem; gap: 10px; }
 .teacher-toggles label { gap: 5px; }
 .target-picture { width: 130px; }
 .answer-grid { gap: 8px; }
 .answer-grid > button { padding: 7px; }
 .answer-grid > button strong { font-size: .9rem; overflow-wrap: anywhere; }
 .answer-grid.text-only { flex-direction: column; min-height: 0; }
 .answer-grid.text-only > button { width: 100%; max-width: none; padding: 17px; font-size: 1.15rem; }
 .answer-grid.categories button { flex-basis: 43%; font-size: 1rem; }
 .spelling-layout { grid-template-columns: 1fr; gap: 0; }
 .spelling-world { padding: 0; }
 .pond-spelling { display: flex; align-items: center; justify-content: center; gap: 12px; }
 .pond-emblem { width: 130px; margin: 0; flex: 0 0 130px; }
 .reward-flower { font-size: 28px; }
 .lily-lives { max-width: 150px; gap: 4px; margin: 0; }
 .spelling-clue { gap: 10px; }
 .clue-picture { width: 85px; flex-basis: 85px; }
 .spelling-clue p { font-size: .95rem; }
 .letter-word { gap: 5px; margin: 12px auto; }
 .word-part { gap: 3px; }
 .letter { min-width: 23px; padding: 4px 3px; font-size: 1.3rem; }
 .keyboard { gap: 5px; }
 .keyboard button { width: calc((100% - 35px) / 8); min-width: 29px; font-size: 1.1rem; }
 .flip-board, .board-20, .board-30 { grid-template-columns: repeat(var(--columns-phone),minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: 110px; height: auto; max-height: none; gap: 6px; }
 .flip-card { grid-column: var(--start-phone,auto) / span 2; padding: 3px; }
 .flip-card > span:not(.card-back) { font-size: .875rem; }
 .flip-card .picture { height: calc(100% - 33px); }
 .wheel-wrap { --diameter: min(78vw,400px); width: var(--diameter); }
 .spin { width: 72px; height: 72px; padding: 3px; font-size: 1rem; }
 .wheel-reading { min-height: 270px; font-size: 2.8rem; }
 .detective-settings { gap: 8px; flex-wrap: wrap; }
 .detective-settings label { font-size: .875rem; gap: 6px; }
 .detective-settings select { max-width: 155px; padding: 9px 6px; }
 .detective-controls { gap: 6px; }
 .detective-controls button { padding: 10px; font-size: .9rem; }
 .timer { min-width: 60px; font-size: .9rem; }
 .results { margin-top: 3vh; }
}
@media (prefers-reduced-motion:reduce) {
 *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}