/* Ocean Animals Kids hub (/kids/) and the Kids header: animation + state rules for the oa-kids-* hook classes.
   The static layout lives in Elementor (Atomic). Pushed to uploads/oa-kids/ via POST /wp-json/oa/v1/kids-assets. */

@keyframes oakRise{0%{transform:translateY(0);opacity:0}10%{opacity:.7}100%{transform:translateY(-520px);opacity:0}}
@keyframes oakFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes oakFloatTilt{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes oakHeroSwim{0%,100%{transform:translate(0,0) rotate(-14deg)}50%{transform:translate(6px,-12px) rotate(-10deg)}}
@keyframes oakSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes oakCross{0%{transform:translateX(-120px) scaleX(1)}46%{transform:translateX(300px) scaleX(1)}50%{transform:translateX(300px) scaleX(-1)}96%{transform:translateX(-120px) scaleX(-1)}100%{transform:translateX(-120px) scaleX(1)}}
@keyframes oakSchool{0%{transform:translateX(380px)}100%{transform:translateX(-160px)}}
@keyframes oakSchoolR{0%{transform:translateX(-160px)}100%{transform:translateX(380px)}}
@keyframes oakRays{0%,100%{opacity:.35}50%{opacity:.7}}
@keyframes oakGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes oakBoing{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-8deg)}55%{transform:scale(.92) rotate(5deg)}80%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes oakPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* Rising bubbles (absolutely positioned div-blocks at the bottom of each zone) */
.oa-kids-bubble{animation:oakRise 9s linear infinite}
.oa-kids-bubble:nth-child(2){animation-delay:2s}
.oa-kids-bubble:nth-child(3){animation-delay:4s}
.oa-kids-bubble:nth-child(4){animation-delay:1s}

/* Porthole scene */
.oa-kids-rays{animation:oakRays 5s ease-in-out infinite}
.oa-kids-bob{animation:oakSway 3.6s ease-in-out infinite;transform-origin:bottom center}
.oa-kids-cruise{animation:oakSchool 11s linear infinite}
/* The angelfish (kids-whale.png) faces right, so it crosses left-to-right; the school faces left and crosses the other way */
.oa-kids-cruise[src*="kids-whale"],.oa-kids-cruise[data-src*="kids-whale"]{animation-name:oakSchoolR;animation-duration:13s}
.oa-kids-swim{animation:oakCross 14s ease-in-out infinite}
.oa-kids-ricky-body.oa-kids-float{animation:oakHeroSwim 4.5s ease-in-out infinite}
.oa-kids-mid-ricky{animation:oakFloatTilt 4.8s ease-in-out infinite}

/* Hero only (#top): Ricky swims out of the porthole (clip = porthole circle + the area above it, in Ricky's own 270x412 box) */
#top .oa-kids-ricky-body.oa-kids-float{clip-path:path("M -18 196 A 172 172 0 1 1 326 196 A 172 172 0 1 1 -18 196 Z M -326 -344 L 634 -344 L 634 36 L -326 212 Z")}
@media (max-width:767px){.oa-kids-hero-say.oa-kids-hero-say{left:236px;top:-56px;width:176px;font-size:17px;padding:12px 14px}}

