:root {
  --panel: rgba(8, 20, 36, .78);
  --panel-soft: rgba(12, 27, 47, .64);
  --line: rgba(255,255,255,.16);
  --text: #f7fbff;
  --muted: #b7c6d9;
  --green: #75f3a3;
  --purple: #b7a7ff;
  --pink: #ff6f88;
  --yellow: #ffd978;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #06101c; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.penny-app { min-height: 100vh; background: #06101c; }
.world-stage { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: #081624; }
.world-layer, .world-vignette, .world-fx { position: absolute; inset: -2.5%; width: 105%; height: 105%; }
.world-layer { background-position: center; background-size: cover; background-repeat: no-repeat; will-change: transform, filter; transition: background-image .55s ease, filter .55s ease; }
.world-back { z-index: -5; transform: scale(1.035); animation: worldBack 24s ease-in-out infinite alternate; }
.world-mid { z-index: -4; opacity: .58; transform: scale(1.05); mask-image: linear-gradient(to bottom, transparent 36%, rgba(0,0,0,.1) 48%, black 78%); -webkit-mask-image: linear-gradient(to bottom, transparent 36%, rgba(0,0,0,.1) 48%, black 78%); animation: worldMid 18s ease-in-out infinite alternate; }
.world-fore { z-index: 4; pointer-events: none; opacity: .56; filter: blur(1px) saturate(1.06); transform: scale(1.075); mask-image: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.6) 75%, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.6) 75%, black 100%); animation: worldFore 13s ease-in-out infinite alternate; }
.world-fx { z-index: 3; pointer-events: none; }
.world-vignette { z-index: 5; pointer-events: none; background: radial-gradient(circle at 50% 43%, transparent 34%, rgba(2,8,16,.08) 62%, rgba(2,8,16,.46) 100%), linear-gradient(to bottom, rgba(3,10,18,.18), transparent 27%, transparent 72%, rgba(3,10,18,.42)); }
.world-stage[data-world="welcome"] { background: radial-gradient(circle at 52% 35%, #314e78 0%, #162943 42%, #07111f 100%); }
.world-stage[data-world="welcome"] .world-layer { background-image: none; opacity: 0; }
.world-stage[data-world="welcome"] .world-vignette { background: radial-gradient(circle at 50% 42%, rgba(255,222,160,.08), transparent 34%, rgba(2,8,16,.48) 100%); }
.world-stage[data-world="forest"] .world-layer { background-image: url('/static/assets/worlds/forest.webp'); }
.world-stage[data-world="classroom"] .world-layer { background-image: url('/static/assets/worlds/classroom.webp'); }
.world-stage[data-world="space"] .world-layer { background-image: url('/static/assets/worlds/space.webp'); }
.world-stage[data-world="classroom"] .world-mid { opacity: .28; }
.world-stage[data-world="classroom"] .world-fore { opacity: .24; }
.world-stage[data-world="space"] .world-mid { opacity: .46; }
.world-stage[data-world="space"] .world-fore { opacity: .42; }
@keyframes worldBack { from { transform: scale(1.035) translate3d(-.4%, -.2%, 0); } to { transform: scale(1.06) translate3d(.8%, .45%, 0); } }
@keyframes worldMid { from { transform: scale(1.05) translate3d(.2%, 0, 0); } to { transform: scale(1.085) translate3d(-1.2%, -.3%, 0); } }
@keyframes worldFore { from { transform: scale(1.075) translate3d(-.7%, .5%, 0); } to { transform: scale(1.11) translate3d(1.25%, -.5%, 0); } }

.brand-bar { position: absolute; z-index: 20; top: 22px; left: 28px; right: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; pointer-events: none; }
.brand-name { font-weight: 900; font-size: clamp(32px, 4vw, 58px); letter-spacing: -2px; color: #ffdf7d; text-shadow: 0 5px 18px rgba(0,0,0,.28); }
.brand-name span { color: #ff7f93; font-size: .62em; }
.brand-subtitle { margin-top: -5px; font-size: 16px; color: rgba(255,255,255,.9); letter-spacing: .02em; }
.status-row { display: flex; gap: 10px; pointer-events: auto; }
.glass-pill, .status-pill { border: 1px solid rgba(255,255,255,.24); background: rgba(5,18,34,.64); backdrop-filter: blur(18px); border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.status-pill { display: flex; gap: 8px; align-items: center; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #a6b1c0; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.status-pill[data-state="live"] .status-dot { background: #43ef8b; box-shadow: 0 0 14px rgba(67,239,139,.82); }
.status-pill[data-state="thinking"] .status-dot { background: #ffd86a; box-shadow: 0 0 14px rgba(255,216,106,.7); }
.status-pill[data-state="error"] .status-dot { background: #ff7186; }

.world-nav { position: absolute; z-index: 20; left: 28px; top: 135px; width: 190px; display: grid; gap: 10px; }
.world-btn { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; color: white; border: 1px solid rgba(255,255,255,.18); background: rgba(6,21,37,.72); backdrop-filter: blur(16px); border-radius: 18px; min-height: 66px; padding: 10px 13px; transition: .22s ease; box-shadow: 0 10px 32px rgba(0,0,0,.13); }
.world-btn span { grid-row: 1 / 3; font-size: 25px; }
.world-btn b { font-size: 15px; }
.world-btn small { color: var(--muted); font-size: 11px; }
.world-btn:hover, .world-btn.active { transform: translateX(4px); border-color: rgba(151,255,187,.8); background: rgba(39,90,70,.68); box-shadow: 0 0 24px rgba(117,243,163,.18); }

.penny-zone { position: absolute; z-index: 8; left: clamp(185px, 18vw, 300px); right: clamp(330px, 27vw, 470px); top: 8%; bottom: 145px; pointer-events: none; }
.penny-sprite { --lip: 0; position: absolute; left: 8%; bottom: 0; width: min(42vw, 500px); height: min(74vh, 690px); transform-origin: 50% 92%; animation: pennyIdle 4.4s ease-in-out infinite; transition: filter .25s ease; }
.penny-shadow { position: absolute; z-index: -1; left: 26%; bottom: 1.5%; width: 54%; height: 5.5%; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(12px); transform: scaleX(1.05); }
.penny-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 18px rgba(0,0,0,.26)); transform-origin: 45% 28%; }
.mouth-pulse { position: absolute; z-index: 3; left: 39.4%; top: 28.8%; width: 6.2%; aspect-ratio: 1.65 / 1; border-radius: 50%; background: radial-gradient(ellipse at 50% 65%, rgba(247,151,169,.85) 0 28%, rgba(55,19,33,.95) 31% 100%); opacity: calc(.12 + var(--lip) * .58); transform: scaleY(calc(.38 + var(--lip) * .95)) scaleX(calc(.88 + var(--lip) * .2)); transform-origin: center; filter: blur(.2px); mix-blend-mode: multiply; }
.penny-sprite.talking img { animation: pennyTalk 360ms ease-in-out infinite alternate; }
.penny-sprite[data-animation="wave"] { animation: pennyWave .85s ease-in-out 2; }
.penny-sprite[data-animation="hop"], .penny-sprite[data-animation="celebrate"] { animation: pennyHop .72s ease-in-out 2; }
.penny-sprite[data-animation="wiggle"] { animation: pennyWiggle .48s ease-in-out 4; }
.penny-sprite[data-animation="nod"] img { animation: pennyNod .42s ease-in-out 3; }
.penny-sprite[data-animation="point"] { animation: pennyPoint .72s ease-in-out 2; }
@keyframes pennyIdle { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-4px) rotate(.5deg); } }
@keyframes pennyTalk { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-2px) scaleY(1.006); } }
@keyframes pennyWave { 0%,100% { transform: rotate(0deg) translateY(0); } 30% { transform: rotate(-2.4deg) translateY(-5px); } 65% { transform: rotate(2deg) translateY(-3px); } }
@keyframes pennyHop { 0%,100% { transform: translateY(0) scaleY(1); } 48% { transform: translateY(-26px) scaleY(1.02); } }
@keyframes pennyWiggle { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.8deg); } }
@keyframes pennyNod { 0%,100% { transform: rotate(0); } 50% { transform: rotate(2.2deg) translateY(2px); } }
@keyframes pennyPoint { 0%,100% { transform: translateX(0); } 50% { transform: translateX(12px) rotate(1deg); } }

.speech-bubble { position: absolute; left: min(51%, 540px); top: 21%; max-width: 330px; min-width: 220px; padding: 18px 22px; color: #122540; background: rgba(255,250,241,.94); border: 1px solid rgba(255,255,255,.7); border-radius: 28px; font-weight: 750; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.34; box-shadow: 0 18px 42px rgba(0,0,0,.18); backdrop-filter: blur(8px); }
.speech-bubble::after { content: ""; position: absolute; left: -24px; bottom: 22px; width: 36px; height: 28px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 75%); }

