/* One continuous landscape spans the viewport; the ranking owns the right rail. */
html{min-height:100%;background:#668c77}
body,body.learning-view{min-height:100vh;background:#668c77 url('/realm-background.webp') center top / cover fixed no-repeat}
.topbar,.hub-header{max-width:none;width:100%;background:#f7f9ef;border-bottom:1px solid #d3dfc6;padding-left:clamp(16px,2vw,40px);padding-right:clamp(16px,2vw,40px)}
.learning-view .shell,.math-shell{width:100%;max-width:none;margin:0;padding:24px clamp(16px,2vw,40px) 40px}
.learning-view .realm-back,.learning-view .mission-tabs{margin-left:19%}
.learning-view .mission-tabs{max-width:none;background:#f9fbed;padding:10px;border-radius:14px;gap:10px}
#training-page{grid-template-columns:minmax(0,17fr) minmax(0,59fr) minmax(250px,24fr);gap:18px clamp(16px,2vw,32px)}
#training-page>.intro,#training-page>.setup-grid,#training-page>.learning-dashboard,#training-page>.workspace{grid-column:2}
#training-page>.intro{background:#f8fbef;border:1px solid #d5e1c8;border-radius:18px;padding:18px 20px}
#training-page>.setup-grid{grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);align-items:start}
#training-page>.ranking-rail{grid-column:3;grid-row:1/7;display:block;align-self:start;position:sticky;top:20px}
.ranking-rail>.leaderboard-card,.math-ranking-rail>.leaderboard-card{margin:0;background:#fffdf3;box-shadow:0 5px 20px #183e3126}
.ranking-rail .compact-ranking,.math-ranking-rail .compact-ranking{max-height:calc(100vh - 240px)}
#training-page>.learning-support{grid-column:2;grid-row:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:auto;min-width:0}
.learning-support .buddy-card,.learning-support .aside-note{display:none}
.learning-support .progress-card,.learning-support .streak-card,.learning-support .reward-card{margin:0;padding:20px;border-radius:18px;min-width:0}
.learning-support .reward-card{grid-column:1/-1}
.learning-support .reward-card>p,.learning-support .reward-symbol{display:none}
.learning-support .reward-card h3{font-size:18px;margin:0 0 8px}
.learning-support .score strong{font-size:38px}
.learning-support .stars{gap:4px}
.learning-view .page-footer{margin-left:19%;padding:16px;background:#f5f9ee;border-radius:14px;color:#365647}
.learning-view #test-page{margin-left:19%;padding:22px;background:#f6f9ee;border-radius:22px}
.math-shell{display:grid;grid-template-columns:minmax(0,17fr) minmax(0,59fr) minmax(250px,24fr);gap:clamp(16px,2vw,32px);align-items:start}
.math-main-content{grid-column:2;min-width:0}
.math-ranking-rail{grid-column:3;position:sticky;top:24px;min-width:0}
.math-breadcrumb,.math-intro{background:#f7faee;padding:16px 20px;border-radius:16px}
.math-intro{margin:16px 0}
.math-intro h1{font-size:clamp(26px,2.5vw,36px)}
.math-intro p:not(.eyebrow){margin-bottom:0}
.math-dashboard{display:block!important;margin:12px 0}
.math-dashboard .math-rules{margin:0;background:#f8fbedf5}
.math-identity{max-width:420px}
.math-main-content>#math-status:empty{display:none}
.math-main-content>#math-status:not(:empty){background:#f7faee;padding:12px;border-radius:12px}
.math-workspace{grid-template-columns:1fr}
.math-workspace>.sidebar{display:block;width:auto}
.math-workspace .buddy-card{display:none}
.math-main-content .page-footer{background:#f7faee;border-radius:12px;padding:16px}
.hub-main{max-width:none;width:100%;padding:32px clamp(16px,3vw,56px) 40px}
.hub-main .welcome{display:block;margin-left:22%;margin-right:16%;min-height:280px}
.hub-main .welcome-copy{background:#f8faef;border:1px solid #d5e1c8;border-radius:24px;padding:clamp(20px,3vw,40px)}
.hub-main .welcome-art{display:none}
.hub-main .choice-section{background:#f5f8eb;border-radius:24px;padding:24px;margin-top:32px}
.hub-main .subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-footer{max-width:none;margin:0 clamp(16px,3vw,56px);padding:20px 24px;background:#f7faee;border-radius:16px;color:#365647}
.collection-main{background:#f7faef;border-radius:24px;padding:24px;margin:24px clamp(16px,3vw,56px);width:auto}
@media(max-width:1600px){#math-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1200px){
 #training-page,.math-shell{grid-template-columns:minmax(0,1fr) 280px}
 #training-page>.intro,#training-page>.setup-grid,#training-page>.learning-dashboard,#training-page>.workspace,#training-page>.learning-support,.math-main-content{grid-column:1}
 #training-page>.ranking-rail,.math-ranking-rail{grid-column:2}
 #training-page>.setup-grid{grid-template-columns:1fr}
 .learning-view .realm-back,.learning-view .mission-tabs,.learning-view .page-footer,.learning-view #test-page{margin-left:0}
 .hub-main .welcome{margin-left:16%;margin-right:8%}
}
@media(max-width:800px){
 body,body.learning-view{background-position:35% top;background-attachment:scroll;background-size:auto max(100vh,1100px);background-repeat:repeat-y}
 #training-page,.math-shell{grid-template-columns:minmax(0,1fr)}
 #training-page>.ranking-rail{grid-column:1;grid-row:6;position:static}
 .math-ranking-rail{grid-column:1;position:static}
 .ranking-rail .compact-ranking,.math-ranking-rail .compact-ranking{max-height:280px}
 .learning-view .shell,.math-shell{padding:18px 16px 32px}
 .hub-main .welcome{margin:0;min-height:0}
 .hub-main .welcome-copy{background:#f8faeff2}
 .hub-main .subject-grid{grid-template-columns:1fr}
 .hub-main .choice-section{padding:18px}
 .learning-view #test-page{padding:16px}
}
@media(max-width:480px){#training-page>.learning-support{grid-template-columns:1fr}.hub-main .section-heading h2{font-size:24px}}

/* Reading surfaces always have their own solid background. */
#training-page>.intro,.math-intro,.hub-main .welcome-copy{background:#f8fbef;color:#173e35}
.intro h1,.intro .eyebrow{color:#173e35}
.test-intro,.test-controls,.collection-heading,.collection-tabs{background:#f8fbef;color:#173e35;border-radius:16px;padding:18px}
.learning-view .mission-tabs span{color:#365647}
.math-cancel-bar{background:#fffdf0;border-radius:14px;padding:14px}
.profile-dropdown-panel,dialog{background:#fff;color:#173e35}
.collection-main .collection-heading{padding-left:0}
.auth-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border:2px solid #a6bea0;border-radius:24px;background:#fffdf4;color:#173e35;box-shadow:0 15px 60px #122d3950;overflow-y:auto}
.auth-dialog::backdrop{background:#163c4070}
.auth-dialog .auth-mascot{font-size:38px;margin-bottom:8px}
.auth-dialog h2{margin:0 0 12px;font-size:28px;line-height:1.2}
.auth-dialog p{font-size:16px;line-height:1.55}
.auth-dialog .eyebrow,.auth-dialog .auth-note{font-size:14px}
.auth-dialog label{display:block;font-size:16px;font-weight:700;margin:16px 0 7px}
.auth-dialog input{width:100%;min-height:46px;border:2px solid #b6c8b1;border-radius:10px;padding:10px 12px;background:#fff;color:#173e35;font-size:16px}
.auth-dialog #auth-submit{width:100%;margin-top:16px}
.auth-dialog .text-button{font-size:14px;line-height:1.6;margin-top:16px;text-align:left}
.auth-dialog .status.error{color:#a32a2a;background:#fff0ed;padding:10px;border-radius:8px}
.auth-tabs{display:flex;gap:8px;margin:20px 0 8px}
.auth-tabs button{flex:1;min-height:44px;border:1.5px solid #adc5a8;border-radius:10px;font:inherit;font-weight:700;background:#fff;color:#28533e;cursor:pointer}
.auth-tabs button[aria-pressed=true]{background:#21644a;color:#fff;border-color:#21644a}
@media(max-width:480px){.auth-dialog{padding:20px}.auth-dialog h2{font-size:25px}}