:root{color-scheme:dark;--ink:#f5f5e9;--soft:#c4d6d2;--lime:#b7ed5f;--gold:#e7ca75}*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(circle at 55% -10%,#2a4f4c,transparent 40%),radial-gradient(circle at 93% 65%,#333264,transparent 45%),#071014;font:16px/1.5 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.site-head{max-width:1400px;margin:auto;padding:21px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #ffffff30}.brand img{display:block;width:190px;max-width:37vw}.site-head nav{display:flex;gap:24px;flex-wrap:wrap}.site-head nav a{font-weight:800;font-size:13px;color:var(--soft)}.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--lime)}main{max-width:1220px;margin:0 auto;padding:55px 30px 70px}.eyebrow,.tag{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:2.2px}h1{font-size:clamp(44px,7vw,78px);line-height:1;margin:7px 0 15px;letter-spacing:-3px}h1 span{color:var(--lime)}.lead{color:var(--soft);font-size:19px;margin:0 0 38px}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.game-card{overflow:hidden;border:1px solid #8fa59080;border-radius:18px;background:linear-gradient(145deg,#1e313a,#0e1b23);box-shadow:0 24px 55px #0007}.game-card .art{height:270px;display:grid;place-items:center;position:relative;overflow:hidden}.game-card .art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,#b5ffff32,transparent 57%)}.space-card .art{background:radial-gradient(circle at 70% 40%,#bd8dd050,transparent 24%),radial-gradient(circle at 30% 80%,#598da050,transparent 45%),#101c3b}.forest-card .art{background:radial-gradient(circle at 50% 50%,#95c7466e,transparent 58%),linear-gradient(#284438,#10211d)}.game-card img{position:relative;width:65%;height:72%;object-fit:contain;filter:drop-shadow(0 16px 18px #000a)}.forest-card img{width:45%;height:85%}.copy{padding:29px}.copy h2{font-size:29px;line-height:1.1;margin:8px 0 10px}.copy p{color:var(--soft);min-height:72px}.button{display:inline-block;background:var(--lime);color:#17251c;border-radius:10px;padding:12px 18px;font-weight:900;margin-top:8px}.button:hover{background:#d1ff80}footer{max-width:1220px;margin:auto;padding:20px 30px 40px;border-top:1px solid #ffffff2e;display:flex;gap:22px;align-items:center;color:var(--soft);font-size:13px}footer p{margin-left:auto}@media(max-width:750px){.site-head{padding:16px;align-items:flex-start;flex-direction:column}.site-head nav{gap:13px}main{padding:35px 16px}.game-grid{grid-template-columns:1fr}.game-card .art{height:210px}.copy{padding:22px}.copy p{min-height:0}footer{flex-wrap:wrap;padding:22px 16px}}@media(max-width:380px){.site-head nav a{font-size:11px;gap:8px}.lead{font-size:16px}}
.sproutleap-art{position:relative;width:245px;height:245px;max-width:75%;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 16px 18px #000a)}
.sanctuary-card .art{background:radial-gradient(ellipse at 45% 100%,#77af6260,transparent 65%),#172737}.sanctuary-orbit{position:absolute;inset:20px 10%}.sanctuary-orbit i{position:absolute;width:98px;height:98px;border-radius:50%;background:radial-gradient(circle at 25% 20%,#d6ebb4,#749775 40%,#213f43 80%);box-shadow:0 0 40px #a7d97620;left:10%;top:5px}.sanctuary-orbit i:nth-child(2){width:65px;height:65px;left:55%;top:14px;filter:hue-rotate(90deg)}.sanctuary-orbit i:nth-child(3){width:42px;height:42px;left:83%;top:70px;filter:hue-rotate(240deg)}.sanctuary-city{position:absolute;bottom:10px;left:12%;font-size:92px;color:#829786;letter-spacing:9px;text-shadow:0 12px 18px #0008}.sanctuary-sprout{position:absolute;bottom:9px;left:55%;width:155px;height:155px;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 15px 16px #0009)}
@media(max-width:750px){.sproutleap-art{width:195px;height:195px}}
.tower-card .art{background:radial-gradient(circle at 55% 27%,#d6dfab6b,transparent 38%),linear-gradient(#263d56,#446d72 70%,#273d3a)}.tower-art{position:absolute;width:150px;height:255px;bottom:-35px;left:47%;transform:translateX(-50%) perspective(500px) rotateY(-17deg)}.tower-shaft{position:absolute;inset:0 25px;background:linear-gradient(90deg,#293f50,#719382 40%,#41646c 75%,#243b50);border:7px solid #304855;border-bottom:0;border-radius:55px 55px 0 0;box-shadow:18px 12px 35px #07111c90}.tower-shaft::before{content:"";position:absolute;inset:-19px -14px auto;height:22px;background:repeating-linear-gradient(90deg,#c4c69f 0 22px,#667d7e 22px 28px);border-radius:5px}.tower-shaft i{position:absolute;left:39px;width:21px;height:30px;border-radius:14px 14px 3px 3px;background:#f8d890;box-shadow:0 0 22px #f7dd8e}.tower-shaft i:nth-child(1){top:35px}.tower-shaft i:nth-child(2){top:100px}.tower-shaft i:nth-child(3){top:167px}.tower-path{position:absolute;left:-9px;right:-8px;bottom:21px;height:105px;border:20px solid #bdbb8b;border-left-color:#e2d6a2;border-right-color:#627d73;border-radius:50%;transform:rotate(-21deg);box-shadow:0 18px 18px #142632aa}.tower-sproutleap{position:absolute;width:100px;height:100px;left:calc(47% + 19px);bottom:27px;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 8px 7px #06151dcc)}@media(max-width:750px){.tower-art{transform:translateX(-50%) perspective(500px) rotateY(-17deg) scale(.8);transform-origin:bottom}.tower-sproutleap{width:80px;height:80px}}
.spell-card .art{background:radial-gradient(circle at 50% 55%,#9675e87c,transparent 45%),radial-gradient(circle at 80% 20%,#4ad9d455,transparent 27%),linear-gradient(145deg,#121638,#201c4e 55%,#12374a)}.spell-galaxy{position:relative;width:240px;height:190px;display:grid;place-items:center}.spell-galaxy img{z-index:2;width:150px;height:120px;filter:drop-shadow(0 10px 15px #000b);animation:spellship-float 3s ease-in-out infinite}.letter-orbit{position:absolute;width:210px;height:100px;display:flex;align-items:center;justify-content:space-around;border:2px dashed #c8f4869c;border-radius:50%;color:#ebdfff;font:900 19px Georgia;transform:rotate(-20deg);text-shadow:0 0 12px #d9cdff}.letter-orbit i{font-style:normal;color:#c8f486}.spell-star{position:absolute;color:#fff1a6;text-shadow:0 0 17px #fff2a5;font-size:26px}.star-one{left:22%;top:22%}.star-two{right:18%;bottom:18%;font-size:32px}@keyframes spellship-float{50%{transform:translateY(-9px) rotate(-3deg)}}
.spell-card .art{background:radial-gradient(circle at 50% 55%,#9675e87c,transparent 45%),radial-gradient(circle at 80% 20%,#4ad9d455,transparent 27%),linear-gradient(145deg,#121638,#201c4e 55%,#12374a)}.word-cloud{position:relative;width:240px;height:190px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:clamp(45px,7vw,76px);font-weight:1000;text-shadow:0 8px 20px #0009}.word-cloud span:nth-child(1){color:#c8f486;transform:rotate(-12deg)}.word-cloud span:nth-child(2){color:#ffd47a;transform:translateY(-20px) rotate(7deg)}.word-cloud span:nth-child(3){color:#9ee9ff;transform:rotate(13deg)}.word-cloud span:nth-child(4){position:absolute;right:17%;top:18%;color:#fff1a6;font-size:28px;text-shadow:0 0 17px #fff2a5}
.spell-card .art{background:radial-gradient(circle at 50% 55%,#c8f48655,transparent 45%),radial-gradient(circle at 80% 20%,#ffd47a45,transparent 27%),linear-gradient(145deg,#18333d,#25354b 55%,#344237)}
.world-card .art{background:radial-gradient(circle at 50% 34%,#fff0b35a,transparent 13%),radial-gradient(circle at 25% 70%,#71e3ba62,transparent 25%),radial-gradient(circle at 80% 65%,#b0e87462,transparent 28%),linear-gradient(#394b77 0%,#b38b8b 55%,#426c57 56%,#1e493e 100%)}.world-art{position:relative;width:230px;height:180px;display:grid;place-items:center;color:#f5d886;font:bold 30px Georgia;text-shadow:0 5px 12px #171b3f}.world-art::before{content:"";position:absolute;bottom:-35px;width:230px;height:92px;border-radius:50%;background:linear-gradient(145deg,#a5c970,#3c7759);box-shadow:0 -13px 30px #cdf3a337}.world-art::after{content:"";position:absolute;left:50%;bottom:10px;width:80px;height:100px;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 10px 10px #062421b5);z-index:2}.world-art span,.world-art i{position:absolute;color:#ffecad;font-size:27px;font-style:normal;text-shadow:0 0 18px #ffe7a7;animation:worldspark 3s ease-in-out infinite}.world-art span{left:8%;top:16%}.world-art i{right:11%;top:34%;animation-delay:1.1s}@keyframes worldspark{50%{transform:translateY(-8px) rotate(22deg)}}
.trig-card .art{background:radial-gradient(ellipse at 53% 76%,#c0e5a458,transparent 28%),radial-gradient(circle at 73% 25%,#efe1ff34,transparent 6%),linear-gradient(#26254c,#615078 56%,#315759 57%,#203b3c)}.trig-art{position:relative;width:min(88%,390px);height:210px}.trig-equations{position:absolute;top:10px;right:5px;display:grid;gap:6px;color:#ddf5d0;font:900 13px Georgia;text-shadow:0 0 12px #a6f4d3}.trig-equations span{padding:5px 9px;border:1px solid #d3eeb94c;border-radius:8px;background:#1a243b9c;transform:rotate(-3deg)}.trig-equations span:nth-child(2){transform:translateX(-12px) rotate(2deg);color:#c9edff}.trig-equations span:nth-child(3){color:#ffe1a2}.trig-bridge{position:absolute;left:11%;right:9%;bottom:34px;height:64px;border-top:7px solid #f2d591;border-radius:0 0 52% 52%;transform:skewY(-12deg);filter:drop-shadow(0 7px 12px #f5dfa966)}.trig-bridge::before{content:"";position:absolute;left:0;right:0;top:-16px;height:7px;background:repeating-linear-gradient(90deg,#bfae83 0 28px,transparent 28px 34px)}.trig-sprout{position:absolute;left:6%;bottom:15px;width:115px;height:135px;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 10px 12px #09151b)}.trig-spark{position:absolute;left:49%;top:67px;color:#ffec9c;font-size:28px;font-style:normal;text-shadow:0 0 18px #fff2a4;animation:trig-float 2s ease-in-out infinite}@keyframes trig-float{50%{transform:translateY(-9px) rotate(16deg)}}
.algebra-card .art{background:radial-gradient(ellipse at 49% 70%,#c8f48640,transparent 42%),linear-gradient(#302b5b,#665978 54%,#3b6b62 55%,#203b38)}.algebra-art{position:relative;width:min(88%,410px);height:210px}.algebra-eq{position:absolute;right:3%;top:23px;padding:10px 15px;border:1px solid #d6efb357;border-radius:12px;background:#182638d9;color:#e8fac9;font:900 25px Georgia;box-shadow:0 0 23px #c8f48626;transform:rotate(-4deg)}.algebra-eq b{color:#ffdb8d;padding:0 5px}.algebra-bridge{position:absolute;left:5%;right:6%;bottom:31px;height:75px;border-top:8px solid #edd6a2;border-radius:0 0 46% 44%;transform:skewY(-10deg);filter:drop-shadow(0 8px 11px #ffe2a858)}.algebra-bridge::before{content:"";position:absolute;left:1%;right:2%;top:-17px;height:7px;background:repeating-linear-gradient(90deg,#d3bd8f 0 30px,transparent 30px 36px)}.algebra-sprout{position:absolute;left:8%;bottom:13px;width:112px;height:135px;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 9px 11px #09151b)}.algebra-art>i{position:absolute;left:48%;top:92px;color:#fff2a2;font-size:27px;text-shadow:0 0 16px #fff1a5;animation:trig-float 2s ease-in-out infinite}
.defense-card .art{background:radial-gradient(circle at 50% 40%,#63834a,#122c23)}.defense-card .art img{width:100%;height:100%;object-fit:cover;filter:none}
[hidden]{display:none!important}.game-filters{padding:22px;margin:0 0 28px;border:1px solid #8fa59060;border-radius:14px;background:#14262bbf}.filter-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.filter-heading h2{margin:0;font-size:19px}.filter-heading p{margin:0;color:var(--gold);font-size:13px;font-weight:700}.filter-hint{font-size:13px;color:var(--soft);margin:7px 0 16px}.tag-filters,.game-tags{display:flex;gap:8px;flex-wrap:wrap}.tag-filters button,.game-tags button,.game-tags span{font:700 13px/1.4 Arial,sans-serif;color:var(--soft);border:1px solid #839d8c80;border-radius:999px;background:#1e3339;padding:8px 13px}.tag-filters button,.game-tags button{cursor:pointer}.tag-filters button:hover,.game-tags button:hover{border-color:var(--lime);color:var(--ink)}.tag-filters button[aria-pressed=true],.game-tags button[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:#17251c}.game-tags{margin:16px 0 10px;gap:6px}.game-tags button,.game-tags span{font-size:11px;padding:5px 10px}.game-filters button:focus-visible,.game-tags button:focus-visible,.no-games button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.no-games{padding:30px 22px;border:1px dashed #8fa59080;border-radius:14px;color:var(--soft)}.no-games button{border:0;background:transparent;color:var(--lime);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0}@media(max-width:750px){.game-filters{padding:16px}.tag-filters button{padding:8px 12px;font-size:12px}.filter-hint{font-size:12px}.filter-heading h2{font-size:17px}}

.learn-card{grid-column:1/-1;display:grid;grid-template-columns:.7fr 1fr}.learn-card .art{height:100%;min-height:275px;background:#dce9d1}.learn-card .copy{padding:34px}.learn-card .copy p{min-height:0}.learn-card .art::before{background:radial-gradient(circle,#ffffff80,transparent 65%)}.learn-art{position:relative;width:210px;height:200px;color:#285a46}.learn-art span{position:absolute;border:2px solid #285a46;background:#fff8e8;padding:12px 25px;border-radius:16px;box-shadow:7px 7px 0 #a4bea2;font:54px Georgia,serif;top:5px;left:10px;transform:rotate(-12deg)}.learn-art span:nth-child(2){font:bold 30px Arial,sans-serif;top:107px;left:68px;transform:rotate(8deg);white-space:nowrap}.learn-art span:nth-child(3){font-size:57px;top:12px;left:131px;border:0;padding:0;background:transparent;box-shadow:none;color:#b58932;transform:rotate(17deg)}@media(max-width:750px){.learn-card{grid-template-columns:1fr}.learn-card .art{height:210px;min-height:0}.learn-card .copy{padding:22px}.learn-art{transform:scale(.8)}}
.ascent-card .art{background:radial-gradient(ellipse at 25% 75%,#217bab80,transparent 50%),radial-gradient(ellipse at 85% 20%,#603f9970,transparent 50%),#0b1530}.ascent-card .art::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 20%,#fff 90%,transparent),radial-gradient(2px 2px at 80% 35%,#8cdfff 90%,transparent),radial-gradient(1px 1px at 68% 80%,#fff 90%,transparent),radial-gradient(1px 1px at 22% 72%,#fff 90%,transparent);background-size:170px 140px}.ascent-card img{height:100%;width:85%;filter:drop-shadow(0 0 25px #70d5ff66)}
.learn-card .art{background:radial-gradient(circle at 50% 45%,#6c9e3266,transparent 65%),#102018}.learn-art{width:250px;height:250px;background:url('../trail/sproutleap-animated.png') 0 0 / 400% 200% no-repeat;filter:drop-shadow(0 15px 17px #020a0677)}@media(max-width:750px){.learn-art{transform:none;width:200px;height:200px}}
/* Compact game directory: artwork, description and launch link in each row. */
main{padding-top:30px;padding-bottom:40px}
h1{font-size:clamp(36px,5vw,54px);letter-spacing:-2px}
.lead{font-size:16px;margin-bottom:22px}
.game-filters{padding:16px 18px;margin-bottom:18px}
.filter-hint{margin-bottom:12px}
.game-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.game-card,.learn-card{grid-column:auto;display:grid;grid-template-columns:150px minmax(0,1fr);border-radius:12px;box-shadow:0 6px 20px #0003}
.game-card:hover{border-color:#b7ed58a0}
.game-card .art,.learn-card .art{height:100%;min-height:150px;align-self:stretch}
.art-scene{position:absolute;width:300px;height:270px;left:50%;top:50%;transform:translate(-50%,-50%) scale(.56);display:grid;place-items:center}
.game-card .art-scene img{width:80%;height:90%;object-fit:contain}
.defense-card .art-scene img{width:300px;height:270px;object-fit:cover}
.learn-art,.sproutleap-art{width:245px;height:245px;max-width:none;transform:none}
.game-card .copy,.learn-card .copy{min-width:0;padding:16px 20px;display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:24px;align-content:center}
.copy>.tag,.copy>h2,.copy>p,.copy>.game-tags{grid-column:1}
.copy>.tag{font-size:10px;letter-spacing:1.4px}
.copy h2{font-size:22px;line-height:1.2;margin:4px 0 6px}
.copy p,.learn-card .copy p{min-height:0;font-size:14px;line-height:1.45;margin:0}
.game-tags{margin:9px 0 0;gap:5px}
.game-tags button,.game-tags span{font-size:10px;padding:3px 9px}
.copy>.button{grid-column:2;grid-row:1/5;align-self:center;justify-self:stretch;text-align:center;font-size:13px;line-height:1.4;padding:10px 12px;margin:0}
@media(max-width:750px){
 main{padding:24px 16px 30px}
 .game-card,.learn-card{grid-template-columns:110px minmax(0,1fr)}
 .game-card .art,.learn-card .art{min-height:130px;height:100%}
 .art-scene{transform:translate(-50%,-50%) scale(.42)}
 .game-card .copy,.learn-card .copy{padding:13px 14px;grid-template-columns:minmax(0,1fr);gap:0}
 .copy h2{font-size:19px}
 .copy>.button{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px;padding:7px 12px}
 .copy>.tag{font-size:9px;letter-spacing:.7px}
 .copy p{font-size:13px}
}
@media(max-width:450px){
 .game-card,.learn-card{grid-template-columns:80px minmax(0,1fr)}
 .art-scene{transform:translate(-50%,-50%) scale(.3)}
 .game-card .copy,.learn-card .copy{padding:12px}
 .copy h2{font-size:17px}
 .game-tags{gap:4px}
 .game-tags button{font-size:10px;padding:3px 7px}
}
@media(prefers-reduced-motion:reduce){.art-scene *{animation:none!important}}
.copy>.button{max-width:130px;justify-self:end;width:100%}
@media(max-width:750px){.copy>.button{width:auto;justify-self:start}.game-tags button{min-height:28px}}

.art-scene .hub-character{position:relative;width:120px;height:120px;max-width:100%;margin:auto;z-index:2}
@media(max-width:750px){.art-scene .hub-character{width:85px;height:85px}}

/* One directory for arcade and learning games. */
.copy>.suggested-ages{color:#c7dca7;font-size:12px;margin-top:7px}
.art-scene .hub-character{width:245px;height:245px;max-width:none}
@media(min-width:751px){.copy>.button{grid-row:1/6}}
@media(max-width:750px){.art-scene .hub-character{width:245px;height:245px}.copy>.suggested-ages{font-size:11px}.copy>.button{grid-row:auto}}
.directory-controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:14px}.filter-field{display:grid;gap:6px}.filter-field label{font-size:12px;font-weight:700}.filter-field select{font:inherit;font-size:13px;background:#1e3339;color:var(--ink);border:1px solid #839d8c80;border-radius:8px;padding:9px 12px;min-width:125px}
.directory-controls button{cursor:pointer;background:var(--lime);color:#17251c;border:0;border-radius:8px;padding:10px 16px;font:700 13px Arial}.directory-controls :focus-visible,#additional-filters summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#additional-filters{margin-top:14px}#additional-filters summary{cursor:pointer;color:var(--soft);font-size:13px;font-weight:700}#additional-filters[open]{padding-bottom:6px}.age-hint{font-size:12px;color:var(--soft);margin:12px 0 0}
@media(max-width:450px){.directory-controls{gap:9px}.filter-field{flex:1;min-width:0}.filter-field select{min-width:0;width:100%;padding:9px}.directory-controls button{flex-basis:100%;padding:8px}.age-hint{font-size:11px}.filter-heading h2{font-size:16px}.filter-heading p{white-space:nowrap;font-size:11px}}