.interaction-rail { position: absolute; z-index: 20; right: 26px; top: 105px; bottom: 145px; width: clamp(260px, 24vw, 350px); display: grid; grid-template-rows: minmax(245px, .92fr) minmax(180px, .7fr); gap: 14px; }
.camera-card, .conversation-card { border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: rgba(7,20,37,.76); backdrop-filter: blur(20px); box-shadow: 0 18px 48px rgba(0,0,0,.23); overflow: hidden; }
.camera-card { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.camera-header { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; color: #dce9f7; }
.camera-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4fda84; margin-right: 6px; box-shadow: 0 0 12px rgba(79,218,132,.65); }
.icon-btn { width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: white; }
.camera-window { position: relative; flex: 1; min-height: 158px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg,#1e344a,#0c1c2d); border: 1px solid rgba(255,255,255,.12); }
.camera-window video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
.camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #aebed0; }
.camera-placeholder span { font-size: 32px; }
.show-penny-btn { border: 1px solid rgba(141,228,255,.5); background: linear-gradient(135deg,rgba(72,155,190,.35),rgba(109,91,196,.36)); color: white; border-radius: 14px; padding: 10px 12px; font-weight: 850; }
.camera-hint { color: #91a5bc; font-size: 10px; line-height: 1.35; text-align: center; }
.conversation-card { padding: 16px; overflow: auto; }
.conversation-block + .conversation-block { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.speaker { font-weight: 900; font-size: 11px; letter-spacing: .12em; margin-bottom: 7px; }
.speaker.you { color: #7eb8ff; }
.speaker.penny { color: #ffd46b; }
.transcript { color: #ecf4ff; line-height: 1.45; font-size: 14px; }

.learning-card { position: absolute; z-index: 17; left: 50%; top: 21%; transform: translateX(-18%); width: min(420px, 34vw); padding: 20px; color: #15253b; background: rgba(255,252,244,.95); border: 1px solid rgba(255,255,255,.75); border-radius: 25px; box-shadow: 0 20px 60px rgba(0,0,0,.24); backdrop-filter: blur(12px); }
.learning-title { text-align: center; font-weight: 900; margin-bottom: 12px; font-size: 19px; }
.objects, .math-group { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.object-emoji { font-size: 34px; display: inline-block; animation: objectPop .35s ease both; }
.object-emoji.removed { opacity: .32; filter: grayscale(.7); transform: scale(.86); }
.math-line { text-align: center; font-size: 34px; font-weight: 950; margin-bottom: 13px; }
.math-groups { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.math-operator { font-size: 27px; font-weight: 900; }
.number-line { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.number-tick { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #eef1f7; font-weight: 850; }
.number-tick.active { background: #ffe07d; transform: scale(1.15); }
.word-emoji { font-size: 54px; text-align: center; }
.word-main { text-align: center; font-size: 31px; font-weight: 950; }
.word-meaning { text-align: center; color: #4d5f70; margin-top: 6px; line-height: 1.4; }
@keyframes objectPop { from { transform: scale(.2) rotate(-10deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.celebration { position: absolute; z-index: 40; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -8%; font-size: 26px; animation: confettiFall 1.8s ease-in forwards; }
@keyframes confettiFall { to { transform: translateY(112vh) rotate(540deg); opacity: .15; } }

.bottom-dock { position: absolute; z-index: 24; left: 26px; right: 26px; bottom: 22px; display: grid; grid-template-columns: auto minmax(250px, 1fr); gap: 14px; align-items: center; }
.dock-controls, .type-row { border: 1px solid rgba(255,255,255,.2); background: rgba(6,18,34,.78); backdrop-filter: blur(20px); border-radius: 23px; box-shadow: 0 18px 48px rgba(0,0,0,.25); }
.dock-controls { display: flex; flex-wrap:wrap; gap: 8px; padding: 9px; }
.dock-btn { border: 1px solid rgba(255,255,255,.13); color: white; background: rgba(255,255,255,.08); min-height: 48px; padding: 0 17px; border-radius: 16px; font-weight: 850; }
.dock-btn.start { background: linear-gradient(135deg,#55d980,#248d58); box-shadow: 0 0 24px rgba(85,217,128,.24); }
.dock-btn.stop { background: linear-gradient(135deg,#ff7387,#d33b54); }
.type-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; overflow: hidden; }
.type-row input { min-width:0; border: 0; outline: 0; color: white; background: transparent; min-height: 58px; padding: 0 20px; font-size: 16px; }
.type-row input::placeholder { color: #8ea1b9; }
.type-row button { border: 0; background: transparent; color: #a6c5ff; font-size: 24px; }
.type-row #sendBtn { min-width:50px; }
.type-row .draw-action { min-width:72px; min-height:48px; padding:0 12px; font-size:16px; font-weight:850; color:#d9ffe3; background:rgba(85,217,128,.1); }
.draw-action[hidden] { display:none !important; }
.visual-demo-btn, .age-select { position: absolute; z-index: 24; top: 91px; border: 1px solid rgba(255,255,255,.18); background: rgba(7,20,37,.7); backdrop-filter: blur(14px); color: white; border-radius: 14px; min-height: 40px; }
.visual-demo-btn { left: 28px; top: auto; bottom: 94px; padding: 0 15px; font-weight: 800; }
.age-select { right: 28px; top: 68px; padding: 0 12px; }

.debug-panel { background: #050c15; color: #cfe2f5; padding: 12px 18px; }
.debug-panel pre { max-height: 300px; overflow: auto; white-space: pre-wrap; font-size: 12px; }

@media (max-width: 1050px) {
  .world-nav { width: 158px; }
  .world-btn { grid-template-columns: 34px 1fr; }
  .penny-zone { left: 150px; right: 290px; }
  .interaction-rail { width: 275px; }
  .penny-sprite { width: min(48vw, 440px); }
}
@media (max-width: 820px) {
  .world-stage { min-height: 1100px; }
  .brand-bar { left: 16px; right: 16px; top: 14px; }
  .status-row { flex-direction: column; align-items: flex-end; }
  .glass-pill { display: none; }
  .world-nav { left: 12px; right: 12px; top: 96px; width: auto; display: flex; overflow-x: auto; }
  .world-btn { min-width: 150px; }
  .penny-zone { left: 10px; right: 10px; top: 150px; bottom: 470px; }
  .penny-sprite { left: 4%; width: min(69vw, 430px); height: 540px; }
  .speech-bubble { right: 12px; left: auto; top: 20%; max-width: 42vw; }
  .interaction-rail { left: 12px; right: 12px; top: auto; bottom: 185px; width: auto; height: 270px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .bottom-dock { left: 12px; right: 12px; bottom: 14px; grid-template-columns: 1fr; }
  .visual-demo-btn { bottom: 138px; left: 14px; }
  .learning-card { left: 50%; top: 34%; transform: translateX(-50%); width: min(88vw,420px); }
}
@media (prefers-reduced-motion: reduce) {
  .world-back, .world-mid, .world-fore, .penny-sprite, .penny-sprite img { animation: none !important; }
}

/* v5 camera selector: Chrome/Windows can expose laptop, USB, virtual, and phone cameras. */
.camera-device-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; }
.camera-device-row label { color: #9eb2c7; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.camera-select { width: 100%; min-width: 0; height: 32px; padding: 0 28px 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #e9f4ff; font-size: 11px; outline: none; }
.camera-select:focus { border-color: rgba(126,184,255,.9); box-shadow: 0 0 0 2px rgba(126,184,255,.18); }
.camera-select option { color: #102034; background: #fff; }
.camera-device-name { color: #91a5bc; font-size: 9.5px; line-height: 1.35; text-align: center; }

/* The v5 Penny asset is a PNG cutout, not the matte WebP from v4. */
.penny-sprite img { background: transparent !important; }

/* --------------------------------------------------------------------------
   Penny v6: onboarding, levels, livelier world, and safer avatar animation
   -------------------------------------------------------------------------- */
.progress-hud {
  position: absolute;
  z-index: 22;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(180px, 300px) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(6,18,34,.70);
  backdrop-filter: blur(18px);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.20);
}
.level-badge, .points-badge {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff3b7;
  background: rgba(255,217,120,.12);
  border: 1px solid rgba(255,217,120,.24);
}
.level-badge strong, .points-badge strong { font-size: 17px; color: #ffe17f; }
.progress-copy { min-width: 0; }
.challenge-label { font-size: 12px; font-weight: 850; color: #f5f9ff; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-track { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.10); }
.progress-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg,#72e69a,#ffe179); transition: width .45s ease; }
.profile-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.profile-strip span { padding: 5px 8px; border-radius: 999px; font-size: 10px; color: #c7d6e7; background: rgba(255,255,255,.06); }

.penny-sprite { --lip: 0; }
.penny-sprite img { background: transparent !important; }
.penny-sprite.talking img {
  animation: pennyTalkV6 260ms ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.26)) saturate(1.03);
}
@keyframes pennyTalkV6 {
  from { transform: translateY(0) rotate(-.12deg) scale(1); }
  to   { transform: translateY(calc(-1px - var(--lip) * 3px)) rotate(.18deg) scale(calc(1 + var(--lip) * .004)); }
}

/* Make the 2.5D world visibly alive rather than nearly static. */
.world-back { animation: worldBackV6 17s ease-in-out infinite alternate; }
.world-mid  { animation: worldMidV6 12s ease-in-out infinite alternate; }
.world-fore { animation: worldForeV6 8s ease-in-out infinite alternate; }
@keyframes worldBackV6 {
  0%   { transform: scale(1.045) translate3d(-1.0%, -.45%, 0); filter: saturate(1.00) brightness(1.00); }
  50%  { transform: scale(1.075) translate3d(.65%, .20%, 0); filter: saturate(1.035) brightness(1.025); }
  100% { transform: scale(1.095) translate3d(1.25%, .55%, 0); filter: saturate(1.02) brightness(1.00); }
}
@keyframes worldMidV6 {
  0%   { transform: scale(1.06) translate3d(.9%, .25%, 0); }
  50%  { transform: scale(1.10) translate3d(-.55%, -.35%, 0); }
  100% { transform: scale(1.125) translate3d(-1.45%, .10%, 0); }
}
@keyframes worldForeV6 {
  0%   { transform: scale(1.09) translate3d(-1.35%, .85%, 0); }
  50%  { transform: scale(1.13) translate3d(.5%, -.35%, 0); }
  100% { transform: scale(1.16) translate3d(1.6%, -.75%, 0); }
}

@media (max-width: 1050px) {
  .progress-hud { top: 88px; grid-template-columns: auto minmax(150px, 240px) auto; }
}
@media (max-width: 820px) {
  .progress-hud { top: 138px; width: calc(100% - 24px); grid-template-columns: auto 1fr auto; }
}


.friend-card {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,20,36,.76);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}
.friend-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #ffd978; text-transform: uppercase; margin-bottom: 10px; }
.friend-body { display: flex; gap: 12px; align-items: center; }
.friend-preview-wrap {
  width: 96px; height: 96px; flex: 0 0 96px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  display: grid; place-items: center; overflow: hidden;
}
.friend-preview-wrap img { width: 88px; height: 88px; object-fit: contain; }
.friend-meta { display: grid; gap: 8px; }
.friend-line { color: var(--text); font-size: 14px; font-weight: 700; }
.drawing-wrap { display: grid; place-items: center; min-height: 180px; }
.drawing-wrap svg { max-width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.12)); }
.drawing-emoji { font-size: 90px; line-height: 1; }
.profile-strip { flex-wrap: wrap; }


/* v8 character mouth overlays and animal buddy sprite */
.interaction-rail { grid-template-rows: minmax(245px, .82fr) auto minmax(180px, .72fr); align-content: start; }
.penny-zone { right: clamp(355px, 30vw, 560px); }
.penny-sprite { --mouth-left: 39.4%; --mouth-top: 34.4%; --mouth-width: 7.2%; }
.talk-mouth {
  position: absolute;
  z-index: 3;
  left: var(--mouth-left);
  top: var(--mouth-top);
  width: var(--mouth-width);
  aspect-ratio: 1.65 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,174,190,.94) 0 18%, rgba(142,47,73,.98) 24% 100%);
  opacity: calc(.14 + var(--lip) * .82);
  transform: scaleY(calc(.28 + var(--lip) * 1.05)) scaleX(calc(.84 + var(--lip) * .22));
  transform-origin: center;
  filter: blur(.12px) drop-shadow(0 1px 1px rgba(0,0,0,.25));
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.18);
}
.penny-mouth { mix-blend-mode: multiply; }
.buddy-sprite {
  --lip: 0;
  --mouth-left: 46%;
  --mouth-top: 63%;
  --mouth-width: 13%;
  position: absolute;
  right: 0;
  bottom: 14px;
  width: min(17vw, 210px);
  height: min(36vh, 250px);
  transform-origin: 50% 92%;
  animation: buddyIdle 4.8s ease-in-out infinite;
}
.buddy-sprite[hidden] { display: none !important; }
.buddy-shadow { position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 1%; height: 11%; border-radius: 50%; background: rgba(0,0,0,.22); filter: blur(10px); }
.buddy-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 15px 16px rgba(0,0,0,.20)); }
.buddy-sprite.talking img { animation: buddyTalk 260ms ease-in-out infinite alternate; }
.buddy-mouth { mix-blend-mode: normal; }
.buddy-sprite[data-animal="giraffe"] { --mouth-left: 44.5%; --mouth-top: 61%; --mouth-width: 11.5%; }
.buddy-sprite[data-animal="cat"] { --mouth-left: 45%; --mouth-top: 63%; --mouth-width: 13%; }
.buddy-sprite[data-animal="dog"] { --mouth-left: 45.5%; --mouth-top: 62.5%; --mouth-width: 13%; }
.buddy-sprite[data-animal="duck"] { --mouth-left: 45.5%; --mouth-top: 60.5%; --mouth-width: 15%; }
.buddy-sprite[data-animal="horse"] { --mouth-left: 45%; --mouth-top: 63%; --mouth-width: 12.5%; }
.buddy-sprite[data-animal="unicorn"] { --mouth-left: 45%; --mouth-top: 62%; --mouth-width: 12.5%; }
@keyframes buddyIdle { 0%,100% { transform: translateY(0) rotate(.4deg); } 50% { transform: translateY(-3px) rotate(-.3deg); } }
@keyframes buddyTalk { from { transform: translateY(0) scale(1); } to { transform: translateY(calc(-1px - var(--lip) * 2.4px)) scale(calc(1 + var(--lip) * .006)); } }
.friend-card { margin-top: 0; }
@media (max-width: 1100px) {
  .penny-zone { right: 20px; left: 150px; }
  .buddy-sprite { width: min(22vw, 180px); height: min(30vh, 210px); right: 4px; }
}

/* v8.1: lock Penny's sprite box to the PNG aspect ratio so the mouth overlay
   stays on the real mouth rather than drifting when the viewport changes. */
.penny-sprite {
  width: min(42vw, 500px, 58vh);
  height: auto;
  aspect-ratio: 1080 / 1376;
  --mouth-left: 38.1%;
  --mouth-top: 30.6%;
  --mouth-width: 7.4%;
}

/* v9: preserve original face artwork; speech drives subtle whole-avatar motion. */
.talk-mouth, .mouth-pulse { display: none !important; }
.friend-preview-wrap { display: none; }
.friend-card { padding: 10px 14px; }
.friend-title { font-size: 10px; margin-bottom: 5px; }
.friend-meta { gap: 4px; }
.interaction-rail { grid-template-rows: minmax(210px, 1fr) auto minmax(160px, .8fr); }
.object-emoji { animation: none; font-size: clamp(28px, 3vw, 42px); }
.math-group { padding: 12px; border-radius: 16px; background: #eef3fc; }
.learning-active .world-layer { animation-play-state: paused; }
.learning-active .speech-bubble { top: auto; bottom: 0; font-size: 16px; min-width: 0; }
.learning-card { max-height: 48vh; overflow-y: auto; }
@media (max-width: 820px) {
 .interaction-rail { grid-template-rows: 1fr; }
 .friend-card { display: none; }
 .learning-active .speech-bubble { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .world-layer, .penny-sprite, .penny-sprite img { animation: none !important; }
}

/* v10: the world remains gently alive even when a learning card is visible. */
.world-stage.learning-active .world-back { animation-play-state: running !important; }
.world-stage.learning-active .world-mid { animation-play-state: running !important; }
.world-stage.learning-active .world-fore { animation-play-state: running !important; }

/* -------------------------------------------------------------------------
   v11: optional Marble/GLB forest renderer
   ------------------------------------------------------------------------- */
.forest-3d {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: none;
  overflow: hidden;
  background: #07131d;
  pointer-events: none;
}
.forest-3d-canvas { width: 100%; height: 100%; display: block; }
.world-stage[data-world="forest"][data-forest3d="ready"] .forest-3d { display: block; }
.world-stage[data-world="forest"][data-forest3d="ready"] .world-back,
.world-stage[data-world="forest"][data-forest3d="ready"] .world-mid,
.world-stage[data-world="forest"][data-forest3d="ready"] .world-fore { opacity: 0; }
.world-stage .world-layer { transition: opacity .55s ease, background-image .55s ease, filter .55s ease; }

/* -------------------------------------------------------------------------
   v11: developer utility controls
   ------------------------------------------------------------------------- */
.utility-buttons {
  position: absolute;
  z-index: 25;
  left: 18px;
  bottom: 78px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.utility-buttons .visual-demo-btn,
.audit-btn {
  position: static !important;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(6,21,37,.80);
  color: white;
  backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 9px 12px;
  font-weight: 800;
  box-shadow: 0 9px 24px rgba(0,0,0,.17);
}
.audit-btn:disabled { opacity: .42; }

/* -------------------------------------------------------------------------
   v11: basic character performance for every flat character asset
   These transforms are deliberately subtle so they work across giraffe/cat/
   dog/duck/horse/unicorn without requiring a separate skeletal rig.
   ------------------------------------------------------------------------- */
.penny-sprite {
  --voice-energy: 0;
  animation: pennyIdleV11 4.8s ease-in-out infinite;
  will-change: transform;
}
.penny-sprite img {
  will-change: transform, filter;
  transform-origin: 50% 82%;
}
.penny-sprite.talking img {
  animation: pennyTalkingV11 300ms ease-in-out infinite alternate !important;
}
.penny-sprite[data-emotion="listening"] img {
  animation: pennyListenV11 1.5s ease-in-out infinite alternate;
}
.penny-sprite[data-emotion="thinking"] img {
  animation: pennyThinkV11 1.7s ease-in-out infinite alternate;
}
.penny-sprite[data-emotion="excited"] img,
.penny-sprite[data-emotion="proud"] img {
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.26)) saturate(1.08) brightness(1.025);
}
.penny-sprite[data-animation="wave"] { animation: pennyWaveV11 .72s ease-in-out 3 !important; }
.penny-sprite[data-animation="hop"],
.penny-sprite[data-animation="celebrate"] { animation: pennyCelebrateV11 .62s ease-in-out 3 !important; }
.penny-sprite[data-animation="wiggle"] { animation: pennyWiggleV11 .42s ease-in-out 4 !important; }
.penny-sprite[data-animation="nod"] img { animation: pennyNodV11 .40s ease-in-out 3 !important; }
.penny-sprite[data-animation="point"] { animation: pennyPointV11 .70s ease-in-out 2 !important; }

@keyframes pennyIdleV11 {
  0%,100% { transform: translateY(0) rotate(-.28deg) scale(1); }
  50% { transform: translateY(-5px) rotate(.34deg) scale(1.004); }
}
@keyframes pennyTalkingV11 {
  from { transform: translateY(0) rotate(-.12deg) scale(1); }
  to { transform: translateY(calc(-2px - var(--voice-energy) * 3px)) rotate(.18deg) scale(calc(1 + var(--voice-energy) * .006)); }
}
@keyframes pennyListenV11 {
  from { transform: translateX(0) rotate(-.5deg) scale(1.002); }
  to { transform: translateX(3px) translateY(-2px) rotate(1.1deg) scale(1.012); }
}
@keyframes pennyThinkV11 {
  from { transform: translateY(0) rotate(-1.2deg); }
  to { transform: translateY(-2px) rotate(1.8deg); }
}
@keyframes pennyWaveV11 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-6px) rotate(-2.8deg); }
  65% { transform: translateY(-3px) rotate(2.5deg); }
}
@keyframes pennyCelebrateV11 {
  0%,100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-28px) scale(1.025); }
  70% { transform: translateY(-8px) rotate(1.2deg); }
}
@keyframes pennyWiggleV11 { 0%,100% { transform: rotate(-1.8deg); } 50% { transform: rotate(2.2deg); } }
@keyframes pennyNodV11 { 0%,100% { transform: rotate(0); } 50% { transform: translateY(3px) rotate(2.6deg); } }
@keyframes pennyPointV11 { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(14px) rotate(1.1deg); } }

@media (prefers-reduced-motion: reduce) {
  .penny-sprite, .penny-sprite img { animation: none !important; }
}

/* -------------------------------------------------------------------------
   v12: guided forest 3D polish
   ------------------------------------------------------------------------- */
.world-stage[data-world="forest"][data-forest3d="ready"] .world-fx { opacity: .46; }
.world-stage[data-world="forest"][data-forest3d="ready"] .world-vignette { background: radial-gradient(circle at 50% 40%, rgba(255,235,170,.03), transparent 30%, rgba(2,8,16,.40) 100%); }

/* ========================================================================
   v13 — grown-up setup and deterministic character controller
   ======================================================================== */
.grownup-setup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 20% 18%, rgba(98,146,220,.26), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255,205,120,.18), transparent 32%),
    rgba(4,12,23,.94);
  backdrop-filter: blur(14px);
}
.grownup-setup.is-hidden { display: none; }
.grownup-panel {
  width: min(760px, 96vw);
  max-height: 94vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  padding: 28px;
  color: #eff6ff;
  background: linear-gradient(180deg, rgba(16,36,60,.98), rgba(7,21,38,.98));
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}
.grownup-kicker { font-size: 12px; font-weight: 900; letter-spacing: .14em; color: #ffd978; }
.grownup-panel h1 { margin: 8px 0 8px; font-size: clamp(25px, 4vw, 38px); }
.grownup-intro { margin: 0 0 22px; color: #c9d8ea; line-height: 1.55; }
.grownup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.setup-field { display: grid; gap: 7px; font-weight: 800; }
.setup-field span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #b9cae0; }
.setup-field select, .setup-field input[type="text"] {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  padding: 11px 12px; color: white; background: rgba(255,255,255,.08); outline: none; font: inherit; font-weight: 800;
}
.setup-field input[type="text"]::placeholder { color: #8fa6c0; font-weight: 600; }
.setup-field input[type="text"]:focus, .setup-field select:focus { border-color: #ffd978; }
.setup-field small { color: #b9cae0; font-weight: 500; }
.voice-boost-row { grid-column: auto; align-self: end; }
.setup-games { width: 100%; margin-top: 10px; padding: 12px 18px; font-size: 15px; }
.camera-consent-row {
  grid-column: 1 / -1; display: flex; gap: 12px; padding: 14px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.05);
}
.camera-consent-row input { margin-top: 3px; width: 18px; height: 18px; }
.camera-consent-row span { display: grid; gap: 4px; }
.camera-consent-row small { color: #b9cae0; line-height: 1.4; font-weight: 500; }
.setup-camera-field { grid-column: 1 / -1; }
.setup-camera-preview-wrap {
  grid-column: 1 / -1; position: relative; min-height: 230px; border-radius: 20px; overflow: hidden;
  background: #07111d; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center;
}
#setupCameraPreview { width: 100%; height: 260px; object-fit: cover; display: none; transform: scaleX(-1); }
.setup-camera-placeholder { color: #8fa6c0; font-weight: 800; }
.setup-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.setup-secondary, .setup-start {
  border: 0; border-radius: 14px; padding: 11px 15px; font-weight: 900; cursor: pointer;
}
.setup-secondary { color: white; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); }
.setup-start { width: 100%; margin-top: 20px; padding: 14px 18px; color: #18243a; background: #ffd978; font-size: 16px; }
.setup-start:disabled, .setup-secondary:disabled { opacity: .48; cursor: wait; }
.setup-status { grid-column: 1 / -1; min-height: 22px; color: #cbd8e8; font-size: 13px; }
.setup-status.ok { color: #8cf0ae; }
.setup-status.warn { color: #ffd978; }
.setup-status.error { color: #ff9c9c; }
.setup-footnote { color: #93a8c0; font-size: 11px; line-height: 1.45; }

/* v13 uses sprite atlases. The fallback PNG is kept only for load failure. */
.character-atlas {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0 0;
  background-color: transparent;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.26));
  transform-origin: 50% 86%;
  will-change: transform, filter, opacity;
}
.character-fallback { opacity: 0 !important; pointer-events: none; }
.penny-sprite { --voice-energy: 0; }

/* Species-appropriate greeting motion. No generic human wave. */
.penny-sprite[data-character="giraffe"].character-greet .character-atlas { animation: v13GiraffeGreet .95s ease-in-out 1; transform-origin: 48% 88%; }
.penny-sprite[data-character="cat"].character-greet .character-atlas { animation: v13CatGreet .82s ease-in-out 1; }
.penny-sprite[data-character="dog"].character-greet .character-atlas { animation: v13DogGreet .82s ease-in-out 1; }
.penny-sprite[data-character="duck"].character-greet .character-atlas { animation: v13DuckGreet .78s ease-in-out 1; }
.penny-sprite[data-character="horse"].character-greet .character-atlas { animation: v13HorseGreet .9s ease-in-out 1; }
.penny-sprite[data-character="unicorn"].character-greet .character-atlas { animation: v13UnicornGreet .95s ease-in-out 1; }

.penny-sprite.character-listening .character-atlas { animation: v13Listen 1.7s ease-in-out infinite alternate; }
.penny-sprite.character-speaking .character-atlas { animation: v13Talk .28s ease-in-out infinite alternate; }
.penny-sprite.character-celebrating .character-atlas { animation: v13Celebrate .34s ease-in-out infinite alternate; }
.penny-sprite.character-travelling { opacity: 0; transform: translateY(10px) scale(.82); transition: opacity .38s ease, transform .38s ease; }
.penny-sprite:not(.character-travelling) { opacity: 1; transition: opacity .42s ease, transform .42s ease; }

@keyframes v13GiraffeGreet { 0%,100%{transform:translateY(0) rotate(0)} 42%{transform:translateY(8px) rotate(1.7deg) scale(.995)} 66%{transform:translateY(2px) rotate(-.7deg)} }
@keyframes v13CatGreet { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-5px) rotate(-2.4deg) scale(1.01)} }
@keyframes v13DogGreet { 0%,100%{transform:translateY(0) rotate(0)} 42%{transform:translateY(-4px) rotate(2.4deg) scale(1.012)} 70%{transform:rotate(-1deg)} }
@keyframes v13DuckGreet { 0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-6px) rotate(-3deg) scale(1.015)} 65%{transform:translateY(-2px) rotate(3deg)} }
@keyframes v13HorseGreet { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(5px) rotate(1.8deg) scale(.998)} }
@keyframes v13UnicornGreet { 0%,100%{transform:translateY(0) rotate(0);filter:drop-shadow(0 18px 18px rgba(0,0,0,.26))} 44%{transform:translateY(6px) rotate(1.9deg);filter:drop-shadow(0 18px 18px rgba(0,0,0,.26)) brightness(1.06)} }
@keyframes v13Listen { from{transform:translateX(0) rotate(-.35deg)} to{transform:translateX(3px) translateY(-2px) rotate(.8deg) scale(1.006)} }
@keyframes v13Talk { from{transform:translateY(0) scale(1)} to{transform:translateY(calc(-1px - var(--voice-energy) * 2.5px)) scale(calc(1 + var(--voice-energy) * .004))} }
@keyframes v13Celebrate { from{transform:translateY(-4px) scale(1.01)} to{transform:translateY(-15px) scale(1.025)} }

@media (max-width: 720px) {
  .grownup-panel { padding: 20px; }
  .grownup-grid { grid-template-columns: 1fr; }
  .camera-consent-row, .setup-camera-field, .setup-camera-preview-wrap, .setup-actions, .setup-status { grid-column: 1; }
}

.penny-sprite { animation: none !important; }
.penny-sprite:not(.character-listening):not(.character-speaking):not(.character-celebrating):not(.character-greet):not(.character-travelling) .character-atlas {
  animation: v13Idle 4.9s ease-in-out infinite alternate;
}
@keyframes v13Idle { from { transform: translateY(0) rotate(-.18deg); } to { transform: translateY(-4px) rotate(.24deg) scale(1.002); } }

.calibration-panel {
  position: fixed; z-index: 1000; left: 12px; top: 12px; width: 250px;
  display: grid; gap: 7px; padding: 12px; border-radius: 14px;
  color: white; background: rgba(5,15,27,.92); border: 1px solid rgba(255,255,255,.2);
  font-size: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.calibration-panel select, .calibration-panel button { width: 100%; padding: 7px; border-radius: 8px; }
body:has(.calibration-panel) .forest-3d { pointer-events: auto !important; }
.world-nav { transition: opacity .35s ease, transform .35s ease; }
.world-nav.world-nav-hidden { opacity: 0; transform: translateX(-18px); pointer-events: none; }

/* v13 atlas geometry: each conversation frame is 512×768 (2:3). */
.penny-sprite {
  width: min(38vw, 470px, 48vh);
  height: auto !important;
  aspect-ratio: 2 / 3;
}

/* ========================================================================
   v13.1 — stabilization: visible character states + diagnostics
   ======================================================================== */
/* Keep Spark canvas in the normal world stacking context. Negative z-index
   made it too easy for a successfully-loaded SPZ to sit visually behind the
   stage background on some browsers/GPUs. */
.forest-3d { z-index: 0 !important; }
.world-stage[data-world="forest"][data-forest3d="ready"] .forest-3d { opacity: 1; }
.world-stage[data-world="forest"][data-forest3d="loading"] .forest-3d { opacity: 0; }

/* Animation must be obvious enough to read as a state change on a child UI.
   These are intentionally stronger than v13 while remaining gentle. */
@keyframes v131Idle {
  0%   { transform: translateY(0) rotate(-.35deg) scale(1); }
  50%  { transform: translateY(-5px) rotate(.18deg) scale(1.004); }
  100% { transform: translateY(-2px) rotate(.45deg) scale(1.002); }
}
@keyframes v131GiraffeGreet {
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  45% { transform: translateY(18px) rotate(3.2deg) scale(.975); }
  72% { transform: translateY(5px) rotate(-1.2deg) scale(1.005); }
}
@keyframes v131CatGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  40% { transform: translate(-8px,-12px) rotate(-5deg) scale(1.025); }
  72% { transform: translate(4px,-3px) rotate(2deg); }
}
@keyframes v131DogGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translate(8px,-10px) rotate(5deg) scale(1.025); }
  70% { transform: translate(-3px,-2px) rotate(-2deg); }
}
@keyframes v131DuckGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-15px) rotate(-6deg) scale(1.03); }
  58% { transform: translateY(-5px) rotate(6deg); }
}
@keyframes v131HorseGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(14px) rotate(3deg) scale(.98); }
  72% { transform: translateY(2px) rotate(-1deg); }
}
@keyframes v131UnicornGreet {
  0%,100% { transform: translateY(0) rotate(0); filter:drop-shadow(0 18px 18px rgba(0,0,0,.26)); }
  42% { transform: translateY(18px) rotate(4.5deg) scale(.975); filter:drop-shadow(0 18px 18px rgba(0,0,0,.26)) brightness(1.15); }
  72% { transform: translateY(2px) rotate(-1.5deg) scale(1.01); filter:drop-shadow(0 0 18px rgba(255,220,120,.45)); }
}
@keyframes v131Listen {
  from { transform: translateX(-3px) rotate(-1.3deg) scale(.998); }
  to   { transform: translate(6px,-5px) rotate(2deg) scale(1.012); }
}
@keyframes v131Talk {
  from { transform: translateY(1px) scale(1); }
  to   { transform: translateY(calc(-4px - var(--voice-energy) * 8px)) scale(calc(1.006 + var(--voice-energy) * .015)); }
}
@keyframes v131Celebrate {
  from { transform: translateY(-6px) rotate(-2deg) scale(1.02); }
  to   { transform: translateY(-34px) rotate(2.5deg) scale(1.065); }
}
.penny-sprite:not(.character-listening):not(.character-speaking):not(.character-celebrating):not(.character-greet):not(.character-travelling) .character-atlas { animation: v131Idle 3.8s ease-in-out infinite alternate !important; }
.penny-sprite[data-character="giraffe"].character-greet .character-atlas { animation: v131GiraffeGreet 1.15s ease-in-out 1 !important; }
.penny-sprite[data-character="cat"].character-greet .character-atlas { animation: v131CatGreet 1.0s ease-in-out 1 !important; }
.penny-sprite[data-character="dog"].character-greet .character-atlas { animation: v131DogGreet 1.0s ease-in-out 1 !important; }
.penny-sprite[data-character="duck"].character-greet .character-atlas { animation: v131DuckGreet .95s ease-in-out 1 !important; }
.penny-sprite[data-character="horse"].character-greet .character-atlas { animation: v131HorseGreet 1.1s ease-in-out 1 !important; }
.penny-sprite[data-character="unicorn"].character-greet .character-atlas { animation: v131UnicornGreet 1.15s ease-in-out 1 !important; }
.penny-sprite.character-listening .character-atlas { animation: v131Listen 1.5s ease-in-out infinite alternate !important; }
.penny-sprite.character-speaking .character-atlas { animation: v131Talk .24s ease-in-out infinite alternate !important; }
.penny-sprite.character-celebrating .character-atlas { animation: v131Celebrate .28s ease-in-out infinite alternate !important; }

.character-test-panel {
  position: fixed; z-index: 2000; left: 16px; top: 16px; width: 280px;
  display: grid; gap: 10px; padding: 14px; border-radius: 16px;
  background: rgba(5,15,27,.96); color: white; border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.45); font-size: 12px;
}
.character-test-panel select, .character-test-panel button { padding: 8px; border-radius: 9px; }
.character-test-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.character-test-panel small { color: #aebfd2; line-height: 1.4; }

/* -------------------------------------------------------------------------
   v13.5 — make character state changes unmistakably visible.
   These are deliberate 2D cut-out motions, not skeletal rig animation.
   ------------------------------------------------------------------------- */
.penny-sprite.character-idle .character-atlas {
  animation: v132CharacterIdle 2.8s ease-in-out infinite alternate !important;
  transform-origin: 50% 90%;
}
.penny-sprite.character-listening .character-atlas {
  animation: none !important;
  transform: rotate(-3.5deg) translateY(2px) scale(.995) !important;
  transform-origin: 50% 90%;
  transition: transform .3s ease;
}
.penny-sprite.character-speaking .character-atlas {
  animation: v132CharacterTalk .32s ease-in-out infinite alternate !important;
  transform-origin: 50% 90%;
}
.penny-sprite.character-celebrating .character-atlas {
  animation: v132CharacterCelebrate .62s cubic-bezier(.2,.82,.3,1) 2 !important;
  transform-origin: 50% 94%;
}
.penny-sprite[data-character="giraffe"].character-greet .character-atlas {
  animation: v132GiraffeGreet 1.08s ease-in-out 1 !important;
  transform-origin: 48% 94%;
}
.penny-sprite[data-character="cat"].character-greet .character-atlas,
.penny-sprite[data-character="dog"].character-greet .character-atlas {
  animation: v132PawGreet 1.0s ease-in-out 1 !important;
  transform-origin: 50% 94%;
}
.penny-sprite[data-character="duck"].character-greet .character-atlas {
  animation: v132DuckGreet .92s ease-in-out 1 !important;
  transform-origin: 50% 94%;
}
.penny-sprite[data-character="horse"].character-greet .character-atlas,
.penny-sprite[data-character="unicorn"].character-greet .character-atlas {
  animation: v132BowGreet 1.08s ease-in-out 1 !important;
  transform-origin: 50% 94%;
}
@keyframes v132CharacterIdle {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-5px) scale(1.008); }
}
@keyframes v132CharacterTalk {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-8px) scale(1.014); }
}
@keyframes v132CharacterCelebrate {
  0%,100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(15px) scale(.97,1.03); }
  56% { transform: translateY(-52px) scale(1.04,.98); }
  78% { transform: translateY(-6px) scale(1.01); }
}
@keyframes v132GiraffeGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  42% { transform: translateY(22px) rotate(6deg) scale(.985); }
  70% { transform: translateY(4px) rotate(-2deg); }
}
@keyframes v132PawGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-12px) rotate(-7deg) scale(1.02); }
  70% { transform: translateY(-4px) rotate(4deg); }
}
@keyframes v132DuckGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-8px) rotate(-9deg) scale(1.02); }
  68% { transform: rotate(8deg); }
}
@keyframes v132BowGreet {
  0%,100% { transform: translateY(0) rotate(0); }
  44% { transform: translateY(20px) rotate(7deg) scale(.985); }
  70% { transform: translateY(4px) rotate(-2deg); }
}

