.friends-world{--sky:#fff7f3;--grass:#f3e4df;position:relative;isolation:isolate;width:min(1180px,calc(100% - 32px));margin:0 auto 52px;background:var(--sky);border:1px solid #ead8d2;border-radius:36px;overflow:hidden;color:#242223}
.friends-world *{box-sizing:border-box}.friends-world button{font:inherit;cursor:pointer}.friends-world button:focus-visible{outline:3px solid #242223;outline-offset:5px}.friends-header{position:relative;z-index:2;text-align:center;padding:32px 24px 8px}.friends-language{display:flex;justify-content:center;gap:4px;width:max-content;padding:4px;margin:0 auto 22px;background:#fff;border:1px solid #ded8d3;border-radius:30px}.friends-language button{border:0;border-radius:24px;padding:9px 16px;background:transparent;color:#242223;font-weight:700}.friends-language button[aria-pressed=true]{background:#242223;color:#fff}.friends-kicker{margin:0 0 10px;text-transform:uppercase;font-size:11px;letter-spacing:.18em;font-weight:700;color:#716b67}.friends-title{font:600 clamp(2rem,4.5vw,3.6rem)/1.1 'Fredoka',sans-serif;letter-spacing:-.025em;margin:0 auto 12px;max-width:800px}.friends-title span{color:var(--red)}.friends-subtitle{font-size:18px;margin:0 0 6px}.friends-hint{font-size:14px;color:#4e4948;margin:0}.friends-landscape{position:relative;padding:35px 24px 0}.friends-landscape:before,.friends-landscape:after{content:'';position:absolute;z-index:-1;pointer-events:none;background:#f5e8e1;border-radius:50% 50% 0 0;width:100%;height:270px;bottom:0;left:-24%;transform:rotate(4deg)}.friends-landscape:after{background:#eed5cf;left:35%;height:235px;transform:rotate(-7deg)}.friends-cloud{position:absolute;z-index:-1;width:120px;height:34px;background:#fff;border-radius:50px;opacity:.85;top:135px;left:4%;animation:cloud-drift 7s ease-in-out infinite alternate}.friends-cloud:before,.friends-cloud:after{content:'';position:absolute;background:#fff;border-radius:50%;width:52px;height:52px;left:17px;bottom:7px}.friends-cloud:after{width:65px;height:65px;left:48px;bottom:0}.friends-cloud.right{left:auto;right:4%;top:195px;transform:scale(.75);animation-delay:-3s}.friends-shape{position:absolute;z-index:-1;pointer-events:none;opacity:.65}.friends-shape.star{width:24px;height:24px;background:#df2538;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);top:78px;left:9%;transform:rotate(-14deg)}.friends-shape.circle{width:19px;height:19px;border:4px solid #df2538;border-radius:50%;top:80px;right:13%}.friends-shape.triangle{width:22px;height:22px;background:#242223;clip-path:polygon(50% 0,100% 100%,0 100%);top:212px;left:17%;transform:rotate(15deg)}.friends-pattern{height:12px;opacity:.5;background:repeating-linear-gradient(45deg,transparent 0 7px,#df2538 7px 9px,transparent 9px 16px),repeating-linear-gradient(-45deg,transparent 0 7px,#df2538 7px 9px,transparent 9px 16px);max-width:190px;margin:30px auto 0}.friends-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;position:relative;z-index:1}.friend-slot{min-width:0;position:relative}.friend-button{display:block;position:relative;width:100%;padding:8px 4px 16px;border:0;background:transparent;border-radius:22px;color:#242223;text-align:center}.friend-art{height:270px;display:flex;align-items:flex-end;justify-content:center;position:relative}.friend-art:before{content:'';position:absolute;width:80%;height:65%;bottom:12px;background:var(--glow);filter:blur(25px);opacity:.17;border-radius:50%;transition:opacity .25s}.friend-art:after{content:'';position:absolute;width:54%;height:15px;border-radius:50%;background:#716b67;opacity:.17;bottom:4px;z-index:-1}.friend-image{--art-size:clamp(200px,21vw,250px);display:block;position:relative;width:auto;height:calc(var(--art-size) * var(--scale) * var(--art-factor));margin-bottom:calc(-1 * var(--art-size) * var(--scale) * var(--foot-offset));max-width:none;object-fit:contain;transform-origin:50% 92%;transition:transform .3s;pointer-events:none}.friend-name{display:block;font:600 27px/1.2 'Fredoka',sans-serif;margin:9px 0 3px;transition:color .25s}.friend-role{display:block;font-size:13px;line-height:1.4;min-height:36px}.friend-action{display:inline-block;font-size:12px;font-weight:700;margin-top:7px;border-bottom:1px solid #df2538;padding-bottom:2px}.friend-spark{position:absolute;width:14px;height:14px;background:#df2538;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);right:15%;top:35%;opacity:0;transition:opacity .2s,transform .2s}.friend-spark.second{right:auto;left:13%;top:55%;width:9px;height:9px}.friend-button:focus-visible .friend-image{transform:translateY(-8px) rotate(-2deg)}.friend-button:focus-visible .friend-art:before{opacity:.45}.friend-button:focus-visible .friend-spark{opacity:1}.friends-scroll-controls{display:none}.friends-ground-note{text-align:center;font-size:12px;color:#716b67;padding:14px 0 20px;margin:0}.learning-game{position:relative;z-index:2;padding:28px;margin:0 24px 24px;background:#fffdfa;border:1px solid #ded8d3;border-radius:26px;text-align:center}.learning-game h3{font:600 24px/1.2 'Fredoka',sans-serif;margin:0 0 7px}.game-name{font-size:13px;letter-spacing:.03em;color:#716b67;margin:0 0 13px}.game-question{font-size:17px;font-weight:700;margin:0}.color-options{display:flex;justify-content:center;gap:20px;margin:20px 0 12px}.color-choice{width:74px;height:74px;border:4px solid #fff;border-radius:50%;background:radial-gradient(circle at 32% 25%,#ffffff70,transparent 48%),var(--ball);box-shadow:0 4px 0 #00000016,0 0 0 1px #ded8d3;transition:transform .2s;position:relative}.color-choice:after{content:'';position:absolute;inset:12px;border:2px solid #ffffff45;border-radius:50%}.color-choice[aria-disabled=true]{cursor:default}.game-feedback{min-height:25px;font-weight:700;color:#242223;margin:12px 0}.play-again{border:1px solid #df2538;border-radius:24px;background:#df2538;color:white;padding:10px 22px;min-height:44px;font-weight:700}.game-celebration{position:absolute;inset:0;overflow:hidden;pointer-events:none}.celebration-star{position:absolute;width:14px;height:14px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);background:var(--color);left:var(--left);top:48%;animation:celebrate 1.1s ease-out forwards}.friend-dialog{width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #ded8d3;border-radius:28px;background:#fffdfa;color:#242223;overflow:auto;box-shadow:0 25px 90px #24222330}.friend-dialog::backdrop{background:#24222370;backdrop-filter:blur(4px)}.friend-dialog[open]{animation:card-pop .25s ease-out}.dialog-close{position:absolute;right:12px;top:12px;z-index:2;border:1px solid #ded8d3;border-radius:50%;width:44px;height:44px;font-size:27px!important;background:#fff;color:#242223;cursor:pointer}.dialog-content{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:50px 30px 30px}.dialog-art{background:linear-gradient(160deg,#fff7f3,#f3e4df);border-radius:24px;display:flex;align-items:center;justify-content:center;min-height:260px}.dialog-image{width:100%;height:auto}.dialog-title{font:600 29px/1.2 'Fredoka',sans-serif;margin:0 0 8px}.dialog-role{font-size:14px;font-weight:700;color:#df2538;margin:0 0 12px}.dialog-description{font-size:15px;line-height:1.6;margin:0 0 14px}.dialog-greeting{padding:14px;background:#f7e9e5;border-radius:16px;margin:0 0 16px;font-size:16px}.dialog-greeting small{display:block;margin-top:7px;color:#4e4948;font-size:13px}.dialog-activity{border-top:1px solid #ded8d3;padding-top:14px}.dialog-question{font-size:15px;font-weight:700;margin:0 0 10px}.dialog-choices{display:flex;gap:10px;flex-wrap:wrap}.dialog-choice{border:1px solid #ded8d3;border-radius:14px;background:#fff;padding:10px 15px;min-height:44px;font-weight:700;color:#242223}.dialog-feedback{min-height:24px;font-size:14px;color:#242223;font-weight:700;margin:10px 0 0}.friends-noscript{margin:0;padding:20px;text-align:center}.friends-world [hidden]{display:none!important}
@media(hover:hover){.friend-button:hover .friend-image{transform:translateY(-8px) rotate(-2deg)}.friend-button:hover .friend-art:before{opacity:.5}.friend-button:hover .friend-name{color:var(--red)}.friend-button:hover .friend-spark{opacity:1;transform:rotate(20deg)}.color-choice:hover{transform:translateY(-4px)}.dialog-choice:hover{background:#f7e9e5}}
.friends-world.entered .friend-slot:nth-child(1){animation:ardi-enter .85s ease-out both}.friends-world.entered .friend-slot:nth-child(2){animation:mali-enter .8s .12s ease-out both}.friends-world.entered .friend-slot:nth-child(3){animation:lina-enter .8s .24s ease-out both}.friends-world.entered .friend-slot:nth-child(4){animation:bora-enter .8s .36s ease-out both}
@keyframes ardi-enter{0%{opacity:0;transform:translateX(-30px) rotate(-4deg)}65%{opacity:1;transform:rotate(2deg)}100%{transform:none}}@keyframes mali-enter{0%{opacity:0;transform:translateY(24px) scale(.94)}55%{opacity:1;transform:translateY(-12px)}80%{transform:translateY(3px)}100%{transform:none}}@keyframes lina-enter{0%{opacity:0;transform:scale(.9) translateY(18px)}65%{opacity:1;transform:scale(1.03)}100%{transform:none}}@keyframes bora-enter{0%{opacity:0;transform:translateY(15px)}60%{opacity:1;transform:translateY(-7px)}100%{transform:none}}@keyframes cloud-drift{to{translate:12px 0}}@keyframes card-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes celebrate{to{transform:translate(var(--dx),-115px) rotate(140deg);opacity:0}}
@media(min-width:701px) and (max-width:1050px){.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;margin:auto}.friend-art{height:260px}.friends-cloud.right{top:240px}}
@media(max-width:700px){.friends-world{border-radius:26px;width:calc(100% - 24px);margin-bottom:32px}.friends-header{padding:24px 18px 0}.friends-title{font-size:32px}.friends-subtitle{font-size:16px}.friends-hint{font-size:13px}.friends-landscape{padding:20px 0 0}.friends-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;padding:0 20px 12px;gap:12px;align-items:end;scrollbar-width:thin}.friend-slot{flex:0 0 85%;scroll-snap-align:start}.friend-button{padding:8px 4px 12px;background:#ffffff4d;border:1px solid #ffffff90}.friend-art{height:270px}.friend-image{--art-size:min(230px,58vw)}.friend-role{min-height:20px}.friends-scroll-controls{display:flex;justify-content:center;gap:12px;margin:10px 0}.friends-scroll-controls button{width:44px;height:44px;border:1px solid #ded8d3;background:#fffdfa;border-radius:50%;color:#242223;font-size:24px}.friends-ground-note{padding:6px 20px 16px}.learning-game{margin:0 12px 12px;padding:24px 12px}.learning-game h3{font-size:23px}.color-options{gap:16px}.color-choice{width:64px;height:64px}.friends-cloud{width:90px;top:160px;left:-25px}.friends-cloud.right{right:-25px;top:185px}.friends-shape.triangle{display:none}.dialog-content{grid-template-columns:1fr;padding:54px 20px 22px;gap:18px}.dialog-art{min-height:0;height:190px}.dialog-image{width:190px;height:190px;object-fit:contain}.dialog-title{font-size:26px}.dialog-description{font-size:14px}}
@media(prefers-reduced-motion:reduce){.friends-world *,.friend-dialog{animation:none!important;transition:none!important;scroll-behavior:auto!important}.friend-button:hover .friend-image,.friend-button:focus-visible .friend-image{transform:none}.celebration-star{display:none}}

/* Keep the existing introduction and book content in their original order. */
.center:first-of-type{margin:0 auto;padding-bottom:44px}.page-details{margin:0 auto}.page-details>.rule{margin-top:0}.friends-learning-art{position:absolute;right:35px;top:265px;width:72px;height:62px;opacity:.55;z-index:-1;pointer-events:none}@media(max-width:700px){.friends-learning-art{display:none}}

.friend-dialog button:focus-visible{outline:3px solid #242223;outline-offset:4px}.friend-dialog button{font-family:inherit}

.sound-toggle{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 14px;margin:0 0 18px;border:1px solid #ded8d3;border-radius:24px;background:#fffdfa;color:#242223;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer}.sound-toggle[aria-pressed=true]{background:#f7e9e5}.sound-toggle:focus-visible{outline:3px solid #242223;outline-offset:4px}.sound-toggle:disabled{opacity:.65;cursor:default}.sound-toggle .sound-muted[hidden]{display:none}.friend-dialog .sound-toggle{font-size:13px;font-weight:600}

/* Match the existing A3Kids Studio black, red, and warm cream palette. */
.friends-title{color:var(--red)}.friends-language button[aria-pressed=true]{background:var(--red)}.friends-world .play-again{border-color:var(--red);background:var(--red)}.friend-dialog .dialog-choice:hover{border-color:var(--red)}

.book-preview{margin:0 auto;padding:0 0 48px}.book-preview>.rule{margin:0 auto 28px}

.music-toggle{margin-left:8px}.music-toggle[aria-pressed=true]{border-color:var(--red);color:var(--red)}

.header-social-links{display:flex;align-items:center;gap:8px}.header-social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #ded8d3;border-radius:50%;color:var(--red);background:var(--paper);text-decoration:none}.header-social-link:hover{background:var(--red);border-color:var(--red);color:white}.header-social-link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}@media(max-width:400px){.top{width:calc(100% - 32px)}.header-social-links{gap:4px}}

@media(max-width:360px){.top .mini-logo{width:96px}.header-social-links{gap:2px}}

.follow-heading{font:600 clamp(1.7rem,3vw,2.2rem)/1.2 "Fredoka",sans-serif;margin:0 0 12px;color:var(--ink)}.follow-description{margin:0 auto;color:#4e4948;max-width:560px;font-size:16px}

@media(max-width:400px){.header-social-link{width:34px;height:34px}}

.page-details .social-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;margin-left:auto;margin-right:auto}.page-details .social-links .instagram{min-width:0}@media(max-width:400px){.page-details .social-links .instagram{padding:10px 8px;gap:6px;font-size:13px}}

.book-feature{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:40px;text-align:left}.book-cover-link{display:block;max-width:300px;width:100%;margin:0 auto}.book-cover{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 16px 36px rgba(36,34,35,.16)}.book-hook{font:600 clamp(1.8rem,3.6vw,2.8rem)/1.12 "Fredoka",Arial,sans-serif;letter-spacing:-.02em;margin:0 0 18px}.book-hook span{color:var(--red)}.book-copy .book-description{margin:0!important}.book-copy .book-line{font-size:15px;line-height:1.5;white-space:normal;margin:20px 0 0}.book-buy-link{background:var(--red);color:white}.book-buy-link:hover{background:var(--ink);border-color:var(--ink)}@media(max-width:700px){.book-feature{grid-template-columns:minmax(0,1fr);gap:28px;text-align:center}.book-cover-link{max-width:260px}}

.book-cover-link{position:relative;perspective:1000px;border-radius:8px;outline-offset:8px;touch-action:manipulation}.book-cover{transform:rotateX(var(--cover-x,0deg)) rotateY(var(--cover-y,0deg)) translateY(var(--cover-lift,0px));transition:transform .25s ease,box-shadow .25s ease}.book-cover-link:hover,.book-cover-link:focus-visible{--cover-lift:-8px}.book-cover-link:hover .book-cover,.book-cover-link:focus-visible .book-cover{box-shadow:0 24px 42px rgba(36,34,35,.24)}.book-cover-link:focus-visible{outline:3px solid var(--red)}.book-cover-link.cover-arrived{animation:book-welcome 4s ease-in-out 1}@keyframes book-welcome{0%,50%,100%{translate:0 0}25%,75%{translate:0 -7px}}@media(prefers-reduced-motion:reduce){.book-cover-link.cover-arrived{animation:none}.book-cover{transform:none;transition:none}}