/* Screen styles only: the existing A4 stylesheet remains authoritative for print. */
@media screen{
 :root{--ink:#203c38;--quiet:#64736e;--line:#dce2db;--accent:#23634c;--paper:#fff;--canvas:#f7f8f3}
 *{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
 [hidden],.hidden{display:none!important}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #307dba;outline-offset:4px}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.04em;line-height:1.12}h2{font-size:25px;letter-spacing:-.025em}h3{font-size:20px}p{color:var(--quiet)}
 .site-header{max-width:none;padding:0 max(24px,calc((100vw - 1120px)/2));height:88px;border-bottom:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;box-shadow:none}
 #homeLogo{display:inline-flex;flex:none;width:auto;height:auto;min-height:44px}#homeLogo .brand-word{display:inline;font-size:27px;font-weight:800;line-height:1;color:var(--ink)}#homeLogo .brand-word b{color:var(--accent)}
 h1[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}
 .logo,.home-logo{padding:0;background:none;border:0;box-shadow:none;color:var(--ink);font-size:27px;letter-spacing:-1.5px}.logo b{color:var(--accent)}.brand-word{font:inherit}.header-actions{display:flex;align-items:center;gap:22px}.header-home{background:none;border:0;padding:10px 0;border-radius:0;color:var(--quiet);font-size:14px;font-weight:600;box-shadow:none}.header-home:hover,.header-home[aria-pressed=true]{color:var(--accent);background:none}
 main#pageContent{max-width:1168px;margin:0 auto;padding:0 24px 28px;min-height:calc(100vh - 88px)}.skip-link{position:absolute;top:-80px;left:20px;z-index:20;background:white;padding:12px}.skip-link:focus{top:10px}
 #breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--quiet);padding:26px 0 0;margin-bottom:30px}#breadcrumbs a{text-decoration:none}#breadcrumbs a:hover{text-decoration:underline}#breadcrumbs [aria-current]{color:var(--ink)}
 .home-intro{text-align:center;padding:64px 0 46px}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:750;color:var(--accent);margin-bottom:18px}.home-intro h1{font-size:clamp(36px,4.8vw,60px);font-weight:720;margin-bottom:22px}.home-intro>p:not(.eyebrow){font-size:17px;line-height:1.7;margin-bottom:26px}.btn{border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:white;box-shadow:none;min-height:46px;padding:11px 20px;font-weight:650;transition:background .15s}.btn:hover{background:#194d3b;transform:none;box-shadow:none}.btn.secondary{background:white;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn.secondary:hover{background:#eef2eb;border-color:#9caea0}.text-button{border:0;background:none;color:var(--accent);padding:12px;text-decoration:underline;text-underline-offset:4px;font-weight:550}.home-intro .btn span{margin-left:20px}
 .home-section-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}.home-section-title h2{margin:0;font-size:21px}.home-section-title>span{font-size:13px;color:var(--quiet)}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.course-card{display:block;text-decoration:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white;transition:border-color .15s,transform .15s}.course-card:hover{border-color:#779e8b;transform:translateY(-3px)}.course-cover{height:200px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:23px 25px;color:#294b3a;background:#e4edcf;overflow:hidden}.course-cover::after{content:'';position:absolute;width:200px;height:200px;border:1px solid currentColor;border-radius:50%;right:-100px;top:35px;opacity:.2}.course-cover>span{font-size:12px;letter-spacing:.12em;font-weight:800}.course-cover>b{font-size:89px;line-height:1;letter-spacing:-.08em;font-weight:650}.course-cover>small{font-size:9px;letter-spacing:.2em}.grade-3 .course-cover{background:#e5e8f6;color:#434677}.grade-4 .course-cover{background:#f4e4d5;color:#7b4b2b}.course-caption{padding:22px 25px}.course-caption h3{margin-bottom:5px}.course-caption p{font-size:13px;margin-bottom:18px}.course-caption>span{font-size:13px;font-weight:700;color:var(--accent)}.home-footnote{text-align:center;font-size:12px;margin:26px 0 0}
 .page-heading{margin:30px 0}.page-heading h1{font-size:44px;margin-bottom:14px}.page-heading .eyebrow{margin-bottom:12px}.page-heading p:last-child{margin:0}.page-heading.compact{margin:0 0 25px}.page-heading.compact h2{margin-bottom:10px}
 #courseTabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:30px 0}#courseTabs a{padding:12px 0;text-decoration:none;font-size:14px;color:var(--quiet);border-bottom:3px solid transparent}#courseTabs [aria-current]{color:var(--accent);border-color:var(--accent);font-weight:700}.course-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:50px}#moduleTabs{display:flex;flex-direction:column;gap:4px}#moduleTabs a{padding:11px 14px;border-radius:7px;text-decoration:none;font-size:14px;overflow-wrap:break-word}#moduleTabs a:hover{background:#eef1e8}#moduleTabs [aria-current]{background:#e6eddf;color:var(--accent);font-weight:700}#moduleTitle{font-size:24px;margin:8px 0 22px}.lesson-card{display:flex;align-items:center;gap:18px;text-decoration:none;background:white;border:1px solid var(--line);border-radius:9px;padding:21px 23px;margin-bottom:12px}.lesson-card:hover{border-color:#779e8b}.lesson-number{width:40px;font-size:16px;font-weight:600;color:#84988b}.lesson-card>span:nth-child(2){flex:1;min-width:0}.lesson-card strong{display:block;font-size:17px;overflow-wrap:break-word}.lesson-card small{display:block;font-size:13px;color:var(--quiet);margin-top:4px}.lesson-card>span:last-child{color:var(--accent)}
 #learningArea{display:block}.current-lesson{display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;padding:0 0 25px;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 0 26px}.current-lesson .eyebrow{margin-bottom:12px}.current-lesson h1{font-size:38px;margin-bottom:12px}.current-lesson p:last-child{font-size:14px;margin:0}.panel{border:0;background:none;box-shadow:none;padding:0;border-radius:0;margin:0}#launcher{display:block}.lesson-tools{display:flex;justify-content:space-between;align-items:center;gap:12px}.stats{display:flex;gap:22px;margin:20px 0 34px}.stat{display:flex;gap:6px;align-items:baseline;text-align:left;border:0;background:none;box-shadow:none;padding:0;border-radius:0}.stat strong{font-size:15px;color:var(--ink)}.stat span{font-size:12px;color:var(--quiet)}.mode-heading{margin-bottom:22px}.mode-heading h2{margin-bottom:7px}.mode-heading p{font-size:14px;margin:0}
 .modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode{display:flex;align-items:center;gap:16px;min-height:105px;padding:20px;text-align:left;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:none;color:var(--ink);position:relative}.mode:hover{background:#fff;border-color:#779e8b;transform:none;box-shadow:none}.mode::before,.mode::after{display:none}.mode>span:nth-child(2){flex:1;min-width:0}.mode strong{font-size:16px;line-height:1.35;margin:0 0 5px;display:block;color:var(--ink)}.mode small{font-size:12px;line-height:1.5;display:block;color:var(--quiet)}.mode .mode-symbol{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:9px;background:#f0f3e9;color:#527151;font-size:19px;font-weight:600}.mode:nth-child(3n+2) .mode-symbol{background:#f0f0f8;color:#65648c}.mode:nth-child(3n) .mode-symbol{background:#faf0e5;color:#926a45}.mode .mode-arrow{font-size:18px;color:#81968a}.daily-mode{border-color:#aec3a6}.progress-note{font-size:12px;margin:25px 0}
 #catalogAside{display:block;position:static;max-height:none}.catalog-selectors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}label.field{display:block;font-size:13px;color:var(--quiet)}input,select{border:1px solid #c6d1c6;border-radius:7px;background:white;color:var(--ink);padding:11px;width:100%}.field select{display:block;margin-top:7px}.buttons{display:flex;gap:8px;flex-wrap:wrap}.wordlist{max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0 25px}.wordrow{padding:14px 16px;border:1px solid var(--line);background:white;border-radius:8px;font-size:16px;min-width:0;overflow-wrap:break-word}.wordrow input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}.wordrow small{font-size:12px;color:var(--quiet)}#wordsDone{margin-bottom:28px}body[data-page=teacher] #wordSelection{display:none}body[data-page=teacher] #wordsDone{margin-top:6px}.test-config,.report{background:white;border:1px solid var(--line);padding:25px;border-radius:10px;margin:22px 0}.test-config h3,.report h3{margin-bottom:20px}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.config-grid label{font-size:13px}.config-grid select{display:block;margin-top:6px}.checks input{width:auto;accent-color:var(--accent)}.report-scroll{overflow:auto}
 #game{max-width:760px;margin:10px auto 0;min-height:65vh}#game .toprow{margin-bottom:35px;gap:10px}#gameTitle{font-size:30px;margin:0 0 25px}.timer{margin-left:auto;background:none;color:var(--quiet);font-size:13px}.progress{height:7px;background:#e6ebe1;border-radius:10px;overflow:hidden}.progress>div{background:var(--accent)}#counter{font-size:13px;margin:14px 0 30px}.question{background:white;border:1px solid var(--line);border-radius:12px;padding:28px;box-shadow:none;color:var(--ink)}.question h2{color:var(--ink)}.option,.pair{background:white;color:var(--ink);border:1px solid #c6d1c6;border-radius:8px;box-shadow:none;min-height:50px}.option:hover,.pair:hover{background:#eef4e9;border-color:#71906e}.flash{background:white;color:var(--ink);border:1px solid var(--line);box-shadow:none;border-radius:14px}.feedback{background:#edf5e9;color:var(--ink);border:1px solid #c8dac0;border-radius:8px}.answerbox input{background:white;color:var(--ink)}.muted,.tiny{color:var(--quiet)}
 .site-footer{border-top:1px solid var(--line);margin-top:58px;padding-top:25px;display:flex;gap:22px;align-items:flex-start}.site-footer>span{font-size:14px;font-weight:800;letter-spacing:-.04em}.site-footer p{font-size:11px;line-height:1.6;margin:0}body[data-page=play] .site-footer{display:none}#serverWorkspace{padding:0!important;max-width:none!important}
 @media(max-width:760px){.site-header{padding:0 20px;height:auto;min-height:74px;gap:15px;flex-wrap:wrap}.logo{font-size:23px}.header-actions{gap:14px;flex-wrap:wrap}.header-home{font-size:12px}main#pageContent{padding:0 20px 24px}.home-intro{padding:42px 0 34px}.home-intro h1{font-size:40px}.home-intro>p:not(.eyebrow){font-size:15px}.course-grid{gap:12px}.course-cover{height:165px;padding:16px}.course-cover>b{font-size:64px}.course-caption{padding:16px}.course-caption h3{font-size:17px}.course-caption p{font-size:12px}.course-caption>span{font-size:12px}.course-layout{grid-template-columns:1fr;gap:24px}#moduleTabs{flex-direction:row;overflow-x:auto;padding-bottom:10px}#moduleTabs a{white-space:nowrap}.page-heading h1{font-size:36px}.current-lesson{align-items:flex-start;flex-direction:column;gap:12px}.current-lesson h1{font-size:32px}.catalog-selectors{grid-template-columns:1fr}.wordlist{grid-template-columns:1fr}.modes{grid-template-columns:1fr 1fr;gap:10px}.mode{padding:16px;gap:12px}.mode .mode-arrow{display:none}.mode strong{font-size:14px}.mode .mode-symbol{width:38px;height:38px;font-size:16px}.stats{gap:15px;flex-wrap:wrap}.stat span{font-size:11px}.lesson-tools{flex-wrap:wrap}.site-footer{margin-top:40px}.config-grid{grid-template-columns:1fr}.question{padding:20px}.desktop-break{display:none}}
 @media(max-width:480px){.course-grid{grid-template-columns:1fr}.course-card{display:grid;grid-template-columns:112px 1fr}.course-cover{height:158px;padding:14px}.course-cover>span{font-size:9px}.course-cover>small{font-size:6px}.course-caption{padding:23px}.home-section-title{margin-top:10px}.home-intro{text-align:left}.home-intro h1{font-size:39px}.modes{grid-template-columns:1fr}.mode{min-height:92px;padding:18px}.mode strong{font-size:16px}.mode small{font-size:13px}.mode .mode-symbol{width:44px;height:44px;font-size:18px}.mode .mode-arrow{display:block}.lesson-card{padding:18px 14px;gap:10px}.lesson-number{width:28px}.lesson-card strong{font-size:16px}#courseTabs{gap:20px}#courseTabs a{font-size:13px}.header-actions{gap:10px}.site-header{padding-block:14px}.site-header .logo{margin-right:auto}.text-button{font-size:13px}#gameTitle{font-size:27px}.test-config,.report{padding:18px}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
}


/* LEXI 2026 bright learning UI — visual-only PR #8 redesign.
   Preserve the existing routes, vocabulary, practice logic and A4 print rules. */
@media screen {
 :root{--ink:#132451;--quiet:#657596;--line:#e0eafa;--accent:#147df5;--paper:#fff;--canvas:#f5faff}
 body{background:linear-gradient(145deg,#f4faff 0%,#ffffff 56%,#f1f8ff 100%);color:var(--ink)}
 .site-header{background:#ffffffed;border-bottom:1px solid #e3edfc;box-shadow:0 5px 22px #3169aa0c}
 #homeLogo .brand-word{font-weight:950;letter-spacing:-1.5px;color:#147df5}
 #homeLogo .brand-word b{color:#98d900}
 .header-home{color:#536786}.header-home:hover,.header-home[aria-pressed=true]{color:#147df5}
 .btn{background:#147df5;border-color:#147df5;border-radius:16px;box-shadow:0 6px 16px #147df52b}
 .btn:hover{background:#076bdc}.btn.secondary{border-color:#e1eafa;border-radius:16px}
 .home-intro{background:linear-gradient(115deg,#e5f4ff,#f3faff 65%,#edffd0);border-radius:32px;text-align:left;padding:55px 50px;margin-top:16px}
 .home-intro h1{color:#122456;font-weight:900}.home-intro>p:not(.eyebrow){color:#526b93}
 .eyebrow{color:#167bfa}.home-section-title h2{font-weight:850}
 .course-grid{gap:18px}.course-card{border-radius:25px;border:1px solid #dce8fa;box-shadow:0 12px 30px #2b5f9e14}
 .course-card:hover{border-color:#2c9bff;box-shadow:0 16px 35px #2b5f9e23}
 .course-cover{border-radius:22px 22px 0 0;background:linear-gradient(125deg,#e5ffb1,#b6edff);color:#142654}
 .grade-3 .course-cover{background:linear-gradient(125deg,#c9f0ff,#d9d6ff);color:#142654}
 .grade-4 .course-cover{background:linear-gradient(125deg,#e2d7ff,#c4f4ff);color:#142654}
 .course-caption{background:white}.course-caption h3{color:#152650}
 #courseTabs [aria-current]{color:#147df5;border-color:#147df5}
 .course-layout{grid-template-columns:145px minmax(0,1fr);gap:20px;align-items:start}
 #moduleTabs{position:sticky;top:12px;display:flex;flex-direction:column;gap:7px;max-height:calc(100dvh - 28px);overflow-y:auto;overflow-x:hidden;padding:4px 4px 12px 0}
 #moduleTabs a{display:flex;align-items:center;min-height:56px;white-space:normal;overflow-wrap:break-word;background:#eef6ff;border:1px solid #e1edfd;border-radius:15px;color:#33476c;font-weight:700;font-size:12px;line-height:1.3;padding:12px}
 #moduleTabs a:hover{background:#e0efff}#moduleTabs [aria-current]{background:#268bf9;color:white;border-color:#268bf9;box-shadow:0 5px 12px #258af92e}
 .lesson-card{border:1px solid #e1eafa;border-radius:18px;box-shadow:0 5px 15px #245b9b0a}
 .lesson-card:hover{border-color:#74b6ff}.lesson-number{color:#1684fb}
 .current-lesson{border-color:#e1eafa}.current-lesson h1{color:#172856}
 .modes{gap:14px}.mode{border-radius:21px;border-color:#dfeafa;background:#eaf5ff;box-shadow:0 5px 14px #285c9b0a}
 .mode:nth-child(4n+2){background:#eeffd9}.mode:nth-child(4n+3){background:#fff5d9}.mode:nth-child(4n){background:#f0eaff}
 .mode:hover{background:#e0f0ff;border-color:#5cb0ff}
 .mode .mode-symbol{background:#ffffffc9;color:#1683f9;border-radius:14px}.mode strong{color:#142451}.mode small{color:#57698b}
 .wordrow{border-radius:15px;border-color:#e1eafa;box-shadow:0 3px 10px #285c9b09}
 .wordrow input,.checks input{accent-color:#1686ff}.question,.flash{border-radius:22px;border-color:#dfeafa}
 .progress>div{background:#a7ef31}.site-footer{border-color:#e1eafa}
}
@media screen and (max-width:760px){
 .course-layout{grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start}
 #moduleTabs{display:flex;flex-direction:column;position:sticky;top:8px;overflow-x:hidden;overflow-y:auto;max-height:calc(100dvh - 20px);gap:6px;padding:2px 0 10px}
 #moduleTabs a{white-space:normal;min-height:55px;font-size:11px;padding:9px 7px;border-radius:12px}
 .home-intro{padding:34px 24px;border-radius:24px}
 .course-grid{grid-template-columns:1fr;gap:14px}
 .course-card{display:grid;grid-template-columns:42% 58%;min-height:145px}
 .course-cover{height:auto;min-height:145px;border-radius:20px 0 0 20px}
 .course-cover>b{font-size:68px}
 .course-caption{padding:18px 12px;align-self:center}
 .lesson-card{padding:13px 10px;gap:8px;border-radius:14px}
 .lesson-number{width:22px;font-size:12px}.lesson-card strong{font-size:14px}
 #moduleTitle{font-size:21px}
}
@media screen and (max-width:380px){
 main#pageContent{padding-inline:12px}
 .course-layout{grid-template-columns:83px minmax(0,1fr);gap:8px}
 #moduleTabs a{font-size:10px}
}


/* Lightweight travel artwork; decorative only and safe for static preview. */
@media screen{
 .course-cover{isolation:isolate}
 .course-cover>span,.course-cover>b,.course-cover>small{position:relative;z-index:2}
 .travel-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
 .travel-scene:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:#ffffff70;right:-30px;top:18px}
 .travel-landmark{position:absolute;right:10%;top:13%;font-size:clamp(65px,9vw,122px);filter:drop-shadow(0 10px 8px #4073aa22);line-height:1}
 .travel-cat{position:absolute;right:5%;bottom:0;font-size:clamp(70px,9vw,122px);filter:drop-shadow(0 10px 7px #325ea33a);line-height:1}
 .travel-city{position:absolute;left:20px;bottom:12px;font-size:10px;font-weight:900;letter-spacing:.2em;color:#294c80;opacity:.8}
 .course-cover>b{font-size:clamp(72px,9vw,110px);text-shadow:0 3px 10px #ffffff90}
}
@media screen and (max-width:760px){
 .travel-landmark{font-size:69px;right:0;top:8%}
 .travel-cat{font-size:73px;right:0;bottom:5px}
 .travel-city{font-size:8px;left:10px;bottom:7px}
 .course-cover>b{font-size:65px}
}

/* LEXI design-system foundation — isolated to screen; print rules unchanged.
   Real mascot assets will replace placeholder travel emoji in a separate change. */
@media screen {
 :root {
  --lexigo-blue:#118df7;--lexigo-lime:#a8ef34;
  --lexigo-navy:#162653;--lexigo-sky:#eaf7ff;
  --lexigo-shadow:0 9px 26px rgba(26,87,151,.10);
 }
 .site-header{background:#fff;border-bottom-color:#e3efff}
 #homeLogo .brand-word{color:var(--lexigo-blue)}
 #homeLogo .brand-word b{color:#7fce0c}
 .btn{border-radius:15px;min-height:44px}
 .btn:not(.secondary){background:var(--lexigo-blue);border-color:var(--lexigo-blue)}
 .btn:not(.secondary):hover{background:#0679da;border-color:#0679da}
 .course-card,.lesson-card,.mode{box-shadow:var(--lexigo-shadow)}
 .course-card{border-radius:22px}
 .mode{min-height:116px;border-radius:22px}
 .mode:focus-visible,#moduleTabs a:focus-visible{outline:3px solid var(--lexigo-blue);outline-offset:3px}
 #moduleTabs a{min-height:44px}
 #moduleTabs [aria-current]{background:var(--lexigo-blue);color:#fff}
 .course-layout>*{min-width:0}
 .wordrow{overflow-wrap:break-word}
}
@media screen and (max-width:760px) {
 /* Keep the actual module rail visible; do not collapse into a horizontal scroller. */
 .course-layout{grid-template-columns:clamp(82px,24vw,104px) minmax(0,1fr);gap:10px}
 #moduleTabs{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;max-height:calc(100dvh - 16px);position:sticky;top:8px}
 #moduleTabs a{min-height:48px;overflow-wrap:break-word}
 .course-layout .lesson-card,.course-layout .current-lesson{min-width:0}
 .course-layout .lesson-card strong,.course-layout .current-lesson h1{overflow-wrap:break-word}
 .course-grid{grid-template-columns:minmax(0,1fr)}
 .course-card{min-width:0}
}
@media screen and (max-width:380px) {
 .course-layout{grid-template-columns:82px minmax(0,1fr);gap:8px}
 .mode{padding:12px;gap:8px}
 .mode strong{font-size:14px}
}
@media screen and (prefers-reduced-motion:reduce){
 .course-card,.lesson-card,.mode,.btn{transition:none!important;animation:none!important}
}

/* Illustrated game tiles: original SVG sprite, no emoji placeholders.
   Accessible game labels remain unchanged and drive existing game actions. */
@media screen {
 .mode[data-mode] .mode-symbol{
   display:inline-block;flex:0 0 66px;width:66px;height:84px;
   background-image:url("assets/game-mode-icons.svg");
   background-repeat:no-repeat;background-size:528px 106px;
   background-position:0 0;background-color:transparent;
   border-radius:0;overflow:hidden;text-indent:-9999px;
 }
 .mode[data-mode="quiz"] .mode-symbol{background-position:0 0}
 .mode[data-mode="truefalse"] .mode-symbol{background-position:-66px 0}
 .mode[data-mode="spell"] .mode-symbol{background-position:-132px 0}
 .mode[data-mode="fix"] .mode-symbol{background-position:-198px 0}
 .mode[data-mode="audio"] .mode-symbol{background-position:-264px 0}
 .mode[data-mode="pairs"] .mode-symbol{background-position:-330px 0}
 .mode[data-mode="crystals"] .mode-symbol{background-position:-396px 0}
 .mode[data-mode="boss"] .mode-symbol{background-position:-462px 0}
 .mode[data-mode="cards"] .mode-symbol{background-position:0 0}
 .mode[data-mode="daily"] .mode-symbol{background-position:-462px 0}
 .mode[data-mode]{align-items:center}
}
@media screen and (max-width:380px){
 .mode[data-mode] .mode-symbol{flex-basis:48px;width:48px;height:66px;background-size:384px 77px}
 .mode[data-mode="truefalse"] .mode-symbol{background-position:-48px 0}
 .mode[data-mode="spell"] .mode-symbol{background-position:-96px 0}
 .mode[data-mode="fix"] .mode-symbol{background-position:-144px 0}
 .mode[data-mode="audio"] .mode-symbol{background-position:-192px 0}
 .mode[data-mode="pairs"] .mode-symbol{background-position:-240px 0}
 .mode[data-mode="crystals"] .mode-symbol{background-position:-288px 0}
 .mode[data-mode="boss"] .mode-symbol,.mode[data-mode="daily"] .mode-symbol{background-position:-336px 0}
}

/* Scenic course artwork, replacing literal emoji characters.
   London asset is implemented; NY and Sydney require approved artwork. */
@media screen {
 .grade-2 .course-cover{background:#bcecff url("assets/london-scene.svg") center / cover no-repeat}
 .grade-3 .course-cover{background:linear-gradient(150deg,#b4eaff 0%,#e0e9ff 55%,#92d3e6 100%)}
 .grade-4 .course-cover{background:linear-gradient(150deg,#e8d2ff 0%,#ffe6bd 55%,#a2e6e2 100%)}
 .travel-landmark,.travel-cat{display:none}
 .course-cover>span,.course-cover>b,.course-cover>small{color:#132b59;text-shadow:0 1px 6px #fff,0 1px 16px #fff}
 .course-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffffd9 0%,#ffffff55 55%,transparent 100%);z-index:1}
}

/* Refined learning screens: restrained pastels and consistent depth. */
@media screen {
 :root{--ink:#182957;--quiet:#617292;--accent:#168bf2;--line:#e0eafa;--canvas:#f5faff}
 .home-intro{background:linear-gradient(115deg,#dff3ff 0%,#f0faff 62%,#efffe6 100%);border:1px solid #d9eafa;border-radius:30px;box-shadow:0 14px 35px #2c7fb512;text-align:left;position:relative;overflow:hidden}
 .home-intro:after{content:"";position:absolute;right:-65px;bottom:-90px;width:300px;height:300px;border:35px solid #ffffff80;border-radius:50%;pointer-events:none}
 .home-intro h1{color:#142b63;max-width:740px;position:relative;z-index:1}
 .home-intro p{max-width:560px;position:relative;z-index:1}
 .home-intro .btn{position:relative;z-index:1}
 .course-card{border:1px solid #dfeaf9;border-radius:24px;overflow:hidden;box-shadow:0 9px 28px #356ba516}
 .course-caption{background:white}
 .course-caption h3{color:#142b63}
 #courseTabs a[aria-current]{border-color:#168bf2;color:#168bf2}
 .course-layout{gap:clamp(16px,3vw,42px)}
 #moduleTabs a{border-radius:14px}
 #moduleTabs a[aria-current]{background:#168bf2;color:white;box-shadow:0 5px 13px #168bf22e}
 .lesson-card{border-radius:18px}
 .modes{gap:13px}
 .mode,.mode:nth-child(n){background:#fff;border:1px solid #e0eafa;border-radius:20px;box-shadow:0 4px 16px #345a8e0b;min-height:118px;transition:transform .18s,box-shadow .18s,border-color .18s}
 .mode:nth-child(4n+1){background:#f2f8ff}
 .mode:nth-child(4n+2){background:#f5faee}
 .mode:nth-child(4n+3){background:#fff9f0}
 .mode:nth-child(4n){background:#f8f5ff}
 .mode:hover{border-color:#9bc7f6;box-shadow:0 9px 24px #345a8e18;transform:translateY(-2px)}
 .mode strong{color:#172a59;font-weight:750}
 .mode small{color:#667897}
 .mode-arrow{color:#168bf2}
 .mode-symbol{color:#168bf2}
 .wordrow{border:1px solid #e0eafa;border-radius:15px}
 .stats{flex-wrap:wrap}
}
@media screen and (max-width:760px){
 .home-intro{text-align:left;padding:28px 22px}
 .home-intro:after{width:170px;height:170px;right:-80px;bottom:-75px}
 .home-intro h1{font-size:clamp(29px,7vw,40px)}
 .modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mode{min-width:0;flex-wrap:wrap;padding:13px;gap:6px}
 .mode>span:nth-child(2){flex-basis:calc(100% - 80px)}
 .mode strong{font-size:14px;overflow-wrap:break-word}
 .mode small{font-size:11px;line-height:1.35}
 .course-layout{grid-template-columns:clamp(82px,24vw,104px) minmax(0,1fr);gap:10px}
}

/* Expanded Spotlight 2–10 course catalogue. No fictitious landmark artwork for older grades. */
@media screen {
 .grade-5 .course-cover{background:linear-gradient(135deg,#d8f8eb,#b7ebdd)}
 .grade-6 .course-cover{background:linear-gradient(135deg,#fff0d6,#ffdcb9)}
 .grade-7 .course-cover{background:linear-gradient(135deg,#eee5ff,#d4ccff)}
 .grade-8 .course-cover{background:linear-gradient(135deg,#dff2ff,#b8dfff)}
 .grade-9 .course-cover{background:linear-gradient(135deg,#ffe9e6,#ffd0cb)}
 .grade-10 .course-cover{background:linear-gradient(135deg,#e6f6ff,#d7d2ff)}
 .grade-5 .travel-scene:before,.grade-6 .travel-scene:before,.grade-7 .travel-scene:before,.grade-8 .travel-scene:before,.grade-9 .travel-scene:before,.grade-10 .travel-scene:before{background:radial-gradient(circle,#ffffffc9,transparent 70%);top:-28px;right:-30px}
}
@media screen and (min-width:780px){.course-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.course-grid .course-card{display:block;min-width:0}.course-grid .course-cover{height:170px;min-height:170px;border-radius:20px 20px 0 0}.course-grid .course-cover>b{font-size:74px}.course-grid .course-caption{padding:17px}}
@media screen and (min-width:540px) and (max-width:779px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.course-grid .course-card{display:block}.course-grid .course-cover{height:165px;min-height:165px;border-radius:20px 20px 0 0}}
@media screen and (max-width:539px){.course-grid{grid-template-columns:minmax(0,1fr)}}