/* Buku Baru Module 3: Tubuh & Deria Saya (body map, five senses, find game) */
.body-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:760px;margin:14px auto 12px;padding:6px;background:#fff;border:1px solid #e3ebda;border-radius:22px;box-shadow:var(--shadow)}
.body-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border:0;border-radius:16px;background:transparent;color:#4d6a56;font:800 15px Nunito,sans-serif;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.body-tab span{font-size:24px}
.body-tab:hover{background:#f3f9ec}
.body-tab.active{background:linear-gradient(160deg,#7cc17d,#4f9e62);color:#fff;box-shadow:0 6px 14px #4f9e6240}
.body-pane{max-width:900px;margin:0 auto}

/* body map: flashcards floating on both sides of the explorer, joined to the body by lines */
.body-groups{display:flex;justify-content:center;gap:8px;margin:0 auto 12px}
.body-group{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 16px;border:2px solid #e1ead8;border-radius:999px;background:#fff;color:#4d6a56;font:800 14px Nunito,sans-serif;cursor:pointer}
.body-group span{font-size:20px}
.body-group.active{border-color:#ffcf55;background:#fff6d6;color:#254938}
.body-board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);gap:clamp(18px,5vw,56px);max-width:880px;margin:0 auto}
.body-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.body-lines line{stroke:#a8c79a;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.body-lines circle{fill:#a8c79a}
.body-lines .active line{stroke:#ff7b72;stroke-width:3.5;stroke-dasharray:none}
.body-lines .active circle{fill:#ff7b72}
.body-cards{display:flex;flex-direction:column;justify-content:space-around;gap:10px;z-index:2}
.body-cards.left{align-items:flex-end}
.body-cards.right{align-items:flex-start}
.part-card{display:flex;align-items:center;gap:10px;min-height:54px;width:min(100%,190px);padding:6px 14px 6px 6px;border:2.5px solid #e3ebda;border-radius:18px;background:#fff;color:#254938;font:700 17px Fredoka,sans-serif;cursor:pointer;box-shadow:0 6px 14px #355d391a;transition:transform .18s,background .18s,border-color .18s,color .18s}
.part-card:hover{transform:translateY(-2px);border-color:#ffcf55}
.part-zoom{flex:none;display:block;width:60px;height:60px;border-radius:50%;background:#dff1d6 url(assets/little-explorer.webp) no-repeat;border:3px solid #fff;box-shadow:0 3px 8px #2e4a3a33,0 0 0 2px #e3ebda;animation:card-float 2.6s ease-in-out var(--float-delay,0s) infinite alternate}
@keyframes card-float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.part-card.active .part-zoom{box-shadow:0 3px 8px #2e4a3a33,0 0 0 3px #fff}
.part-card.active{background:#ff7b72;border-color:#ff7b72;color:#fff;transform:scale(1.06);box-shadow:0 8px 18px #ff7b7255}
.body-figure{position:relative;aspect-ratio:1;align-self:center;border-radius:26px;overflow:hidden;background:#dff1d6;box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.body-figure img{width:100%;height:100%;display:block;pointer-events:none}
.body-spots{position:absolute;inset:0}
.body-spot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #fff;border-radius:50%;background:#a8c79a;box-shadow:0 1px 4px #2e4a3a40;transition:transform .2s,background .2s}
.body-spot.active{background:#ff7b72;transform:scale(1.8);box-shadow:0 0 0 6px #ff7b7255,0 0 0 14px #ff7b7222;animation:spot-glow 1.1s ease-in-out infinite alternate;z-index:2}
@keyframes spot-glow{to{box-shadow:0 0 0 10px #ff7b7244,0 0 0 22px #ff7b7211}}
.body-caption{display:flex;align-items:center;gap:14px;max-width:640px;margin:16px auto 6px;padding:12px 16px;border-radius:24px;background:#fff;border:1px solid #e3ebda;box-shadow:var(--shadow)}
.body-caption-emoji.part-zoom{width:84px;height:84px;animation:none}
.body-caption-emoji.pop{animation:emoji-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes emoji-pop{from{transform:scale(.4) rotate(-12deg);opacity:.3}to{transform:none;opacity:1}}
.body-caption-text{flex:1;min-width:0}
.body-caption-text strong{font:700 26px/1.1 Fredoka,sans-serif;color:#254938}
.body-caption-text p{margin:2px 0 0;font-size:15px;font-weight:800;color:#5d7563}
.hear-btn{flex:none;min-height:52px;padding:0 20px;border:0;border-radius:999px;background:#ffcf55;color:#3b3110;font:900 16px Nunito,sans-serif;cursor:pointer;box-shadow:0 4px 0 #e0ab2a}
.hear-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #e0ab2a}

/* five senses */
.sense-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sense-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border:3px solid transparent;border-radius:24px;background:var(--tone);color:#254938;cursor:pointer;box-shadow:var(--shadow);transition:transform .18s,border-color .18s}
.sense-card:hover{transform:translateY(-3px)}
.sense-card.active{border-color:#4f9e62;transform:translateY(-3px)}
.sense-icon{font-size:48px;line-height:1.1}
.sense-card strong{font:700 19px Fredoka,sans-serif;letter-spacing:.5px}
.sense-card small{font:800 12px Nunito,sans-serif;color:#5d7563}
.sense-stage{margin-top:14px;padding:20px;border-radius:26px;background:var(--tone,#fff);border:1px solid #e3ebda;min-height:200px;box-shadow:var(--shadow);transition:background .25s}
.sense-hint{margin:70px 0;text-align:center;font-size:17px;font-weight:800;color:#7a9479}
.sense-hero{display:flex;align-items:center;gap:18px}
.sense-big{font-size:84px;line-height:1;animation:emoji-pop .45s cubic-bezier(.3,1.6,.5,1)}
.sense-hero h2{margin:0;font:700 clamp(24px,3.6vw,34px)/1.1 Fredoka,sans-serif;color:#254938}
.sense-hero p{margin:6px 0 0;font-weight:800;color:#5d7563}
.sense-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.sense-example{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border:2px solid #ffffffaa;border-radius:20px;background:#ffffffcc;color:#355744;font:800 14px Nunito,sans-serif;cursor:pointer}
.sense-example span{font-size:46px;line-height:1.1}
.sense-example.active{border-color:#4f9e62;background:#fff}

/* find game */
.find-game{max-width:560px;margin:0 auto 16px;padding:18px;border-radius:26px;background:#fff;border:1px solid #e3ebda;box-shadow:var(--shadow);text-align:center}
.find-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.find-bubble{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#fff6d6;color:#254938;font:600 clamp(22px,4vw,30px) Fredoka,sans-serif}
.find-bubble span{font-size:1.3em}
.find-bubble b{color:#e0583f}
.find-stars span{font-size:22px;filter:grayscale(1) opacity(.3);transition:filter .3s,transform .3s;display:inline-block}
.find-stars span.on{filter:none;transform:scale(1.15)}
.find-figure{max-width:440px;margin:0 auto}
.find-ring{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;opacity:0;pointer-events:none}
.find-ring.show{opacity:1}
.find-ring.right{border:6px solid #4fbf6a;background:#4fbf6a33;animation:ring-pop .5s cubic-bezier(.3,1.6,.5,1)}
.find-ring.hint{border:6px dashed #ffb02e;background:#ffcf5533;animation:spot-glow-ring 1s ease-in-out infinite alternate}
@keyframes ring-pop{from{transform:scale(.3)}to{transform:none}}
@keyframes spot-glow-ring{to{transform:scale(1.18)}}
.find-figure.wobble{animation:wobble .4s}
@keyframes wobble{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.find-game .game-feedback{min-height:24px;font-size:17px}
.find-game + .toddler-game{max-width:760px;margin-left:auto;margin-right:auto}

@media(max-width:760px){
  .body-board{gap:10px}
  .part-card{width:100%;flex-direction:column;gap:2px;min-height:0;padding:7px 4px;font-size:13px;text-align:center;border-radius:14px}
  .part-zoom{width:50px;height:50px}
  .sense-grid{display:flex;flex-wrap:wrap;justify-content:center}
  .sense-card{flex:0 0 calc((100% - 20px) / 3)}
}
@media(max-width:600px){
  .body-board{grid-template-columns:72px minmax(0,1fr) 72px;gap:6px}
  .part-card{padding:5px 2px;font-size:11.5px;border-width:2px}
  .part-zoom{width:46px;height:46px;border-width:2px}
  .body-groups{gap:5px}
  .body-group{min-height:42px;padding:0 10px;font-size:12px}
  .body-group span{font-size:17px}
  .body-caption{flex-wrap:wrap;gap:8px 12px}
  .body-caption-emoji.part-zoom{width:66px;height:66px}
  .body-caption-text strong{font-size:22px}
  .body-caption .hear-btn{width:100%}
  .body-tab{flex-direction:column;gap:2px;min-height:62px;font-size:12px}
  .body-tab span{font-size:22px}
  .sense-icon{font-size:40px}
  .sense-hero{flex-direction:column;text-align:center;gap:8px}
  .sense-big{font-size:68px}
  .sense-example span{font-size:38px}
  .find-head{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.body-spot.active,.part-zoom,.body-caption-emoji.pop,.find-ring.hint,.sense-big,.find-figure.wobble{animation:none}}