:root{color-scheme:light;--ink:#244a46;--teal:#167e76;--cream:#fffaf1;--muted:#6c817c;--pink:#fde8df;--yellow:#ffda79}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;-webkit-text-size-adjust:100%}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;min-height:56px}
button:focus-visible,a:focus-visible{outline:4px solid #385dc2;outline-offset:4px}
button:disabled{cursor:default}
[hidden]{display:none!important}
.app-shell{max-width:1100px;margin:auto;padding:12px 24px 14px;position:relative;min-height:680px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:800;text-decoration:none;color:var(--ink)}
.brand-mark{display:grid;place-items:center;background:var(--yellow);border-radius:16px;width:46px;height:46px;font-size:34px;color:#a75d20}
.round-button{border:2px solid #d5e5dc;background:#fffdf9;border-radius:50%;width:56px;font-size:27px}
.round-button[aria-pressed=true]{background:#e3e7e2;color:#69796d}
.game-nav{display:flex;width:fit-content;padding:6px;background:#f0eee4;border-radius:23px;gap:6px;margin-bottom:28px}
.nav-button{padding:8px 32px;border-radius:18px;font-size:21px;font-weight:700;background:transparent;color:#6a7d70}
.nav-button span{font-size:26px;margin-right:8px}.nav-button.active{background:#fff;color:var(--teal);box-shadow:0 2px 6px #29473c0b}
.nav-icon{width:28px;height:28px;vertical-align:middle;margin-right:7px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.intro-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:#8a866a;margin:0}
.level-pill{border-radius:12px;background:#e8f1df;color:#567244;padding:8px 12px;font-size:14px;font-weight:700}
.question-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-size:clamp(32px,4.7vw,49px);line-height:1.15;letter-spacing:-1.3px;margin:0;font-weight:800}
.repeat-button{background:#e4f0e8;border-radius:18px;padding:9px 20px;font-weight:700;font-size:18px;white-space:nowrap}.repeat-button span{font-size:23px;margin-right:6px}
.question-hint{color:var(--muted);font-size:19px;margin:10px 0 24px}
.answer-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.answer-cards[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.answer-cards[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:740px;margin:auto}
.answer-cards[data-count="4"] .answer-card img{max-height:170px}
.answer-card:nth-child(4){background:#f5e5ed}
.answer-card.hinted{border-color:#e1ad35;box-shadow:0 0 0 4px #ffe69b}
.answer-card{position:relative;border:3px solid transparent;border-radius:30px;padding:14px 12px 18px;display:flex;align-items:center;flex-direction:column;gap:10px;background:#f7e9df;transition:transform .16s,border-color .16s,background .16s;box-shadow:0 5px 0 #d5c6ba22}
.answer-card:nth-child(2){background:#eaf0dd}.answer-card:nth-child(3){background:#e2edf4}
.answer-card:hover:not(:disabled){transform:translateY(-3px)}.answer-card:active:not(:disabled){transform:scale(.97)}
.answer-card img{width:100%;max-width:240px;aspect-ratio:1;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.answer-card .word-label{font-size:clamp(22px,3vw,31px);font-weight:800;line-height:1.2}
.answer-card.correct{border-color:#33996d;background:#daf2d9;animation:happy .6s ease}
.answer-card.retry{border-color:#db9b63}.answer-card.correct:after{content:'✓';position:absolute;right:12px;top:12px;border-radius:50%;background:#2e9064;color:#fff;width:40px;height:40px;display:grid;place-items:center;font-size:26px}
.feedback{min-height:65px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#238061;gap:9px;text-align:center}.feedback.retry-message{color:#956639;font-size:22px}
.journey{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:0;height:28px}.journey-dot{width:12px;height:12px;border-radius:50%;background:#dfdfcb}.journey-dot.earned{background:#e9b341}
footer{margin-top:18px;min-height:22px;display:flex;flex-direction:column;gap:4px;text-align:center;color:#687a71;font-size:13px;line-height:1.4}
.start-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#fffaf1ed;border-radius:24px;backdrop-filter:blur(8px)}
.welcome-card{max-width:520px;width:100%;text-align:center;padding:28px 28px 36px;background:white;border:1px solid #eee8db;border-radius:36px;box-shadow:0 18px 70px #46543710}
.welcome-flower{font-size:100px;color:#e8b441;line-height:1.1;margin:8px 0 18px}.welcome-card h2{font-size:clamp(30px,5vw,44px);letter-spacing:-1px;line-height:1.15;margin:16px 0}.welcome-card>p:not(.eyebrow){font-size:21px;color:var(--muted);margin:12px 0 28px}
.start-button{background:var(--teal);color:#fff;font-size:25px;font-weight:700;padding:16px 34px;border-radius:22px;min-height:70px;min-width:230px;box-shadow:0 5px 0 #11635e}.start-button span{margin-left:18px}
.loading-error{text-align:center;margin:60px 20px;font-size:24px}
@keyframes happy{0%,100%{transform:scale(1)}45%{transform:scale(1.04)}}
@media(max-width:700px){.app-shell{padding:10px 12px;min-height:620px}.topbar{margin-bottom:15px}.game-nav{margin-bottom:22px}.answer-cards{gap:10px}.answer-card{border-radius:23px;padding:12px 7px 18px}.answer-card img{max-height:230px}.nav-button{padding:7px 26px}.eyebrow{font-size:11px;letter-spacing:1.4px}}
@media(max-width:440px){.app-shell{padding:8px 6px;min-height:570px}.brand{font-size:23px}.intro-row .eyebrow{display:none}.intro-row{justify-content:flex-end;margin-bottom:9px}.level-pill{font-size:12px}.question-row{gap:6px}h1{font-size:31px}.repeat-button{font-size:0;padding:8px 16px}.repeat-button span{font-size:25px;margin:0}.question-hint{font-size:16px;margin-bottom:18px}.answer-cards{gap:7px}.answer-card{padding:7px 3px 13px;border-radius:18px}.answer-card .word-label{font-size:20px}.answer-card.correct:after{width:26px;height:26px;font-size:18px;right:4px;top:4px}.feedback{font-size:23px}.feedback.retry-message{font-size:19px}.game-nav{width:100%;justify-content:center}.nav-button{flex:1;padding:7px 12px;font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.compact-height .app-shell{min-height:580px;padding-top:4px}
.compact-height .topbar{margin-bottom:10px}
.compact-height .game-nav{margin-bottom:16px}
.compact-height .answer-cards[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:12px}
.compact-height .answer-cards[data-count="4"] .word-label{font-size:23px}
#audio-parent-info{text-align:left;max-width:760px;width:100%;margin:0 auto;overflow-wrap:anywhere}
#audio-parent-info summary{min-height:48px;padding:14px 8px;cursor:pointer;text-align:center}
#audio-parent-info[open]{padding:8px 14px;background:#fff3d9;border-radius:16px}
#audio-parent-warnings{padding-left:20px;line-height:1.55}
.word-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.word-actions .question-hint{margin:10px 0}
.quiet-button{border-radius:15px;background:#f0eee4;padding:10px 16px;font-size:17px}
.hint-button{display:block;margin:10px auto}
.round-card{margin:12px auto 28px;max-width:650px;padding:32px 24px;background:#fff;border:1px solid #e6e7da;border-radius:32px;text-align:center}
.round-symbol{font-size:82px;color:#e8b441;line-height:1.1}
.round-card h2{font-size:38px;margin:12px 0}.round-card p{font-size:21px;color:var(--muted)}
.round-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:28px}
#words-parent-info{max-width:760px;width:100%;margin:0 auto;text-align:left}
#words-parent-info summary{min-height:48px;padding:14px 8px;cursor:pointer;text-align:center}
#words-parent-info[open]{padding:8px 16px;background:#f1f5e9;border-radius:16px}
#words-parent-info fieldset{border:1px solid #cbdccd;border-radius:15px;padding:14px;margin:8px 0 18px}
#words-parent-info legend{font-size:17px;font-weight:700}
.word-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.word-categories label{display:flex;align-items:center;gap:10px;min-height:52px;font-size:16px;cursor:pointer}
.word-categories input{width:24px;height:24px;accent-color:var(--teal);flex-shrink:0}
.difficulty-label{display:block;margin-bottom:8px;font-size:17px;font-weight:700}
#word-difficulty{font:inherit;font-size:18px;min-height:52px;padding:10px;border:1px solid #bad2c4;border-radius:12px;max-width:100%;background:#fff;color:var(--ink)}
#words-parent-info p{line-height:1.6;font-size:15px}
#word-reset-confirm{margin:12px 0;padding:12px;background:#fff3d9;border-radius:14px}
#word-reset-confirm button{margin:5px}
@media(max-width:440px){.word-categories{grid-template-columns:1fr}.round-card{padding:24px 14px}.round-card h2{font-size:32px}.round-actions .start-button{min-width:0;width:100%}.answer-cards[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-cards[data-count="3"] .answer-card:last-child{grid-column:1 / -1;max-width:50%;width:100%;justify-self:center}.answer-card .word-label{font-size:clamp(16px,4.6vw,20px)}}
.game-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:6px}
.game-nav .nav-button{padding:10px 12px;min-height:64px;font-size:21px;white-space:nowrap}
@media(max-width:900px){.game-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.game-nav .nav-button{font-size:19px;padding:10px 5px}.nav-icon{width:25px;height:25px;margin-right:3px}}