/* The worlds screen and the world map inside the site template (see quest.njk).
   Phones: edge to edge under the header. Wider screens: a framed panel at the site's content width on a full-width sky band. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.quest{display:block;border-top:2px solid var(--lucy-charcoal)}
.quest__frame{display:block;width:100%;height:calc(100svh - 80px);min-height:320px;border:0;background:var(--lucy-cream)}
/* Phones and short screens: the heading is for screen readers only, the map keeps every pixel. */
.quest__head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.quest__lucy{display:none}
@media(min-width:61rem) and (min-height:541px){
  .quest{border-top:0;background:var(--lucy-sky);padding:12px 32px 24px}
  .quest__inner{max-width:1100px;margin:0 auto}
  .quest__frame{border:4px solid var(--lucy-charcoal);border-radius:8px;box-shadow:4px 4px 0 var(--lucy-charcoal);background:var(--lucy-cream)}
}
/* Large screens (owner feedback, 14 October 2026: the framed game looked unrelated to the site). The page gets the
   Play page's sky, edge to edge (owner request the same day), with its eyebrow and title, and the game window sits inside the band, with Lucy standing on its
   top edge. Lucy is the approved website file, unchanged. Short desktop screens keep the band without the title so the map fits. */
@media(min-width:61rem) and (min-height:760px){
  .quest{padding:0 32px 40px}
  .quest__head{position:relative;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:20px 4px 16px}
  .quest__title .eyebrow{margin:0 0 8px}
  .quest__title h1{font:700 clamp(1.75rem,2.6vw,2.25rem)/1.1 var(--lucy-display);letter-spacing:-.04em}
  .quest__title h1 span{background:var(--lucy-butter);box-shadow:8px 0 var(--lucy-butter),-5px 0 var(--lucy-butter)}
  .quest__lucy{display:block;width:auto;height:96px;margin:-24px 24px -20px 0;image-rendering:pixelated;position:relative;z-index:1}
}