/* Size the story to the available viewport, including mobile browser chrome. */
.site-shell {
  width:100%; max-width:none; height:100vh; height:100dvh; min-height:0;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));
}
.masthead { width:min(100%,1120px); margin:auto; min-height:52px; padding:4px 0; gap:8px; flex-wrap:nowrap; }
.brand { white-space:nowrap; font-size:clamp(.75rem,2vw,.9rem); }
.brand>span { font-size:26px; }
.edition { font-size:.75rem; padding:4px 8px; }
.sound-toggle { flex-shrink:0; padding:8px; font-size:.75rem; }
.header-note { display:none; }
.site-footer { width:min(100%,1120px); margin:auto; min-height:44px; padding:4px 0; flex-wrap:nowrap; gap:8px; }
.site-footer>span:first-child { font-size:.75rem; max-width:none; }
.site-footer .art-credit { padding:8px 0; white-space:nowrap; }
#progress { gap:4px; padding:5px 7px; }
#progress span { width:5px; height:5px; }
#progress .active { width:13px; }
#app { width:100%; min-width:0; min-height:0; container-type:size; }
#app .scene {
  width:100%; max-width:720px; height:100%; min-height:0; margin:0 auto;
  padding:26px 12px 12px; gap:clamp(6px,1cqh,12px);
  justify-content:safe center; overflow:auto; overscroll-behavior:contain;
}
#app .scene>* { flex-shrink:0; max-width:100%; }
#app .scene h1 {
  font-size:clamp(1.75rem,min(7vw,7cqh),3.4rem); line-height:1.08;
  margin:0; -webkit-text-stroke:1.8px var(--outline); text-shadow:0 3px 0 var(--outline);
}
#app .scene .eyebrow { margin:0; padding:4px 9px; font-size:.75rem; }
#app .scene .subtitle { margin:0; line-height:1.4; font-size:1rem; }
#app .scene .whisper { margin:0; font-size:.75rem; line-height:1.4; }
#app .scene .scene-art {
  height:clamp(80px,27cqh,270px); width:min(100%,360px); margin:0;
}
#app .scene .confirmation-art { position:relative; height:clamp(100px,34cqh,340px); width:min(100%,440px); }
#app .scene .confirmation-art .scene-art { width:100%; height:100%; }
.confirmation-heart { position:absolute; left:50%; top:21%; width:34%; height:36%; transform:translateX(-50%); color:#ff9dc8; filter:drop-shadow(0 0 12px #ffafd280); animation:confirmation-heartbeat 2.5s ease-in-out infinite; }
.confirmation-heart svg { width:100%; height:100%; overflow:visible; }
.confirmation-heart path { stroke:#823d69; stroke-width:1; }
.confirmation-bats { position:absolute; inset:0; pointer-events:none; }
.confirmation-bat { position:absolute; width:15%; height:20%; animation:confirmation-bat-flight 7s ease-in-out infinite; }
.confirmation-bat img { display:block; width:100%; height:100%; object-fit:contain; }
.confirmation-bat img,.flying-treat img[src$="bat.webp"],.final-pink-bat img { filter:grayscale(1) sepia(1) saturate(5) hue-rotate(285deg) brightness(1.45); }
.moon-bat>path { fill:#ff9dc8; stroke:#823d69; }
.confirmation-bat.bat-1 { left:6%; top:15%; }
.confirmation-bat.bat-2 { right:5%; top:32%; animation-name:confirmation-bat-return; animation-delay:-2.5s; }
.confirmation-bat.bat-3 { left:24%; top:4%; animation-delay:-4.5s; width:12%; }
@keyframes confirmation-heartbeat { 50% { transform:translateX(-50%) scale(1.08); filter:drop-shadow(0 0 20px #ffafd2b0); } }
@keyframes confirmation-bat-flight { 25% { transform:translate(60%,-35%) rotate(10deg); } 50% { transform:translate(160%,20%) rotate(-8deg); } 75% { transform:translate(55%,55%) rotate(5deg); } }
@keyframes confirmation-bat-return { 25% { transform:translate(-60%,-35%) rotate(-10deg); } 50% { transform:translate(-160%,20%) rotate(8deg); } 75% { transform:translate(-55%,55%) rotate(-5deg); } }
@media(prefers-reduced-motion:reduce) { .confirmation-heart,.confirmation-bat { animation:none; } }
#app .scene .button { min-width:0; width:min(100%,280px); min-height:56px; padding:12px 22px 18px; font-size:.875rem; }
#app .scene .candy-button { padding:14px 40px; }
#app .scene .button-stack { width:min(100%,280px); gap:10px; }
#app .scene .question-small { font-size:clamp(1rem,3cqh,1.4rem); line-height:1.25; margin:3px 0; }
#app .story-count { top:4px; left:12px; }
#app .corner-star { top:0; right:12px; font-size:23px; }
#app .scene .single-ghost { width:clamp(54px,12cqh,90px); height:clamp(60px,14cqh,100px); margin:0; }
#app .scene .big-heart { width:clamp(48px,11cqh,90px); height:clamp(46px,11cqh,86px); margin:0; }
#app .scene blockquote { margin:0; padding:14px 20px; font-size:clamp(1.125rem,3.5cqh,1.6rem); }
#app .scene .boo-visitor { margin:0; }
#app .scene .boo-bubble { margin:0; padding:10px 20px; font-size:clamp(1.75rem,6cqh,3rem); }
#app .scene .sourced-boo { width:clamp(60px,16cqh,124px); height:clamp(60px,16cqh,124px); margin:10px auto 0; }
#app .scene .partner-text { margin:0; font-size:.875rem; line-height:1.4; }
#app .scene .pumpkin { width:clamp(28px,6cqh,49px); height:clamp(28px,6cqh,49px); margin:0; }
#app .scene .details-list { margin:0; padding:4px 14px; }
#app .scene .detail-row { padding:clamp(5px,1.4cqh,12px) 0; gap:10px; }
#app .scene .detail-row svg { flex-shrink:0; width:23px; height:23px; padding:4px; }
#app .scene .detail-row dt { margin:0; }
#app .scene .detail-row dd { font-size:1rem; line-height:1.3; }
#app .scene .final-sky { height:clamp(38px,10cqh,75px); margin:0; }
#app .scene .final-sky .crescent { height:100%; width:60px; }
#app .scene .final-art { height:clamp(70px,30cqh,255px); width:min(100%,400px); margin:0; }
#app .scene .see-you { margin:0; font-size:.875rem; }
#app .scene .final-heart { font-size:24px; line-height:1; }
#app .scene .loading-track { margin:0; max-width:80%; }
#app .scene .crescent { margin:0; }
#app .loading .crescent { width:clamp(32px,9cqh,62px); height:clamp(38px,10cqh,76px); }
/* Keep the board and its controls together, even on narrow or short screens. */
#app .game {
  max-width:620px; display:grid; grid-template-columns:minmax(0,1fr) 52px;
  grid-template-rows:auto auto minmax(0,1fr) auto; align-content:center;
  align-items:center; justify-items:center; column-gap:12px;
}
#app .game .eyebrow { display:none; }
#app .game h1 { grid-column:1/-1; font-size:clamp(1.75rem,5cqh,2.75rem); }
#app .game .game-hud { grid-column:1/-1; width:100%; margin:0; gap:8px; }
#app .game .heart-counter { flex-shrink:0; white-space:nowrap; }
#app .game .game-hint { font-size:.875rem; max-width:none; }
#app .game .maze { grid-row:3; grid-column:1; width:min(100%,calc(100cqh - 170px),400px); flex-shrink:0; }
#app .game .direction-pad { grid-row:3; grid-column:2; grid-template-columns:52px; grid-template-rows:repeat(4,46px); gap:6px; margin:0; }
#app .game .direction { grid-column:1; grid-row:auto; min-height:44px; }
#app .game .controls-note { grid-column:1/-1; max-width:none; margin:0; font-size:.75rem; }
#app .game .controls-note span { display:none; }
#app .game .controls-note br { display:none; }
#app .game .heart-toast { position:absolute; z-index:4; bottom:40px; left:50%; transform:translateX(-50%); width:min(90%,400px); min-height:44px; margin:0; pointer-events:none; }
/* Short portrait screens spend space on the invitation and its controls. */
@media(max-height:740px) {
  #app .scene .eyebrow { display:none; }
  #app .quest .whisper,#app .invitation .whisper { display:none; }
  #app .scene .scene-art { height:clamp(70px,23cqh,190px); }
  #app .details .pumpkin { display:none; }
  .site-footer>span:first-child br { display:none; }
}
@media(max-width:360px) {
  .edition { display:none; }
  .site-footer>span:first-child { display:none; }
  #app .scene { padding-inline:4px; }
  #app .game { column-gap:8px; }
}
/* A wide screen uses two columns instead of a tall stack. */
@media(min-width:500px) and (min-aspect-ratio:4/3) {
  #app .scene:is(.quest,.invitation,.confirmed,.decline,.details,.finale,.heart-found) {
    max-width:1100px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-auto-rows:auto; align-content:center; justify-items:center; column-gap:clamp(16px,4vw,70px);
  }
  #app .scene:is(.quest,.invitation)>.scene-art,#app .confirmed>.confirmation-art,
  #app .decline>.boo-visitor,#app .details>.details-list,#app .finale>.final-art {
    grid-column:1; grid-row:1/9; width:min(100%,480px); align-self:center;
  }
  #app .scene:is(.quest,.invitation)>.scene-art,#app .confirmed>.confirmation-art { height:min(70cqh,400px); }
  #app .scene:is(.quest,.invitation,.confirmed,.decline,.details,.finale)>:is(h1,.eyebrow,.subtitle,.button,.button-stack,.whisper,.partner-text,.pumpkin,.final-sky,.final-heart,.see-you) { grid-column:2; }
  #app .finale .final-art { height:min(75cqh,400px); }
  #app .heart-found>.big-heart { grid-column:1; grid-row:1/4; align-self:center; }
  #app .heart-found>.single-ghost { grid-column:1; grid-row:4/9; align-self:center; }
  #app .heart-found>:is(h1,.eyebrow,blockquote,.button) { grid-column:2; }
  #app .game { max-width:850px; grid-template-columns:minmax(0,1fr) 170px; }
  #app .game .direction-pad { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,46px); }
  #app .game .direction.up { grid-column:2; grid-row:1; }
  #app .game .direction.left { grid-column:1; grid-row:2; }
  #app .game .direction.down { grid-column:2; grid-row:2; }
  #app .game .direction.right { grid-column:3; grid-row:2; }
}
/* Very short landscape screens retain useful targets and allow natural scrolling
   only if text enlargement or an unusually small viewport needs more room. */
@media(max-height:500px) and (min-width:500px) {
  .masthead { min-height:44px; }
  .site-footer { min-height:32px; }
  #app .scene { padding-top:20px; gap:6px; }
  #app .scene h1 { font-size:1.75rem; }
  #app .scene .scene-art { height:clamp(60px,25cqh,110px); }
  #app .scene .button { min-height:48px; padding-block:10px 14px; }
  #app .scene .detail-row { padding:3px 0; }
  #app .game { grid-template-rows:auto auto minmax(0,1fr); }
  #app .game .maze { width:min(100%,calc(100cqh - 112px),400px); }
  #app .game .controls-note { display:none; }
}
#app .scene.jumpscare { width:100%; max-width:none; height:100dvh; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); gap:0; overflow:hidden; }
body:has(.jumpscare) #app { container-type:normal; }
#app .jumpscare .scare-caption { width:min(100%,340px); padding:8px 12px; }
#app .jumpscare h1 { font-size:clamp(2rem,10vmin,4rem); margin-bottom:8px; }

/* A little love letter, surrounded by animated hearts and one friendly bat. */
#app .finale .love-letter-finale { position:relative; width:min(100%,450px); height:clamp(120px,42cqh,380px); overflow:visible; }
.final-letter { position:absolute; inset:10% 10% 2%; display:block; filter:drop-shadow(0 10px 18px #2b164c55); animation:love-letter-float 4s ease-in-out infinite; }
.final-letter img,.final-sparkle img,.final-pink-bat img,.final-heart-ghost img { display:block; width:100%; height:100%; object-fit:contain; }
.final-heart-ghost { position:absolute; z-index:1; display:block; left:32%; top:4%; width:36%; height:42%; pointer-events:none; transform-origin:center bottom; filter:drop-shadow(0 0 14px #ffc9df88); animation:letter-ghost-peek 6.14s ease-in-out infinite; }
@keyframes letter-ghost-peek {
  0%,8%,100% { opacity:0; transform:translateY(95%) scale(.15); }
  22% { opacity:1; transform:translateY(8%) scale(.9) rotate(-6deg); }
  38%,65% { opacity:1; transform:translateY(-4%) scale(1) rotate(5deg); }
  52% { transform:translateY(3%) scale(1.04) rotate(-5deg); }
  82% { opacity:1; transform:translateY(10%) scale(.9) rotate(-4deg); }
  94% { opacity:0; transform:translateY(95%) scale(.15); }
}
.final-sparkle { position:absolute; display:block; width:20%; height:23%; animation:love-heart-drift 5s ease-in-out infinite; }
.sparkle-1 { left:4%; top:27%; }
.sparkle-2 { right:3%; top:14%; animation-delay:-1.7s; }
.sparkle-3 { right:10%; bottom:0; width:15%; animation-delay:-3.2s; }
.final-pink-bat { position:absolute; left:18%; top:0; width:17%; height:20%; animation:love-bat-swoop 7s ease-in-out infinite; }
@keyframes love-letter-float { 50% { transform:translateY(-8px) rotate(-3deg); } }
@keyframes love-heart-drift { 50% { transform:translateY(-12px) rotate(8deg) scale(1.08); } }
@keyframes love-bat-swoop { 35% { transform:translate(130%,-8%) rotate(8deg); } 70% { transform:translate(240%,35%) rotate(-8deg); } }
@media(prefers-reduced-motion:reduce) { .final-letter,.final-sparkle,.final-pink-bat,.final-heart-ghost { animation:none; } .final-heart-ghost { opacity:1; transform:none; } }
@media(min-width:500px) and (min-aspect-ratio:4/3) {
  #app .finale .love-letter-finale { height:min(80cqh,450px); }
  #app .finale .finale-message { grid-column:2; }
}