/* v05 — user-selected purple #6244BB, white reading surfaces, large original character scenes.
   Loaded last on the home and Aro pages; game files and illustrations are unchanged. */
:root{--paper:#fff;--navy:#122e53;--ink:#263e55;--muted:#52667a;--line:#e4dcec;--blue:#f4f0ff;--gold:#ffcf42;--action:#6244bb;--action-hover:#4f329e}
body{background:#fff}
.review-strip{background:#122e53;color:#fff}
.site-header,.home .site-header{height:88px}
.site-header nav a,.site-header nav .guide-link{color:var(--navy)}
.wordmark-domain{color:var(--action)}
.header-button{background:#f3eeff;border:1px solid #dbcef1;color:#5737a9;font-size:14px}
.header-button:hover{background:#e8defa}
.primary{background:var(--action);color:#fff;box-shadow:0 4px 0 #3c247e}
.primary:hover{background:var(--action-hover);box-shadow:0 5px 0 #3c247e}
.button{border-radius:14px;min-height:54px;padding:14px 24px}
.text-link{color:#5737a9}
:is(a,button,input,select,summary):focus-visible,.home :is(a,button,input,select):focus-visible{outline:3px solid #6244bb;outline-offset:5px}
h2{font-weight:650}

/* The first screen tells a story at a readable scale, including on a phone. */
.home-welcome{grid-template-columns:42% 58%;padding-block:28px 58px;gap:0;align-items:center}
.welcome-copy{padding-right:28px}
.welcome-copy .eyebrow{font-size:13px;font-weight:650;letter-spacing:0;gap:8px;margin-bottom:20px}
.tiny-sun{color:#6244bb;font-size:24px}
.home .welcome-copy h1{font-size:clamp(48px,4.9vw,69px);font-weight:650;line-height:1.035;letter-spacing:-2.4px;margin-bottom:24px}
.home .welcome-copy h1 em{font-weight:650;font-style:normal;color:var(--action)}
.welcome-copy>p:not(.eyebrow):not(.welcome-note){font-size:18px;line-height:1.6;max-width:430px;margin-bottom:26px}
.welcome-copy .button{min-height:56px;font-size:19px;gap:28px;padding-inline:24px}
.welcome-note{font-size:13px;color:#475e73;margin-top:17px}
.welcome-adventure{display:block;position:relative;margin:0 0 0 8px;border-radius:30px;background:#6244bb;padding:10px 10px 0;box-shadow:10px 12px 0 #e8defa;isolation:isolate}
.welcome-adventure>img{width:100%;height:auto;aspect-ratio:1586/992;object-fit:contain;border-radius:23px 23px 6px 6px}
.welcome-adventure-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;color:white;padding:18px 19px 19px}
.welcome-adventure-caption small{display:block;font-size:11px;letter-spacing:.13em;color:#f1ebff;font-weight:650;margin-bottom:3px}
.welcome-adventure-caption strong{font:500 24px/1.25 Fredoka,sans-serif}
.scene-go{background:#ffcf42;color:#122e53;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:30px;flex-shrink:0;transition:transform .2s}
.welcome-adventure:hover .scene-go{transform:translate(2px,-2px)}
.adventure-sticker{position:absolute;left:-21px;top:-21px;z-index:1;transform:rotate(-9deg);background:#ffcf42;color:#122e53;padding:16px 19px;border-radius:50%;font:500 16px/1.1 Fredoka,sans-serif;box-shadow:0 3px 0 #c59119;text-align:center}

/* A compact search followed by full, colorful scenes. */
.collection-section{padding-block:34px 64px;border-top:2px solid #e9e1f5}
.collection-heading h2{font-size:37px;line-height:1.12;max-width:420px;font-weight:650}
.field input,.field select{background:#fff;border:1px solid #b7a8cb;border-radius:12px}
.field input:focus,.field select:focus{border-color:#6244bb}
.collection-meta{color:#50647a}
.adventure-card{background:#fff;border:1px solid #e1d8ed;border-radius:22px;box-shadow:0 4px 0 #eee7f8}
.adventure-card:hover{border-color:#9c82d8;box-shadow:0 8px 22px #6244bb1a}
.adventure-picture{background:#f7f3fc}
.age-badge{background:#fff;color:#153b67;border:1px solid #e9e1f5;font-size:13px}
.adventure-body .skill-label{color:#5737a9}
.adventure-body h3{font-weight:650}
.adventure-action{color:#3b536c}
.adventure-link{background:#6244bb;border-color:#6244bb;color:white;border-radius:12px}
.adventure-link:hover{background:#4f329e}
.adventure-link.material-link{color:#5737a9;background:#fff;border-color:#cbbce3}
.adventure-link.material-link:hover{background:#f3eeff}
.adventure-set{background:#f4effc;border:1px solid #d9c9ef;grid-template-columns:1.12fr 1fr}
.adventure-set .adventure-picture{background:transparent;border-radius:0}
.adventure-set .adventure-body{padding:28px 32px}
.adventure-set h3{font-size:41px}
.set-preview{border-color:#d9c9ef}
.set-preview p{color:#3b5672}
.set-preview strong{color:#163c68}
.empty-state,.load-error{background:#f8f5fd;border-color:#cbbce3}

/* White papers remain white; their surroundings can carry the world's color. */
.home-library{background:#f7f3fc;border-block:1px solid #e5d9f4;padding-block:58px 64px}
.home-library h2{font-size:46px;font-weight:650}
.home-library .eyebrow{color:#6244bb}
.home-material,.material{background:white;border-color:#ddd1ed;border-radius:22px;box-shadow:0 4px 0 #eee6f8}
.paper-preview,.peach{background:#ffe29b}
.sky-tint .paper-preview,.blue{background:#9dd8ff}
.sage-tint .paper-preview,.mint{background:#b9e7c9}
.butter{background:#ffe78c}
.lilac{background:#d8c8fb}
.sand{background:#bddcfb}
.home-material-copy h3,.material h3{font-weight:650}
.home-material-copy>p:not(.eyebrow){color:#445c74}
.home-material-copy .text-link{border-color:#e4dcec}
.home .text-link small{color:#52667a}
.home-material-copy .eyebrow{color:#5737a9}
.world-door{margin-top:64px;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:56% 44%;background:#122e53;color:#fff}
.world-door>img{height:100%;width:100%;object-fit:cover;object-position:35% center;min-height:320px}
.world-copy{padding:38px 38px 40px}
.world-copy .eyebrow{color:#ffdb6e}
.world-copy h2{font-size:39px;color:white;font-weight:600}
.world-copy>p:not(.eyebrow){font-size:16px;line-height:1.65;color:#e1edff;margin-block:18px 24px}
.yellow-button{background:#ffcf42;color:#122e53;box-shadow:0 4px 0 #b9860c;font-size:17px}
.yellow-button:hover{background:#ffdc72}
.home-grown-ups{padding-block:64px}
.grown-up-notes,.grown-up-notes>div{border-color:#e4dcec}
.grown-up-notes span{color:#6244bb;font-weight:650}
.grown-up-notes p{color:#445c74}
.grown-up-heading h2{font-weight:650}

/* Aro's page uses the same family, with its original cloud illustration. */
.set-page .hero{grid-template-columns:40% 60%;padding-block:24px 40px}
.set-page .hero-copy{padding-right:28px}
.set-page .hero h1{font-size:clamp(56px,5.6vw,80px);font-weight:650;line-height:1.015}
.set-page .hero h1>span:first-child{font-weight:550;color:#6244bb;font-style:normal}
.set-page .title-dot{color:#6244bb}
.set-page .hero-art{border-radius:24px 24px 4px 4px;aspect-ratio:1586/992;object-fit:contain}
.set-page .hero-visual{display:block;border-radius:30px;background:#6244bb;padding:10px 10px 0;box-shadow:9px 11px 0 #e8defa}
.set-page .scene-caption{position:static;width:100%;margin:0;background:#6244bb;color:white;box-shadow:none;border:0;border-radius:0 0 24px 24px;padding:17px 14px;gap:14px}
.set-page .scene-caption small{color:#f1ebff;font-size:12px}
.set-page .scene-caption strong{font-size:20px}
.set-page .caption-icon{background:#ffcf42;color:#122e53}
.set-page .scene-caption:focus-visible{outline-color:white;outline-offset:-4px}
.hero-description{font-size:18px}
.set-page .steps{background:#f4effc;border:1px solid #dfd1f2;border-radius:18px;padding:23px 26px;gap:24px}
.step-number{font:500 22px/1 Fredoka,sans-serif;background:#6244bb;color:white;min-width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.set-page .materials-section{padding-top:58px;background:#fff}
.filters button{background:#fff;border-color:#cbbce3;font-size:13px}
.filters button[aria-pressed=true],.age-choices button[aria-pressed=true]{background:#6244bb;border-color:#6244bb}
.material-kind{color:#5737a9}
.material-links a{color:#5737a9;border-color:#e4dcec}
.material-visual .preview-tag{background:white;color:#5737a9;font-weight:600}
.parent-section{background:#f8f4fd}
.parent-intro>p:not(.eyebrow){background:transparent}
.parent-intro .eyebrow{color:#6244bb}
.parent-details details,.parent-download{border-color:#d9cbea}
.related{background:white;border-color:#e0d5ee;box-shadow:0 4px 0 #eee7f8}
.related-copy strong{font-weight:650}
.preview-stage{background:#eee7f8}
.small-button{background:white}
footer{border-color:#e4dcec}

@media(min-width:1101px){
 .collection-section{grid-template-columns:1fr 1.65fr;column-gap:30px}
}
@media(max-width:1100px){
 .home-welcome{grid-template-columns:44% 56%;padding-block:24px 42px}
 .home .welcome-copy h1{font-size:clamp(46px,5.8vw,63px)}
 .welcome-copy>p:not(.eyebrow):not(.welcome-note){font-size:16px}
 .welcome-adventure-caption{padding:15px 12px}
 .welcome-adventure-caption strong{font-size:20px}
 .adventure-sticker{left:-13px;top:-15px;font-size:14px;padding:13px 16px}
 .world-copy{padding:28px}
 .world-copy h2{font-size:33px}
 .set-page .hero{grid-template-columns:43% 57%}
 .set-page .hero h1{font-size:57px}
 .set-page .scene-caption strong{font-size:17px}
 .set-page .scene-caption small{font-size:11px}
 .adventure-set h3{font-size:34px}
}
@media(max-width:760px){
 .site-header,.home .site-header{height:auto;min-height:94px;padding-block:12px 6px;gap:2px}
 .site-header nav,.home .site-header nav{gap:20px;font-size:14px;flex-wrap:wrap;width:100%}
 .site-header nav a,.home .site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
 .home-welcome{grid-template-columns:1fr;gap:15px;padding-block:12px 32px}
 .welcome-copy{display:contents}
 .welcome-copy .eyebrow{grid-row:1;font-size:12px;margin:0;gap:6px}
 .tiny-sun{font-size:19px}
 .home .welcome-copy h1{grid-row:2;font-size:clamp(42px,10.8vw,67px);letter-spacing:-1.8px;margin:0;line-height:1.02}
 .welcome-adventure{grid-row:3;margin:6px 7px 0 0;border-radius:22px;padding:6px 6px 0;box-shadow:6px 7px 0 #e8defa}
 .welcome-adventure>img{border-radius:17px 17px 4px 4px}
 .adventure-sticker{display:none}
 .welcome-adventure-caption{padding:11px 10px 12px;gap:7px}
 .welcome-adventure-caption small{font-size:9px;letter-spacing:.1em}
 .welcome-adventure-caption strong{font-size:clamp(16px,4.5vw,23px)}
 .scene-go{width:38px;height:38px;font-size:25px}
 .welcome-copy>p:not(.eyebrow):not(.welcome-note){grid-row:4;font-size:15px;line-height:1.55;margin:5px 0 0;max-width:100%}
 .welcome-copy .button{grid-row:5;font-size:18px;min-height:52px;margin-top:0;justify-self:stretch}
 .welcome-note{grid-row:6;font-size:12px;text-align:center;margin:0}
 .collection-section{padding-block:25px 38px}
 .collection-heading h2{font-size:33px;max-width:none}
 .collection-heading{margin-bottom:18px}
 .adventure-set .adventure-body{padding:24px}
 .home-library{padding-block:38px}
 .home-library h2{font-size:36px}
 .world-door{grid-template-columns:1fr;margin-top:38px;border-radius:22px}
 .world-door>img{min-height:0;height:auto;aspect-ratio:1672/941;object-fit:contain}
 .world-copy{padding:25px}
 .world-copy h2{font-size:35px}
 .world-copy>p:not(.eyebrow){font-size:15px}
 .home-grown-ups{padding-block:40px}
 .set-page .hero{grid-template-columns:1fr;padding-top:12px;padding-bottom:30px;gap:17px}
 .set-page .hero-copy{display:contents;padding:0}
 .set-page .hero .eyebrow{font-size:11px;gap:5px;line-height:1.5}
 .set-page .hero h1{font-size:48px;letter-spacing:-1.5px}
 .set-page .hero h1>span:first-child{display:block;font-size:24px;margin-bottom:5px;letter-spacing:0}
 .set-page .hero h1 br{display:none}
 .set-page .hero-visual{margin:0 7px 5px 0;padding:6px 6px 0;border-radius:23px;box-shadow:6px 7px 0 #e8defa}
 .set-page .hero-art{border-radius:18px 18px 4px 4px}
 .set-page .scene-caption{padding:12px 9px;gap:10px;border-radius:0 0 18px 18px}
 .set-page .scene-caption strong{font-size:16px}
 .set-page .scene-caption small{font-size:11px}
 .set-page .hero-description{font-size:16px;line-height:1.6}
 .set-page .hero-actions{gap:6px 18px}
 .set-page .hero-actions .button{width:100%;font-size:18px;min-height:52px}
 .set-page .hero-actions .text-link{font-size:14px}
 .set-page .game-facts{margin-top:0}
 .set-page .steps{padding:20px;gap:18px}
 .set-page .steps strong{font-size:14px}
 .set-page .steps p span{font-size:12px}
 .set-page .materials-section{padding-top:40px}
 .filters button{font-size:12px}
 .set-page .parent-intro>p:not(.eyebrow){background:#f8f4fd}
 .set-page .parent-intro>img{right:-12px}
 .home-game-head .small-button,.game-dialog-head .small-button{border-color:#cbbce3}
}
@media(max-width:380px){
 .site-header nav,.home .site-header nav{gap:16px;font-size:13px}
 .home .welcome-copy h1{font-size:40px}
 .welcome-copy .eyebrow{font-size:11px}
 .set-page .hero h1{font-size:43px}
 .set-page .hero .eyebrow{font-size:10px}
 .set-page .scene-caption strong{font-size:15px}
 .collection-heading h2{font-size:31px}
 .adventure-set h3{font-size:31px}
}
@media(prefers-reduced-motion:reduce){
 .welcome-adventure:hover .scene-go{transform:none}
 .button:hover{transform:none}
}
