/* Space School — Puzzle: a hidden picture above the question */
.ssa-pz{max-width:560px;margin:0 auto 14px;text-align:center}
.pz-pic{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 0 0 4px rgba(255,255,255,.2),0 12px 26px rgba(0,0,0,.4)}
.pz-pic>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pz-tiles{position:absolute;inset:0;display:grid;gap:2px;perspective:700px}
.pz-t{position:relative;display:grid;place-items:center;border-radius:6px;background:linear-gradient(135deg,#4c1d95,#1e1b4b);box-shadow:inset 0 0 0 2px rgba(196,181,253,.45);transition:transform .6s cubic-bezier(.3,.9,.4,1),opacity .6s;transform-origin:center}
.pz-t b{font:700 clamp(14px,2vw,22px) Fredoka,sans-serif;color:rgba(255,255,255,.75)}
.pz-t.is-now{box-shadow:inset 0 0 0 3px #fde047,0 0 16px rgba(253,224,71,.6);z-index:1}
.pz-t.is-open{transform:rotateY(180deg);opacity:0;pointer-events:none}
.pz-t.is-flip{transition-delay:.35s}
.pz-t.is-miss{animation:pzno .45s}
@keyframes pzno{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.pz-cap{margin:8px 0 0;color:#dde3ff;font-weight:800}
.ssa-pz.is-end{margin-bottom:18px}
.ssa-pz.is-done .pz-pic{box-shadow:0 0 0 4px #fde047,0 0 40px rgba(253,224,71,.6);animation:pzglow 1.6s ease-in-out infinite alternate}
@keyframes pzglow{to{box-shadow:0 0 0 4px #fde047,0 0 70px rgba(253,224,71,.8)}}
.ssa-pz.is-done .pz-cap{color:#fde68a;font-size:20px}
/* the picture takes its own full line, whatever layout it sits in */
.ssa-pz{flex:1 0 100%;width:min(560px,100%);max-width:560px;margin-left:auto;margin-right:auto;align-self:center;box-sizing:border-box}
#ssaEnd .ssa-pz{grid-column:1/-1}