.grade-page{min-height:100svh;background:radial-gradient(ellipse at 18% 25%,#245644,transparent 58%),#09291f;color:#fff4d8}.grade-page .arcade-top{max-width:1120px;font-size:1rem;padding-top:22px}.grade-page .arcade-top span{color:#dbc68e}.grade-main{max-width:1100px;padding:20px 24px 60px;margin:auto}
.grade-welcome{display:grid;grid-template-columns:.92fr 1.08fr;isolation:isolate;border:1px solid #c5a45f;border-radius:30px;overflow:hidden;background:#123b2f;box-shadow:0 24px 80px #0005;animation:welcome-in .65s ease-out both}.foley-welcome{position:relative;min-height:550px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(0deg,#0b3028,#103c2b55),url('/play/assets/background.webp') center/cover}.foley-welcome:after{content:'';position:absolute;inset:0;box-shadow:inset -24px 0 40px #123b2f;pointer-events:none}.foley-halo{position:absolute;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,#ffdc8438,transparent 68%);animation:welcome-glow 5s ease-in-out infinite}.welcome-foley{position:relative;width:256px;height:256px;max-width:80%;object-fit:contain;z-index:1;filter:drop-shadow(0 15px 15px #001a1399);animation:foley-breathe 4.8s ease-in-out infinite;transform-origin:50% 95%}.foley-caption{position:absolute;bottom:44px;left:20px;right:20px;text-align:center;z-index:2}.foley-caption strong{display:block;font:2rem Georgia,serif;color:#fff2c6}.foley-caption span{font-size:1rem;color:#e4e5c7}.welcome-star{position:absolute;z-index:2;width:31px;height:31px;object-fit:contain;animation:star-drift 6s ease-in-out infinite;filter:drop-shadow(0 0 7px #ffda8266)}.welcome-star.s1{left:17%;top:23%}.welcome-star.s2{right:18%;top:18%;width:23px;animation-delay:-2s}.welcome-star.s3{right:14%;bottom:32%;width:20px;animation-delay:-4s}
.grade-content{padding:46px 38px;align-self:center}.grade-content .eyebrow{font-size:.875rem;margin:0 0 16px}.grade-content h1{font:clamp(2.2rem,5vw,3.6rem)/1.05 Georgia,serif;letter-spacing:-.025em;margin:0 0 18px;color:#fff5dc}.grade-intro{font-size:1.0625rem;line-height:1.6;margin:0 0 24px;color:#e0e6ce}.grade-content fieldset{padding:0;border:0;margin:0}.grade-content legend{font-weight:700;font-size:1rem;margin-bottom:14px}.grade-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.grade-option{position:relative;cursor:pointer}.grade-option input{position:absolute;opacity:0;width:1px;height:1px}.grade-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:112px;padding:15px 7px;border:1px solid #8d9e797d;border-radius:17px;background:linear-gradient(145deg,#2d5240,#16372d);box-shadow:inset 0 0 0 3px #132f2466;transition:border-color .18s,transform .18s,background .18s}.grade-tile b{font:2rem/1 Georgia,serif;color:#f0d694}.grade-tile span{font-size:.875rem;font-weight:650;color:#f5f2db}.grade-option:hover .grade-tile{transform:translateY(-3px);border-color:#f0d694}.grade-option input:focus-visible+.grade-tile{outline:3px solid #fff;outline-offset:3px}.grade-option input:checked+.grade-tile{background:linear-gradient(140deg,#f2dfa7,#caa459);border-color:#fff0bd;box-shadow:inset 0 0 0 3px #fae9bb,0 0 22px #e8c77325}.grade-option input:checked+.grade-tile b,.grade-option input:checked+.grade-tile span{color:#163a2c}.grade-option input:checked+.grade-tile:after{content:'✓';position:absolute;top:7px;right:10px;color:#153c2b;font-weight:800}
#grade-continue{margin-top:22px;width:100%;min-height:54px;border:1px solid #f2d995;background:linear-gradient(135deg,#eddaa4,#d1ac60);color:#17382c;border-radius:14px;font-size:1rem}.grade-note{font-size:.875rem;color:#c5d2bb;margin:14px 0 0;text-align:center}.grade-selection-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:0 0 26px}.grade-selection-bar button{font-size:.875rem;padding:8px 14px;min-height:44px}.selected-grade{color:#f1d897;font-weight:700}.grade-page .arcade-card{animation:welcome-in .5s ease both}.grade-page .arcade-card:nth-child(2){animation-delay:.1s}.grade-page .arcade-meta{font-size:1rem}
.play-grade-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px auto;padding:10px 16px;max-width:1120px;border:1px solid #bca265;border-radius:12px;background:#153b2f;color:#fff5db;font:500 1rem/1.5 system-ui,sans-serif}.play-grade-bar a{color:#f5dfa0;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}.play-grade-bar strong{color:#f5dfa0}.question-read-aloud{font:600 .875rem/1.4 system-ui,sans-serif;padding:9px 14px;min-height:44px;border:1px solid #c7ad6e;border-radius:10px;background:#194332;color:#fff5db;cursor:pointer;margin:0 0 14px}.question-read-aloud:focus-visible{outline:3px solid #d5ac54;outline-offset:3px}
@keyframes welcome-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes foley-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes welcome-glow{50%{opacity:.55;transform:scale(1.12)}}@keyframes star-drift{0%,100%{opacity:.6;transform:translateY(0) rotate(-8deg)}50%{opacity:1;transform:translateY(-12px) rotate(8deg)}}
@media(max-width:760px){.grade-main{padding:8px 16px 40px}.grade-welcome{grid-template-columns:1fr}.foley-welcome{min-height:215px}.welcome-foley{width:170px;height:170px;margin-bottom:28px}.foley-caption{bottom:14px}.foley-caption strong{font-size:1.3rem}.foley-caption span{display:none}.foley-welcome:after{box-shadow:inset 0 -18px 25px #123b2f}.foley-halo{width:220px;height:220px}.grade-content{padding:24px}.grade-content h1{font-size:2.3rem}.grade-content .eyebrow{margin-bottom:10px}.grade-intro{margin-bottom:20px}.grade-tile{min-height:92px}.grade-tile b{font-size:1.7rem}.grade-options{gap:10px}.grade-page .arcade-top{padding:16px;font-size:.875rem}.play-grade-bar{margin:8px;font-size:.875rem}.welcome-star.s1{left:24%;top:25%}.welcome-star.s2{right:24%;top:16%}}
@media(max-width:360px){.grade-content{padding:20px 16px}.grade-options{grid-template-columns:repeat(2,minmax(0,1fr))}.grade-content h1{font-size:2rem}}
.dash-page .dash-stage canvas{max-height:calc(100svh - 254px)}
.game-choice-main .arcade-title>p:not(.eyebrow){color:#dbe4cb}.grade-change{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 15px;border:1px solid #bca265;border-radius:12px;text-underline-offset:4px;color:#f5dfa0}.game-choice-main .arcade-card{display:flex;flex-direction:column}.game-choice-main .arcade-copy{display:flex;flex:1;flex-direction:column}.game-choice-main .arcade-copy h2{font-size:1.8rem}.game-choice-main .arcade-launch{margin-top:auto;align-self:flex-start}.village-card-art .village-card-library{position:absolute;bottom:14px;left:12%;width:210px;height:250px;object-fit:contain}.village-card-art .village-card-foley{position:absolute;bottom:10px;left:54%;width:150px;height:120px;object-fit:contain}.journey-choice .arcade-art .card-foley{height:145px;width:145px;left:calc(50% - 72px);image-rendering:auto}
@media(max-width:650px){.game-choice-main .arcade-copy{padding:22px}.game-choice-main .arcade-copy h2{font-size:1.65rem}.village-card-art .village-card-library{height:190px;width:180px;left:8%;bottom:10px}.village-card-art .village-card-foley{height:95px;width:120px;left:54%;bottom:6px}.game-choice-main .arcade-launch{width:100%;text-align:center}}
@media(max-width:650px){.dash-page .dash-stage canvas{height:calc(100svh - 244px);min-height:320px}}
@media(prefers-reduced-motion:reduce){.grade-page *,.grade-page *:before,.grade-page *:after{animation:none!important;transition:none!important}.grade-option:hover .grade-tile{transform:none}}