:root{--blue: #37a7f0;--blue-deep: #1d6fb0;--sun: #ffc23c;--grass: #4fc06a;--coral: #ff7a6b;--ink: #123449;--paper: #f7fbff;--shadow: 0 6px 0 rgba(0, 0, 0, .18);--touch-min: 72px;--radius: 26px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:Nunito,"Baloo 2",Comic Sans MS,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);overflow:hidden;overscroll-behavior:none;user-select:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.app{height:100dvh;width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.screen{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;animation:fade-in .35s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top, #8fd8ff),var(--sky-bottom, #d9f2ff));z-index:0}.layer{position:relative;z-index:1}.big-btn{min-height:var(--touch-min);min-width:var(--touch-min);padding:18px 34px;border-radius:var(--radius);background:var(--btn-bg, var(--grass));color:#fff;font-size:clamp(20px,3.4vw,30px);font-weight:900;letter-spacing:.5px;box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:transform .12s ease,filter .12s ease;text-shadow:0 2px 0 rgba(0,0,0,.15)}.big-btn:active{transform:translateY(5px);box-shadow:0 1px #0000002e}.big-btn--quiet{background:#fffc;color:var(--ink);text-shadow:none}.big-btn--round{padding:0;width:var(--touch-min);height:var(--touch-min);border-radius:50%;font-size:32px}.icon-row{display:flex;gap:14px;align-items:center}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;z-index:3}.topbar h1{font-size:clamp(18px,3vw,30px);margin:0}.pill{background:#fff;border-radius:999px;padding:10px 18px;font-weight:800;font-size:18px;box-shadow:0 3px #0000001f;display:inline-flex;align-items:center;gap:8px}.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:0 6px #0000001a;border:4px solid #fff}.grid{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));overflow-y:auto;-webkit-overflow-scrolling:touch}.tile{border-radius:var(--radius);padding:14px;background:#fff;box-shadow:0 6px #0000001f;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:150px;justify-content:center;font-weight:800;text-align:center;transition:transform .12s ease}.tile:active{transform:translateY(4px) scale(.98)}.tile__flag{font-size:48px;line-height:1}.tile__name{font-size:17px}.tile--locked{opacity:.45;filter:grayscale(.6)}.tile--visited{outline:5px solid var(--sun)}.bubble{position:relative;background:#fff;border-radius:24px;padding:18px 22px;font-size:clamp(19px,3.1vw,27px);font-weight:800;line-height:1.35;box-shadow:0 6px #0000001f;max-width:720px}.bubble--rodney{background:#e8f6ff}.rodney{display:block}.rodney--standing{animation:breathe 3s ease-in-out infinite}.rodney--waving{animation:breathe 2s ease-in-out infinite}.rodney--floating{animation:bob 3.4s ease-in-out infinite}.rodney--jumping{animation:hop .7s ease-in-out infinite}.rodney--falling{animation:wobble 1.1s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}@keyframes hop{0%,to{transform:translateY(0)}45%{transform:translateY(-26px)}}@keyframes wobble{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@media (prefers-reduced-motion: reduce){.rodney,.rodney *{animation:none!important}}.reduced-motion .rodney{animation:none!important}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex:1;padding:20px;text-align:center}.progress-track{height:22px;background:#ffffff80;border-radius:999px;overflow:hidden;width:min(520px,80%)}.progress-fill{height:100%;background:var(--sun);transition:width .3s ease}.sparkle{position:absolute;pointer-events:none;font-size:30px;animation:sparkle-up .9s ease-out forwards}@keyframes sparkle-up{to{transform:translateY(-70px) scale(1.5);opacity:0}}.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}.title-wordmark{font-size:clamp(30px,7vw,70px);font-weight:900;line-height:.95;color:#fff;text-shadow:0 5px 0 var(--blue-deep),0 9px 18px rgba(0,0,0,.25);text-align:center}.title-wordmark small{display:block;font-size:.42em;letter-spacing:3px}.parent-gate{display:flex;flex-direction:column;align-items:center;gap:18px}.parent-gate__sum{font-size:40px;font-weight:900}.world-map-frame{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 12px 12px}.world-map{position:relative;width:100%;max-width:1200px;aspect-ratio:2 / 1;max-height:100%;border-radius:26px;overflow:visible;filter:drop-shadow(0 8px 0 rgba(0,0,0,.12))}.world-map__svg{position:absolute;inset:0;width:100%;height:100%;border-radius:26px;overflow:hidden}.map-pin{position:absolute;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 4px #00000038;display:flex;align-items:center;justify-content:center;font-size:26px;transition:transform .12s ease;outline-offset:0}.map-pin:after{content:"";position:absolute;inset:-12px;border-radius:50%}.map-pin:active{transform:translate(-50%,-50%) scale(.9)}.map-pin:focus-visible{outline:4px solid #1d6fb0}.map-pin--visited{box-shadow:0 0 0 5px #ffc23c,0 4px #00000038}.map-pin--soon{opacity:.55;filter:grayscale(.65)}.map-pin__flag{line-height:1;pointer-events:none}.map-pin__tick{position:absolute;bottom:-4px;right:-4px;font-size:18px;pointer-events:none}@media (max-width: 700px){.map-pin{width:46px;height:46px;font-size:21px}.map-pin:after{inset:-14px}}.storybook__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px}.storybook__page{max-height:100%;max-width:100%;width:auto;object-fit:contain;border-radius:14px;box-shadow:0 10px 30px #00000073;animation:page-in .28s ease}@keyframes page-in{0%{opacity:0;transform:translate(14px) scale(.99)}to{opacity:1;transform:none}}.storybook__nav{flex:0 0 auto;width:72px;height:96px;border-radius:20px;background:#fff2;color:#fff;font-size:48px;line-height:1;transition:background .12s ease}.storybook__nav:hover:not(:disabled){background:#ffffff38}.storybook__nav:disabled{opacity:.18;cursor:default}.storybook__footer{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px 16px}@media (max-width: 700px){.storybook__nav{display:none}.storybook__stage{padding:0 6px}}.animal-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 12px 8px}.animal-chip{min-height:56px;padding:10px 20px;border-radius:999px;background:#fff;border:3px solid var(--blue);color:var(--ink);font-size:16px;font-weight:800;box-shadow:0 4px #1d6fb059;display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease}.animal-chip:active{transform:translateY(4px);box-shadow:0 1px #1d6fb059}.animal-chip:focus-visible{outline:4px solid var(--sun);outline-offset:2px}.place-grid{display:grid;gap:16px;padding:0;grid-template-columns:repeat(auto-fit,minmax(170px,220px));justify-content:center}.place-intro{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto}.place-intro .bubble{font-size:clamp(17px,2.1vw,22px);padding:14px 18px}.place-section-title{text-align:center;margin:18px 0 12px;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#0c2f52;-webkit-text-stroke:5px #fff;paint-order:stroke fill;text-shadow:0 3px 7px rgba(0,0,0,.4)}
.rk-country-title{font-weight:900;background:linear-gradient(180deg,#cdeafe 0%,#7cc0f2 42%,#2f82d6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:3px #fff;paint-order:stroke fill;text-shadow:0 2px 0 #1a5aa0,0 4px 9px rgba(10,40,80,.35);letter-spacing:.5px;font-size:clamp(28px,3.2vw,40px);display:inline-block}
/* country page: speaker sits beside the speech bubble instead of on its own row */
.place-intro>div:last-child>div{position:relative;flex-wrap:nowrap!important}
.place-intro>div:last-child>div>button{position:absolute;left:100%;top:6px;margin-left:10px}
@media (max-width:820px){.place-intro>div:last-child>div>button{left:auto;right:-10px;top:-30px;margin-left:0}}
@media (min-width:700px) and (max-height:760px){
.scroll:has(.place-intro) .place-section-title{margin:5px 0 4px;font-size:22px}
.scroll:has(.place-intro) .tile{min-height:0;padding:8px 12px;gap:4px!important}
.scroll:has(.place-intro) .tile__flag{font-size:32px}
.scroll:has(.place-intro) .animal-chip{min-height:46px;padding:6px 16px}
.scroll:has(.place-intro) .place-intro .bubble{padding:10px 16px}
.scroll:has(.place-intro) .place-intro .bubble--rodney{margin-top:8px!important;padding:8px 14px}
.scroll:has(.place-intro){padding-bottom:8px!important}
.scroll:has(.place-intro) [data-unlock]{margin-top:6px!important;padding:7px 16px!important;max-width:none!important;font-size:15px!important;white-space:nowrap}
.scroll:has(.place-intro) .tile__flag{font-size:26px}
.scroll:has(.place-intro) .tile>button:first-child{gap:2px!important}
.screen:has(.place-intro) .topbar{padding:6px 16px}
.scroll:has(.place-intro) .place-intro .bubble{font-size:18px}
}
/* adventure pages: content scrolls if it must, the arrows always stay on screen */
@media (max-height:720px){.rk-beat .bubble{padding:10px 16px;font-size:clamp(17px,2.2vw,21px)}.rk-beat .bubble--rodney{margin-top:8px!important;padding:8px 14px}.rk-reward .card{padding:8px 12px;border-width:2px}.rk-reward .card>div:first-child{font-size:26px!important;line-height:1.1}.rk-reward .card img{max-height:34px;width:auto!important}.rk-reward .bubble{padding:10px 16px;font-size:clamp(17px,2.2vw,21px)}.rk-reward .bubble--rodney{margin-top:8px!important;padding:8px 14px}.rk-reward>div:first-child{font-size:32px!important}}
.rk-reward .icon-row{flex-wrap:wrap;justify-content:center;gap:10px}
@media (max-width:520px){.rk-reward .card{padding:8px 10px;border-width:2px;font-size:14px;flex:1 1 28%;max-width:32%;font-size:12px;line-height:1.15}.rk-reward .card>div:first-child{font-size:28px!important;line-height:1.1}.rk-reward .card img{max-height:38px;width:auto!important}.rk-reward .bubble,.rk-beat .bubble{padding:12px 14px;font-size:18px}.rk-beat .bubble--rodney,.rk-reward .bubble--rodney{margin-top:8px!important;padding:8px 12px}}
@media (max-width:520px){.rk-say{position:relative;flex-wrap:nowrap!important}.rk-say>button{position:absolute;right:0;top:-60px}.rk-say>.bubble{margin-top:6px}.rk-reward>div:first-child{font-size:34px!important}.rk-reward .card>div:first-child *{font-size:30px!important;max-height:38px}.rk-reward .icon-row{gap:8px}.rk-reward .card{padding:6px 8px!important}.rk-reward .card>div:nth-child(n+3){font-size:12px!important}}

/* ================= premium polish ================= */
:root{--font-head:"Baloo 2","Fredoka",Nunito,system-ui,sans-serif;--font-body:Nunito,system-ui,-apple-system,sans-serif}
body,button,input,select,textarea{font-family:var(--font-body)}
h1,h2,h3,.pill,.big-btn,.rkg-pill,.rkg-prompt,.rkg-btn,.tr-name,.tr-pill,.tr-h,.tile__name,.place-section-title,.rk-country-title,.bubble{font-family:var(--font-head)}
h1,h2,h3{letter-spacing:.2px}
/* sky: soft clouds instead of a flat fill */
.sky{background:radial-gradient(ellipse 22% 9% at 14% 16%,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 18% 7% at 82% 10%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 26% 10% at 70% 88%,rgba(255,255,255,.55),transparent 70%),linear-gradient(180deg,var(--sky-top,#8fd8ff),var(--sky-bottom,#d9f2ff))}
/* screens glide in */
@keyframes rk-enter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.screen>.layer,.rkg-body,.tr-body{animation:rk-enter .38s cubic-bezier(.2,.8,.2,1) both}
.screen>.layer:nth-child(3){animation-delay:.05s}
/* chunky, glossy buttons */
.big-btn:not(.big-btn--quiet){background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--btn-bg,var(--grass))}.big-btn{box-shadow:0 6px 0 rgba(0,0,0,.2),0 10px 18px rgba(0,60,120,.18);border:3px solid rgba(255,255,255,.55)}
.big-btn:hover{filter:brightness(1.05);transform:translateY(-2px)}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.rkg-btn{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--b,#37a7f0);border:3px solid rgba(255,255,255,.55)}
.pill,.rkg-pill,.tr-pill{box-shadow:0 3px 0 rgba(0,0,0,.08),0 6px 14px rgba(0,60,120,.10)}
.card,.tile,.rkg-card,.rkg-opt,.tr-card,.tr-tile,.tr-mini,.tr-slot{box-shadow:0 5px 0 rgba(0,40,90,.08),0 10px 22px rgba(0,60,120,.10)}
.tile,.rkg-card,.rkg-opt,.tr-tile{transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s}
.tile:hover,.rkg-card:not(.locked):hover,.rkg-opt:hover,.tr-tile:hover{transform:translateY(-3px)}
/* level cards */
.rkg-card{border:3px solid #fff;background:linear-gradient(180deg,#fff,#f3f9ff)!important}
.rkg-card .ic{filter:drop-shadow(0 3px 3px rgba(0,0,0,.12))}
.rkg-card.locked{filter:grayscale(.85);opacity:.6}
.rkg-card .num{width:26px;height:26px;border-radius:50%;background:#37a7f0;color:#fff;opacity:1;display:flex;align-items:center;justify-content:center;top:10px;left:10px;font-size:13px}
.rkg-stars{text-shadow:0 2px 0 rgba(0,0,0,.08)}
/* correct answers glow */
.rkg-opt.good{background:linear-gradient(180deg,#e8ffe6,#c8f7c5);box-shadow:0 0 0 4px #7bd88a,0 6px 0 #4caf50}
/* games menu badges float gently */
@keyframes rk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.rk-games-grid img{transition:transform .2s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 8px 10px rgba(0,60,120,.22))}
.rk-games-grid button:hover img{transform:scale(1.05) rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.screen>.layer,.rkg-body,.tr-body{animation:none}}
/* parents' trust card */
.rk-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px}
.rk-trust div{background:#f2faf3;border-radius:16px;padding:10px 12px;font-size:14px;line-height:1.35}
.rk-trust b{display:block;font-size:15px;margin-bottom:2px;font-family:var(--font-head)}
.rk-hero{animation:rk-bob 2.6s ease-in-out infinite;filter:drop-shadow(0 14px 14px rgba(0,60,120,.22))}
.rk-trustline{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px;max-width:560px}
.rk-trustline span{background:rgba(255,255,255,.8);border-radius:999px;padding:6px 12px;font:700 13px var(--font-body);color:#1d4d73;box-shadow:0 2px 6px rgba(0,60,120,.1)}
@media (prefers-reduced-motion:reduce){.rk-hero{animation:none}}
@media (max-height:860px){.center-col img[alt^="The Adventures"]{max-height:25vh;width:auto!important;max-width:82vw}.rk-hero{zoom:.72}.center-col:has(.rk-hero){gap:10px}}
@media (max-height:640px){.rk-hero{zoom:.55}.center-col img[alt^="The Adventures"]{max-height:21vh}}
.rk-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rk-bubble{position:absolute;top:0;width:calc(clamp(96px,11vw,150px) * var(--s,1));aspect-ratio:1;margin-left:calc(clamp(96px,11vw,150px) * var(--s,1) / -2);animation:rk-fall var(--d,26s) linear var(--dl,0s) infinite;will-change:transform}
.rk-bubble img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:4px solid rgba(255,255,255,.85);box-shadow:0 10px 24px rgba(10,70,130,.2),0 0 0 6px rgba(255,255,255,.25);animation:rk-sway 4.5s ease-in-out infinite alternate}
@keyframes rk-fall{0%{transform:translate3d(0,-30vh,0)}100%{transform:translate3d(0,120vh,0)}}
@keyframes rk-sway{0%{transform:translateX(calc(-14px * var(--sw,1))) rotate(-6deg)}100%{transform:translateX(calc(14px * var(--sw,1))) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.rk-bubble{display:none}}
.rk-fig{position:absolute;top:0;width:var(--w,100px);margin-left:calc(var(--w,100px) / -2);animation:rk-fall var(--d,26s) linear var(--dl,0s) infinite;will-change:transform}
.rk-fig img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 10px rgba(10,70,130,.22));animation:rk-sway 3.8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.rk-fig{display:none}}
.rk-bubbles::after{content:"";position:absolute;inset:0;background:rgba(225,242,255,.42);-webkit-backdrop-filter:blur(1.2px) saturate(.75);backdrop-filter:blur(1.2px) saturate(.75);pointer-events:none;z-index:5}