/* -------------------------------------------------------------------------
   v13.5 — Sparkle reference face rig in the main child experience.
   Explicit eyes + mouth states; no claim of skeletal leg animation.
   ------------------------------------------------------------------------- */
.sparkle-main-rig{position:absolute;left:50%;bottom:0;width:100%;aspect-ratio:1/1;transform:translateX(-50%);transform-origin:50% 88%;will-change:transform}
.sparkle-main-rig[hidden]{display:none!important}
.sparkle-main-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
.sparkle-main-face-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sparkle-main-eyelids{opacity:0;transition:opacity 85ms linear}
.sparkle-main-lid{fill:url(#sparkleMainSkin);stroke:none}
.sparkle-main-lash{fill:none;stroke:#42241f;stroke-width:14;stroke-linecap:round}
.sparkle-main-rig[data-eyes="half"] .sparkle-main-eyelids{opacity:.56}
.sparkle-main-rig[data-eyes="closed"] .sparkle-main-eyelids{opacity:1}
.sparkle-main-muzzle-patch{fill:url(#sparkleMainSkin)}
.sparkle-main-smile-line{fill:none;stroke:#6a342d;stroke-width:10;stroke-linecap:round}
.sparkle-main-mouth-mid,.sparkle-main-mouth-open{opacity:0;transition:opacity 50ms linear}
.sparkle-main-mouth-mid ellipse:first-child,.sparkle-main-mouth-open ellipse:first-child{fill:#401719}
.sparkle-main-tongue{fill:#ed8199}
.sparkle-main-rig[data-mouth="mid"] .sparkle-main-smile-line,
.sparkle-main-rig[data-mouth="open"] .sparkle-main-smile-line{opacity:0}
.sparkle-main-rig[data-mouth="mid"] .sparkle-main-mouth-mid{opacity:1}
.sparkle-main-rig[data-mouth="open"] .sparkle-main-mouth-open{opacity:1}
.penny-sprite[data-character="unicorn"].character-idle .sparkle-main-rig{animation:sparkleMainIdle 3.2s ease-in-out infinite alternate}
.penny-sprite[data-character="unicorn"].character-listening .sparkle-main-rig{transform:translateX(-50%) rotate(-7deg) translateY(3px) scale(.995);transition:transform .28s ease}
.penny-sprite[data-character="unicorn"].character-speaking .sparkle-main-rig{animation:sparkleMainTalk .52s ease-in-out infinite alternate}
.penny-sprite[data-character="unicorn"].character-greet .sparkle-main-rig{animation:sparkleMainBow 1.35s ease-in-out 1}
.penny-sprite[data-character="unicorn"].character-celebrating .sparkle-main-rig{animation:sparkleMainCelebrate .72s cubic-bezier(.2,.8,.3,1) 2}
@keyframes sparkleMainIdle{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-50%) translateY(-4px) scale(1.006)}}
@keyframes sparkleMainTalk{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-2px)}}
@keyframes sparkleMainBow{0%,100%{transform:translateX(-50%) rotate(0) translateY(0)}20%{transform:translateX(-50%) rotate(2deg) translateY(4px)}50%{transform:translateX(-50%) rotate(11deg) translateY(30px) scale(.975)}72%{transform:translateX(-50%) rotate(-3deg) translateY(4px)}86%{transform:translateX(-50%) rotate(1deg) translateY(1px)}}
@keyframes sparkleMainCelebrate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}28%{transform:translateX(-50%) translateY(16px) scale(.975,1.025)}55%{transform:translateX(-50%) translateY(-56px) rotate(-3deg) scale(1.04,.975)}76%{transform:translateX(-50%) translateY(-7px) rotate(3deg)}}


/* -------------------------------------------------------------------------
   v13.5 Sparkle full-state PNG renderer — replaces facial SVG overlays.
   ------------------------------------------------------------------------- */
.sparkle-main-state-image{
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  aspect-ratio:1/1;
  transform:translateX(-50%);
  transform-origin:50% 88%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}
.sparkle-main-state-image[hidden]{display:none!important}
.penny-sprite[data-character="unicorn"].character-idle .sparkle-main-state-image{animation:sparkleMainStateIdle 3.2s ease-in-out infinite alternate}
.penny-sprite[data-character="unicorn"].character-listening .sparkle-main-state-image{transform:translateX(-50%) rotate(-6deg) translateY(2px) scale(.995);transition:transform .28s ease}
.penny-sprite[data-character="unicorn"].character-speaking .sparkle-main-state-image{animation:sparkleMainStateTalk .52s ease-in-out infinite alternate}
.penny-sprite[data-character="unicorn"].character-greet .sparkle-main-state-image{animation:sparkleMainStateBow 1.3s ease-in-out 1}
.penny-sprite[data-character="unicorn"].character-celebrating .sparkle-main-state-image{animation:sparkleMainStateCelebrate .72s cubic-bezier(.2,.8,.3,1) 2}
@keyframes sparkleMainStateIdle{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-50%) translateY(-4px) scale(1.006)}}
@keyframes sparkleMainStateTalk{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-2px)}}
@keyframes sparkleMainStateBow{0%,100%{transform:translateX(-50%) rotate(0) translateY(0)}50%{transform:translateX(-50%) rotate(9deg) translateY(28px) scale(.98)}78%{transform:translateX(-50%) rotate(-2deg) translateY(3px)}}
@keyframes sparkleMainStateCelebrate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}30%{transform:translateX(-50%) translateY(14px) scale(.98,1.02)}56%{transform:translateX(-50%) translateY(-54px) rotate(-3deg) scale(1.04,.98)}78%{transform:translateX(-50%) translateY(-6px) rotate(2deg)}}

