:root{font-family:'Trebuchet MS',Verdana,sans-serif;background:#e5f0eb;color:var(--ink)}
h1,h2,.wheel-reading{font-family:'Trebuchet MS',Verdana,sans-serif;font-weight:900;letter-spacing:-.035em}
button{border-color:#9bb4bb;border-radius:18px;box-shadow:0 4px 0 #173e5c20,0 8px 16px #173e5c08}
.site-header{position:relative;z-index:3}.home,.utilities button{background:#fffaf0f5;border:1px solid #bdd0d4}
.screen-intro{overflow:hidden}.intro{position:relative;isolation:isolate;min-height:calc(100svh - 112px);padding-top:clamp(8px,3vh,32px)}
.intro>:not(.weather-scenery){position:relative;z-index:2}.intro .eyebrow{display:none}
.intro h1{font-size:clamp(3rem,7.5vw,6.7rem);line-height:.95;color:#fffaf0;-webkit-text-stroke:2px #23506d;paint-order:stroke fill;text-shadow:0 5px 0 #23506d,0 8px 14px #153e5a45;margin:0 0 24px;letter-spacing:-.05em}
.intro h1 span{font-size:.68em;color:#ffcc4b;letter-spacing:-.04em;font-weight:900;margin-top:12px}
.explore{width:clamp(300px,34vw,420px);max-width:82vw;aspect-ratio:1;min-width:0;min-height:0;border:0;border-radius:50%;background:transparent;box-shadow:none;flex-shrink:0;filter:drop-shadow(0 10px 12px #173e5c35)}
.explore .explore-art{position:relative;display:block;width:100%;height:100%}
.explore .explore-label{top:82%;bottom:auto;transform:translate(-50%,-50%);padding:0;border:0;border-radius:0;background:transparent;font-size:clamp(1.3rem,2vw,1.65rem);color:#173e5c;text-shadow:none;font-weight:900;box-shadow:none;white-space:nowrap}
@media(hover:hover){button:hover:enabled{background:#e3f0ec;color:#173e5c}.primary:hover:enabled{background:#1d536e;color:#fffaf0}.explore:hover:enabled{background:transparent;transform:scale(1.03)}}
.weather-scenery{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.ambient-cloud{position:absolute;width:17%;max-width:260px;opacity:.82}.cloud-one{left:2%;top:12%}.cloud-two{right:2%;top:19%;width:13%}
.screen-menu{background:#e7f1ea40;backdrop-filter:blur(2px)}.page-title{background:#fffaf0ed;border:1px solid #ccdcd6;width:fit-content;border-radius:23px;padding:12px 34px;margin-bottom:18px}
.mode-card{background:#fffaf0f5;border:1px solid #b5cdd0;border-radius:23px;padding:8px 10px 15px}.mode-art{height:clamp(100px,14.5vh,150px)}.mode-card strong{font-weight:800}.mode-card:disabled{background:#f2f2e8ed;color:#5a6970}.mode-card:disabled img{filter:saturate(.75);opacity:.85}.coming{background:#dce7e7;border-radius:20px;padding:3px 10px;color:#344e60}
.panel{background:#fffaf0fa;border:1px solid #b8cfd0;border-radius:25px;box-shadow:0 6px 0 #29597718,0 20px 40px #173e5c12}.picture{border-radius:16px}.hero-picture{background:radial-gradient(ellipse,#e7f0e9,transparent 70%)}
.category-card{background:#fffaf0}.category-card.selected{background:#dfefe8;border-color:#398279}.word-detail details{background:#e4eee9}.reading-sentence{color:#245e78}
.knowledge-map{display:block;width:min(680px,100%);max-height:35vh;margin:0 auto 15px;object-fit:contain}.play-panel[data-mode="knowledge"]:has(.knowledge-map) .answer-grid.text-only{min-height:70px}.play-panel[data-mode="knowledge"]:has(.knowledge-map) .answer-grid.text-only>button{padding:15px}
.weather-display{position:relative;max-width:340px;margin:auto;border-radius:30px;background:linear-gradient(#ceeaf6,#e8f4ed);box-shadow:inset 0 -5px 0 #31747520;overflow:hidden}.weather-display svg{width:100%;display:block}.weather-display .reward-mark{top:15%;right:14%;color:#be8630}.weather-chances{display:flex;justify-content:center;gap:2px;margin:9px auto}.weather-chances span{width:35px}.weather-chances svg{display:block;width:100%}.sunshine-spelling.won .weather-display{box-shadow:0 0 0 3px #e5b63c}.sunshine-spelling.lost .weather-display{filter:saturate(.75)}
.spelling-tools{min-width:0}.letter-word{max-width:100%}.keyboard button.right-letter{color:#fffaf0}.keyboard button.wrong-letter{color:#596b74;background:#e0e8e7}.wheel-disc{background:repeating-conic-gradient(#e2efd9 0deg 30deg,#fff0bd 30deg 60deg);border-color:#398279}.flip-card.face-up{background:#fffaf0}.flip-card.matched{background:#e0eee3;border-color:#3b8575}.result-stars{color:#b57b16}
.wheel-wrap{width:min(500px,max(250px,calc(100svh - 400px)),88%)}.answer-grid.text-only>button strong{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.review{max-width:1440px;margin:auto;padding:18px;background:#fffaf0f5}.review h1{font-size:1.6rem;margin:0 0 12px}.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.review-grid article{padding:8px;border:1px solid #aac5ce;border-radius:14px;text-align:center;background:#fffaf0}.review-grid .picture{width:100%;height:210px;aspect-ratio:auto}.review-grid strong{display:block;font-size:1.05rem}.review-grid p{font-size:.8rem;margin:5px 0}
@media(min-width:900px) and (max-height:750px){.play-panel[data-mode="learn"] .hero-picture,.play-panel[data-mode="create"] .hero-picture{width:min(100%,calc(100svh - 335px))}.screen-menu .mode-art{height:14vh;max-height:100px}}
@media(min-width:900px) and (max-height:750px){.intro{padding-top:6px}.intro h1{font-size:4.5rem;margin-bottom:19px}.explore{width:min(340px,47svh)}.mode-art{height:11.5vh}.page-title{padding:8px 26px;margin-bottom:13px}.weather-display{max-width:270px}.mode-card{padding-bottom:10px}.hero-picture{width:min(100%,calc(100svh - 290px))}}
@media(max-width:899px){.intro{padding-top:3vh}.mode-art{height:115px}.weather-display{max-width:245px}.review-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:599px){body{background-position:56% center}.intro{padding-top:5vh}.intro h1{font-size:clamp(2.9rem,14vw,4.3rem);margin-bottom:28px;-webkit-text-stroke:1px #23506d}.explore{width:min(340px,85vw);max-width:85vw}.cloud-one{width:24%;top:10%;left:-3%}.cloud-two{width:19%;top:27%}.page-title{padding:12px 15px;max-width:100%}.mode-art{height:100px}.mode-card{border-radius:18px}.learning-layout{gap:10px}.hero-picture{width:min(100%,310px)}.weather-display{max-width:155px}.weather-chances{margin:5px}.weather-chances span{width:27px}.spelling-layout{gap:8px}.discovery-count{margin:2px}.spelling-clue .clue-picture{width:70px;flex-basis:70px}.play-panel[data-mode="spelling"] .letter-word{margin:10px auto}.play-panel[data-mode="spelling"] h1{margin-bottom:10px}.keyboard button{min-height:45px}.letter{min-width:17px;font-size:1.15rem}.answer-grid.categories button{font-size:.85rem;padding:12px 8px}.wheel-wrap{width:90%}.knowledge-map{max-height:none}.review-grid{grid-template-columns:repeat(2,1fr)}.review-grid .picture{height:175px}}