:root {
  --ink: #17214a; --muted: #5f6b8d; --paper: #fff; --cloud: #f6f8ff; --navy: #11193f;
  --purple: #7447f7; --purple-dark: #5530c7; --cyan: #28c7e8; --coral: #ff6b73;
  --gold: #ffc94a; --green: #36c98f; --green-dark: #147c5b; --border: #dce2f5;
  --shadow: 0 18px 45px rgba(32,30,94,.14); --shadow-small: 0 8px 22px rgba(32,30,94,.11);
  --radius-xl: 32px; --radius-lg: 24px; --content: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cloud); font-family: "Trebuchet MS",Arial,sans-serif; font-size: 18px; line-height: 1.55; overflow-x: hidden; }
body.motion-off *,body.motion-off *::before,body.motion-off *::after { animation: none!important; transition-duration: .01ms!important; scroll-behavior: auto!important; }
img,svg { max-width: 100%; } button,input { font: inherit; } button,a { -webkit-tap-highlight-color: transparent; } a { color: inherit; }
:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; background: white; border-radius: 10px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }.sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.container { width:min(calc(100% - 32px),var(--content)); margin-inline:auto; }.section { padding:88px 0; }
.section-heading { text-align:center;max-width:720px;margin:0 auto 44px; }.eyebrow { display:inline-flex;gap:8px;align-items:center;color:var(--purple-dark);font-family:"Trebuchet MS",Arial,sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem; }
h1,h2,h3,.display { font-family:"Trebuchet MS",Arial,sans-serif;line-height:1.08;margin-top:0; }h1 { font-size:clamp(2.6rem,6vw,5.35rem);letter-spacing:-.04em; }h2 { font-size:clamp(2rem,4vw,3.45rem);letter-spacing:-.03em;margin-bottom:16px; }h3 { font-size:1.35rem;margin-bottom:8px; }p { margin-top:0; }.lead { color:var(--muted);font-size:clamp(1.05rem,2vw,1.3rem); }.gradient-text { background:linear-gradient(110deg,#6d43ef 5%,#2674e9 48%,#09aeba);color:transparent;background-clip:text;-webkit-background-clip:text; }
.btn { display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border:0;border-radius:15px;text-decoration:none;cursor:pointer;font-family:"Trebuchet MS",Arial,sans-serif;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }.btn:hover { transform:translateY(-3px); }.btn-primary { color:white;background:linear-gradient(135deg,var(--purple),#5c6cff);box-shadow:0 8px 0 #4328a2,0 16px 28px rgba(91,68,224,.28); }.btn-primary:active { transform:translateY(5px);box-shadow:0 3px 0 #4328a2; }.btn-secondary { color:var(--ink);background:white;border:2px solid var(--border);box-shadow:var(--shadow-small); }.btn-green { color:white;background:var(--green);box-shadow:0 7px 0 var(--green-dark); }.btn-small { min-height:44px;padding:8px 15px;font-size:.92rem; }.btn:disabled { opacity:.55;cursor:not-allowed;transform:none;box-shadow:none; }.icon-btn { width:46px;height:46px;display:grid;place-items:center;border-radius:14px;border:2px solid var(--border);color:var(--ink);background:white;cursor:pointer; }
.site-header { position:relative;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(219,225,244,.8);backdrop-filter:blur(15px); }.site-header.sticky { position:sticky;top:0; }.nav-wrap { min-height:76px;display:flex;align-items:center;gap:26px; }.logo { display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 1.18rem "Trebuchet MS",Arial,sans-serif;flex-shrink:0; }.logo-mark { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:white;background:linear-gradient(145deg,var(--purple),var(--cyan));box-shadow:0 6px 14px rgba(87,74,216,.28);font-size:1.25rem; }.nav-links { display:flex;align-items:center;gap:8px;margin-left:auto; }.nav-links a { padding:10px 13px;border-radius:12px;font-weight:700;text-decoration:none;font-size:.95rem; }.nav-links a:hover,.nav-links a[aria-current="page"] { color:var(--purple-dark);background:#f0edff; }.player-chip { display:flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;border:2px solid var(--border);border-radius:999px;background:white;font-weight:700; }.avatar-mini { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#ebe7ff;font-size:1.35rem; }.xp-mini { color:#986900;font-family:"Trebuchet MS",Arial,sans-serif; }.mobile-toggle { display:none;margin-left:auto; }
.hero { position:relative;padding:70px 0 95px;background:radial-gradient(circle at 9% 20%,rgba(255,201,74,.28),transparent 18%),radial-gradient(circle at 92% 22%,rgba(40,199,232,.25),transparent 22%),linear-gradient(160deg,#fbf9ff 0%,#edf8ff 100%);overflow:hidden; }.hero::before { content:"";position:absolute;inset:0;opacity:.28;background-image:radial-gradient(#7957ef 1.4px,transparent 1.4px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent 80%); }.hero-grid { position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center; }.hero-copy { max-width:650px; }.hero-copy h1 { margin:14px 0 22px; }.hero-actions { display:flex;flex-wrap:wrap;gap:16px;margin:30px 0; }.safe-note { display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.94rem; }.safe-note strong { color:var(--green-dark); }.hero-stage { position:relative;min-height:500px;display:grid;place-items:center; }.orbit { position:absolute;width:450px;height:450px;border:3px dashed rgba(113,71,247,.18);border-radius:50%;animation:spin 30s linear infinite; }.orbit::before,.orbit::after { content:"";position:absolute;width:40px;height:40px;border-radius:13px;background:var(--gold);box-shadow:var(--shadow-small);transform:rotate(12deg); }.orbit::before { top:20px;left:80px; }.orbit::after { right:-3px;top:230px;background:var(--coral);border-radius:50%; }.mascot-wrap { position:relative;width:min(390px,92%);animation:float 4s ease-in-out infinite;filter:drop-shadow(0 24px 22px rgba(39,41,102,.19)); }.speech-bubble { position:absolute;z-index:2;top:15px;right:-12px;width:190px;padding:14px 18px;border-radius:20px 20px 20px 4px;background:white;box-shadow:var(--shadow-small);font:700 .95rem "Trebuchet MS",Arial,sans-serif;transform:rotate(2deg); }.hero-stat { position:absolute;z-index:3;bottom:30px;left:0;display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:18px;background:white;box-shadow:var(--shadow);font-weight:700;transform:rotate(-3deg); }.hero-stat span { font-size:1.5rem; }@keyframes float { 50% { transform:translateY(-12px) rotate(1deg); } }@keyframes spin { to { transform:rotate(360deg); } }
.prompt-lab { position:relative;margin-top:-28px; }.lab-shell { position:relative;display:grid;grid-template-columns:.75fr 1.25fr;gap:34px;padding:38px;border-radius:var(--radius-xl);background:var(--navy);color:white;box-shadow:0 28px 70px rgba(16,25,63,.25);overflow:hidden; }.lab-shell::after { content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-140px;bottom:-180px;background:rgba(40,199,232,.13); }.lab-copy .eyebrow { color:#7eeaff; }.lab-copy h2 { font-size:clamp(1.8rem,3.2vw,2.8rem);margin:12px 0; }.lab-copy p { color:#cbd3f5; }.power-meter { margin-top:25px; }.meter-label { display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px; }.meter-track { height:16px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden; }.meter-fill { width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--gold),var(--green));transition:width .45s cubic-bezier(.2,.8,.2,1); }.prompt-panel { position:relative;z-index:1;padding:24px;color:var(--ink);background:white;border-radius:24px; }.prompt-result { min-height:92px;padding:17px;border:2px solid #dbe2f8;border-radius:15px;background:#f8f9ff;font-weight:700; }.choice-group { margin-top:18px; }.choice-label { display:block;color:var(--muted);font-size:.87rem;font-weight:700;margin-bottom:7px; }.choice-row { display:flex;flex-wrap:wrap;gap:8px; }.choice-pill { min-height:43px;padding:8px 13px;border:2px solid var(--border);border-radius:12px;color:var(--ink);background:white;cursor:pointer;font-weight:700; }.choice-pill:hover { border-color:var(--purple); }.choice-pill[aria-pressed="true"] { color:#4d29b9;border-color:var(--purple);background:#eee9ff;box-shadow:inset 0 0 0 1px var(--purple); }.lab-feedback { min-height:29px;margin:15px 0 0;color:var(--green-dark);font-weight:700; }
.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }.feature-card { position:relative;padding:28px;border:2px solid #e5e9f7;border-radius:var(--radius-lg);background:white;box-shadow:var(--shadow-small);overflow:hidden; }.feature-icon { width:58px;height:58px;display:grid;place-items:center;margin-bottom:20px;border-radius:18px;background:#ede8ff;font-size:1.7rem; }.feature-card:nth-child(2) .feature-icon { background:#dcf9ff; }.feature-card:nth-child(3) .feature-icon { background:#fff1d5; }.feature-card p { color:var(--muted);margin-bottom:0; }.world-preview { background:linear-gradient(180deg,#eff2ff,#fff); }.world-path { position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch; }.world-path::before { content:"";position:absolute;top:61px;left:8%;right:8%;height:8px;background:repeating-linear-gradient(90deg,#c9cdec 0 18px,transparent 18px 28px); }.world-card { position:relative;z-index:1;min-height:300px;padding:22px 17px;border:0;border-radius:28px;color:white;text-align:center;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease;overflow:hidden; }.world-card:hover { transform:translateY(-8px) rotate(-1deg); }.world-card::after { content:"";position:absolute;inset:auto -20% -35% -20%;height:60%;border-radius:50% 50% 0 0;background:rgba(255,255,255,.13); }.world-icon { position:relative;z-index:1;width:84px;height:84px;display:grid;place-items:center;margin:0 auto 34px;border:6px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.23);font-size:2.3rem;box-shadow:0 10px 20px rgba(0,0,0,.12); }.world-card h3,.world-card p,.world-status { position:relative;z-index:1; }.world-card p { font-size:.9rem;color:rgba(255,255,255,.9); }.world-forest { background:linear-gradient(150deg,#1ab57c,#087a69); }.world-island { background:linear-gradient(150deg,#23bde0,#2b62c9); }.world-city { background:linear-gradient(150deg,#7251ee,#4c2eac); }.world-kingdom { background:linear-gradient(150deg,#ff8963,#d84d72); }.world-arena { background:linear-gradient(150deg,#ffcb45,#dc771d); }.world-card.locked { filter:saturate(.35); }.world-status { display:inline-block;margin-top:4px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.18);font-weight:700;font-size:.78rem; }.cta-panel { display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;padding:40px;border-radius:var(--radius-xl);color:white;background:linear-gradient(120deg,var(--purple-dark),#3935a1 60%,#126f91);box-shadow:var(--shadow); }.cta-panel h2 { margin-bottom:7px; }.cta-panel p { color:#d9dcff;margin-bottom:0; }
.site-footer { padding:55px 0 28px;color:#cbd1ee;background:var(--navy); }.footer-grid { display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:45px; }.site-footer .logo { color:white;margin-bottom:16px; }.site-footer h3 { color:white;font-size:1rem; }.footer-links { display:grid;gap:8px; }.footer-links a { color:#cbd1ee;text-decoration:none; }.footer-links a:hover { color:white;text-decoration:underline; }.footer-bottom { margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem; }
.page-hero { padding:52px 0 40px;color:white;background:radial-gradient(circle at 85% 20%,rgba(40,199,232,.28),transparent 25%),linear-gradient(125deg,#28205f,var(--navy)); }.page-hero h1 { font-size:clamp(2.4rem,5vw,4.1rem);margin-bottom:12px; }.page-hero .lead { color:#d6dcfa; }.profile-banner { display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px;margin-top:28px;color:var(--ink);background:white;border-radius:22px;box-shadow:var(--shadow); }.profile-avatar { width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(140deg,#ece8ff,#dff9ff);font-size:2.6rem; }.profile-banner h2 { font-size:1.35rem;margin:0 0 4px; }.profile-banner p { color:var(--muted);margin:0; }.profile-stats { display:flex;gap:12px; }.stat-pill { min-width:100px;padding:10px 14px;border-radius:14px;background:#f3f5ff;text-align:center; }.stat-pill strong { display:block;font:700 1.25rem "Trebuchet MS",Arial,sans-serif; }.map-section { min-height:900px;padding:60px 0 90px;background:linear-gradient(#d9f5ef 0%,#e7f4ff 25%,#eee9ff 52%,#fff0e6 75%,#fff8d8 100%); }.adventure-map { position:relative;max-width:900px;margin:auto;padding:30px 0; }.map-trail { position:absolute;inset:70px 50% 80px auto;width:10px;border-radius:99px;background:repeating-linear-gradient(to bottom,white 0 15px,transparent 15px 28px);opacity:.85; }.map-world { position:relative;display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;min-height:185px; }.map-world:nth-child(even) .map-card { grid-column:3; }.map-world:nth-child(odd) .map-card { grid-column:1; }.map-world:nth-child(odd) .map-node { grid-column:2; }.map-world:nth-child(even) .map-node { grid-column:2;grid-row:1; }.map-card { padding:22px;border:3px solid rgba(255,255,255,.8);border-radius:24px;color:white;box-shadow:var(--shadow); }.map-card h2 { font-size:1.55rem;margin-bottom:5px; }.map-card p { font-size:.94rem;margin-bottom:12px;opacity:.92; }.map-card.locked { color:#596078;background:#d9dceb!important;filter:grayscale(.3); }.map-node { position:relative;z-index:2;width:92px;height:92px;display:grid;place-items:center;justify-self:center;border:8px solid white;border-radius:50%;box-shadow:var(--shadow);font-size:2.5rem; }.map-node.current { animation:pulse 2s infinite; }@keyframes pulse { 50% { box-shadow:0 0 0 13px rgba(255,255,255,.35),var(--shadow); } }.lesson-dots { display:flex;gap:5px; }.lesson-dot { width:22px;height:8px;border-radius:99px;background:rgba(255,255,255,.3); }.lesson-dot.done { background:var(--gold); }
.profile-setup { border:0;max-width:570px;width:calc(100% - 28px);padding:0;border-radius:28px;box-shadow:0 30px 80px rgba(14,17,52,.38); }.profile-setup::backdrop { background:rgba(13,17,48,.68);backdrop-filter:blur(5px); }.modal-inner { padding:32px; }.avatar-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:18px 0 24px; }.avatar-choice { min-height:55px;border:2px solid var(--border);border-radius:15px;background:white;font-size:1.7rem;cursor:pointer; }.avatar-choice[aria-pressed="true"] { border-color:var(--purple);background:#eeeaff;box-shadow:0 0 0 2px #cabdff; }.nickname-box { padding:16px;border-radius:16px;background:#f3f5ff;text-align:center; }.nickname-display { display:block;margin:7px 0 14px;font:700 1.55rem "Trebuchet MS",Arial,sans-serif;color:var(--purple-dark); }
.lesson-body { min-height:100vh;background:linear-gradient(155deg,#eefaff,#f6f2ff); }.lesson-topbar { padding:14px 0;background:white;border-bottom:2px solid var(--border); }.lesson-topbar .container { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px; }.lesson-progress { height:16px;overflow:hidden;border-radius:99px;background:#e5e8f5; }.lesson-progress-fill { width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .4s ease; }.lesson-main { width:min(calc(100% - 32px),820px);min-height:calc(100vh - 85px);margin:auto;padding:45px 0 130px; }.lesson-intro { text-align:center; }.lesson-mascot { width:175px;margin:0 auto 18px;filter:drop-shadow(0 15px 15px rgba(52,48,116,.16)); }.lesson-card { padding:clamp(24px,5vw,45px);border:2px solid var(--border);border-radius:30px;background:white;box-shadow:var(--shadow); }.lesson-kicker { color:var(--purple-dark);font-weight:700; }.lesson-card h1 { font-size:clamp(2rem,5vw,3.3rem); }.concept-box { display:grid;grid-template-columns:auto 1fr;gap:16px;margin:25px 0;padding:19px;border-radius:18px;background:#eefaff;border:2px solid #beeefa; }.concept-icon { font-size:2rem; }.activity-options { display:grid;gap:12px;margin:25px 0; }.answer-option { position:relative;width:100%;min-height:64px;display:flex;align-items:center;gap:14px;padding:14px 18px;border:2px solid var(--border);border-radius:16px;color:var(--ink);background:white;cursor:pointer;text-align:left;font-weight:700;transition:border .15s,background .15s,transform .15s; }.answer-option:hover { border-color:#9981ef;transform:translateY(-2px); }.answer-letter { flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eef0fa;font-family:"Trebuchet MS",Arial,sans-serif; }.answer-option.selected { border-color:var(--purple);background:#f0edff; }.answer-option.correct { border-color:var(--green);background:#e7fbf3; }.answer-option.incorrect { border-color:var(--coral);background:#fff0f1; }.activity-actions { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px; }.hint-btn { border:0;color:var(--purple-dark);background:transparent;cursor:pointer;font-weight:700;text-decoration:underline; }.hint-box { margin-top:18px;padding:14px 17px;border-radius:14px;color:#785600;background:#fff7dc;border-left:5px solid var(--gold); }.feedback-panel { margin-top:22px;padding:18px;border-radius:17px; }.feedback-panel.good { color:#0d6548;background:#e6fbf2;border:2px solid #9be4c8; }.feedback-panel.try { color:#8d3548;background:#fff0f2;border:2px solid #ffc1ca; }.feedback-panel h3 { margin-bottom:5px; }.builder-zone { margin:22px 0; }.builder-output { min-height:95px;padding:18px;border:3px dashed #b6a8e9;border-radius:18px;background:#f8f6ff;font-weight:700; }.builder-categories { display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:18px; }.builder-category { padding:14px;border:2px solid var(--border);border-radius:15px; }.builder-category legend { padding:0 6px;font-weight:700; }.builder-category button { width:100%;margin-top:7px;padding:9px;border:2px solid transparent;border-radius:10px;background:#f0f2fa;cursor:pointer; }.builder-category button[aria-pressed="true"] { border-color:var(--purple);color:var(--purple-dark);background:#eee9ff; }.celebration { position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:20px;background:rgba(14,18,53,.73);backdrop-filter:blur(7px); }.celebration-card { position:relative;max-width:540px;padding:38px;border-radius:32px;background:white;text-align:center;box-shadow:0 35px 90px rgba(0,0,0,.35);animation:pop .45s cubic-bezier(.2,1.5,.4,1); }.celebration-emoji { font-size:4rem;animation:bounce 1s infinite; }.xp-burst { display:inline-block;margin:8px 0 20px;padding:9px 18px;border-radius:99px;color:#704900;background:#fff1bd;font:700 1.2rem "Trebuchet MS",Arial,sans-serif; }.confetti { position:fixed;z-index:210;top:-20px;width:12px;height:22px;animation:fall 2.2s linear forwards; }@keyframes pop { from { opacity:0;transform:scale(.75); } }@keyframes bounce { 50% { transform:translateY(-10px) rotate(5deg); } }@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }
.content-page { min-height:70vh;padding:60px 0 90px; }.badge-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }.badge-card { padding:27px;border:2px solid var(--border);border-radius:24px;background:white;text-align:center;box-shadow:var(--shadow-small); }.badge-card.locked { filter:grayscale(1);opacity:.65; }.badge-icon { width:90px;height:90px;display:grid;place-items:center;margin:0 auto 15px;border-radius:50%;background:linear-gradient(145deg,#fff3bd,#ffc94a);border:7px solid #fff8dc;font-size:2.5rem;box-shadow:0 8px 18px rgba(158,104,7,.2); }.prose { max-width:800px;margin:auto; }.prose-card { padding:clamp(25px,5vw,48px);border-radius:28px;background:white;box-shadow:var(--shadow); }.prose h2 { margin-top:35px;font-size:1.75rem; }.prose li { margin-bottom:8px; }
[hidden] { display:none!important; }.reveal { opacity:0;transform:translateY(25px);transition:opacity .6s ease,transform .6s ease; }.reveal.visible { opacity:1;transform:none; }
@media(max-width:920px){.nav-links{position:absolute;top:76px;left:16px;right:16px;display:none;padding:14px;border:2px solid var(--border);border-radius:18px;background:white;box-shadow:var(--shadow)}.nav-links.open{display:grid}.mobile-toggle{display:grid}.player-chip{margin-left:auto}.hero-grid,.lab-shell{grid-template-columns:1fr}.hero-copy{text-align:center;margin:auto}.hero-actions,.safe-note{justify-content:center}.hero-stage{min-height:420px}.world-path{grid-template-columns:repeat(2,1fr)}.world-path::before{display:none}.world-card:last-child{grid-column:1/-1;max-width:50%;width:100%;justify-self:center}.feature-grid{grid-template-columns:1fr}}
@media(max-width:650px){body{font-size:16px}.section{padding:62px 0}.nav-wrap{min-height:68px}.nav-links{top:68px}.logo-text{display:none}.player-chip .player-name{display:none}.hero{padding-top:45px}.hero-stage{min-height:350px}.orbit{width:330px;height:330px}.mascot-wrap{width:290px}.speech-bubble{width:150px;right:-4px;font-size:.82rem}.hero-stat{bottom:10px}.lab-shell{padding:23px;border-radius:24px}.prompt-panel{padding:17px}.world-path{grid-template-columns:1fr}.world-card,.world-card:last-child{max-width:none;min-height:250px}.cta-panel{grid-template-columns:1fr;padding:28px;text-align:center}.footer-grid{grid-template-columns:1fr;gap:25px}.profile-banner{grid-template-columns:auto 1fr}.profile-stats{grid-column:1/-1}.stat-pill{flex:1;min-width:0}.map-world{grid-template-columns:78px 1fr;gap:12px;margin-bottom:20px}.map-world .map-node,.map-world:nth-child(even) .map-node,.map-world:nth-child(odd) .map-node{grid-column:1;grid-row:1;width:72px;height:72px;font-size:1.9rem}.map-world .map-card,.map-world:nth-child(even) .map-card,.map-world:nth-child(odd) .map-card{grid-column:2;grid-row:1}.map-trail{left:34px;right:auto}.avatar-grid{grid-template-columns:repeat(3,1fr)}.lesson-topbar .container{grid-template-columns:auto 1fr}.lesson-topbar .xp-mini{display:none}.builder-categories{grid-template-columns:1fr}.activity-actions{align-items:stretch;flex-direction:column-reverse}.activity-actions .btn{width:100%}.badge-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* Phase 2: Prompt Forest adventure */
.forest-hub{position:relative;max-width:960px;margin:0 auto 70px;border-radius:36px;background:linear-gradient(155deg,#087a5b,#0d594e);box-shadow:0 28px 70px rgba(7,73,58,.25);overflow:hidden}
.forest-hub::before,.forest-hub::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.forest-hub::before{width:380px;height:380px;right:-170px;top:-180px}.forest-hub::after{width:240px;height:240px;left:-120px;bottom:-130px}
.forest-canopy{position:relative;z-index:1;padding:38px;color:white;background:radial-gradient(circle at 90% 10%,rgba(255,210,74,.18),transparent 28%)}
.forest-canopy h2{margin:8px 0 8px}.forest-canopy p{max-width:680px;color:#d4f9ea}.world-progress-label{display:flex;justify-content:space-between;gap:15px;margin:24px 0 8px;font-size:.9rem}.world-progress{height:18px;margin-bottom:25px;border:3px solid rgba(255,255,255,.25);border-radius:99px;background:rgba(0,0,0,.2);overflow:hidden}.world-progress>div{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffc94a,#7df3a5);transition:width .5s ease}
.forest-trail{position:relative;z-index:1;display:grid;gap:14px;padding:25px 38px 42px;background:rgba(3,49,40,.28)}
.forest-trail::before{content:"";position:absolute;left:73px;top:30px;bottom:50px;width:6px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.55) 0 10px,transparent 10px 18px)}
.forest-lesson{position:relative;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:16px;min-height:88px;padding:13px 20px 13px 8px;border:3px solid rgba(255,255,255,.55);border-radius:24px;color:var(--ink);background:white;text-decoration:none;box-shadow:0 12px 25px rgba(0,31,24,.16);transition:transform .18s ease,box-shadow .18s ease}
a.forest-lesson:hover{transform:translateX(7px);box-shadow:0 15px 30px rgba(0,31,24,.24)}.forest-lesson.locked{opacity:.64;filter:saturate(.35)}.forest-lesson.completed{border-color:#ffc94a;background:#fffdf3}.forest-lesson.available{border-color:#7df3a5;animation:softGlow 2.4s ease-in-out infinite}.lesson-number{position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center;border:5px solid white;border-radius:50%;color:white;background:linear-gradient(145deg,#22bd83,#087a5b);box-shadow:0 7px 15px rgba(0,70,50,.24);font:700 1.2rem "Trebuchet MS",Arial,sans-serif}.completed .lesson-number{color:#6f4d00;background:var(--gold)}.locked .lesson-number{background:#9299ac}.lesson-copy{display:grid}.lesson-copy strong{font:700 1.12rem "Trebuchet MS",Arial,sans-serif}.lesson-copy small{color:var(--muted)}.lesson-reward{color:#7358c7;font-weight:700;font-size:.88rem;text-align:right}@keyframes softGlow{50%{box-shadow:0 0 0 7px rgba(125,243,165,.18),0 14px 28px rgba(0,31,24,.2)}}
.other-worlds{max-width:850px}.unlocked-world{color:white!important;background:linear-gradient(150deg,#23bde0,#2b62c9)!important;filter:none!important;animation:softGlow 2.4s ease-in-out infinite}
.lesson-progress-wrap{display:grid;gap:5px}.lesson-progress-meta{display:flex;justify-content:space-between;gap:15px;font-size:.77rem}.lesson-progress-meta span{color:var(--muted)}.boss-gates{display:flex;justify-content:center;gap:6px;height:0;transform:translateY(10px)}.boss-gate{width:24px;height:24px;display:grid;place-items:center;border:2px solid white;border-radius:50%;color:white;background:#a2a8bd;font-size:.7rem}.boss-gate.open{color:#124b38;background:var(--gold)}
.pixel-coach{position:relative;width:120px;height:125px;margin:-14px 0 4px auto;float:right}.pixel-coach img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(52,48,116,.15));transition:transform .25s ease}.pixel-mood{position:absolute;right:-8px;top:4px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:white;box-shadow:var(--shadow-small);animation:bounce 1.8s ease-in-out infinite}.pixel-coach.is-happy img{animation:pixelCheer .55s ease}.pixel-coach.is-thinking img{transform:rotate(-5deg)}@keyframes pixelCheer{50%{transform:translateY(-10px) rotate(4deg)}}
.matching-board{display:grid;gap:12px;margin:25px 0}.match-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;padding:13px 16px;border:2px solid var(--border);border-radius:16px;background:#f9faff}.match-row select{min-height:48px;width:100%;padding:8px 35px 8px 10px;border:2px solid #cbd2eb;border-radius:11px;color:var(--ink);background:white}.match-row select:focus{border-color:var(--purple)}
.sort-board{display:grid;gap:11px;padding:0;margin:26px 0;list-style:none}.sort-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border:2px solid var(--border);border-radius:16px;background:white;box-shadow:var(--shadow-small)}.sort-number{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:white;background:var(--purple);font-weight:700}.sort-controls{display:flex;gap:5px}.sort-controls button{width:42px;height:42px;border:2px solid var(--border);border-radius:10px;color:var(--purple-dark);background:#f3f0ff;cursor:pointer;font-weight:700}.sort-controls button:disabled{opacity:.3;cursor:not-allowed}
.boss-card{border-color:#ffc94a;background:radial-gradient(circle at 12% 5%,rgba(255,201,74,.18),transparent 23%),white}.boss-card::before{content:"";display:block;height:8px;margin:-45px -45px 25px;background:linear-gradient(90deg,#087a5b,#ffc94a,#7447f7)}.boss-victory{box-shadow:0 0 0 8px rgba(255,201,74,.25),var(--shadow)}.victory-scene .pixel-coach{float:none;width:170px;height:170px;margin:0 auto}.reward-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.badge-burst{display:inline-block;margin:8px 0 20px;padding:9px 18px;border-radius:99px;color:#4d2bab;background:#eee9ff;font-weight:700}.badge-card.earned{border-color:#ffc94a;background:linear-gradient(180deg,#fffdf4,#fff)}.badge-card.earned .badge-icon{animation:softGlow 2.4s infinite}.danger-link{display:block;margin:18px auto 0;border:0;color:#a52f47;background:transparent;text-decoration:underline;cursor:pointer;font-weight:700}

@media(max-width:650px){.forest-canopy{padding:27px 22px}.forest-trail{padding:20px 15px 30px}.forest-trail::before{left:46px}.forest-lesson{grid-template-columns:52px 1fr;padding-right:12px}.lesson-number{width:48px;height:48px}.lesson-reward{grid-column:2;text-align:left}.world-progress-label{display:grid}.pixel-coach{float:none;width:105px;height:110px;margin:-10px auto 8px}.match-row{grid-template-columns:1fr}.match-row>span{display:none}.lesson-progress-meta strong{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sort-item{grid-template-columns:35px 1fr}.sort-controls{grid-column:2}.boss-gates{display:none}}
@media(max-width:650px){.boss-card::before{margin:-24px -24px 25px}}

/* Quality remediation */
:focus-visible{outline:4px solid #263aa5;outline-offset:4px;box-shadow:0 0 0 2px #fff}
.btn-green{background:#0b6b4e;box-shadow:0 7px 0 #064534}.choice-pill{min-height:44px}
.world-forest{background:linear-gradient(150deg,#087a69,#075449)}.world-island{background:linear-gradient(150deg,#08749b,#173f91)}.world-kingdom{background:linear-gradient(150deg,#a93459,#76275f)}.world-arena{color:#332300;background:linear-gradient(150deg,#ffcb45,#d5780c)}.world-arena p{color:#3f2a00}.world-arena .world-status{color:white;background:rgba(45,28,0,.68)}
.compact-footer{margin-top:auto;padding-top:38px}.compact-footer .footer-grid{align-items:start}
.noscript-message{padding:20px;margin-bottom:25px;border:3px solid #d19000;border-radius:18px;color:#533b00;background:#fff7d7}.noscript-message a{font-weight:700}
.level-stat{min-width:220px!important;text-align:left}.level-stat>span{display:block;color:var(--muted);font-size:.78rem}.mini-progress{height:9px;margin-top:8px;border-radius:99px;background:#dfe3f2;overflow:hidden}.mini-progress>div{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7447f7,#147c5b);transition:width .4s ease}
.modal-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}.modal-heading h2{margin-bottom:6px}.reset-confirm{margin-top:16px;padding:17px;border:2px solid #d68a98;border-radius:16px;color:#6f2132;background:#fff2f4}.reset-confirm p{margin:4px 0 12px}.reset-confirm>div{display:flex;flex-wrap:wrap;gap:9px}.danger-button{color:white;background:#a52f47;box-shadow:0 5px 0 #6f2132}

/* A more connected adventure world */
.map-section{position:relative;background:radial-gradient(circle at 12% 10%,rgba(255,255,255,.72) 0 55px,transparent 56px),radial-gradient(circle at 88% 34%,rgba(255,255,255,.5) 0 70px,transparent 71px),linear-gradient(#c9f3e7 0%,#dcefff 36%,#e9e1ff 63%,#fff0d8 84%,#fff2b9 100%)}
.map-section::before,.map-section::after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px)}.map-section::before{width:180px;height:180px;left:-80px;top:25%;background:rgba(31,166,116,.18);box-shadow:80px 120px 0 rgba(31,166,116,.1)}.map-section::after{width:220px;height:80px;right:-50px;bottom:18%;background:rgba(255,255,255,.5)}
.forest-hub{border:5px solid rgba(255,255,255,.82)}.forest-canopy::after{content:"🌿  ✦  🍃";position:absolute;right:38px;top:35px;font-size:2rem;letter-spacing:.4em;opacity:.72}.forest-trail{background:linear-gradient(90deg,rgba(3,49,40,.4),rgba(7,88,68,.22)),radial-gradient(circle at 12% 15%,rgba(125,243,165,.16),transparent 20%)}
.other-worlds{padding-top:55px}.other-worlds::before{content:"The path continues…";position:absolute;top:0;left:50%;transform:translateX(-50%);padding:7px 16px;border-radius:99px;color:#4a4770;background:rgba(255,255,255,.76);font-weight:700;white-space:nowrap}

/* Distinct lesson environments */
.lesson-body{background-attachment:fixed}.lesson-body[data-lesson-theme="1"]{background:radial-gradient(circle at 15% 15%,rgba(255,223,116,.35),transparent 18%),linear-gradient(155deg,#dff8ee,#eff5ff)}.lesson-body[data-lesson-theme="2"]{background:radial-gradient(circle at 88% 12%,rgba(40,199,232,.25),transparent 20%),linear-gradient(155deg,#e6fbff,#f2ebff)}.lesson-body[data-lesson-theme="3"]{background:radial-gradient(circle at 15% 18%,rgba(116,71,247,.18),transparent 21%),linear-gradient(155deg,#eef0ff,#e7fbf3)}.lesson-body[data-lesson-theme="4"]{background:radial-gradient(circle at 85% 16%,rgba(255,107,115,.2),transparent 20%),linear-gradient(155deg,#fff1e8,#eff4ff)}.lesson-body[data-lesson-theme="5"]{background:radial-gradient(circle at 50% 0,rgba(255,201,74,.28),transparent 25%),linear-gradient(155deg,#d8f4e7,#e6e1ff)}
.lesson-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92))}.lesson-card::after{content:"";position:absolute;z-index:-1;right:-70px;bottom:-80px;width:210px;height:210px;border-radius:50%;background:rgba(116,71,247,.05)}.lesson-theme-1{border-top:8px solid #158660}.lesson-theme-2{border-top:8px solid #1583a8}.lesson-theme-3{border-top:8px solid #5c42bc}.lesson-theme-4{border-top:8px solid #c74c63}.lesson-theme-5{border-top:8px solid #a46900}
.pixel-coach::after{position:absolute;right:72px;top:0;padding:5px 9px;border:2px solid #dce2f5;border-radius:12px 12px 3px 12px;color:var(--ink);background:white;font-size:.72rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-small)}.pixel-coach.is-happy::after{content:"Brilliant!"}.pixel-coach.is-thinking::after{content:"Let’s think…"}.pixel-coach.is-thinking img{animation:pixelThink .8s ease}@keyframes pixelThink{50%{transform:rotate(-6deg) translateY(-3px)}}
.matching-board{position:relative;padding:18px;border-radius:22px;background:linear-gradient(145deg,#eefaff,#f4efff);border:2px dashed #9883e2}.match-row{position:relative;border-color:#c8cfeb;background:white;box-shadow:0 5px 12px rgba(34,35,91,.07)}.match-row::before{content:"◆";color:#7447f7}.match-row select{cursor:pointer}.match-row:focus-within{border-color:#5530c7;box-shadow:0 0 0 3px rgba(116,71,247,.16)}
.builder-category{background:linear-gradient(180deg,#fff,#fafaff)}.builder-category legend{color:#4f33ac}.builder-output{position:relative;background:linear-gradient(135deg,#f8f6ff,#effcff);box-shadow:inset 0 0 25px rgba(116,71,247,.06)}

/* Achievement discovery states */
.achievement-summary{display:grid;grid-template-columns:1fr minmax(220px,430px);align-items:center;gap:30px;margin-bottom:30px;padding:25px 30px;border-radius:24px;color:white;background:linear-gradient(125deg,#332574,#126478);box-shadow:var(--shadow)}.achievement-summary h2{font-size:1.6rem;margin:5px 0}.achievement-progress{height:18px;border:3px solid rgba(255,255,255,.35);border-radius:99px;background:rgba(0,0,0,.22);overflow:hidden}.achievement-progress>div{width:0;height:100%;background:linear-gradient(90deg,#ffc94a,#7df3a5);transition:width .5s ease}.badge-card{position:relative;animation:badgeArrive .45s ease both;animation-delay:var(--badge-delay,0s)}.badge-card.locked{filter:none;opacity:1;color:#626a81;background:#f0f2f8;border-style:dashed}.badge-card.locked .badge-icon{color:#747b91;background:#dfe3ed;border-color:#f5f6f9;box-shadow:none}.badge-card.earned{overflow:hidden}.badge-card.earned::before{content:"Collected";position:absolute;right:-35px;top:18px;width:130px;padding:4px;color:#594000;background:#ffc94a;transform:rotate(35deg);font-size:.72rem;font-weight:700}.badge-card.earned:hover .badge-icon{transform:translateY(-5px) rotate(4deg)}.badge-icon{transition:transform .2s ease}@keyframes badgeArrive{from{opacity:0;transform:translateY(14px)}}.badge-burst.owned{color:#48506a;background:#eef0f5}

@media(max-width:750px){.achievement-summary{grid-template-columns:1fr}.level-stat{min-width:0!important}.forest-canopy::after{display:none}.profile-stats{width:100%}}
@media(max-width:420px){.container{width:min(calc(100% - 22px),var(--content))}.nav-wrap{gap:8px}.player-chip{padding-right:8px}.xp-mini{font-size:.82rem}.lesson-topbar .container{gap:10px}.lesson-progress-meta{font-size:.7rem}.lesson-main{width:min(calc(100% - 20px),820px);padding-top:24px}.lesson-card{padding:21px;border-radius:23px}.answer-option{padding:12px;gap:9px}.match-row{padding:12px}.profile-banner{gap:10px;padding:15px}.profile-avatar{width:60px;height:60px}.profile-stats{gap:7px}.stat-pill{padding:9px}.reset-confirm>div{display:grid}.reset-confirm .btn{width:100%}}