/* ========================================================================
   v14 — frozen-character runtime
   ======================================================================== */
.v14-frozen-character #characterAtlas,
.v14-frozen-character #sparkleMainStateImage { display:none !important; }
.v14-frozen-character .v14-frozen-main-image {
  display:block !important;
  opacity:1 !important;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  background:transparent !important;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.26));
}
.v14-frozen-character.character-listening .v14-frozen-main-image { transform:rotate(-1.5deg) translateY(1px); }
.v14-frozen-character.character-speaking .v14-frozen-main-image { animation:v14TalkBob .28s ease-in-out infinite alternate !important; }
.v14-frozen-character.character-greet .v14-frozen-main-image { animation:v14Greet .9s ease-in-out 1 !important; }
.v14-frozen-character.character-celebrating .v14-frozen-main-image { animation:v14Celebrate .62s ease-in-out 2 !important; }
.v14-frozen-character.character-travelling { opacity:0 !important; }
.v14-frozen-character[hidden] { display:none !important; }

.forest-waterfall { position:absolute; right:calc(clamp(260px,24vw,350px) + 44px); bottom:110px; width:min(24vw,290px); z-index:12; pointer-events:none; filter:drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.forest-waterfall[hidden] { display:none !important; }
.forest-waterfall svg { display:block; width:100%; height:auto; }
.forest-stream { width:min(28vw,330px); bottom:150px; }
.stream-ripples { animation:stream-ripple 2.4s ease-in-out infinite; }
@keyframes stream-ripple { 0%,100% { opacity:.45; transform:translateX(-3px); } 50% { opacity:1; transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce) { .stream-ripples { animation:none; } }
.waterfall-flow { animation:waterfallFlow 2.4s linear infinite; }
@keyframes waterfallFlow { to { stroke-dashoffset:-78; } }
@media (max-width:1050px) { .forest-waterfall { right:319px; } }
@media (max-width:820px) { .forest-waterfall { right:16%; bottom:480px; width:min(35vw,230px); } .forest-stream { width:min(50vw,230px); } }
@media (prefers-reduced-motion:reduce) { .waterfall-flow { animation:none; } }

.v14-frozen-buddy {
  position:absolute;
  right:7%;
  bottom:1.5%;
  width:min(25vw,300px);
  height:min(48vh,420px);
  z-index:8;
  transform-origin:50% 92%;
}
.v14-frozen-buddy[hidden] { display:none !important; }
.v14-frozen-buddy img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.24));
}
.v14-frozen-buddy.character-idle img { animation:v14BuddyIdle 3.6s ease-in-out infinite alternate; }
.v14-frozen-buddy.character-listening img { transform:rotate(2deg) translateY(-1px); }
.v14-frozen-buddy.character-greet img { animation:v14Greet .9s ease-in-out 1; }
.v14-frozen-buddy.character-celebrating img { animation:v14Celebrate .62s ease-in-out 2; }
.v14-frozen-buddy.character-travelling { opacity:0; transition:opacity .25s ease; }

@keyframes v14TalkBob { from{transform:translateY(0)} to{transform:translateY(-3px) scale(1.004)} }
@keyframes v14Greet { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-7px) rotate(-2deg)} }
@keyframes v14Celebrate { 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(-24px) scale(1.025)} }
@keyframes v14BuddyIdle { from{transform:translateY(0) rotate(-.4deg)} to{transform:translateY(-4px) rotate(.5deg)} }

@media (max-width: 900px) {
  .v14-frozen-buddy { right:2%; width:min(32vw,230px); height:min(38vh,300px); }
}

/* v14.2 visible reward feedback */
.points-toast{
  position:fixed;top:84px;left:50%;z-index:10050;pointer-events:none;
  transform:translate(-50%,-18px) scale(.88);opacity:0;
  padding:12px 20px;border-radius:999px;background:rgba(10,32,53,.92);
  border:2px solid rgba(255,216,74,.78);box-shadow:0 14px 40px rgba(0,0,0,.32);
  color:#ffe36c;font-size:26px;font-weight:900;letter-spacing:.02em;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1)
}
.points-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}


/* -------------------------------------------------------------------------
   v14.8 child-facing forest challenge layer
   Screen-space UI keeps activities readable and tappable regardless of the
   Marble splat camera/viewpoint. It deliberately sits above the world and
   below the speech/interaction rail.
   ------------------------------------------------------------------------- */
.forest-challenge-layer {
  position: absolute;
  z-index: 16;
  left: clamp(315px, 27vw, 470px);
  right: clamp(390px, 31vw, 520px);
  top: 40%;
  bottom: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.2vw, 54px);
  pointer-events: none;
}
.forest-challenge-layer[hidden] { display: none !important; }

