/* A New Page, NAN'S LOST THINGS (/css/anp-nan-game.css, Oct 25 2026). Pairs with /js/anp-nan-game.js.
   Littles look: sky and grass, cream cards with 24px corners, big picture buttons, Nan in orange, 56 to 68px targets. Text sits on solid
   cards, never on art. Colours (AA): navy #1F2E55 on cream #FFF6E6 and on white 12+; muted #4B5674 on cream 6.9; the one gold button is
   navy on #F2B544 (7.3); the little label "Nan says" is #7A4E00 on white (6.9). Never red. Motion (Nan's hop, a pop, a glow) only when the
   visitor has not asked for less, and it never runs while the words change: the bubble text swaps first, then Nan moves. */
.ng-panel{width:min(660px,94vw);max-width:min(660px,94vw);background:#FFF6E6}
.ng-panel .sp-head{background:#FFF6E6}
.ng-body{padding:12px 18px 22px;background:#FFF6E6}
.ng-tools{display:flex;justify-content:flex-end;margin:0 0 8px}
.ng-sound{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid #1F2E55;border-radius:999px;background:#fff;color:#1F2E55;font:600 .9375rem/1.2 var(--font-ui,'Lexend',system-ui,sans-serif);cursor:pointer}
.ng-sound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ng-sound:focus-visible{outline:3px solid #1F2E55;outline-offset:3px}
.ng-path{position:relative;height:112px;margin:0 0 12px;border-radius:24px;background:linear-gradient(#DDF0FF,#EAF6FF 62%,#EAF6FF);overflow:hidden}
.ng-path[hidden]{display:none}
.ng-ground{position:absolute;left:0;bottom:0;width:100%;height:70px}
.ng-nanwalk{position:absolute;bottom:20px;left:8%;width:46px;height:auto;transform:translateX(-50%);transform-origin:50% 100%}
.ng-nan{display:flex;align-items:flex-end;gap:10px;margin:12px 0 0}
.ng-nanimg{flex:none;display:block;width:78px;height:auto}
.ng-bubble{position:relative;flex:1;min-width:0;padding:10px 14px;border-radius:22px;background:#fff;border:2px solid #E8D9B5}
.ng-nanimg+.ng-bubble::before{content:"";position:absolute;left:-9px;bottom:18px;width:14px;height:14px;background:#fff;border-left:2px solid #E8D9B5;border-bottom:2px solid #E8D9B5;transform:rotate(45deg)}
.ng-bubble-k{margin:0 0 2px;font:700 .8125rem/1.2 var(--font-ui,'Lexend',system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#7A4E00}
.ng-bubble-t{margin:0;font:500 1.25rem/1.4 var(--font-ui,'Lexend',system-ui,sans-serif);color:#1F2E55}
.ng-say{margin:6px 0 0;text-align:center;font:400 1.0625rem/1.45 var(--font-ui,'Lexend',system-ui,sans-serif);color:#4B5674}
.ng-say b{color:#1F2E55}
.ng-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0}
.ng-pick{position:relative;display:block;padding:0;border:4px solid #fff;border-radius:24px;background:#fff;box-shadow:0 2px 4px rgba(31,46,85,.08),0 12px 24px -10px rgba(31,46,85,.28);overflow:hidden;cursor:pointer;min-height:68px}
.ng-pic{display:block;aspect-ratio:4/3;background:#F4ECDC}
.ng-pic picture,.ng-pic img{display:block;width:100%;height:100%}
.ng-pic img{object-fit:contain}
.ng-pick:disabled{opacity:1;cursor:default}
.ng-pick.is-picked{border-color:#1F2E55}
.ng-pick.is-sel{border-color:#1F2E55;box-shadow:0 0 0 4px rgba(242,181,68,.55)}
div.ng-pick{cursor:default}
.ng-pick.is-right{border-color:#F2B544;box-shadow:0 0 0 4px rgba(242,181,68,.45),0 12px 24px -10px rgba(31,46,85,.28)}
.ng-badge{position:absolute;top:6px;right:6px;display:none;width:34px;height:34px;border-radius:50%;background:#F2B544;color:#1F2E55;align-items:center;justify-content:center}
.ng-badge svg{width:22px;height:22px;fill:#1F2E55}
.ng-pick.is-right .ng-badge{display:flex}
.ng-pick:focus-visible,.ng-hear:focus-visible,.ng-next:focus-visible,.ng-cta:focus-visible,.ng-again:focus-visible,.ng-grown summary:focus-visible{outline:3px solid #1F2E55;outline-offset:3px}
.ng-hear{grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:2px solid #1F2E55;border-radius:999px;background:#fff;color:#1F2E55;font:600 1rem/1.2 var(--font-ui,'Lexend',system-ui,sans-serif);cursor:pointer}
.ng-hear svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ng-hearrow{display:flex;justify-content:center;margin:8px 0 0}
.ng-nextrow{display:flex;justify-content:center;margin:16px 0 0}
.ng-nextrow[hidden]{display:none}
.ng-next,.ng-cta{display:inline-flex;align-items:center;justify-content:center;min-height:60px;min-width:220px;padding:0 30px;border-radius:999px;border:2px solid #C98E1C;background:#F2B544;color:#1F2E55;font:700 1.1875rem/1.1 var(--font-ui,'Lexend',system-ui,sans-serif);text-decoration:none;cursor:pointer}
.ng-friend-pic{display:flex;justify-content:center;margin:2px 0 0}
.ng-friend-pic svg{width:150px;height:150px}
.ng-end{text-align:center;padding:2px 0 4px}
.ng-found{display:flex;justify-content:center;margin:4px 0 0}
.ng-found svg{width:130px;height:130px}
.ng-found img{display:block;width:150px;height:auto}
.ng-end-h{margin:8px 0 6px;font:600 1.625rem/1.25 var(--font-serif,'Fraunces',Georgia,serif);color:#1F2E55;text-wrap:balance}
.ng-end-h:focus{outline:none}
.ng-end-p{margin:0 auto;max-width:36ch;font:400 1.0625rem/1.5 var(--font-ui,'Lexend',system-ui,sans-serif);color:#1F2E55}
.ng-flower{display:flex;justify-content:center;margin:10px 0 0}
.ng-flower svg{width:64px;height:64px}
.ng-grown{margin:14px auto 0;max-width:40ch;text-align:left;font:400 1rem/1.5 var(--font-ui,'Lexend',system-ui,sans-serif);color:#4B5674}
.ng-grown summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#1F2E55;font-weight:600}
.ng-grown ul{margin:4px 0 6px;padding-left:20px}
.ng-grown p{margin:4px 0 0}
.ng-end-go{display:flex;flex-direction:column;align-items:center;gap:10px;margin:16px 0 0}
.ng-again{min-height:48px;padding:0 22px;border-radius:999px;border:2px solid #1F2E55;background:transparent;color:#1F2E55;font:600 1rem/1.1 var(--font-ui,'Lexend',system-ui,sans-serif);cursor:pointer}
@media (max-width:480px){.ng-body{padding:10px 12px 18px}.ng-path{height:96px}.ng-nanwalk{width:38px;bottom:16px}.ng-picks{gap:8px}.ng-pick{border-width:3px;border-radius:18px}.ng-nanimg{width:62px}.ng-bubble-t{font-size:1.125rem}.ng-friend-pic svg{width:120px;height:120px}}
@media (prefers-reduced-motion:no-preference){
  .ng-nanwalk{transition:left .55s ease-in-out}
  .ng-nanwalk.is-happy{animation:ng-hop .6s ease-out}
  .ng-nanwalk.is-tilt{animation:ng-tilt .7s ease-out}
  .ng-pick.is-right{animation:ng-pop .5s ease-out}
  .ng-flower svg{animation:ng-glow 1.4s ease-out}
  @keyframes ng-hop{0%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-14px)}100%{transform:translateX(-50%) translateY(0)}}
  @keyframes ng-tilt{0%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) rotate(-9deg)}70%{transform:translateX(-50%) rotate(5deg)}100%{transform:translateX(-50%) rotate(0)}}
  @keyframes ng-pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
  @keyframes ng-glow{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
}