/* Tappable animals: scene cells (2026-10-19 Big Dive revision). The cutout floats, the cell stays put. */
.oa-kids-tap img{animation:oakFloat 3.6s ease-in-out infinite}
.oa-kids-tap:nth-child(2) img{animation-delay:.7s}
.oa-kids-tap:nth-child(3) img{animation-delay:1.4s}
.oa-kids-tap:nth-child(4) img{animation-delay:2.1s}
.oa-kids-tap:hover img{transform:scale(1.06)}
.oa-kids-tap:focus-visible{outline:4px solid #FFC93C;outline-offset:2px}
.oa-kids-tap.is-picked{box-shadow:0 0 0 5px #FFC93C;filter:brightness(.92)}
/* Gold check on animals the kid has already met */
.oa-kids-tap.is-got::after{content:'';position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#FFC93C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2308264A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 0 0 3px #FFFFFF,0 4px 0 3px #C9900A;z-index:2;pointer-events:none}
/* Scene Ricky (Sunlight / Twilight / Abyss) drifts gently */
@keyframes oakDrift{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.oa-kids-zone-ricky{animation:oakDrift 4.8s ease-in-out infinite}
#abyss .oa-kids-zone-ricky{animation-delay:-.6s}
/* Trench "Open my Passport" key: blue edge instead of the gold one the trench rule gives links */
#trench .oa-kids-badge~div a.oa-pp-opener{--k-shade:#3E8EDB}
.oa-kids-fact.is-pop{animation:oakPop .45s ease-out}
.oa-kids-fact-link.is-shown{display:inline-flex}

/* Midnight zone: flashlight */
.oa-kids-glow{animation:oakGlow 2.4s ease-in-out infinite}
.oa-kids-dark.is-lit{background:#1C2A5C}   /* flat fill when the flashlight is on (canvas 2026-10-20) */
.oa-kids-dark.is-lit .oa-kids-glow,.oa-kids-dark.is-lit .oa-kids-light-btn{display:none}
.oa-kids-dark.is-lit .oa-kids-lit-only{display:flex}
.oa-kids-dark.is-lit .oa-kids-mid-ricky{filter:none}
.oa-kids-light-btn:focus-visible{outline:4px solid #fff;outline-offset:3px}

/* Kids header: depth bar states + passport */
.oa-kids-zone.is-on,.oa-kids-zone.is-on .oa-kids-zone-label{color:#FFFFFF}
.oa-kids-zone.is-on .oa-kids-zone-dot{background:#FFC93C}
.oa-kids-zone.is-past .oa-kids-zone-dot,.oa-kids-zone.is-past .oa-kids-zone-bar{background:#7CFFE4}
.oa-kids-stamp-icon.is-boing{animation:oakBoing .7s ease-out 1}
.oa-kids-pass-dot.is-on{background:#FFC93C;box-shadow:inset 0 0 0 2px #FFC93C}
.oa-kids-hdr.is-compact .oa-kids-hdr-top-inner{padding-top:8px;padding-bottom:8px}

/* Trench badge panel */
.oa-kids-badge.is-earned{animation:oakPop .6s ease-out}

/* The Kids header sticks via its Elementor location wrapper (position: sticky on the inner container cannot work:
   the wrapper is only as tall as the header). */
header.elementor-location-header.elementor-41698{position:sticky;top:0;z-index:60;pointer-events:none}
header.elementor-location-header.elementor-41698>.oa-kids-hdr{pointer-events:auto}
.admin-bar header.elementor-location-header.elementor-41698{top:32px}
@media (max-width:782px){.admin-bar header.elementor-location-header.elementor-41698{top:46px}}
/* Sticky header, compact on scroll: the keys row folds away (back on scroll-up or hover); on phones the Ricky row folds too, leaving a slim bar */
.oa-kids-hdr nav{max-height:160px}
.oa-kids-hdr.is-compact nav{max-height:0;opacity:0;overflow:hidden;margin:0;pointer-events:none}
@media (hover:hover){.oa-kids-hdr.is-compact:hover nav{max-height:160px;opacity:1;pointer-events:auto}}
.oa-kids-hdr.is-compact .oa-kids-hdr-top{padding-top:6px;padding-bottom:6px}
.oa-kids-hdr.is-compact .oa-kids-passport,.oa-kids-hdr.is-compact .oa-kids-depth{height:48px}
.oa-kids-hdr.is-compact .oa-kids-read-m{font-size:20px}
@media (min-width:1025px){
  .oa-kids-hdr-top.is-docked{display:none}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar>div{gap:12px;flex-wrap:nowrap}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar>div>a.e-button-base{display:none}
  .oa-kids-hdr.is-compact .oa-kids-ricky-row{flex:0 1 auto;min-width:0}
  .oa-kids-hdr.is-compact .oa-kids-say{font-size:13px;line-height:1.15;padding:5px 10px;max-width:300px}
  .oa-kids-hdr.is-compact .oa-kids-ricky-head{width:50px;height:40px;margin-top:2px}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar .oa-kids-zone{padding:0 4px;gap:6px}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar .oa-kids-zone-label{font-size:13px}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar>div>div:last-child{flex:none}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar .oa-kids-logo{margin-right:4px}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar .oa-kids-logo img{height:40px}
  .oa-kids-hdr.is-compact .oa-kids-hdr-bar .oa-kids-logo-tag{height:24px;font-size:16px;padding:0 8px}
  .oa-kids-hdr.is-compact .oa-kids-say{font-size:14px;padding:6px 10px}
    .oa-kids-hdr.is-compact .oa-kids-passport,.oa-kids-hdr.is-compact .oa-kids-depth{height:44px}
  .oa-kids-hdr.is-compact .oa-kids-depth{width:150px;padding:0 10px}
  .oa-kids-hdr.is-compact .oa-kids-read-m{font-size:18px}
}
@media (max-width:1024px){
  .oa-kids-hdr.is-compact nav,.oa-kids-hdr.is-compact .oa-kids-hdr-bar{display:none}
  .oa-kids-hdr.is-compact .oa-kids-hdr-top{padding-top:5px;padding-bottom:5px}
  .oa-kids-hdr.is-compact .oa-kids-passport,.oa-kids-hdr.is-compact .oa-kids-depth{height:40px}
  .oa-kids-hdr.is-compact .oa-kids-logo img{height:32px}
}

/* Header avatar: fade the body out below the fins (the crop would otherwise end in a straight cut / tail sliver) */
.oa-kids-hdr .oa-kids-ricky-head{-webkit-mask-image:linear-gradient(#000 62%,transparent 96%);mask-image:linear-gradient(#000 62%,transparent 96%)}
/* Kids logo (drop icon + KIDS tag): scales to 84% on scroll, idle bubble trail, scroll puff, depth halo, stamp boing */
.oa-kids-logo{position:relative;transform-origin:left center}
.oa-kids-hdr.is-compact .oa-kids-logo{transform:scale(.84)}
.oa-kids-logo.is-boing{animation:oakBoing .7s ease-out 1}
@keyframes oakLb{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translate(6px,-40px) scale(1);opacity:0}}
.oa-kids-lb{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(160,220,255,.25);opacity:0;pointer-events:none;animation:oakLb 4.6s ease-out infinite both}
@keyframes oakPuff{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),-48px) scale(1.1);opacity:0}}
.oa-kids-puffbox{position:absolute;left:20px;top:6px;width:1px;height:1px;pointer-events:none}
.oa-kids-pf{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(160,220,255,.3);opacity:0;pointer-events:none}
.oa-kids-puffbox.is-puff .oa-kids-pf{animation:oakPuff .9s ease-out 1 both}
@keyframes oakHalo{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.oa-kids-halo-wrap{display:none;position:absolute;left:-16px;top:-12px;width:82px;height:82px;pointer-events:none;z-index:0}
.oa-kids-halo{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(124,255,228,.55) 0%,rgba(124,255,228,.22) 38%,rgba(124,255,228,0) 70%);opacity:0;transition:opacity 1.4s ease;animation:oakHalo 3.2s ease-in-out infinite}
.oa-kids-logo>*{position:relative;z-index:1}
.oa-kids-logo>.oa-kids-halo-wrap,.oa-kids-logo>.oa-kids-lb,.oa-kids-logo>.oa-kids-puffbox{position:absolute;z-index:0}
/* Passport: a gold +1 rises out of the counter on each new stamp */
@keyframes oakPlus{0%{transform:translate(-50%,0) scale(.5);opacity:0}20%{opacity:1;transform:translate(-50%,-14px) scale(1.15)}100%{transform:translate(-50%,-52px) scale(1);opacity:0}}
.oa-kids-plus{position:absolute;left:50%;top:-6px;width:40px;height:40px;border-radius:50%;background:#FFC93C;color:#2A1A00;box-shadow:0 0 0 3px #FFFFFF;display:flex;align-items:center;justify-content:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:18px;pointer-events:none;z-index:3;animation:oakPlus 1.3s ease-out 1 both}
/* 3D keys (after Josh Comeau's "front / edge / shadow" button): raised face, solid edge in the shade colour,
   soft shadow underneath that moves, lift on hover, push in on press. Header keys + the hub's big yellow buttons. */
.oa-kids-hdr nav a.e-button-base,#top .oa-kids-start,#midnight .oa-kids-light-btn,.oa-kids-fact-link.is-shown,#trench .oa-kids-badge~div a,#animals a.e-button-base{--k-shade:#C9900A;position:relative;isolation:isolate;transform:translateY(-2px);box-shadow:0 6px 0 var(--k-shade),0 10px 14px rgba(0,0,0,.28);will-change:transform;user-select:none;touch-action:manipulation;transition:transform 600ms cubic-bezier(.3,.7,.4,1),box-shadow 600ms cubic-bezier(.3,.7,.4,1),filter 250ms}
.oa-kids-hdr nav a.e-button-base:nth-child(2){--k-shade:#C9573A}
.oa-kids-hdr nav a.e-button-base:nth-child(3){--k-shade:#5AA848}
.oa-kids-hdr nav a.e-button-base:nth-child(4){--k-shade:#8C78D6}
.oa-kids-hdr nav a.e-button-base:nth-child(5){--k-shade:#3E8EDB}
.oa-kids-fact-link.is-shown{--k-shade:#031628}
.oa-kids-hdr nav a.e-button-base:hover,#top .oa-kids-start:hover,#midnight .oa-kids-light-btn:hover,.oa-kids-fact-link.is-shown:hover,#animals a.e-button-base:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--k-shade),0 14px 18px rgba(0,0,0,.3);filter:brightness(108%);transition:transform 250ms cubic-bezier(.3,.7,.4,1.5),box-shadow 250ms cubic-bezier(.3,.7,.4,1.5),filter 250ms}
.oa-kids-hdr nav a.e-button-base:active,#top .oa-kids-start:active,#midnight .oa-kids-light-btn:active,.oa-kids-fact-link.is-shown:active,#animals a.e-button-base:active{transform:translateY(1px);box-shadow:0 3px 0 var(--k-shade),0 4px 6px rgba(0,0,0,.2);transition:transform 34ms,box-shadow 34ms}
.oa-kids-hdr nav a.e-button-base:focus:not(:focus-visible){outline:none}
.oa-kids-hdr nav a.e-button-base:focus-visible{outline:4px solid #fff;outline-offset:3px}
@media (max-width:767px){.oa-kids-hdr nav a.e-button-base{box-shadow:0 4px 0 var(--k-shade),0 7px 10px rgba(0,0,0,.25)}.oa-kids-hdr nav a.e-button-base:hover{box-shadow:0 6px 0 var(--k-shade),0 10px 14px rgba(0,0,0,.28)}}
/* Current page key */
.oa-kids-hdr nav a.e-button-base.is-current{box-shadow:0 6px 0 var(--k-shade),0 10px 14px rgba(0,0,0,.28),0 0 0 4px #FFFFFF}
.oa-kids-hdr nav a.e-button-base.is-current:hover{box-shadow:0 8px 0 var(--k-shade),0 14px 18px rgba(0,0,0,.3),0 0 0 4px #FFFFFF}
/* Cameo Rickys are tappable */
.oa-kids-ricky-head:focus-visible,.oa-kids-ricky-body:focus-visible{outline:4px solid #FFC93C;outline-offset:2px;border-radius:12px}

/* Phones: the keys row and the Ricky/depth-bar row are hidden (Elementor mobile styles); a fixed bottom tab bar
   (Elementor root .oa-kids-tabs in the Kids header, display:flex under 768px) carries the five keys, Dive raised. */
.oa-kids-tabs{pointer-events:auto}
@media (max-width:1024px){
  html body{padding-bottom:84px} /* html body: on game routes this file loads before the kit CSS */
  /* Game pages: the top bar scrolls away (only the tab bar stays), so the board gets the screen */
  body.oa-game-page header.elementor-location-header.elementor-41698{position:static}
  .oa-kids-tab{-webkit-tap-highlight-color:transparent}
  .oa-kids-tab>span:first-child{--k-shade:#C9900A;box-shadow:0 5px 0 var(--k-shade);transition:transform 120ms,box-shadow 120ms}
  .oa-kids-tab:nth-child(2)>span:first-child{--k-shade:#C9573A}
  .oa-kids-tab:nth-child(3)>span:first-child{--k-shade:#17806C}
  .oa-kids-tab:nth-child(4)>span:first-child{--k-shade:#5AA848}
  .oa-kids-tab:nth-child(5)>span:first-child{--k-shade:#3E8EDB}
  .oa-kids-tab:active>span:first-child{transform:translateY(3px);box-shadow:0 2px 0 var(--k-shade)}
  .oa-kids-tab.is-current>span:first-child{box-shadow:0 5px 0 var(--k-shade),0 0 0 4px #FFFFFF}
  .oa-kids-tab.is-current>span:last-child{color:#FFFFFF}
  .oa-kids-tab:focus-visible{outline:none}
  .oa-kids-tab:focus-visible>span:first-child{outline:3px solid #FFFFFF;outline-offset:3px}
}

/* Touch devices: iOS Safari paints a faint lighter rectangle around an <img> that has filter: drop-shadow() inside
   an animated (transform) parent - the tappable cutouts and the group discs. The shadow is decorative, so drop it there. */
@media (hover:none){.oa-kids-tap img,.oa-kids-tap img.e-image-base,#animals a.e-button-base img,#animals img.e-image-base{filter:none!important}}

/* 3D keys on the hub pages (global class oa-kids-key + colour modifiers; the shadow lives here because the Atomic parser drops box-shadow on e-button) */
.elementor a.oa-kids-key,.elementor .oa-kids-key{--k-shade:#C9900A;position:relative;box-shadow:0 6px 0 var(--k-shade),0 10px 14px rgba(0,0,0,.25);transform:translateY(-2px);user-select:none;touch-action:manipulation;transition:transform 250ms cubic-bezier(.3,.7,.4,1.5),box-shadow 250ms cubic-bezier(.3,.7,.4,1.5),filter 250ms}
.elementor a.oa-kids-key.oa-kids-key-lilac,.elementor .oa-kids-key-lilac{--k-shade:#8C78D6}.elementor a.oa-kids-key.oa-kids-key-green,.elementor .oa-kids-key-green{--k-shade:#5AA848}.elementor a.oa-kids-key.oa-kids-key-blue,.elementor .oa-kids-key-blue{--k-shade:#3E8EDB}.elementor a.oa-kids-key.oa-kids-key-coral,.elementor .oa-kids-key-coral{--k-shade:#C9573A}
.elementor a.oa-kids-key:hover,.elementor .oa-kids-key:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--k-shade),0 14px 18px rgba(0,0,0,.28);filter:brightness(106%)}
.elementor a.oa-kids-key:active,.elementor .oa-kids-key:active{transform:translateY(1px);box-shadow:0 3px 0 var(--k-shade),0 4px 6px rgba(0,0,0,.2);transition:transform 34ms,box-shadow 34ms}
.oa-kids-key:focus:not(:focus-visible){outline:none}.oa-kids-key:focus-visible{outline:4px solid #fff;outline-offset:3px}
/* Adventures page: Passport strip dots */
.oa-kids-adv-dot.is-on{background:#FFC93C;border-color:#FFC93C}

/* Hub pages: the page Ricky (next to his bubble) floats gently */
div:has(> .oa-kids-page-say) > .oa-kids-ricky-body{animation:oakFloat 4.8s ease-in-out infinite}

/* Tablets: bigger tab keys, centred like the artboard */
@media (min-width:768px) and (max-width:1024px){
  .oa-kids-tabs{padding-inline-start:calc(50% - 300px);padding-inline-end:calc(50% - 300px)}
  .oa-kids-tab>span:first-child{width:52px;height:52px;font-size:22px;border-radius:16px}
  .oa-kids-tab:nth-child(3)>span:first-child{width:66px;height:66px;font-size:28px;border-radius:22px;margin-top:-30px}
  .oa-kids-tab>span:last-child{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .oa-kids-bubble,.oa-kids-rays,.oa-kids-bob,.oa-kids-cruise,.oa-kids-swim,.oa-kids-ricky-body.oa-kids-float,.oa-kids-mid-ricky,.oa-kids-tap img,.oa-kids-zone-ricky,.oa-kids-glow,.oa-kids-stamp-icon.is-boing,.oa-kids-fact.is-pop,.oa-kids-badge.is-earned,.oa-kids-logo.is-boing,.oa-kids-lb,.oa-kids-pf,.oa-kids-halo,.oa-kids-plus{animation:none}
  .oa-kids-plus{opacity:1;transform:translate(-50%,-30px)}
  .oa-kids-hdr nav a.e-button-base,#top .oa-kids-start,#midnight .oa-kids-light-btn,.oa-kids-fact-link.is-shown,#animals a.e-button-base,.oa-kids-key{transition:none}
  .oa-kids-bubble{opacity:0}
}
/* Ricky voice toggle (next to the header bubble) */
button.oa-kids-sound{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:6px;padding:0;border:0;border-radius:50%;background:#33457F;color:#fff;cursor:pointer;flex:none;transition:background .15s}
button.oa-kids-sound:hover{background:#3E538F}
button.oa-kids-sound.is-off{background:#1E2A55;color:#A9B6D4}
button.oa-kids-sound:focus-visible{outline:3px solid #FFC93C;outline-offset:2px}
@media (min-width:1025px){button.oa-kids-sound.is-bar{display:none}}
@media (max-width:1024px){button.oa-kids-sound{width:32px;height:32px}button.oa-kids-sound:not(.is-bar){display:none}button.oa-kids-sound.is-bar{margin-left:6px}}

/* ===== My Explorer Passport (modal + /kids/passport/ page) and the "New stamp!" pop-up. Source: Joel's KidsPassport artboards.
   Elementor's reset.css paints every <button> pink on hover/focus and swaps its box-shadow on focus-visible, so each control
   below carries its own :hover / :focus / :focus-visible rules. ===== */
html.oa-pp-open{overflow:hidden}
.oa-pp-overlay{position:fixed;inset:0;z-index:1000;background:rgba(5,10,30,.86);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;font-family:Nunito,'Trebuchet MS',sans-serif;color:#08264A;font-size:18px;line-height:1.4}
.oa-pp-overlay *,.oa-pp-mount *{box-sizing:border-box}
.oa-pp-mount{font-family:Nunito,'Trebuchet MS',sans-serif;color:#08264A;font-size:18px;line-height:1.4}
.oa-pp-book{position:relative;width:100%;max-width:1120px;padding:16px;border-radius:30px;background:#FFC93C;box-shadow:0 10px 0 #C9900A;display:flex;gap:12px;outline:none}
.oa-pp-book.is-modal{height:100%;max-height:820px}
.oa-pp-book.is-page{min-height:640px;margin:0 auto}
.oa-pp-side{flex:0 0 380px;padding:24px;border-radius:22px;background:#FFF8E6;display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto}
.oa-pp-main{flex:1;min-width:0;min-height:0;padding:22px 24px;border-radius:22px;background:#FFF8E6;display:flex;flex-direction:column;gap:18px}
.oa-pp-head{display:flex;align-items:center;gap:12px}
.oa-pp-head-text{display:flex;flex-direction:column;line-height:1.1}
.oa-pp-kicker{font-size:13px;font-weight:800;letter-spacing:.1em;color:#7A5200}
h2.oa-pp-title{margin:0;font-family:Fredoka,sans-serif;font-weight:700;font-size:32px;line-height:1.05;color:#08264A;text-transform:none}
button.oa-pp-close{position:absolute;top:38px;right:40px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:#FF8A65;color:#08264A;cursor:pointer;box-shadow:0 5px 0 #C9573A;display:flex;align-items:center;justify-content:center;transition:transform .1s,box-shadow .1s;z-index:2}
button.oa-pp-close:hover,button.oa-pp-close:focus{background:#FF9B7C;color:#08264A}
button.oa-pp-close:active{transform:translateY(4px);box-shadow:0 1px 0 #C9573A}
button.oa-pp-close:focus-visible{box-shadow:0 5px 0 #C9573A;outline:4px solid #08264A;outline-offset:3px}
.oa-pp-ricky-row{display:flex;align-items:flex-start;gap:8px}
.oa-pp-ricky{flex:none;display:block;cursor:pointer;border-radius:12px}
.oa-pp-ricky img{width:100%;height:100%;object-fit:contain;display:block}
p.oa-pp-say{flex:1;margin:6px 0 0;padding:10px 16px;border-radius:22px 22px 22px 6px;background:#FFFFFF;box-shadow:inset 0 0 0 3px #F1E3BF;font-family:Fredoka,sans-serif;font-weight:600;font-size:19px;line-height:1.2;color:#08264A}
.oa-pp-bars{display:flex;flex-direction:column;gap:10px}
.oa-pp-bar{display:flex;flex-direction:column;gap:6px}
.oa-pp-bar-row{display:flex;justify-content:space-between;font-family:Fredoka,sans-serif;font-weight:600;font-size:18px}
.oa-pp-track{height:18px;border-radius:14px;background:#EFE4C8;overflow:hidden}
.oa-pp-fill{height:100%;border-radius:14px;transition:width .8s ease}
.oa-pp-pick{padding:16px 18px;border-radius:22px;background:#FFFFFF;box-shadow:inset 0 0 0 3px #F1E3BF;font-family:Fredoka,sans-serif;font-weight:600;font-size:19px;line-height:1.25}
.oa-pp-pick.is-card{padding:16px;display:flex;flex-wrap:wrap;gap:14px}
@keyframes oaPpPop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.oa-pp-pick.is-pop{animation:oaPpPop .4s ease-out}
.oa-pp-pick-seal{flex:none;width:84px;height:84px}
.oa-pp-pick-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.oa-pp-pick-title{font-family:Fredoka,sans-serif;font-weight:700;font-size:23px;line-height:1.1}
.oa-pp-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:14px;font-family:Nunito,sans-serif;font-weight:800;font-size:14px}
.oa-pp-pick-text{font-family:Nunito,sans-serif;font-size:16px;font-weight:700;line-height:1.3}
.oa-pp-pick-keys{flex-basis:100%;display:flex;gap:10px;margin-left:98px}
button.oa-pp-done{display:none;align-items:center;flex:none;height:48px;padding:0 18px;border:0;border-radius:16px;background:#F1E3BF;color:#08264A;font-family:Fredoka,sans-serif;font-weight:700;font-size:18px;cursor:pointer}
button.oa-pp-done:hover,button.oa-pp-done:focus{background:#EADBB0;color:#08264A}
button.oa-pp-done:focus-visible{box-shadow:none;outline:4px solid #08264A;outline-offset:2px}
.oa-pp-note{margin-top:auto;font-size:14px;font-weight:800;color:#6B5A2E;line-height:1.4}
button.oa-pp-fresh,button.oa-pp-fresh:hover,button.oa-pp-fresh:focus{display:inline;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#1E5A9E;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;white-space:nowrap}
button.oa-pp-fresh:hover{color:#08264A}button.oa-pp-fresh:focus-visible{box-shadow:none;outline:3px solid #08264A;outline-offset:2px;border-radius:4px}
/* 3D keys (gold / blue), used as <a> and <button> */
.oa-pp-key,a.oa-pp-key,button.oa-pp-key{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border:0;border-radius:16px;color:#08264A;text-decoration:none;font-family:Fredoka,sans-serif;font-weight:700;font-size:18px;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .1s,box-shadow .1s,filter .15s;user-select:none}
.oa-pp-key-blue,a.oa-pp-key-blue,button.oa-pp-key-blue,a.oa-pp-key-blue:hover,a.oa-pp-key-blue:focus,button.oa-pp-key-blue:hover,button.oa-pp-key-blue:focus{background:#7CC8FF;color:#08264A;box-shadow:0 5px 0 #3E8EDB}
.oa-pp-key-gold,a.oa-pp-key-gold,button.oa-pp-key-gold,a.oa-pp-key-gold:hover,a.oa-pp-key-gold:focus,button.oa-pp-key-gold:hover,button.oa-pp-key-gold:focus{background:#FFC93C;color:#08264A;box-shadow:0 5px 0 #C9900A}
a.oa-pp-key:hover,button.oa-pp-key:hover{filter:brightness(1.06)}
a.oa-pp-key-blue:active,button.oa-pp-key-blue:active{transform:translateY(4px);box-shadow:0 1px 0 #3E8EDB}
a.oa-pp-key-gold:active,button.oa-pp-key-gold:active{transform:translateY(4px);box-shadow:0 1px 0 #C9900A}
a.oa-pp-key-blue:focus-visible,button.oa-pp-key-blue:focus-visible{box-shadow:0 5px 0 #3E8EDB;outline:4px solid #08264A;outline-offset:3px}
a.oa-pp-key-gold:focus-visible,button.oa-pp-key-gold:focus-visible{box-shadow:0 5px 0 #C9900A;outline:4px solid #08264A;outline-offset:3px}
a.oa-pp-pagelink{align-self:stretch;height:56px;font-size:20px}
/* Tabs */
.oa-pp-tabrow{display:flex;align-items:center;gap:10px;padding-right:70px}
.oa-pp-tabs{display:flex;flex-wrap:wrap;gap:8px}
button.oa-pp-tab{height:52px;padding:0 18px;border:0;border-radius:18px;background:#F1E3BF;color:#08264A;font-family:Fredoka,sans-serif;font-weight:700;font-size:19px;line-height:1;white-space:nowrap;cursor:pointer;transition:none}
button.oa-pp-tab:hover,button.oa-pp-tab:focus{background:#EADBB0;color:#08264A}
button.oa-pp-tab.is-on:hover,button.oa-pp-tab.is-on:focus{filter:brightness(1.08)}
button.oa-pp-tab:focus-visible{box-shadow:none;outline:4px solid #08264A;outline-offset:2px}
.oa-pp-zonerow{display:flex;align-items:center;gap:12px}
h3.oa-pp-zone-h{margin:0;font-family:Fredoka,sans-serif;font-weight:700;font-size:32px;line-height:1;color:#08264A;text-transform:none}
.oa-pp-depth{display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:14px;background:#050A1E;box-shadow:inset 0 0 0 3px #33457F;font-family:Bungee,Fredoka,sans-serif;font-size:18px;line-height:1;color:#7CFFE4}
.oa-pp-depth[hidden]{display:none}
.oa-pp-found{margin-left:auto;font-family:Fredoka,sans-serif;font-weight:600;font-size:19px;color:#6B5A2E}
/* Stamp grid */
.oa-pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;justify-items:center;align-content:start;overflow:auto;min-height:0;flex:1}
.oa-pp-grid.is-badges{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px}
button.oa-pp-stamp,button.oa-pp-stamp:hover,button.oa-pp-stamp:focus{width:168px;padding:6px 0;border:0;border-radius:22px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;color:#8A7A4E;white-space:normal;transition:none}
button.oa-pp-stamp.is-got,button.oa-pp-stamp.is-got:hover,button.oa-pp-stamp.is-got:focus{color:#08264A}
button.oa-pp-stamp.is-badge{width:140px}
button.oa-pp-stamp:focus-visible{box-shadow:none;outline:4px solid #08264A;outline-offset:2px}
.oa-pp-seal{display:flex;align-items:center;justify-content:center;width:128px;height:128px;border-radius:50%;overflow:hidden;transition:transform .15s}
button.oa-pp-stamp.is-badge .oa-pp-seal{width:104px;height:104px}
button.oa-pp-stamp:hover .oa-pp-seal{transform:scale(1.05)}
button.oa-pp-stamp.is-sel .oa-pp-seal{outline:4px solid #08264A;outline-offset:0}
img.oa-pp-cut{width:92px;height:80px;object-fit:contain;display:block}
button.oa-pp-stamp:not(.is-got) img.oa-pp-cut,img.oa-pp-cut.is-locked{filter:brightness(0);opacity:.2}
.oa-pp-pick-seal img.oa-pp-cut{width:62px;height:54px}
.oa-pp-stamp-name{font-family:Fredoka,sans-serif;font-weight:700;font-size:18px;line-height:1.1;text-align:center}
button.oa-pp-stamp.is-badge .oa-pp-stamp-name{font-size:16px}
.oa-pp-soon{width:168px;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:8px;color:#9C8C62}
.oa-pp-soon .oa-pp-seal{background:#F1E3BF;font-family:Fredoka,sans-serif;font-weight:700;font-size:44px}
.oa-pp-soon .oa-pp-stamp-name{font-weight:600;font-size:17px}
.oa-pp-mount .oa-pp-grid{overflow:visible}
/* "New stamp!" pop-up */
.oa-ns-book{width:100%;max-width:480px;padding:14px;border-radius:30px;background:#FFC93C;box-shadow:0 10px 0 #C9900A;outline:none}
.oa-ns-inner{padding:24px 26px 26px;border-radius:22px;background:#FFF8E6;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
h2.oa-ns-title{margin:-8px 0 0;font-family:Fredoka,sans-serif;font-weight:700;font-size:44px;line-height:1;color:#08264A;text-transform:none}
button.oa-ns-stamp,button.oa-ns-stamp:hover,button.oa-ns-stamp:focus{padding:8px;border:0;border-radius:50%;background:transparent;color:#08264A;cursor:pointer;transition:none}
button.oa-ns-stamp:focus-visible{box-shadow:none;outline:4px solid #08264A;outline-offset:2px}
.oa-pp-seal.oa-ns-seal{width:188px;height:188px}
img.oa-pp-cut.is-big{width:128px;height:108px}
@keyframes oaNsThumpA{0%{transform:scale(2.3) rotate(-24deg);opacity:0}55%{transform:scale(.9) rotate(-6deg);opacity:1}75%{transform:scale(1.06) rotate(-6deg)}100%{transform:scale(1) rotate(-6deg)}}
@keyframes oaNsThumpB{0%{transform:scale(2.3) rotate(-24deg);opacity:0}55%{transform:scale(.9) rotate(-6deg);opacity:1}75%{transform:scale(1.06) rotate(-6deg)}100%{transform:scale(1) rotate(-6deg)}}
.oa-ns-seal.thumpA{animation:oaNsThumpA .7s cubic-bezier(.3,1.4,.5,1) both}
.oa-ns-seal.thumpB{animation:oaNsThumpB .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes oaNsRise{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
.oa-ns-rise{animation:oaNsRise .4s ease-out .5s both;align-self:stretch}
.oa-ns-name-row{display:flex;flex-direction:column;align-items:center;gap:8px}
.oa-ns-name{font-family:Fredoka,sans-serif;font-weight:700;font-size:30px;line-height:1.05}
.oa-ns-chips{display:flex;align-items:center;gap:8px}
.oa-ns-chips .oa-pp-chip{height:30px;font-size:15px}
.oa-ns-chips .oa-pp-depth{height:30px;padding:0 10px;font-size:15px;box-shadow:inset 0 0 0 2px #33457F}
.oa-ns-rise.oa-pp-ricky-row{text-align:left;align-items:center}
.oa-ns-rise p.oa-pp-say{margin:0;border-radius:20px 20px 20px 6px}
.oa-pp-bar.is-big .oa-pp-bar-row{font-size:17px}
.oa-ns-keys{align-self:stretch;display:flex;gap:12px;margin-top:4px}
.oa-ns-keys .oa-pp-key{flex:1;height:60px;border-radius:20px;font-size:21px}
.oa-ns-keys .oa-pp-key-blue,.oa-ns-keys button.oa-pp-key-blue:hover,.oa-ns-keys button.oa-pp-key-blue:focus{box-shadow:0 6px 0 #3E8EDB}
.oa-ns-keys .oa-pp-key-gold,.oa-ns-keys button.oa-pp-key-gold:hover,.oa-ns-keys button.oa-pp-key-gold:focus{box-shadow:0 6px 0 #C9900A}
/* Phones and small tablets: the stacked book from the KidsPassportMobile artboard (side/main dissolve, children reorder) */
@media (max-width:767px){
  .oa-pp-overlay{padding:0;align-items:stretch}
  .oa-pp-overlay.is-new{padding:12px;align-items:center}
  .oa-pp-book{border-radius:0;padding:10px;gap:0;flex-direction:column;box-shadow:none}
  .oa-pp-book.is-modal{max-height:none;height:100%}
  .oa-pp-book.is-page{border-radius:22px;min-height:0}
  .oa-pp-book .oa-pp-side,.oa-pp-book .oa-pp-main{display:contents}
  .oa-pp-book .oa-pp-head{order:1;flex:none;height:56px;padding:0 60px 0 8px;gap:10px}
  .oa-pp-book .oa-pp-book-icon{width:26px;height:30px}
  .oa-pp-book .oa-pp-kicker{display:none}
  .oa-pp-book h2.oa-pp-title{font-size:26px}
  .oa-pp-book button.oa-pp-close{top:13px;right:12px;width:50px;height:50px}
  .oa-pp-book .oa-pp-ricky-row{order:2;margin-top:10px;padding:14px 14px 0;border-radius:22px 22px 0 0;background:#FFF8E6;align-items:center;gap:8px}
  .oa-pp-book .oa-pp-ricky{width:46px!important;height:46px!important}
  .oa-pp-book p.oa-pp-say{margin:0;padding:8px 12px;border-radius:16px 16px 16px 6px;font-size:16px;line-height:1.15}
  .oa-pp-book .oa-pp-bars{order:3;flex-direction:row;padding:12px 14px 0;background:#FFF8E6}
  .oa-pp-book .oa-pp-bar{flex:1;min-width:0;gap:4px}
  .oa-pp-book .oa-pp-bar-row{font-size:15px}
  .oa-pp-book .oa-pp-track{height:14px}
  .oa-pp-book .oa-pp-tabrow{order:4;padding:12px 0 0;background:#FFF8E6}
  .oa-pp-book .oa-pp-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 14px;width:100%}
  .oa-pp-book .oa-pp-tabs::-webkit-scrollbar{display:none}
  .oa-pp-book button.oa-pp-tab{flex:none;height:46px;padding:0 16px;border-radius:16px;font-size:17px}
  .oa-pp-book .oa-pp-zonerow{order:5;padding:12px 14px 0;gap:8px;background:#FFF8E6}
  .oa-pp-book h3.oa-pp-zone-h{font-size:23px}
  .oa-pp-book .oa-pp-depth{height:30px;padding:0 9px;font-size:14px;box-shadow:inset 0 0 0 2px #33457F}
  .oa-pp-book .oa-pp-found{font-size:15px}
  .oa-pp-book .oa-pp-grid{order:6;flex:1;min-height:0;padding:12px 8px 14px;gap:10px 4px;background:#FFF8E6}
  .oa-pp-book .oa-pp-grid.is-badges{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 4px}
  .oa-pp-book button.oa-pp-stamp,.oa-pp-book button.oa-pp-stamp.is-badge,.oa-pp-book .oa-pp-soon{width:110px;padding:4px 0;gap:6px;border-radius:18px}
  .oa-pp-book .oa-pp-seal{width:92px;height:92px}
  .oa-pp-book button.oa-pp-stamp.is-badge .oa-pp-seal{width:84px;height:84px}
  .oa-pp-book img.oa-pp-cut{width:68px;height:58px}
  .oa-pp-book .oa-pp-stamp-name,.oa-pp-book button.oa-pp-stamp.is-badge .oa-pp-stamp-name{font-size:15px}
  .oa-pp-book .oa-pp-soon .oa-pp-seal{font-size:34px}
  .oa-pp-book .oa-pp-pick{order:7;flex:none;border-radius:22px 22px 0 0;box-shadow:0 -4px 0 #F1E3BF;padding:12px 14px 14px;font-size:16px}
  .oa-pp-book .oa-pp-pick.is-card{padding:14px;gap:12px}
  .oa-pp-book .oa-pp-pick-seal{width:72px;height:72px}
  .oa-pp-book .oa-pp-pick-seal img.oa-pp-cut{width:54px;height:46px}
  .oa-pp-book .oa-pp-pick-title{font-size:20px}
  .oa-pp-book .oa-pp-chip{height:26px;padding:0 10px;font-size:13px}
  .oa-pp-book .oa-pp-pick-text{font-size:15px}
  .oa-pp-book .oa-pp-pick.is-card .oa-pp-pick-body{gap:4px}
  .oa-pp-book .oa-pp-pick-keys{margin-left:0}
  .oa-pp-book .oa-pp-pick-keys .oa-pp-key{flex:1;height:50px}
  .oa-pp-book button.oa-pp-done{display:inline-flex;height:50px}
  .oa-pp-book.is-page .oa-pp-pick{border-radius:0;box-shadow:none;border-top:4px solid #F1E3BF}
  .oa-pp-book .oa-pp-note{order:8;margin:0;padding:10px 14px 14px;background:#FFF8E6;font-size:13px;border-radius:0 0 22px 22px}
  .oa-pp-book a.oa-pp-pagelink{order:9;margin-top:10px;height:52px;font-size:18px}
  @keyframes oaPpUp{0%{transform:translateY(40px);opacity:0}100%{transform:translateY(0);opacity:1}}
  .oa-pp-book .oa-pp-pick.is-pop{animation:oaPpUp .3s ease-out}
  .oa-ns-inner{padding:18px 16px 18px;gap:12px}
  h2.oa-ns-title{font-size:36px}
  .oa-pp-seal.oa-ns-seal{width:150px;height:150px}
  img.oa-pp-cut.is-big{width:100px;height:84px}
  .oa-ns-keys .oa-pp-key{height:54px;font-size:18px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .oa-pp-pick.is-pop,.oa-ns-rise,.oa-ns-seal.thumpA,.oa-ns-seal.thumpB{animation:none}
  .oa-ns-seal.thumpA,.oa-ns-seal.thumpB{transform:rotate(-6deg)}
  .oa-pp-fill,.oa-pp-seal,.oa-pp-key,button.oa-pp-close{transition:none}
}
/* Zone count chip: all animals stamped -> gold */
.oa-kids-zone-count.is-all{background:#FFC93C!important;color:#08264A!important}
.oa-kids-zone-count::before{content:'';flex:none;width:28px;height:28px;border-radius:50%;background:#FFC93C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2308264A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:767px){.oa-kids-zone-count::before{width:24px;height:24px;background-size:14px}}