/* Shared arcade identity. Scoped to avoid changing the existing game engines. */
:root { --arcade-ink:#242035; --arcade-purple:#6938e8; --arcade-muted:#6e687d; --arcade-line:#e2dfeb; --arcade-paper:#f8f7fc; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
.arcade-home { background:var(--arcade-paper); color:var(--arcade-ink); font-family:'DM Sans',sans-serif; }
.arcade-home h1,.arcade-home h2,.arcade-home h3,.brand,.heading-spark { font-family:'Space Grotesk',sans-serif; }
.site-shell { max-width:1240px; padding:0 40px; margin:auto; }
.site-header { display:flex; align-items:center; gap:40px; min-height:106px; border-bottom:1px solid var(--arcade-line); margin:0; text-align:left; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--arcade-ink); text-decoration:none; flex-shrink:0; }
.brand-mark { background:var(--arcade-purple); color:white; width:56px; height:56px; border-radius:16px; display:grid; place-content:center; font-size:1.9375rem; line-height:1; letter-spacing:-3px; font-weight:700; position:relative; padding-right:8px; }
.brand-mark span { position:absolute; right:8px; bottom:12px; color:#d2f979; }
.brand-name { font-size:0.875rem; font-weight:700; line-height:1.2; letter-spacing:.02em; }
.site-nav { display:flex; gap:8px; margin-left:auto; }
.site-nav a { padding:10px 17px; border-radius:25px; font-size:0.875rem; color:#655f73; font-weight:600; text-decoration:none; }
.site-nav a:hover,.site-nav .current { background:#ede6fd; color:#5c2fcd; }
.header-note { font-size:0.8125rem; color:var(--arcade-muted); border-left:1px solid var(--arcade-line); padding-left:28px; }
.welcome { display:flex; justify-content:space-between; align-items:center; gap:36px; padding:51px 0 43px; }
.eyebrow { font-size:0.75rem; font-weight:700; letter-spacing:.14em; margin-bottom:13px; color:#6a607d; }
.welcome h1 { font-size:clamp(3rem,5.5vw,4.4rem); font-weight:700; line-height:1.04; letter-spacing:-.065em; position:relative; }
.welcome h1>span:not(.heading-spark) { color:var(--arcade-purple); }
.heading-spark { display:inline-block; color:var(--arcade-purple); font-size:4.125rem; line-height:.7; margin-left:24px; vertical-align:middle; }
.welcome>p { font-size:1.0625rem; line-height:1.8; color:var(--arcade-muted); margin-right:49px; }
.welcome>p strong { display:inline-block; color:var(--arcade-ink); font-weight:500; margin-top:5px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.section-heading h2 { font-size:1.6875rem; letter-spacing:-.045em; line-height:1.2; }
.heading-dot { color:var(--arcade-purple); }
.section-heading>span { color:var(--arcade-muted); font-size:0.875rem; }
.play-grid { display:grid; grid-template-columns:1.75fr 1fr; gap:22px; }
.feature-card { min-height:391px; border-radius:24px; background:#6938e8; overflow:hidden; position:relative; color:#fff; padding:32px; text-decoration:none; display:flex; }
.feature-copy { position:relative; z-index:2; }
.pill { display:inline-block; border:1px solid #ffffff60; border-radius:30px; padding:5px 10px; font-size:0.75rem; font-weight:700; letter-spacing:.08em; }
.feature-card h3 { font-size:2.625rem; line-height:1.05; letter-spacing:-.05em; margin:21px 0 15px; }
.feature-card h3>span { color:#d6fb8b; }
.feature-card p { color:#ece4ff; font-size:1rem; line-height:1.6; }
.card-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; background:white; color:#472299; padding:12px 17px; border-radius:10px; font-size:0.875rem; font-weight:700; margin-top:23px; }
.card-cta>span { font-size:1.4375rem; line-height:1; }
.feature-meta { display:block; font-size:0.75rem; letter-spacing:.09em; margin-top:20px; color:#e0d2ff; }
.feature-meta>span { padding:0 7px; }
.character-deck { position:absolute; right:21px; top:91px; width:264px; height:260px; }
.racer { position:absolute; border:6px solid #ffffff; border-radius:20px; object-fit:cover; width:161px; height:203px; box-shadow:0 15px 30px #3011784d; }
.racer-yoshi { top:0; right:0; transform:rotate(13deg); }
.racer-mario { top:42px; left:4px; transform:rotate(-12deg); }
.deck-label { position:absolute; bottom:-24px; right:7px; color:#35254f; background:#d6fb8b; padding:8px 12px; border-radius:7px; font-size:0.75rem; letter-spacing:.08em; font-weight:700; transform:rotate(-5deg); }
.rank-card { background:#d9f5ad; border-radius:24px; padding:28px; display:flex; flex-direction:column; text-decoration:none; color:#26381d; }
.rank-top { display:flex; justify-content:space-between; align-items:center; }
.rank-card .pill { border-color:#597d364a; font-size:0.75rem; }
.external-arrow { font-size:1.625rem; line-height:1; }
.rank-graphic { display:flex; justify-content:center; gap:8px; margin:24px 0 23px; }
.rank-graphic span { font-family:'Space Grotesk',sans-serif; font-size:2.6875rem; font-weight:700; border:1px solid #6c8a484d; color:#3d532d; background:#e9fbcf; border-radius:12px; width:71px; height:83px; display:grid; place-items:center; transform:rotate(-10deg); }
.rank-graphic span:nth-child(2) { transform:translateY(-7px) rotate(4deg); background:#31442b; color:#d9f5ad; }
.rank-graphic span:nth-child(3) { transform:rotate(12deg); }
.rank-card h3 { font-size:1.6875rem; line-height:1.15; letter-spacing:-.05em; margin-bottom:12px; }
.rank-card p { color:#4e6340; font-size:1rem; line-height:1.6; }
.rank-cta { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #6483474d; padding-top:14px; margin-top:22px; font-size:0.875rem; font-weight:700; }
.rank-cta>span { font-size:1.375rem; }
.external-note { font-size:0.75rem; color:#506442; margin-top:4px; }
.learn-section { margin-top:49px; }
.learn-section .eyebrow { font-size:0.75rem; margin-bottom:8px; }
.study-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.study-card { display:flex; flex-direction:column; padding:25px; border:1px solid var(--arcade-line); border-radius:19px; background:#fff; color:var(--arcade-ink); text-decoration:none; }
.study-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#ffe7dc; color:#9a4825; font-size:2rem; line-height:1; margin-bottom:21px; }
.study-plants .study-icon { background:#e7f3d6; color:#50712c; }
.study-ecosystems .study-icon { background:#eae1ff; color:#6d46b2; }
.study-category { font-size:0.75rem; font-weight:700; letter-spacing:.11em; color:#7c748a; margin-bottom:10px; }
.study-card h3 { font-size:1.5rem; line-height:1.2; letter-spacing:-.035em; margin-bottom:12px; }
.study-card p { flex:1; color:var(--arcade-muted); font-size:1rem; line-height:1.6; max-width:240px; }
.study-bottom { margin-top:24px; padding-top:16px; border-top:1px solid #eeeaf4; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:0.75rem; color:#71687e; }
.study-bottom b { font-size:1.4375rem; color:var(--arcade-ink); line-height:1; }
.watch-section { margin-top:35px; padding:31px; display:flex; align-items:center; gap:24px; color:white; background:#272037; border-radius:19px; }
.youtube-symbol { color:#fff; background:#f45761; border-radius:17px; display:grid; place-items:center; width:66px; height:57px; font-size:1.5625rem; flex-shrink:0; }
.watch-section .eyebrow { color:#cbbcdc; font-size:0.75rem; margin-bottom:5px; }
.watch-section h2 { font-size:1.4375rem; letter-spacing:-.04em; line-height:1.3; margin-bottom:6px; }
.watch-section p:not(.eyebrow) { font-size:0.875rem; color:#c8bfd4; }
.watch-link { margin-left:auto; padding:12px 17px; border:1px solid #64566f; border-radius:9px; color:#fff; text-decoration:none; font-weight:600; font-size:0.875rem; white-space:nowrap; }
.watch-link>span:first-child { padding-left:15px; }
.site-footer { display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:33px 0; margin:29px 0 0; border-top:1px solid var(--arcade-line); text-align:left; }
.site-footer .brand-mark { width:40px; height:40px; font-size:1.5rem; border-radius:11px; }
.site-footer .brand-mark span { right:5px; bottom:8px; }
.site-footer .brand-name { font-size:0.75rem; }
.site-footer p { font-size:0.75rem; color:var(--arcade-muted); }
.site-footer nav { display:flex; gap:20px; margin-left:auto; }
.site-footer a:not(.brand) { font-size:0.75rem; color:var(--arcade-muted); text-decoration:none; }
.site-footer small { width:100%; font-size:0.75rem; color:#7c748a; }
.feature-card,.rank-card,.study-card { transition:transform .2s,box-shadow .2s; }
.feature-card:hover,.rank-card:hover,.study-card:hover { transform:translateY(-4px); box-shadow:0 12px 25px #33255212; }
a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid #ad74f7; outline-offset:5px; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; background:#fff; color:#422080; padding:12px 20px; border-radius:8px; }
.skip-link:focus { top:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1100px) { .character-deck { right:30px; width:285px; } .racer { width:173px; height:218px; } }
@media(max-width:1000px) { .site-shell { padding:0 28px; } .header-note { display:none; } .welcome>p { margin-right:0; } .character-deck { width:190px; right:12px; top:105px; } .racer { width:125px; height:160px; } .racer-mario { top:60px; left:0; } .deck-label { bottom:0; right:0; } .feature-card { padding:25px; } .feature-card h3 { font-size:2.25rem; } .rank-card { padding:24px; } .rank-graphic span { width:57px; height:70px; font-size:2.125rem; } .study-card { padding:21px; } .study-bottom { font-size:0.75rem; } .watch-section { gap:18px; padding:25px; } }
@media(max-width:760px) { .site-header { min-height:92px; gap:16px; } .brand-name { font-size:0.75rem; } .site-nav { gap:0; } .site-nav a { padding:9px 11px; } .welcome { padding:36px 0; gap:20px; } .welcome h1 { font-size:3rem; } .heading-spark { font-size:2.75rem; margin-left:12px; } .welcome>p { font-size:0.875rem; } .play-grid { grid-template-columns:1fr; } .character-deck { width:260px; right:36px; top:85px; } .racer { width:166px; height:211px; } .deck-label { bottom:-20px; } .feature-card h3 { font-size:2.625rem; } .rank-card { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; } .rank-top { grid-column:1/-1; } .rank-graphic { grid-column:2; grid-row:2/4; align-items:center; margin:24px 0 0; } .rank-card>div:nth-child(3) { margin-top:23px; } .rank-cta { grid-column:1; } .external-note { grid-column:1/-1; } .study-grid { gap:12px; } .study-card { padding:18px; } .study-card h3 { font-size:1.3125rem; } .study-bottom { display:block; } .study-bottom b { display:block; margin-top:10px; } .section-heading>span { display:none; } .watch-section { flex-wrap:wrap; } .watch-link { margin-left:84px; } .watch-copy { flex:1; } .site-footer p { display:none; } }
@media(max-width:520px) { .site-shell { padding:0 20px; } .site-header { flex-wrap:wrap; justify-content:space-between; gap:14px; padding:20px 0 15px; } .brand-mark { width:44px; height:44px; font-size:1.6875rem; border-radius:13px; } .brand-mark span { right:6px; bottom:9px; } .site-nav { margin:0; gap:0; } .site-nav a { padding:8px 9px; font-size:0.8125rem; } .brand-name { display:none; } .welcome { display:block; padding:32px 0; } .welcome h1 { font-size:3.0625rem; } .welcome .eyebrow { font-size:0.75rem; } .welcome>p { margin-top:22px; font-size:0.9375rem; line-height:1.6; } .welcome>p br { display:none; } .welcome>p strong { display:block; } .section-heading h2 { font-size:1.5625rem; } .feature-card { min-height:463px; padding:24px; } .feature-card h3 { font-size:2.5rem; margin-top:22px; } .feature-card p { max-width:185px; font-size:0.875rem; } .character-deck { width:160px; top:144px; right:10px; height:237px; } .racer { width:108px; height:140px; border-width:4px; border-radius:13px; } .racer-mario { top:69px; left:0; } .racer-yoshi { top:3px; right:0; } .deck-label { bottom:2px; font-size:0.75rem; padding:6px 8px; } .card-cta { margin-top:93px; } .feature-meta { font-size:0.75rem; } .rank-card { padding:24px; gap:0 10px; } .rank-card h3 { font-size:1.5rem; } .rank-graphic { gap:4px; } .rank-graphic span { width:43px; height:64px; font-size:1.75rem; } .rank-card p { font-size:0.8125rem; } .study-grid { grid-template-columns:1fr; gap:14px; } .study-card { padding:24px; position:relative; } .study-icon { position:absolute; right:22px; top:24px; } .study-category { padding-right:55px; } .study-card h3 { font-size:1.5625rem; } .study-card p { max-width:250px; } .study-bottom { display:flex; font-size:0.75rem; } .study-bottom b { margin:0; } .learn-section { margin-top:35px; } .watch-section { padding:24px; gap:18px; } .youtube-symbol { width:47px; height:43px; font-size:1.25rem; border-radius:12px; } .watch-copy { min-width:180px; } .watch-section h2 { font-size:1.4375rem; } .watch-link { margin-left:0; width:100%; text-align:center; } .site-footer { gap:20px; } .site-footer .brand-name { display:block; } .site-footer nav { gap:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }

/* Keep illustration clear of copy on narrow phones. */
@media(max-width:520px) {
 .feature-card { min-height:485px; }
 .feature-card p { max-width:165px; }
 .character-deck { width:115px; top:222px; right:13px; height:177px; }
 .racer { width:88px; height:113px; }
 .racer-yoshi { width:82px; height:106px; top:0; }
 .racer-mario { top:40px; }
 .deck-label { bottom:0; right:-3px; font-size:0.75rem; letter-spacing:0; white-space:nowrap; }
 .card-cta { margin-top:38px; }
 .feature-meta { max-width:240px; }
}
@media(max-width:360px) {
 .feature-card h3 { font-size:2.1875rem; }
 .character-deck { width:94px; right:5px; }
 .racer { width:75px; height:98px; }
 .racer-yoshi { width:70px; height:92px; }
 .deck-label { display:none; }
 .feature-card p { max-width:150px; }
 .card-cta { margin-top:24px; }
}
@media(max-width:520px) { .deck-label { display:none; } }
@media(max-width:360px) { .character-deck { width:65px; top:242px; right:7px; } .racer { width:64px; height:83px; } .racer-yoshi { display:none; } }
/* Give the featured game enough room on tablets as well as phones. */
@media(min-width:761px) and (max-width:1000px) {
 .play-grid { grid-template-columns:1fr; }
 .feature-card { min-height:390px; padding:32px; }
 .feature-card h3 { font-size:2.625rem; }
 .character-deck { width:280px; right:50px; top:80px; }
 .racer { width:174px; height:220px; }
 .deck-label { bottom:-23px; }
 .rank-card { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
 .rank-top { grid-column:1/-1; }
 .rank-graphic { grid-column:2; grid-row:2/4; align-items:center; margin:24px 0 0; }
 .rank-card>div:nth-child(3) { margin-top:23px; }
 .rank-cta { grid-column:1; }
 .external-note { grid-column:1/-1; }
}
@media(min-width:521px) and (max-width:650px) {
 .feature-card h3 { font-size:2.375rem; }
 .character-deck { width:165px; right:16px; top:123px; }
 .racer { width:113px; height:145px; }
 .deck-label { bottom:8px; }
 .feature-card p { max-width:220px; }
 .study-grid { grid-template-columns:1fr; }
 .study-card { padding:24px; }
 .study-icon { margin-bottom:14px; }
 .study-card p { max-width:none; }
 .study-bottom { display:flex; }
 .study-bottom b { margin:0; }
}
.play-grid>*,.feature-copy,.rank-card>* { min-width:0; }
@media(max-width:360px) { .rank-card { grid-template-columns:1fr; } .rank-graphic { display:none; } .rank-top,.rank-cta,.external-note { grid-column:1; } }