/* The site game frame and buttons surround the illustrated story interaction. */
.sd-game { padding:0; }
.sd-game:not([data-step]) .sd-mission { display:none; }
.sd-game .game-bar { padding-bottom:24px; }
.sd-clues { list-style:none; display:flex; gap:8px; padding:0; margin:0; }
.sd-clues li { display:grid; place-items:center; border:3px dashed var(--ink-soft); border-radius:50%; width:32px; height:32px; background:var(--card); color:var(--ink); font-size:1.2rem; position:relative; }
.sd-clues span { font:700 .7rem/1.2 var(--font-body); position:absolute; top:100%; white-space:nowrap; margin-top:4px; }
.sd-clues .sd-found { background:var(--sun); border-color:var(--ink); border-style:solid; }
.sd-story { padding:16px 24px; display:flex; gap:16px; align-items:center; background:var(--card); border-bottom:2px solid var(--line); font-size:1.15rem; font-weight:700; min-height:80px; }
.sd-story>span { font-size:2rem; color:var(--english); }
.sd-story p { margin:0; }
.sd-scene { position:relative; width:100%; min-width:0; aspect-ratio:3/2; }
.sd-park { width:100%; height:100%; display:block; object-fit:cover; }
.sd-target { position:absolute; padding:8px 12px; min-height:48px; min-width:48px; transform:translate(-50%,-50%); }
.sd-target:active:not(:disabled) { transform:translate(-50%,calc(-50% + 3px)); }
.sd-target span { display:none; }
.sd-bench { left:17%; top:61%; }.sd-mia { left:39%; top:53%; }.sd-wind { left:64%; top:23%; }.sd-bag { left:65%; top:79%; }.sd-bush { left:86%; top:57%; }
.sd-hat { position:absolute; left:85%; top:66%; width:13%; height:auto; transform:translate(-50%,-50%); pointer-events:none; filter:drop-shadow(0 4px 3px #243d3d55); }
.sd-game[data-completed=true] .sd-hat { left:37%; top:30%; width:14%; transform:translate(-50%,-50%) rotate(-9deg); }
.sd-intro { position:absolute; inset:12% 12%; background:#fffaf0f5; border:3px solid var(--line); border-radius:var(--radius); padding:clamp(16px,3vw,32px); text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:var(--shadow); }
.sd-intro h2 { margin:0 0 8px; }.sd-intro p { max-width:38rem; }.sd-intro .btn { white-space:normal; max-width:100%; }
.sd-mission { padding:16px; display:flex; gap:16px; align-items:center; background:var(--card); border-top:2px solid var(--line); }
.sd-mission h2 { font-size:1.2rem; margin:0 0 6px; }.sd-mission p { margin:0; }
.sd-mission [data-feedback]:empty { display:none; }
.sd-jigby { flex-shrink:0; width:72px; }.sd-mascot { width:100%; height:auto; }
.sd-tools { margin-left:auto; display:flex; gap:12px; flex-shrink:0; flex-direction:column; }
.sd-result { padding:24px; background:var(--good-soft); border-top:2px solid var(--good); }
.sd-result h2 { margin-top:0; }.sd-result a { margin:12px 0 0 12px; }
.sd-inventory { display:none; align-items:center; gap:6px; border:2px solid var(--good); border-radius:var(--radius-sm); background:var(--good-soft); padding:6px; color:var(--good-dark); font-weight:800; font-size:.9rem; }
.sd-inventory img { width:64px; height:auto; }.sd-game[data-holding=true] .sd-inventory { display:flex; }
.sd-game [hidden] { display:none!important; }
/* Keep the illustration's proportions: a reading sidebar shortens the desktop
   game without cropping the places that children need to investigate. */
@media(min-width:960px) {
 .sd-game { display:grid; grid-template-columns:minmax(0,1fr) 280px; grid-template-areas:"bar bar" "scene story" "scene mission" "result result"; }
 .sd-game .game-bar { grid-area:bar; }
 .sd-scene { grid-area:scene; align-self:start; }
 .sd-story { grid-area:story; align-items:flex-start; gap:10px; padding:16px; border-left:2px solid var(--line); }
 .sd-story > span { display:none; }
 .sd-mission { grid-area:mission; flex-direction:column; align-items:stretch; gap:12px; padding:16px; border-left:2px solid var(--line); }
 .sd-mission .sd-jigby { display:none; }
 .sd-tools { margin:0; width:100%; }
 .sd-result { grid-area:result; }
 .sd-intro { inset:6%; padding:16px; }
 .sd-intro p:nth-of-type(2) { display:none; }
}
@media(max-width:700px) {
 .sd-game .game-type { font-size:1rem; }
 .sd-clues li { width:28px; height:28px; }
 .sd-clues { gap:10px; padding:0 4px; }
 .sd-clues span { font-size:.66rem; }
 .sd-scene:has(.sd-intro:not([hidden])) { min-height:280px; }
 .sd-story { padding:12px; font-size:1rem; min-height:0; gap:8px; }
 .sd-story > span { display:none; }
 .sd-target { font-size:1rem; padding:4px 6px; border-radius:var(--radius-sm); }
 .sd-mission { flex-wrap:wrap; padding:12px; gap:10px; }.sd-jigby { display:none; }.sd-mission>div:nth-child(2) { flex:1; min-width:170px; }
 .sd-mission h2 { font-size:1rem; line-height:1.4; }
 .sd-mission p { font-size:1rem; line-height:1.45; }
 .sd-tools { width:100%; flex-direction:row; margin:0; }.sd-tools button { flex:1; }
 .sd-intro { inset:3%; padding:10px; border-radius:var(--radius-sm); }.sd-intro h2 { font-size:1.1rem; }.sd-intro p { font-size:1rem; margin:4px 0 8px; }.sd-intro p:nth-of-type(2) { display:none; }
 .sd-result { padding:16px; }.sd-result .btn { display:flex; width:100%; margin:12px 0 0; }
}
@media(prefers-reduced-motion:no-preference) { .sd-found { animation:sd-pop .3s ease-out; } @keyframes sd-pop { 50% { transform:scale(1.14); } } }
.sd-scene > picture { display:contents; }