/* A surface, a landing pad and a child-controlled approach. */
.moon-exemplar .moon-world {position:absolute;inset:0;background:#184958 url('../assets/moon/soft-landing-world.webp') center/cover;}
.moon-exemplar .scene-art.space.pulse,.moon-exemplar .scene-art.space.is-launched {animation:none;}
.moon-exemplar .moon-pad {position:absolute;left:62%;top:84%;width:26%;height:7%;min-height:9px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #709e97;background:#d5e0ce;box-shadow:0 5px 0 #93b0a2,0 10px 12px #80634124;}
.moon-exemplar .moon-pad::after {content:'';position:absolute;inset:18% 12%;border:2px dashed #fbf2c9;border-radius:50%;}
.moon-exemplar .moon-rocket {position:absolute;width:clamp(54px,18%,145px);height:28%;min-height:44px;min-width:44px;padding:0;border:0;background:transparent;box-shadow:none;transform:translate(-50%,-50%);z-index:3;}
.moon-exemplar .moon-rocket img {width:100%;height:100%;object-fit:contain;transform:rotate(var(--moon-tilt,0deg));pointer-events:none;filter:drop-shadow(0 5px 5px #18383626);}
.moon-exemplar .moon-rocket:focus-visible {outline:3px solid #fff2c0;outline-offset:6px;border-radius:20px;}
.moon-exemplar .moon-rocket .rocket-tap-cue {position:absolute;top:50%;bottom:auto;left:calc(100% + 8px);transform:translateY(-50%);white-space:nowrap;font-size:.62rem;}
.moon-exemplar .moon-guidance {position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff1b8;stroke-width:3;stroke-dasharray:4 7;opacity:0;}
.moon-exemplar .moon-guidance path {vector-effect:non-scaling-stroke;}
.moon-exemplar [data-moon-response='help'] .moon-guidance {opacity:1;}
.moon-exemplar [data-moon-response='help'] .moon-pad {box-shadow:0 0 0 5px #fff2bb90,0 5px 0 #93b0a2;}
.moon-exemplar .moon-stop-sign {display:none;position:absolute;width:27%;height:27%;left:-22%;top:35%;}
.moon-exemplar [data-moon-response='stop'] .moon-stop-sign {display:block;}
.moon-exemplar [data-moon-landed='true'] .moon-pad {border-color:#eeb763;}
.moon-exemplar .moon-card-art {position:relative;display:block;width:100%;height:100%;}
.moon-exemplar .moon-card-art .phrase-picture {width:70%;height:80%;min-height:0;object-fit:contain;position:absolute;left:3%;top:0;transform:rotate(-12deg);}
.moon-exemplar .card-moon-pad {position:absolute;left:8%;bottom:0;width:60%;height:13%;border:2px solid #6b9790;border-radius:50%;background:#e9edcb;}
.moon-exemplar .card-moon-symbol {position:absolute;width:38%;height:60%;right:0;top:15%;fill:none;stroke:#3c8185;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.moon-exemplar .moon-card-art.pose-help .card-moon-pad {box-shadow:0 0 0 3px #eeb76370;}
.moon-exemplar .moon-card-art.pose-stop .card-moon-symbol {stroke:none;}
.moon-exemplar .remix-strip .moon-card-art {width:56px;height:62px;}
@media(max-width:760px){.moon-exemplar .phrase-grid .phrase-icon {width:70px;} .moon-exemplar .moon-rocket .rocket-tap-cue {font-size:.53rem;padding:4px 7px;}}
@media(prefers-reduced-motion:reduce){.moon-exemplar .scene-art *,.moon-exemplar .phrase-button {animation:none!important;transition:none!important;}}
.moon-exemplar.quiet-mode .scene-art *,.moon-exemplar.quiet-mode .phrase-button {animation:none!important;transition:none!important;}

/* Both landing places are large child-controlled choices, with a default. */
.moon-exemplar .moon-pad { left:42%; top:84%; width:27%; height:44px; min-width:44px; min-height:44px; padding:0; color:#476f68; font-size:18px; }
.moon-exemplar .moon-pad-two { left:76%; }
.moon-exemplar .moon-pad[aria-pressed='true'] { border-color:#edb957; box-shadow:0 0 0 4px #fff2bd80,0 5px 0 #93b0a2; }
.moon-exemplar .moon-pad span { position:relative; z-index:1; }
.moon-exemplar .moon-guidance { opacity:.48; pointer-events:none; }
.moon-exemplar [data-moon-landed='true'] .moon-guidance { opacity:0; }
.moon-exemplar .moon-rocket .rocket-tap-cue { font-size:.7rem; }
.moon-exemplar .moon-rocket { width:clamp(88px,24%,150px); min-width:88px; min-height:72px; }
.moon-exemplar .moon-rocket::before { content:''; position:absolute; inset:12% 5%; border:3px solid #fff4be; border-radius:50%; background:#fff2bd24; box-shadow:0 0 0 5px #fff8e52b,0 0 28px #f6cf7566; }
.moon-exemplar .moon-rocket img { position:relative; }
.moon-exemplar .moon-help-demo { position:absolute; z-index:4; top:1px; left:50%; transform:translateX(-50%); box-sizing:border-box; width:174px; height:60px; padding:17px 8px 3px; display:flex; align-items:center; justify-content:space-between; gap:3px; border:2px solid #f2d487; border-radius:17px; background:#fff9e6f2; box-shadow:0 7px 18px #16324352; pointer-events:none; }
.moon-exemplar .moon-help-demo[hidden] { display:none; }
.moon-exemplar .moon-demo-caption { position:absolute; top:2px; left:10px; font-size:11px; font-weight:800; color:#21494d; }
.moon-exemplar .moon-help-demo > svg { width:30px; height:24px; flex:none; fill:none; stroke:#3f837e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.moon-exemplar .moon-demo-before,.moon-exemplar .moon-demo-after { position:relative; width:42px; height:36px; display:grid; place-items:center; }
.moon-exemplar .moon-demo-before img { width:31px; height:34px; object-fit:contain; }
.moon-exemplar .moon-demo-before i { position:absolute; left:1px; bottom:0; width:19px; height:21px; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15 31V13q0-6 5-4v12l3-4 9 4-4 14H16L8 27q-3-6 2-5Z' fill='%23fff8e5' stroke='%234f817b' stroke-width='2'/%3E%3Cpath d='M12 6 9 2m16 4 4-3M7 13H2' stroke='%234f817b' stroke-width='2'/%3E%3C/svg%3E"); }
.moon-exemplar .moon-demo-after img { position:absolute; z-index:1; bottom:7px; width:25px; height:28px; object-fit:contain; }
.moon-exemplar .moon-demo-pad { position:absolute; bottom:0; width:37px; height:13px; display:grid; place-items:center; border:2px solid #6c9c91; border-radius:50%; background:#e8eac8; color:#356b68; font-size:10px; font-style:normal; line-height:1; }
@media(max-width:360px) and (max-height:650px){ .moon-exemplar .moon-help-demo { left:auto; right:4px; transform:none; width:140px; padding-left:6px; padding-right:6px; gap:1px; } }

.moon-exemplar [data-moon-response='land'] .rocket-tap-cue,
.moon-exemplar [data-moon-landed='true'] .rocket-tap-cue { display:none; }