.forest-challenge-layer button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.32));
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.forest-challenge-layer button:hover { transform: translateY(-4px) scale(1.04); }
.forest-challenge-layer button:focus-visible {
  outline: 4px solid rgba(255,233,120,.95);
  outline-offset: 7px;
  border-radius: 28px;
}
.forest-challenge-layer button.counted {
  transform: scale(.9);
  filter: drop-shadow(0 6px 9px rgba(0,0,0,.2)) saturate(.65);
  opacity: .62;
}
.forest-count-badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(8,22,39,.88);
  color: #fff7b0;
  border: 2px solid rgba(255,239,140,.82);
  font-weight: 950;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.forest-firefly {
  width: clamp(74px, 7vw, 105px);
  height: clamp(92px, 8vw, 120px);
}
.firefly-body {
  width: 19%;
  height: 47%;
  border-radius: 45% 45% 52% 52%;
  background: linear-gradient(#47391f,#17130d);
  position: absolute;
  top: 24%;
  left: 40.5%;
}
.firefly-wings,
.firefly-wings::after {
  content: "";
  position: absolute;
  top: 22%;
  width: 37%;
  height: 43%;
  border-radius: 70% 45% 68% 42%;
  background: linear-gradient(145deg,rgba(224,248,255,.92),rgba(124,194,219,.56));
  border: 2px solid rgba(229,251,255,.88);
}
.firefly-wings { left: 13%; transform: rotate(-18deg); }
.firefly-wings::after { left: 87%; top: 0; transform: rotate(36deg); transform-origin: left center; }
.firefly-light {
  position: absolute;
  left: 38%;
  top: 57%;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,#fffbd2 0 20%,#ffe65e 30%,#ffc92e 55%,rgba(255,208,41,.08) 72%);
  box-shadow: 0 0 17px 7px rgba(255,230,80,.56);
  animation: v148FireflyGlow 1.35s ease-in-out infinite alternate;
}
.forest-firefly:nth-child(2) .firefly-light { animation-delay: .25s; }
.forest-firefly:nth-child(3) .firefly-light { animation-delay: .5s; }
@keyframes v148FireflyGlow {
  from { transform: scale(.92); opacity: .78; }
  to { transform: scale(1.1); opacity: 1; }
}

.forest-butterfly {
  width: clamp(150px, 13vw, 220px);
  height: clamp(118px, 10vw, 165px);
  animation: v148ButterflyFloat 2.6s ease-in-out infinite alternate;
}
.forest-butterfly svg { width: 100%; height: 100%; overflow: visible; }
@keyframes v148ButterflyFloat {
  from { transform: translateY(7px) rotate(-2deg); }
  to { transform: translateY(-9px) rotate(2deg); }
}

/* v14.12: learning colours, symmetric insects and a visible counting pointer. */
.forest-firefly svg { width:100%; height:100%; overflow:visible; }
.forest-firefly .firefly-glow { filter:drop-shadow(0 0 9px #ffe52b); }
.forest-challenge-layer button[hidden] { display:none !important; }
.forest-challenge-layer[data-answer-type="color"] .forest-count-badge,
.forest-challenge-layer[data-answer-type="choice"] .forest-count-badge { display:none; }
.forest-challenge-layer .next-count .forest-count-badge { box-shadow:0 0 0 5px rgba(255,229,43,.22), 0 0 20px #ffe52b; }
.forest-challenge-layer .next-count::after { content:"👇"; position:absolute; top:-33px; left:50%; transform:translateX(-50%); font-size:31px; }
.forest-challenge-layer .colour-focus .firefly-glow { stroke:#fff; stroke-width:5px; }
.object-joining { animation:forestObjectJoin .7s ease-out both; }
@keyframes forestObjectJoin { from { opacity:0; transform:translateY(-30px) scale(.7); } to { opacity:1; transform:none; } }

.forest-flower {
  width: clamp(82px, 7vw, 112px);
  height: clamp(98px, 8vw, 126px);
}
.forest-flower .flower-petal,
.forest-flower .flower-centre {
  position: absolute;
  left: 50%;
  top: 43%;
  transform-origin: 0 0;
}
.flower-petal {
  width: 36%;
  height: 45%;
  margin-left: -18%;
  margin-top: -39%;
  border-radius: 60% 60% 55% 55%;
  background: var(--flower-color, #f43232);
  border: 2px solid rgba(255,223,232,.75);
}
.flower-petal.p1 { transform: rotate(0deg) translateY(-11px); }
.flower-petal.p2 { transform: rotate(90deg) translateY(-11px); }
.flower-petal.p3 { transform: rotate(180deg) translateY(-11px); }
.flower-petal.p4 { transform: rotate(270deg) translateY(-11px); }
.flower-centre {
  width: 25%;
  aspect-ratio: 1;
  margin-left: -12.5%;
  margin-top: -12.5%;
  border-radius: 50%;
  background: radial-gradient(circle,#fff2a5,#ffc83f 65%,#da8b16);
  box-shadow: 0 0 10px rgba(255,205,70,.42);
}

.world-stage[data-world="forest"] .penny-zone {
  left: clamp(125px, 11vw, 210px);
  right: clamp(560px, 39vw, 700px);
}
.world-stage[data-world="forest"] .penny-sprite {
  left: 2%;
  width: min(28vw, 360px, 43vh);
}
.world-stage[data-world="forest"] .speech-bubble {
  left: min(58%, 430px);
  top: 110px;
}

@media (max-width: 980px) {
  .forest-challenge-layer {
    left: 180px;
    right: 300px;
    gap: 18px;
  }
}

/* v14.9 visibility guarantee: learning objects must remain obvious over any Marble scene. */
.world-stage[data-world="forest"] .forest-challenge-layer {
  z-index: 60;
  left: 34%;
  right: 30%;
  top: 38%;
  bottom: 145px;
  overflow: visible;
}
.forest-challenge-layer .firefly-svg {
  width: clamp(92px, 8vw, 126px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(255,226,73,.85)) drop-shadow(0 10px 15px rgba(0,0,0,.45));
}
.forest-challenge-layer.attention {
  left: 29%;
  right: 25%;
  transform: scale(1.28);
}
.forest-challenge-layer.attention .forest-count-badge {
  transform: translateX(-50%) scale(1.12);
}
/* A voice recovery action appears only when its pending line could not play. */
.dock-btn[hidden] { display: none !important; }

/* A complete picture story uses existing learning assets, without quiz badges. */
.world-stage[data-world="forest"] .forest-challenge-layer[data-kind="story"] {
  left:30%; right:31%; top:28%; bottom:175px;
}
.forest-story-scene { position:relative; width:100%; max-width:380px; height:260px; display:flex; align-items:flex-end; justify-content:center; gap:28px; }
.forest-story-scene img { object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
.story-firefly { position:absolute; width:76px; height:100px; left:7%; top:5%; animation:storyLight 2.4s ease-in-out infinite alternate; }
.story-butterfly { position:absolute; width:108px; height:92px; right:9%; top:4%; }
.forest-story-scene .story-flower { width:106px; height:128px; }
.story-flower img { width:100%; height:100%; }
.forest-story-scene[data-scene="2"] .story-firefly { left:calc(50% - 38px); top:68px; animation:none; }
.forest-story-scene[data-scene="2"] .story-butterfly { right:1%; width:80px; }
.forest-story-scene[data-scene="2"] .story-butterfly,
.forest-story-scene[data-scene="3"] .story-butterfly { right:calc(50% - 128px); top:108px; width:80px; }
.forest-story-scene[data-scene="3"] .story-firefly { left:calc(50% - 38px); top:68px; animation:none; opacity:.85; }
#forestChallengeLayer.gentle-help .forest-flower,
#forestChallengeLayer.gentle-help .forest-butterfly,
#forestChallengeLayer.gentle-help .forest-firefly,
#forestChallengeLayer.gentle-help .story-flower { outline:3px solid #ffe7a0; outline-offset:4px; border-radius:20px; }
@keyframes storyLight { from {transform:translateY(3px)} to {transform:translateY(-7px)} }
.forest-challenge-layer.number-play { gap:clamp(12px,1.3vw,20px); }
.object-leaving { animation:forestObjectLeave .7s ease-in both; }
@keyframes forestObjectLeave { to { opacity:0; transform:translateY(-28px) scale(.7); } }
.number-play .forest-flower { width:clamp(56px,5vw,72px); height:clamp(78px,6.5vw,94px); }
.forest-challenge-layer .colour-target::after { content:"👇"; position:absolute; top:-36px; left:50%; transform:translateX(-50%); font-size:30px; }
.forest-colour-reference { position:absolute; top:0; left:50%; transform:translateX(-50%); width:70px; height:94px; padding:6px; border:3px solid white; border-radius:16px; background:rgba(255,255,255,.85); }
.forest-colour-reference img { width:100%; height:100%; object-fit:contain; }
.learning-card.drawing-card { left:auto; right:calc(clamp(260px,24vw,350px) + 32px); top:116px; transform:none; width:min(320px,30vw); }
.drawing-card button { min-height:44px; padding:8px 14px; border-radius:16px; }
.drawing-subjects { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
@media (max-width:820px) {
  .world-stage[data-world="forest"] .forest-challenge-layer.number-play,
  .world-stage[data-world="forest"] .forest-challenge-layer[data-kind="story"] { left:7%; right:7%; top:17%; bottom:410px; }
  .forest-story-scene { height:220px; }
  .learning-card.drawing-card { left:50%; right:auto; top:96px; transform:translateX(-50%); width:min(86vw,300px); max-height:36vh; padding:14px; }
  .drawing-card .drawing-wrap { min-height:140px; }
  .drawing-card svg { width:180px; height:135px; }
}
@media (prefers-reduced-motion:reduce) { .story-firefly { animation:none; } }

/* v14.20: speech fits its words; the picture is a shared, editable board. */
.world-stage[data-world="forest"] .speech-bubble { bottom:auto; height:auto; max-height:150px; overflow-y:auto; }
.world-stage.drawing-active .speech-bubble { left:0; top:40px; bottom:auto; min-width:0; width:min(280px,24vw); }
.learning-card.drawing-card { top:162px; width:min(560px,calc(100vw - clamp(260px,24vw,350px) - 450px)); max-height:calc(100vh - 300px); padding:18px; }
.drawing-card .drawing-wrap { min-height:0; padding:6px 0; }
.drawing-card .drawing-wrap svg { display:block; width:100%; height:auto; aspect-ratio:640 / 440; max-height:min(360px,calc(100vh - 490px)); }
.drawing-card .drawing-colours { display:flex; justify-content:center; gap:10px; margin:4px 0 14px; }
.drawing-colours button { width:44px; height:44px; padding:0; background:var(--picture-colour); border:3px solid white; box-shadow:0 0 0 2px #bcc6d2; border-radius:50%; }
.drawing-card .drawing-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.drawing-card .drawing-subjects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.drawing-card .drawing-subjects button { padding:8px 3px; text-transform:capitalize; font-weight:750; }
.drawing-card .drawing-choice-picture svg { width:100%; height:105px; }
.drawing-planning { min-height:220px; display:grid; place-items:center; background:#f8f3e9; border-radius:20px; margin:10px 0; }
.drawing-pencil { font-size:64px; animation:picturePencil 1.6s ease-in-out infinite; }
.drawing-wrap.building [data-picture-part] { animation:picturePart .35s ease-out both; animation-delay:var(--part-delay); transform-origin:center; }
.drawing-card.gentle-help .drawing-colours { outline:3px solid #ffe7a0; outline-offset:6px; border-radius:22px; }
@keyframes picturePart { from {opacity:0;transform:translateY(4px)} to {opacity:1;transform:translateY(0)} }
@keyframes picturePencil { 0%,100% {transform:translate(-15px,6px) rotate(-10deg)} 50% {transform:translate(15px,-6px) rotate(8deg)} }
@media (max-width:820px) {
  .drawing-active .progress-hud { top:88px; }
  .learning-card.drawing-card { left:50%; right:auto; top:162px; transform:translateX(-50%); width:min(92vw,520px); max-height:360px; padding:12px; }
  .drawing-card .drawing-wrap svg { max-height:180px; }
  .drawing-card .drawing-choice-picture svg { height:80px; }
  .drawing-card .drawing-colours { gap:8px; }
  .drawing-planning { min-height:170px; }
  .world-stage[data-world="forest"].drawing-active .penny-zone { left:18px; right:18px; top:532px; bottom:auto; height:112px; }
  .world-stage.drawing-active .penny-sprite { left:0; width:min(23vw,110px); }
  .world-stage.drawing-active .speech-bubble { left:31%; top:0; width:64%; max-width:none; max-height:100px; padding:14px 16px; font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .drawing-pencil,.drawing-wrap.building [data-picture-part] { animation:none; } }

/* v14.21: keep the current world behind stories and transparent drawings. */
.world-stage[data-world="forest"] { background: #244c42 url('/static/assets/worlds/forest.webp') center / cover no-repeat; }
.world-stage.adventure-paused .drawing-wrap [data-picture-part],
.world-stage.adventure-paused .waterfall-flow { animation-play-state:paused; }

/* Forest play keeps the Marble viewport visible behind a compact activity. */
.learning-card.play-menu-card { left:auto; right:calc(clamp(260px,24vw,350px) + 44px); top:185px; transform:none; width:min(400px,calc(100vw - 680px)); }
.forest-play-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.forest-play-menu button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; min-height:72px; border:2px solid #bddbcc; border-radius:20px; background:#edf8e7; color:#234a38; font-size:16px; font-weight:750; cursor:pointer; }
.forest-play-menu button span { font-size:30px; }
.forest-play-menu button:last-child { grid-column:1/-1; flex-direction:row; justify-content:center; }
.number-answer-row { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; width:100%; margin-top:6px; }
.forest-challenge-layer.number-play[data-answer-type="count"] { flex-wrap:nowrap;flex-direction:column;gap:12px;justify-content:flex-start; }
.world-stage[data-world="forest"] .forest-challenge-layer.number-play[data-answer-type="count"] { top:320px;bottom:auto; }
.forest-number-objects { display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:125px; }
.forest-number-objects .forest-firefly,.forest-number-objects .forest-butterfly { width:clamp(56px,5vw,84px);height:104px; }
.forest-challenge-layer .number-answer-row button { width:56px; height:52px; border-radius:18px; border:3px solid #ffeda7; background:#fff6d7; color:#284a3d; font-size:28px; font-weight:850; }
.forest-challenge-layer .number-answer-row [data-count-together] { width:auto; padding:8px 14px; font-size:16px; }
.forest-number-equation { order:-1;width:100%; text-align:center; font-size:28px; color:#fff5ce; font-weight:850; text-shadow:0 2px 5px #183529; }
.animal-quiz { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.world-stage[data-world="forest"] .forest-challenge-layer[data-layout="animal"] { top:280px;bottom:auto;align-items:flex-start; }
.animal-quiz-title { font-size:24px; color:#fff4cf; font-weight:800; text-shadow:0 2px 6px #152f28; }
.animal-mystery { position:relative; width:190px; height:165px; border:0; border-radius:50%; background:radial-gradient(ellipse at bottom,#163e29ad,transparent 70%); }
.animal-mystery img { width:100%; height:100%; object-fit:contain; filter:brightness(0); transition:filter .65s; }
.animal-mystery-mark { position:absolute; inset:0; display:grid; place-items:center; color:#fff3bb; font-size:60px; font-weight:850; text-shadow:0 2px 5px #163426; }
.animal-quiz-choices { display:flex; justify-content:center; gap:12px; }
.forest-challenge-layer .animal-quiz-choices button { width:100px; height:105px; border:1px solid #eff9d891; border-radius:50% 50% 20px 20px; background:#163e29b8; color:#fff8e0; box-shadow:0 5px 16px #10281d3d; display:flex; flex-direction:column; align-items:center; padding:5px; font-size:16px; font-weight:750; }
.animal-quiz-choices img { width:76px; height:68px; object-fit:contain; }
.forest-challenge-layer .animal-clue-button { width:auto; height:auto; min-height:44px; padding:8px 18px; font-size:16px; border-radius:18px; background:#163e29c9; border:1px solid #eff9d891; color:#fff8e0; }
.activity-solved .animal-mystery img { filter:none; }
.activity-solved .animal-mystery-mark { inset:auto 0 0; font-size:18px; background:#edf8e8e8; border-radius:0 0 24px 24px; padding:4px; color:#234438; text-shadow:none; }
.paint-mixing { display:flex; align-items:center; flex-direction:column; gap:22px; width:100%; }
.paint-pots,.paint-choices { display:flex; align-items:center; justify-content:center; gap:22px; color:#fff4ce; font-size:32px; }
.paint-pot { display:block; width:65px; height:65px; background:var(--paint); border:4px solid #fff0c1; border-radius:12px 12px 28px 28px; }
.paint-result { width:130px; height:78px; border:4px solid #ffefb3; background:#fff3de; border-radius:12px 12px 60px 60px; transition:background .6s; }
.paint-mixed .paint-result { background:var(--paint); }
.forest-challenge-layer .paint-choices button { display:block; width:65px; height:60px; border:4px solid #fff2c8; border-radius:18px; background:var(--paint); }
.activity-solved .answer-revealed { box-shadow:0 0 0 6px #fff8bd,0 0 24px #fff8bd; }
.activity-solved .sorting-flower { animation:flowerIntoBasket .75s ease-in both; }
.basket-matched { animation:matchedBasket .6s ease-out; }
@keyframes flowerIntoBasket { to { transform:translate(var(--sort-x,0px),var(--sort-y,110px)) scale(.5); opacity:0; } }
@keyframes matchedBasket { 50% { transform:scale(1.1); } }
@media(max-width:1050px) and (min-width:821px) { .learning-card.play-menu-card { width:310px;right:305px; } }
@media(max-width:820px) {
  .learning-card.play-menu-card { left:50%;right:auto;top:210px;transform:translateX(-50%);width:min(86vw,370px);max-height:42vh; }
  .animal-mystery { width:135px;height:132px; }
  .world-stage[data-world="forest"] .forest-challenge-layer[data-layout="animal"],.world-stage[data-world="forest"] .forest-challenge-layer.number-play[data-answer-type="count"] { top:210px; }
  .forest-challenge-layer .number-answer-row [data-count-together] { width:100%;max-width:180px;min-height:44px;height:44px; }
  .forest-challenge-layer .animal-quiz-choices button { width:80px;height:90px; }
  .animal-quiz-choices img { width:62px;height:58px; }
}
@media(prefers-reduced-motion:reduce) { .activity-solved .sorting-flower,.basket-matched { animation:none; } }
.forest-challenge-layer[data-kind="storybook"] { align-items:center; flex-direction:column; }
.storybook-title { font-size:clamp(17px,1.5vw,24px); font-weight:800; text-align:center; color:#fff6dc; text-shadow:0 2px 6px #182f2b; }
.storybook-page { width:min(100%,430px); }
.storybook-page svg { width:100%; height:auto; display:block; border-radius:28px; filter:drop-shadow(0 8px 12px #122c3440); }
.storybook-actions { display:flex; justify-content:center; gap:10px; margin-top:12px; }
.forest-challenge-layer .storybook-actions button { width:auto; height:auto; min-height:44px; font-size:16px; padding:10px 16px; background:#163e29c9; border:1px solid #eff9d891; color:#fff8e0; }
.forest-challenge-layer[data-layout="compare"],.forest-challenge-layer[data-layout="sort"],.forest-challenge-layer[data-layout="pattern"] { gap:14px; flex-wrap:wrap; }
.flower-patch { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; width:44%; min-height:150px; padding:12px; border-radius:26px; background:#eefadbdc; border:3px solid #fff4bb; }
.flower-patch img { width:clamp(24px,3vw,48px); height:64px; object-fit:contain; }
.flower-patch-label { width:100%; text-align:center; color:#284538; font-size:20px; font-weight:800; }
.forest-challenge-layer .same-patches { width:100%; height:auto; max-width:200px; min-height:44px; font-size:18px; padding:12px; background:#fff4d9; }
.flower-baskets { display:flex; justify-content:center; gap:24px; width:100%; }
.flower-basket { border:4px solid currentColor; border-radius:8px 8px 30px 30px; background:#fff5d4ed; padding:12px; }
.colour-pattern { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.colour-pattern .pattern-chip { width:58px; height:58px; border-radius:50%; border:3px solid #fff; }
.colour-pattern .pattern-chip.empty { border:3px dashed #fff; font-size:36px; color:#fff; text-align:center; }
.world-stage .forest-waterfall:not(.forest-stream) { right:calc(clamp(260px,24vw,350px) + 25px); bottom:100px; width:min(35vw,410px); z-index:13; }
.waterfall-controls { display:flex; justify-content:center; gap:10px; margin-top:4px; pointer-events:auto; }
.waterfall-controls button { min-height:44px; padding:10px 16px; border:0; border-radius:18px; font-weight:750; background:#ecfbff; color:#284650; box-shadow:0 4px 12px #001a2533; }
.drawing-card .drawing-colours { flex-wrap:wrap; }
.drawing-card.attention { outline:4px solid #ffe3a0; outline-offset:6px; }
.stars-arrive [data-picture-part^="decoration"] path { animation:pictureStar .65s ease-out both; transform-box:fill-box; transform-origin:center; }
.stars-arrive [data-picture-part^="decoration"] path:nth-child(2) { animation-delay:.25s; }
.stars-arrive [data-picture-part^="decoration"] path:nth-child(3) { animation-delay:.5s; }
@keyframes pictureStar { from { opacity:0; transform:scale(.2) rotate(-20deg); } to { opacity:1; transform:scale(1) rotate(0); } }
.drawing-departure { position:absolute; z-index:22; left:24%; top:30%; width:33%; pointer-events:none; animation:pictureWhoosh 2.2s ease-in both; }
.drawing-departure svg { display:block; width:100%; height:auto; background:transparent; filter:drop-shadow(0 5px 12px #13273733); }
.drawing-departure[data-motion="flutter"] { animation-name:pictureFlutter; }
.drawing-departure[data-motion="steps"] { animation-name:pictureSteps; }
.drawing-departure[data-motion="plant"] { animation-name:picturePlant; }
@keyframes pictureWhoosh { 0% {transform:translate(0,0) scale(1);opacity:1;} 55% {opacity:1;} 100% {transform:translate(60%,-75%) scale(.08);opacity:0;} }
@keyframes pictureFlutter { 0% {transform:translate(0,0) rotate(0);opacity:1;} 25% {transform:translate(15%,-8%) rotate(7deg);} 55% {transform:translate(35%,8%) rotate(-7deg);opacity:1;} 100% {transform:translate(70%,-30%) scale(.1);opacity:0;} }
@keyframes pictureSteps { 0% {transform:translate(0,0);opacity:1;} 25% {transform:translate(12%,-4%);} 45% {transform:translate(24%,0);} 65% {transform:translate(40%,-4%);opacity:1;} 100% {transform:translate(80%,0) scale(.15);opacity:0;} }
@keyframes picturePlant { 0% {transform:translate(0,0);opacity:1;} 70% {transform:translate(12%,40%) scale(.55);opacity:1;} 100% {transform:translate(12%,40%) scale(.5);opacity:0;} }
@media(max-width:1050px) and (min-width:821px) {
  .world-stage .forest-waterfall:not(.forest-stream) { right:305px; width:320px; }
}
@media(max-width:820px) {
  .world-stage .forest-waterfall:not(.forest-stream) { right:50%; transform:translateX(50%); bottom:auto; top:160px; width:min(65vw,300px); }
  .world-stage .forest-challenge-layer[data-kind="storybook"] { top:165px; bottom:auto; min-height:250px; }
  .storybook-page { max-width:360px; }
  .flower-patch { min-height:100px; }
  .drawing-departure { left:16%; top:25%; width:65%; }
}
@media(prefers-reduced-motion:reduce) {
  .stars-arrive [data-picture-part^="decoration"] path { animation:none; }
  .drawing-departure { animation-name:pictureFade; }
  @keyframes pictureFade { from {opacity:1;} to {opacity:0;} }
}

.flower-patches { display:flex; width:100%; justify-content:center; gap:18px; }
.forest-challenge-layer .flower-patch { width:46%; height:auto; display:flex; flex-wrap:wrap; }
.forest-challenge-layer .flower-basket { width:120px; height:110px; border-color:var(--basket-colour); color:var(--basket-colour); position:relative; }
.flower-basket i { display:block; width:36px; height:36px; background:var(--basket-colour); border:2px solid white; border-radius:50%; }
.sorting-flower img { width:95px; height:115px; object-fit:contain; }
.pattern-choices { display:flex; justify-content:center; gap:18px; width:100%; }
.forest-challenge-layer button.pattern-chip { width:70px; height:70px; }
.forest-colour-choice svg,.forest-colour-choice img { width:100%; height:100%; object-fit:contain; }
.storybook-panel { width:100%; pointer-events:auto; }
.world-stage .forest-challenge-layer[data-kind="storybook"] { left:31%; right:29%; top:29%; bottom:150px; }
@media(max-width:820px) { .world-stage .forest-challenge-layer[data-kind="storybook"] { left:7%;right:7%;top:168px;bottom:auto; } }
.forest-challenge-layer .flower-patch { background:#eefadbed; border:3px solid #fff1b9; }
.forest-challenge-layer .flower-patch-label { width:100%; color:#284538; font-size:18px; font-weight:800; }
.world-stage:has(#forestWaterfallLayer:not([hidden])) .speech-bubble { left:0; width:260px; max-width:260px; top:110px; }
@media(max-width:1050px) and (min-width:821px) {
  .world-stage:has(#forestWaterfallLayer:not([hidden])) .penny-zone { left:35px; }
  .world-stage:has(#forestWaterfallLayer:not([hidden])) .speech-bubble { width:230px;max-width:230px; }
}
@media(max-width:820px) {
  .world-stage:has(#forestWaterfallLayer:not([hidden])) .speech-bubble { left:29%; top:510px; width:66%; max-width:260px; }
}
@media(min-width:821px) {
  .world-stage[data-world="forest"]:has(.forest-challenge-layer:not([hidden])) .penny-sprite,
  .world-stage[data-world="forest"].drawing-active .penny-sprite { width:min(22vw,280px,38vh); }
  .world-stage[data-world="forest"] .forest-challenge-layer[data-kind="storybook"] { left:34%; }
}
@media(max-width:820px) {
  .world-stage[data-world="forest"] .penny-zone { left:18px;right:18px;top:532px;bottom:auto;height:112px; }
  .world-stage[data-world="forest"] .penny-sprite { left:0;width:min(23vw,110px); }
  .world-stage[data-world="forest"] .speech-bubble,
  .world-stage:has(#forestWaterfallLayer:not([hidden])) .speech-bubble { left:31%;top:0;width:64%;max-width:none;max-height:100px;padding:14px 16px;font-size:16px; }
  .world-stage[data-world="forest"] .forest-challenge-layer { left:7%;right:7%;top:180px;bottom:auto;min-height:230px;gap:10px;flex-wrap:wrap; }
  .world-stage[data-world="forest"] .forest-challenge-layer[data-kind="storybook"] { top:168px;min-height:0; }
  .forest-challenge-layer .firefly-svg,.forest-challenge-layer .butterfly-svg { width:75px; }
}
@media(max-width:820px) {
  .world-stage .forest-waterfall:not(.forest-stream) { top:200px;width:min(58vw,235px); }
}
@media(min-width:821px) {
  .world-stage .forest-waterfall:not(.forest-stream) { width:min(35vw,410px,calc((100vh - 280px) * .75)); }
}

/* v14.26: stable art frames and controls share a measured free area. */
.world-stage .forest-challenge-layer[data-layout="animal"],
.world-stage .forest-challenge-layer[data-kind="storybook"] {
  bottom:auto; min-height:0; height:min(var(--activity-height,400px),430px);
  align-items:stretch; justify-content:flex-start; overflow:auto; pointer-events:auto;
}
.animal-quiz { display:grid; grid-template-rows:auto minmax(70px,1fr) auto auto; justify-items:center; height:100%; gap:10px; }
.animal-quiz-title { font-size:clamp(18px,2vw,24px); }
.animal-mystery { width:min(100%,210px); height:100%; min-height:0; overflow:hidden; }
.animal-mystery img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.animal-mystery-mark { pointer-events:none; }
.animal-quiz-choices { gap:10px; }
.animal-quiz-actions,.storybook-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.forest-challenge-layer .animal-quiz-actions button { width:auto; height:auto; min-height:44px; padding:8px 16px; font-size:15px; border-radius:18px; background:#163e29df; border:1px solid #eff9d891; color:#fff8e0; }
.activity-solved .animal-quiz-choices { visibility:hidden; pointer-events:none; }
.activity-solved [data-animal-clue] { visibility:hidden; }
.storybook-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; justify-items:center; height:100%; gap:8px; }
.storybook-page { width:100%; min-height:0; }
.storybook-page svg,.storybook-page .story-forest-art { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; background:transparent; filter:drop-shadow(0 7px 10px #112b2540); }
.storybook-actions { margin:0; width:100%; }
.forest-challenge-layer .storybook-actions button { font-size:14px; padding:8px 12px; border-radius:18px; }
@media(max-width:820px) {
  .world-stage .forest-challenge-layer[data-layout="animal"],.world-stage .forest-challenge-layer[data-kind="storybook"] { height:min(var(--activity-height,325px),350px); }
  .forest-challenge-layer .animal-quiz-choices button { width:78px; height:82px; }
  .animal-quiz-choices img { width:58px; height:52px; }
  .drawing-card .drawing-wrap svg { max-height:130px; }
  .drawing-card .drawing-colours { margin-bottom:8px; }
  .drawing-card .drawing-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .drawing-card [data-drawing-back] { grid-column:1/-1; }
}

/* -------------------------------------------------------------------------
   v14.30: Forest story. The Marble splat forest fills the stage and draws the
   chosen character; Penny's speech bubble sits above the part of the forest
   that the HUD, rail and dock leave clear (--forest-safe-* from app.js).
   ------------------------------------------------------------------------- */
.forest-story { position: absolute; inset: 0; z-index: 6; display: none; background: #050a18; }
.world-stage.forest-story-active .forest-story { display: block; }
.world-stage.forest-story-active .world-layer,
.world-stage.forest-story-active .world-vignette,
.world-stage.forest-story-active .world-fx,
.world-stage.forest-story-active .forest-3d { opacity: 0; }
.world-stage.forest-story-active .penny-zone { left: 0; right: 0; top: 0; bottom: 0; z-index: 9; }
.world-stage.forest-story-active .penny-sprite,
.world-stage.forest-story-active .buddy-sprite { visibility: hidden; animation: none; }
.world-stage.forest-story-active .speech-bubble {
  left: calc(var(--forest-safe-left, 16px) + (100% - var(--forest-safe-left, 16px) - var(--forest-safe-right, 16px)) / 2);
  right: auto; top: calc(var(--forest-safe-top, 150px) + 10px); bottom: auto; height: auto; transform: translateX(-50%);
  width: max-content; min-width: 0; max-width: min(460px, calc(100% - var(--forest-safe-left, 16px) - var(--forest-safe-right, 16px) - 32px));
  max-height: none; overflow: visible; text-align: center; font-size: clamp(17px, 1.5vw, 21px);
}
.world-stage.forest-story-active .speech-bubble::after { left: 50%; bottom: -14px; width: 26px; height: 16px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.world-stage.forest-story-active.adventure-paused .forest-story { filter: saturate(.75) brightness(.8); }
@media (prefers-reduced-motion: reduce) { .world-stage.forest-story-active .speech-bubble { transition: none; } }

/* v14.30: while the forest story is told (from "forest" until the waterfall games) the story has the
   stage, like the stand-alone story: the character's own bubble, the place bar and the answer buttons.
   Penny's camera/conversation panel, level bar and speech bubble fade out and come back for the games.
   Opacity only, so the camera keeps running for the grown-up's camera check-ins. */
.world-stage .interaction-rail, .world-stage .progress-hud { transition: opacity .45s ease; }
.world-stage.forest-story-telling .interaction-rail,
.world-stage.forest-story-telling .progress-hud,
.world-stage.forest-story-telling .speech-bubble { opacity: 0; pointer-events: none; }
.world-stage.forest-story-telling .speech-bubble { visibility: hidden; }

/* -------------------------------------------------------------------------
   v14.31 Draw for 4–5 year olds: the picture floats in the world (no white
   board), drawn by a magic pencil as a colouring-book outline and coloured in
   with big paint pots. Finished and Games are always visible.
   ------------------------------------------------------------------------- */
.learning-card.drawing-card { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; overflow: visible; }
.learning-card.drawing-card .learning-title { display: none; }
.drawing-card .drawing-wrap { position: relative; }
.drawing-card .drawing-wrap::before { content: ""; position: absolute; inset: 4% 8%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,248,226,.30), rgba(255,248,226,.10) 52%, transparent 72%); filter: blur(4px); }
.drawing-card .drawing-wrap svg { position: relative; z-index: 1; filter: drop-shadow(0 0 10px rgba(255,238,190,.55)) drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.drawing-wrap [data-picture-part] > * { transition: fill .55s ease; }
.drawing-wrap .just-painted { animation: magicPaint .6s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes magicPaint { 40% { transform: scale(1.06); filter: brightness(1.3); } }
/* the magic pencil: each line draws itself, then the white fills in */
.drawing-wrap.building [data-picture-part] { animation: none; }
.drawing-wrap.building [data-picture-part] > * { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation: magicLine .7s ease-out forwards, magicFill .4s ease-out forwards; animation-delay: var(--part-delay), calc(var(--part-delay) + .45s); }
@keyframes magicLine { to { stroke-dashoffset: 0; } }
@keyframes magicFill { to { fill-opacity: 1; } }
.drawing-card .drawing-pots { display: flex; justify-content: center; gap: 18px; margin: 4px 0 8px; }
.drawing-card .drawing-pot, .drawing-card .drawing-deco { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; min-height: 0; padding: 10px 14px 8px;
  border: 2px solid rgba(255,255,255,.28); border-radius: 26px; background: rgba(12,22,48,.74); color: #fff; font-weight: 800; font-size: 19px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: potGlow 1.8s ease-in-out infinite; }
.drawing-card .drawing-pot:nth-child(2), .drawing-card .drawing-deco:nth-child(2) { animation-delay: .9s; }
.drawing-card .drawing-pot .pot-blob { width: 66px; height: 66px; border-radius: 50%; background: var(--picture-colour); border: 4px solid #fff;
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.14), 0 0 20px var(--picture-colour); }
.drawing-card .drawing-deco span { font-size: 48px; line-height: 1.1; }
/* the suggested choices glow gently (they don't move, so small fingers can tap them) */
@keyframes potGlow { 0%,100% { box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(255,224,138,0); } 50% { box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 5px rgba(255,224,138,.55); } }
.drawing-card .drawing-colours { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.drawing-card .drawing-colours button { width: 34px; height: 34px; min-height: 0; padding: 0; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.35); border-radius: 50%; background: var(--picture-colour); }
.drawing-card .drawing-actions { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 6px; }
.drawing-card .drawing-finish { min-height: 52px; padding: 10px 28px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #ffc93c); color: #2b1c00;
  font-weight: 900; font-size: 20px; box-shadow: 0 5px 0 #b97a06, 0 10px 22px rgba(0,0,0,.3); cursor: pointer; }
.drawing-card .drawing-finish:active { transform: translateY(3px); box-shadow: 0 2px 0 #b97a06; }
.drawing-card .drawing-leave { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(168,186,255,.35); background: rgba(12,22,48,.74); color: #fff; font-weight: 750; font-size: 16px; cursor: pointer; }
.drawing-card .drawing-actions [data-drawing-back] { grid-column: auto; }
.drawing-card .drawing-subjects button { background: rgba(12,22,48,.74); color: #fff; border: 2px solid rgba(255,255,255,.28); border-radius: 24px; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.drawing-card .drawing-planning { background: rgba(12,22,48,.55); }
.drawing-card.attention { outline: none; }
.drawing-card.attention .drawing-pot, .drawing-card.attention .drawing-deco { box-shadow: 0 0 0 4px #ffe08a, 0 10px 24px rgba(0,0,0,.35); }
/* In the Marble forest: the story screen (no camera panel, level bar or Penny bubble), the character on the
   left and the picture in the clear part of the forest. */
.world-stage.forest-drawing .interaction-rail,
.world-stage.forest-drawing .progress-hud,
.world-stage.forest-drawing .speech-bubble { opacity: 0; pointer-events: none; }
.world-stage.forest-drawing .speech-bubble { visibility: hidden; }
.world-stage.forest-drawing .learning-card.drawing-card { left: 36%; right: 3%; top: 84px; bottom: 112px; width: auto; max-height: none; transform: none; padding: 0;
  display: flex; flex-direction: column; justify-content: center; }
.world-stage.forest-drawing .drawing-card .drawing-wrap svg { width: 100%; max-height: min(46vh, 400px); }
@media (max-width: 900px) {
  .world-stage.forest-drawing .learning-card.drawing-card { left: 4%; right: 4%; top: 30%; bottom: 120px; }
  .world-stage.forest-drawing .drawing-card .drawing-wrap svg { max-height: 30vh; }
  .drawing-card .drawing-pot, .drawing-card .drawing-deco { min-width: 88px; font-size: 17px; }
  .drawing-card .drawing-pot .pot-blob { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .drawing-wrap.building [data-picture-part] > * { animation: none; stroke-dasharray: none; fill-opacity: 1; }
  .drawing-card .drawing-pot, .drawing-card .drawing-deco, .drawing-wrap .just-painted { animation: none; }
}
.world-stage.forest-drawing .drawing-card .drawing-choice-picture svg { height: 130px; }
/* Outside the Marble forest the card keeps its place; the picture leaves room for the pots and buttons. */
.drawing-card .drawing-wrap svg { max-height: min(300px, calc(100vh - 610px)); min-height: 110px; }
@media (max-width: 820px) {
  .drawing-card .drawing-wrap svg { max-height: 120px; min-height: 0; }
  .drawing-card .drawing-pots { gap: 10px; margin: 2px 0 6px; }
  .drawing-card .drawing-pot, .drawing-card .drawing-deco { min-width: 78px; padding: 6px 10px; font-size: 16px; gap: 3px; }
  .drawing-card .drawing-pot .pot-blob { width: 44px; height: 44px; border-width: 3px; }
  .drawing-card .drawing-deco span { font-size: 32px; }
  .drawing-card .drawing-colours { margin: 0 0 6px; }
  .drawing-card .drawing-colours button { width: 28px; height: 28px; }
  .drawing-card .drawing-finish { min-height: 44px; padding: 8px 20px; font-size: 18px; }
}

/* v14.33: Around the world and Planets open over Penny's stage. */
.penny-experience { position: fixed; inset: 0; z-index: 1000; background: #0b1630; overflow: hidden; }
.penny-experience__stage { position: absolute; inset: 0; }
.penny-experience__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b1630; }
.penny-experience__back {
  position: absolute; left: 14px; bottom: 14px; z-index: 50; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 10px; border-radius: 999px; border: 2px solid rgba(255,255,255,.75);
  background: rgba(255, 217, 120, .92); color: #1c2a44; font: 800 15px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.penny-experience__back span { font-size: 18px; }
.penny-experience__back:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

/* v14.33 Colour magic: one big grey friend, two or three big paint pots. */
.forest-challenge-layer[data-layout="colour-magic"] { left: clamp(250px, 24vw, 420px); right: clamp(300px, 26vw, 460px); top: 96px; bottom: auto; height: var(--activity-height, 560px); }
.colour-magic { pointer-events: auto; width: 100%; height: 100%; display: grid; grid-template-rows: minmax(150px, 1fr) auto auto auto; justify-items: center; align-items: center; gap: 12px;
  padding: 16px 18px 12px; border-radius: 30px; background: rgba(255, 252, 240, .9); box-shadow: 0 18px 40px rgba(0,0,0,.28); box-sizing: border-box; }
.cm-friend { position: relative; height: 100%; max-height: 300px; aspect-ratio: 1; display: grid; place-items: center; }
.cm-friend svg { width: 100%; height: 100%; overflow: visible; }
.cm-friend .cm-paint { fill: #dfe3e8; stroke: #4a4f5c; stroke-width: 4; stroke-linejoin: round; transition: fill .9s ease .1s; }
.cm-friend .cm-deep { filter: brightness(.92); }
.cm-friend.cm-painted .cm-paint { fill: var(--paint); }
.cm-friend .cm-line { fill: none; stroke: #4a4f5c; stroke-width: 4; stroke-linecap: round; }
.cm-friend .cm-soft { stroke-width: 3; opacity: .45; }
.cm-friend .cm-leaf { fill: #4caf50; stroke: #2f6b33; stroke-width: 3; }
.cm-friend .cm-eye { fill: #2b2f3a; }
.cm-friend .cm-shine { fill: rgba(255,255,255,.55); }
.cm-friend .cm-bubble { fill: none; stroke: #7fb4e8; stroke-width: 3; }
.cm-friend.cm-painted { animation: cmPop .7s ease; }
.cm-friend.cm-painted .cm-sparkles { position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.0) 55%, rgba(255,240,170,.75) 58%, rgba(255,255,255,0) 64%); animation: cmRing 1s ease forwards; }
@keyframes cmPop { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1); } }
@keyframes cmRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.cm-pots { display: flex; gap: clamp(18px, 3vw, 44px); justify-content: center; flex-wrap: wrap; }
.forest-challenge-layer .cm-pot { display: grid; justify-items: center; gap: 6px; filter: none; }
.cm-pot-jar { width: clamp(84px, 9vw, 120px); height: clamp(84px, 9vw, 120px); border-radius: 24px 24px 30px 30px; background: rgba(255,255,255,.85);
  border: 5px solid #4a4f5c; box-shadow: inset 0 -8px 0 rgba(0,0,0,.06), 0 10px 18px rgba(0,0,0,.18); display: grid; align-items: end; overflow: hidden; position: relative; }
.cm-pot-jar::before { content: ""; position: absolute; left: -6px; right: -6px; top: -2px; height: 16px; border-radius: 10px; background: #4a4f5c; }
.cm-pot-paint { display: block; height: 70%; background: var(--paint); border-radius: 50% 50% 0 0 / 18% 18% 0 0; }
.cm-pot b { font: 900 clamp(16px, 1.5vw, 21px)/1 system-ui, sans-serif; color: #2b2f3a; text-transform: capitalize; }
.forest-challenge-layer .cm-pot:hover { transform: translateY(-5px) scale(1.05); }
.cm-pot.cm-glow .cm-pot-jar { animation: cmGlow 1s ease-in-out infinite; }
@keyframes cmGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 64, .0), 0 10px 18px rgba(0,0,0,.18); } 50% { box-shadow: 0 0 0 10px rgba(255, 214, 64, .55), 0 10px 18px rgba(0,0,0,.18); } }
.cm-pot.cm-wiggle { animation: cmWiggle .5s ease; }
@keyframes cmWiggle { 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.cm-pot.cm-used .cm-pot-paint { height: 40%; transition: height .8s ease; }
.cm-progress { display: flex; gap: 10px; }
.cm-progress span { width: 18px; height: 18px; border-radius: 50%; background: #dfe3e8; border: 3px solid #4a4f5c; }
.cm-progress span.done { background: var(--paint); }
.cm-progress span.now { box-shadow: 0 0 0 4px rgba(255, 214, 64, .7); }
.forest-challenge-layer .cm-back { filter: none; padding: 8px 16px; border-radius: 999px; background: rgba(43, 47, 58, .85); color: #fff; font: 800 14px/1 system-ui, sans-serif; }
@media (max-width: 900px) { .forest-challenge-layer[data-layout="colour-magic"] { left: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .cm-friend.cm-painted, .cm-pot.cm-glow .cm-pot-jar, .cm-pot.cm-wiggle { animation: none; } }

/* v14.34: after two missed choices the game cards glow, so a child can tap instead of saying it again */
.learning-card.menu-glow .forest-play-menu button { animation: pennyMenuGlow 1.1s ease-in-out infinite alternate; }
@keyframes pennyMenuGlow { from { box-shadow: 0 0 0 0 rgba(255, 214, 102, 0); } to { box-shadow: 0 0 0 6px rgba(255, 214, 102, .75); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .learning-card.menu-glow .forest-play-menu button { animation: none; box-shadow: 0 0 0 5px rgba(255, 214, 102, .75); } }

/* ---------------------------------------------------------------- v14.34 the Adventure Map, the Home button, the Treasure Book */
.world-nav { display: none !important; }            /* the map replaces the old list of worlds */
.penny-map { position: absolute; z-index: 30; left: clamp(220px, 21vw, 380px); right: clamp(300px, 26vw, 460px); top: 154px; bottom: 120px;
  display: flex; flex-direction: column; gap: 12px; animation: pennyMapIn .45s ease-out both; }
.penny-map[hidden] { display: none; }
@keyframes pennyMapIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.penny-map__title { align-self: center; padding: 8px 20px; border-radius: 999px; background: rgba(255, 248, 230, .94); color: #1d2b44;
  font-weight: 850; font-size: clamp(18px, 1.8vw, 26px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.penny-map__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; min-height: 0; }
.penny-map__place { position: relative; overflow: hidden; border: 4px solid rgba(255,255,255,.85); border-radius: 26px; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tint) 70%, white 30%), var(--tint)); color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .18s ease; min-height: 120px; }
.penny-map__place:hover, .penny-map__place:focus-visible { transform: translateY(-3px) scale(1.015); box-shadow: 0 18px 36px rgba(0,0,0,.42); outline: none; }
.penny-map__place:active { transform: scale(.98); }
.penny-map__art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.penny-map__art img { width: 100%; height: 100%; object-fit: cover; }
.penny-map__art svg { width: 58%; max-height: 72%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.penny-map__label { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; border-radius: 16px; background: rgba(6, 16, 32, .72); backdrop-filter: blur(4px); font-weight: 850; font-size: clamp(16px, 1.5vw, 22px); }
.penny-map__icon { font-size: 1.3em; }
.penny-map__mark { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: #ffd966; color: #3a2a06;
  font-weight: 850; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.penny-map__badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: #fff; color: #1d2b44; font-weight: 800; font-size: 13px; }
.penny-map__place.is-suggested { border-color: #ffd966; animation: pennyMapGlow 1.6s ease-in-out infinite alternate; }
@keyframes pennyMapGlow { from { box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(255,217,102,0); } to { box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 8px rgba(255,217,102,.6); } }
body.penny-map-open .learning-card, body.penny-map-open .forest-challenge-layer { visibility: hidden; }
/* the map's own title asks the question: no speech bubble or challenge text peeking out behind it */
body.penny-map-open .speech-bubble, body.penny-map-open .progress-copy { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .penny-map, .penny-map__place.is-suggested { animation: none; } }
@media (max-width: 820px) { .penny-map { left: 12px; right: 12px; top: 204px; bottom: 470px; } }

/* v14.35 the child's own buttons, top left in every world: Map (home), Break and Bye */
.penny-child-controls { position: fixed; z-index: 1200; left: 28px; top: 128px; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.penny-child-controls > button { pointer-events: auto; }
.penny-home-btn { position: relative; width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff;
  background: radial-gradient(circle at 35% 30%, #ffe48a, #f2a93b); color: #3a2405; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; box-shadow: 0 10px 24px rgba(0,0,0,.35); font: 850 13px/1 system-ui, sans-serif; padding: 0; }
.penny-home-btn[hidden] { display: none; }
.penny-home-btn span { font-size: 30px; line-height: 1; }
.penny-home-btn:hover, .penny-home-btn:focus-visible { transform: scale(1.06); outline: 4px solid rgba(255,255,255,.6); outline-offset: 2px; }
.penny-home-btn--small { width: 60px; height: 60px; border-width: 3px; background: rgba(7, 20, 37, .82); color: #f7fbff; backdrop-filter: blur(10px); font-size: 12px; }
.penny-home-btn--small span { font-size: 22px; }
.penny-home-btn--bye { border-color: rgba(255, 175, 190, .95); }
.penny-experience__back { display: none !important; }   /* one Home button, the same everywhere */
/* the buttons sit top left: speech bubbles that start at the left edge move over to clear them
   (the forest story's bubble keeps clear through --forest-safe-left, set in app.js) */
@media (min-width: 821px) {
  body.penny-home-on .world-stage:has(#forestWaterfallLayer:not([hidden])) .speech-bubble,
  body.penny-home-on .world-stage.drawing-active .speech-bubble { left: 72px; }
}
/* on a phone they sit in a row at the left end of the level bar */
@media (max-width: 820px) {
  .penny-child-controls { left: 16px; top: 141px; width: auto; flex-direction: row; gap: 6px; }
  .penny-home-btn, .penny-home-btn--small { width: 52px; height: 52px; border-width: 3px; font-size: 10px; }
  .penny-home-btn span { font-size: 20px; }
  body.penny-home-on .progress-hud { padding-left: 64px; }
  body.penny-play-on .progress-hud { padding-left: 128px; }
  body.penny-home-on.penny-play-on .progress-hud { padding-left: 186px; }
  body.penny-play-on .progress-copy { visibility: hidden; }
}

/* v14.35 the map is home: the child's animal stands beside it, in front (it used to stand behind the map) */
@media (min-width: 821px) {
  body.penny-map-open .penny-zone { left: 0; right: auto; width: clamp(220px, 21vw, 380px); top: 350px; bottom: 118px; z-index: 31; }
  body.penny-map-open .penny-sprite { left: 4%; width: 92%; height: 100%; }
}
@media (max-width: 820px) { body.penny-map-open .penny-zone { visibility: hidden; } }

/* v14.35 the little break and "Are you going?": a cosy card over everything */
.penny-break { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; padding: 20px; background: rgba(3, 8, 18, .62); backdrop-filter: blur(6px); }
.penny-break[hidden] { display: none; }
.penny-break__card { width: min(560px, 94vw); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 26px 22px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(14, 31, 54, .96), rgba(7, 18, 34, .96)); border: 3px solid rgba(255, 217, 102, .55); box-shadow: 0 26px 70px rgba(0,0,0,.5);
  text-align: center; animation: pennyMapIn .4s ease-out both; }
.penny-break__pic { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); animation: pennyBreathe 3.2s ease-in-out infinite; }
@keyframes pennyBreathe { 50% { transform: translateY(-6px) scale(1.02); } }
.penny-break__title { font-weight: 900; font-size: clamp(28px, 3vw, 40px); color: #ffdf7d; text-shadow: 0 4px 14px rgba(0,0,0,.3); }
.penny-break__text { margin: 0; font-size: 19px; color: #dce9f7; max-width: 30ch; }
.penny-break__buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.penny-break__big { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; border: 4px solid #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffe48a, #f2a93b); color: #2a1a04; font-weight: 900; font-size: 26px; box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.penny-break__big span { font-size: 1.1em; }
.penny-break__big--bye { background: linear-gradient(#ffd1db, #ff9fb4); }
.penny-break__big:hover, .penny-break__big:focus-visible { transform: scale(1.04); outline: none; }
.penny-break__small { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #f7fbff; font-weight: 800; font-size: 16px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .penny-break__pic, .penny-break__card { animation: none; } }

/* v14.35 "Into your Treasure Book!" */
.penny-treasure-toast { position: fixed; z-index: 1210; left: 50%; bottom: 128px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 24px;
  background: rgba(7, 20, 37, .9); border: 2px solid rgba(255, 217, 102, .75); box-shadow: 0 14px 34px rgba(0,0,0,.4); color: #f7fbff; backdrop-filter: blur(12px); pointer-events: none; }
.penny-treasure-toast[hidden] { display: none; }
.penny-treasure-toast__item { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 34px; background: radial-gradient(circle at 50% 35%, #2b4f7a, #12253f); overflow: hidden; }
.penny-treasure-toast__item svg { width: 92%; height: 92%; }
.penny-treasure-toast__chest svg { width: 60px; height: 46px; display: block; }
.penny-treasure-toast__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: #dce9f7; }
.penny-treasure-toast__text b { color: #ffdf7d; font-size: 18px; }
.penny-treasure-toast.is-playing { animation: pennyToastIn .45s ease-out both, pennyToastOut .5s ease-in 3.6s both; }
.penny-treasure-toast.is-playing .penny-treasure-toast__item { animation: pennyToastDrop 1.1s cubic-bezier(.3,1.4,.5,1) .2s both; }
.penny-treasure-toast.is-playing .penny-treasure-toast__chest { animation: pennyToastChest .5s ease-in-out 1.1s 2; }
@keyframes pennyToastIn { from { opacity: 0; transform: translate(-50%, 24px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pennyToastOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes pennyToastDrop { 0% { transform: translateY(-40px) scale(1.3) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes pennyToastChest { 50% { transform: translateY(-6px) scale(1.08); } }
@media (max-width: 820px) { .penny-treasure-toast { bottom: auto; top: 204px; width: calc(100% - 24px); } }
@media (prefers-reduced-motion: reduce) { .penny-treasure-toast.is-playing, .penny-treasure-toast.is-playing * { animation: none !important; } }

/* v14.35 the Treasure Book in the game's own look: night-blue glass, gold, white-framed pictures like the map */
.penny-treasure { position: fixed; z-index: 1100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(3, 8, 18, .6); backdrop-filter: blur(5px); }
.penny-treasure[hidden] { display: none; }
.penny-treasure__book { width: min(980px, 94vw); height: min(680px, 88vh); display: flex; flex-direction: column; border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 31, 54, .97), rgba(7, 18, 34, .97)); color: var(--text); box-shadow: 0 26px 70px rgba(0,0,0,.5);
  border: 3px solid rgba(255, 217, 102, .55); animation: pennyMapIn .4s ease-out both; }
.penny-treasure__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.penny-treasure__title { font-weight: 900; font-size: clamp(26px, 2.6vw, 34px); color: #ffdf7d; letter-spacing: -.5px; text-shadow: 0 4px 14px rgba(0,0,0,.3); }
.penny-treasure__close { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.1); color: #fff; font-size: 22px; cursor: pointer; }
.penny-treasure__close:hover, .penny-treasure__close:focus-visible { background: rgba(255,255,255,.2); outline: none; }
.penny-treasure__tabs { display: flex; gap: 8px; padding: 6px 18px 12px; flex-wrap: wrap; }
.penny-treasure__tabs button { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); font-weight: 800; font-size: 16px; color: #e6eef8; cursor: pointer; }
.penny-treasure__tabs button:hover { background: rgba(255,255,255,.14); }
.penny-treasure__tabs button[aria-selected="true"] { background: radial-gradient(circle at 35% 30%, #ffe48a, #f2a93b); color: #2a1a04; border-color: #fff; }
.penny-treasure__tabs button b { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: rgba(255,217,102,.22); color: #ffe9a3; font-size: 13px; }
.penny-treasure__tabs button[aria-selected="true"] b { background: rgba(0,0,0,.16); color: #2a1a04; }
.penny-treasure__items { flex: 1; overflow: auto; padding: 8px 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; align-content: start; }
.penny-treasure__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 12px; border-radius: 24px; border: 3px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.06); cursor: pointer; color: #f7fbff; box-shadow: 0 12px 26px rgba(0,0,0,.3); transition: transform .18s ease; }
.penny-treasure__item:hover, .penny-treasure__item:focus-visible { transform: translateY(-3px); outline: none; }
.penny-treasure__item.is-focus { border-color: #ffd966; box-shadow: 0 0 0 7px rgba(255,217,102,.45), 0 12px 26px rgba(0,0,0,.3); animation: pennyMapIn .5s ease-out both; }
.penny-treasure__pic { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: radial-gradient(circle at 50% 35%, #2b4f7a, #12253f); }
.penny-treasure__pic svg { width: 92%; height: 92%; }
.penny-treasure__pic img { width: 70%; height: 70%; object-fit: contain; border-radius: 8px; }
.penny-treasure__emoji { font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.penny-treasure__name { font-weight: 850; font-size: 16px; text-align: center; }
.penny-treasure__day { font-size: 13px; color: var(--muted); }
.penny-treasure__empty { grid-column: 1 / -1; text-align: center; font-size: 20px; color: var(--muted); padding: 40px 0; }

/* v14.34 (12 October: the Penny title was cut off at the top): the page is exactly one window tall and never scrolls on a
   laptop or tablet; the developer log floats (open Penny with ?debug=1 to show it). */
@media (min-width: 821px) { html, body { height: 100%; overflow: hidden; } }
.debug-panel { position: fixed; right: 12px; bottom: 96px; z-index: 1300; max-width: min(640px, 70vw); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
body:not(.penny-debug) .debug-panel { display: none; }

/* v14.34 Grown-up setup: parent dashboard, PIN and the Testing box */
.setup-parent-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.setup-testing { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.25); }
.setup-testing summary { cursor: pointer; font-weight: 800; }
.setup-testing p { margin: 10px 0 6px; font-size: 14px; opacity: .85; }
.setup-danger { border-color: rgba(255,120,130,.6) !important; color: #ffd0d4 !important; }
/* v14.35 is Penny's memory answering? */
.setup-memory { margin-top: 10px; padding: 10px 14px; border-radius: 14px; font-weight: 700; line-height: 1.4; }
.setup-memory[data-state="ok"] { background: rgba(117, 243, 163, .12); border: 1px solid rgba(117, 243, 163, .45); color: #d8ffe6; }
.setup-memory[data-state="warn"] { background: rgba(255, 111, 136, .14); border: 1px solid rgba(255, 111, 136, .6); color: #ffe0e5; }
.setup-memory[data-state="checking"] { opacity: .75; }

/* -------------------------------------------------------------------------
   v14.36 the forest games as modules (13 October feedback): Number play and the Story theatre get their own
   stages; Colour magic loses its white panel (the forest shows through, like the counting game) and gains a
   mixing level and the little think timer. The game music needs no styles.
   ------------------------------------------------------------------------- */
.world-stage .forest-challenge-layer[data-layout="number-play"] { left: clamp(300px, 26vw, 440px); right: clamp(300px, 26vw, 460px); top: 96px; bottom: auto;
  height: var(--activity-height, 560px); display: block; }
.world-stage .forest-challenge-layer[data-layout="story-theatre"] { left: 33%; right: 3%; top: 136px; bottom: auto; height: var(--activity-height, 520px); display: block; }
/* while a game is on screen the child's animal stands at the far left, under Map, Break and Bye, like beside the map,
   so the friends to count, the paint pots and the story's cast never stand on top of it */
@media (min-width: 821px) {
  .world-stage[data-world="forest"]:has(.forest-challenge-layer:not([hidden])) .penny-zone { left: 0; right: auto; width: clamp(200px, 19vw, 300px); top: 350px; bottom: 118px; }
  .world-stage[data-world="forest"]:has(.forest-challenge-layer:not([hidden])) .penny-sprite { left: 4%; width: 92%; height: 100%; }
}
.forest-challenge-layer[data-layout="number-play"] > *, .forest-challenge-layer[data-layout="story-theatre"] > * { pointer-events: auto; }
@media (max-width: 1050px) and (min-width: 821px) {
  .world-stage .forest-challenge-layer[data-layout="number-play"] { left: 190px; right: 300px; }
  .world-stage .forest-challenge-layer[data-layout="story-theatre"] { left: 30%; right: 2%; }
}
@media (max-width: 820px) {
  .world-stage .forest-challenge-layer[data-layout="number-play"] { left: 12px; right: 12px; top: 210px; height: var(--activity-height, 380px); }
  .world-stage .forest-challenge-layer[data-layout="story-theatre"] { left: 12px; right: 12px; top: 168px; height: min(360px, var(--activity-height, 360px)); }
}

/* Colour magic: no white panel; light words with a soft shadow so they read on the night forest */
.colour-magic { background: transparent; box-shadow: none; padding: 6px 10px 8px; position: relative; grid-template-rows: minmax(110px, 1fr) auto auto auto; container-type: inline-size; min-width: 0; }
/* the think timer sits in the top corner, so it takes no room from the friend and the pots (a phone is short) */
.colour-magic .cm-timer-slot { position: absolute; top: 0; right: 4px; z-index: 2; }
.cm-friend svg { filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(255,255,255,.12)); }
.cm-friend .cm-paint { fill: #e6e9ee; }
.cm-pot b { color: #fff8e6; text-shadow: 0 2px 6px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); }
.cm-pot-jar { box-shadow: 0 10px 22px rgba(0,0,0,.4), inset 0 0 0 4px rgba(74,79,92,.9); }
.cm-progress span { border-color: rgba(255,255,255,.85); background: rgba(230,233,238,.35); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.cm-progress span.done { background: var(--paint); }
.forest-challenge-layer .cm-back { background: rgba(7,20,37,.78); border: 1px solid rgba(255,255,255,.35); }
/* level 2: red + yellow = (the grey friend), like "Guess the colours" */
/* (sized by the panel's own width, so the row always fits beside the camera panel on a laptop) */
.cm-mix { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.8cqw, 22px); width: 100%; height: 100%; min-height: 0; min-width: 0; }
.cm-mix .cm-friend { height: auto; width: clamp(96px, 30cqw, 250px); max-height: 100%; flex: 0 1 auto; }
.cm-blob { position: relative; flex: 0 0 auto; width: clamp(52px, 15cqw, 128px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%), var(--paint);
  border: 5px solid rgba(255,255,255,.92); box-shadow: 0 12px 24px rgba(0,0,0,.4); display: grid; place-items: end center; transition: transform .9s ease, opacity .9s ease; }
.cm-blob b { transform: translateY(130%); font: 900 clamp(15px, 1.4vw, 20px)/1 system-ui, sans-serif; color: #fff8e6; text-transform: capitalize; text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.cm-op { font: 900 clamp(24px, 6cqw, 58px)/1 system-ui, sans-serif; color: #fff4ce; text-shadow: 0 3px 8px rgba(0,0,0,.65); }
.colour-magic.cm-mixed .cm-blob-a { transform: translateX(40%) scale(.82) rotate(-12deg); }
.colour-magic.cm-mixed .cm-blob-b { transform: translateX(-40%) scale(.82) rotate(12deg); }
.cm-friend.cm-hinted .cm-paint { fill: color-mix(in srgb, var(--paint) 62%, #e6e9ee); transition: fill 1s ease; }
.colour-magic.cm-level-2 { grid-template-rows: minmax(100px, 1fr) auto auto auto; }
@media (max-width: 820px) {
  .cm-blob { border-width: 4px; }
  .cm-mix .cm-friend { max-height: 150px; }
  .colour-magic { gap: 6px; padding: 2px 6px 4px; }
  .colour-magic .cm-pot-jar { width: 70px; height: 70px; }
  .forest-challenge-layer .cm-back { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cm-blob, .cm-friend.cm-hinted .cm-paint { transition: none; } }

/* Guess the animal: the think timer beside the buttons, and the right picture glows after the second clue */
.animal-timer-slot { display: inline-grid; place-items: center; }
.animal-timer-slot .pk-timer { --pk-size: 46px; }
.forest-challenge-layer .animal-quiz-choices button.animal-glow { box-shadow: 0 0 0 6px rgba(255, 217, 102, .75), 0 0 30px rgba(255, 217, 102, .8); animation: cmGlow 1s ease-in-out infinite; }

/* ───────────────────────────────────────────────────────────────────────────────────────────────
   v14.37 (14 October feedback): one music setting (Grown-up setup, and 🎵 in the bottom bar) and a mic check.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */
.game-music-row { grid-column: auto; align-self: start; }
/* A game with its own "Back to games" under it: the bottom bar's "← Games" hides, so there is only one */
body:has(#forestChallengeLayer:not([hidden]) [data-activity-back]) #backToGamesBtn { display: none !important; }
.dock-btn.music-btn.is-off { color: #b9cae0; background: rgba(255,255,255,.04); border-style: dashed; }
.setup-mic-check { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center;
  padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.05); }
.setup-mic-check .setup-status { grid-column: 1 / -1; min-height: 0; line-height: 1.45; }
.mic-meter { height: 14px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.mic-meter[hidden] { display: none; }
.mic-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: #ff9c9c; transition: width .06s linear; }
.mic-meter i[data-tone="warn"] { background: #ffd978; }
.mic-meter i[data-tone="ok"] { background: #6ee39a; }
@media (max-width: 720px) {
  .game-music-row { grid-column: 1; }
  .setup-mic-check { grid-column: 1; grid-template-columns: 1fr; }
  .dock-btn.music-btn span { display: none; }
}

/* v14.39: "Is this the name?" — the friend's name as heard, close names to tap, and "say it again" */
.name-check { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.name-check button { min-height: 52px; padding: 0 20px; border-radius: 18px; border: 2px solid rgba(21,37,59,.15); background: #fff;
  color: #15253b; font: inherit; font-size: 22px; font-weight: 850; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.name-check .name-choice--heard { background: #ffe58a; border-color: #f2c033; font-size: 26px; }
.name-check .name-again { font-size: 17px; background: #eef4ff; }