/* Every game inside the site template (see _layouts/game-frame.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}
/* The way back to the Play page, on every screen size (owner feedback, 21 October 2026). Phones: one 44px row. */
.quest__crumbs{border-bottom:2px solid var(--lucy-charcoal)}
.quest__crumbs ol{margin:0;padding:0 16px;font-size:.875rem;flex-wrap:nowrap;min-width:0}
.quest__crumbs li{white-space:nowrap}
.quest__crumbs li:last-child{overflow:hidden;text-overflow:ellipsis}
.quest__crumbs a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.quest__crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
@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__crumbs{border-bottom:0}
  .quest__crumbs ol{padding:0 4px;font-size:.9375rem}
  .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:0 4px 16px}
  .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}
}