:root {
  color-scheme: dark;
  font-family: "Ciscotype v1", "Comic Sans MS", cursive;
  background: #000;
  color: #ffff00;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
[hidden] { display: none !important; }
#game { position: relative; width: 100%; height: 100vh; height: 100dvh; background: #000; isolation: isolate; }
#scene { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 2px dashed #ffff00; outline-offset: 7px; }
button:hover { filter: brightness(1.2); }
button:active { transform: translateY(2px); }
.fullscreen { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); padding: 8px; min-width: 44px; min-height: 44px; background: #0008; border: 0; font-family: sans-serif; font-size: 26px; color: #b5ac87; border-radius: 8px; }
.controls { position: absolute; left: 50%; bottom: max(5.5vh, env(safe-area-inset-bottom)); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.advance { display: block; width: 192px; height: 96px; padding: 0; border: 0; background: #000; }
.advance img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#choice { padding: 4px 8px; background: #000d; }
#question { margin: 0 0 8px; font-size: 64px; line-height: 1; font-weight: 400; }
.answers { display: flex; gap: 20px; align-items: center; justify-content: center; }
.art-button { display: inline-grid; place-items: center; width: 160px; height: 80px; padding: 0 12px; border: 0; background: #000 url("button.png") center / 100% 100% no-repeat; image-rendering: pixelated; }
.art-button .ciscotype { font-size: 64px; line-height: 1; }
.replay { width: 192px; height: 96px; }
#loading { font-size: 32px; white-space: normal; width: min(85vw, 620px); margin: 0 auto 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-height: 480px) {
  .controls { bottom: max(16px, env(safe-area-inset-bottom)); }
  #choice { padding: 0 8px; }
  #question { font-size: 52px; margin-bottom: 4px; }
  .advance { width: 128px; height: 64px; }
}
@media (max-width: 420px) {
  .answers { gap: 16px; }
  .art-button { width: 128px; height: 64px; }
  .art-button .ciscotype { font-size: 56px; }
  #question { font-size: 56px; }
}

/* All room coordinates use the artwork's 1920 × 1080 stage. */
#room { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden; transition: opacity 350ms linear; }
#room.fading { opacity: 0; }
.room-objects { position: absolute; inset: 0; }
.room-object { position: absolute; padding: 0; border: 0; background: transparent; image-rendering: pixelated; }
.room-object img { display: block; width: 100%; height: 100%; pointer-events: none; }
.room-object:active { transform: none; }
.room-object:disabled { cursor: default; }
.room-object:disabled:hover { filter: none; }
#box-car { left: 18.18%; top: 75.65%; width: 12.4%; height: 13.1%; }
#painting { left: 39.167%; top: 17.037%; width: 20%; height: 27.407%; z-index: 3; transform-origin: center; }
#painting.flung { animation: fling-painting 180ms ease-in forwards; pointer-events: none; }
@keyframes fling-painting { to { transform: translateY(-250%) rotate(-18deg); visibility: hidden; } }
.pupil { position: absolute; display: block; width: 2.6%; height: 3.38%; background: #aaa32d; transform: translate(-50%, -50%); pointer-events: none; }
.pupil-left { left: 33.85%; top: 41.55%; }
.pupil-right { left: 51.56%; top: 43.58%; }
#room-key { left: 47.7%; top: 25%; width: 3.28%; height: 12.31%; z-index: 2; }
#room-door { left: 88.65%; top: 65.83%; width: 7.19%; height: 25.83%; z-index: 2; }
#stickman { position: absolute; object-fit: contain; image-rendering: pixelated; pointer-events: none; z-index: 4; }
#inventory { position: absolute; top: 2.8%; left: 2%; width: 25%; aspect-ratio: 635 / 228; z-index: 5; }
.inventory-frame { display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.inventory-slot { position: absolute; display: grid; place-items: center; top: 6%; width: 21%; height: 52%; border: 0; padding: 0; background: transparent; }
.inventory-slot:nth-of-type(1) { left: 6%; }
.inventory-slot:nth-of-type(2) { left: 37%; }
.inventory-slot:nth-of-type(3) { left: 67%; }
.inventory-slot img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 55%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.inventory-slot[aria-pressed="true"] { outline: 2px solid #aaa32d; outline-offset: -4px; background: #aaa32d15; }
.inventory-slot:disabled { cursor: default; }
.fullscreen { z-index: 10; }
.controls { z-index: 11; }

#second-room { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden; transition: opacity 300ms linear; }
#second-room.exit-fade { opacity: 0; }
#lilguy-painting { position: absolute; left: 47.5%; top: 20.37%; width: 8.333%; height: 14.815%; image-rendering: pixelated; }
.pull-circle { position: absolute; display: grid; place-items: center; width: 5.73%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; z-index: 4; touch-action: manipulation; }
.pull-circle img { width: 76%; height: 76%; object-fit: contain; image-rendering: pixelated; pointer-events: none; filter: brightness(1.75) drop-shadow(0 0 7px #297cdd80); }
.pull-circle:active { transform: translate(-50%, -50%) scale(.92); }
.pull-circle:disabled { cursor: default; filter: none; }
.pull-circle:disabled img { filter: grayscale(1) brightness(.85); opacity: .55; }
.pull-circle[data-used="true"] img { opacity: .3; }
.pull-circle:focus-visible { border-radius: 50%; outline: 2px dashed #77baff; outline-offset: 0; }
.fixed-circle { left: 37.396%; top: 11.296%; }
.moving-circle { top: 6.204%; }
.door-circle { left: 93.49%; top: 57.87%; width: 4.69%; }
#floor-switch { position: absolute; left: 71.8%; top: 61.1%; width: 8%; height: 5%; background: transparent; border: 0; padding: 0; }
#floor-switch:disabled { cursor: default; }
#second-door { position: absolute; left: 89.6875%; top: 48.889%; width: 8.333%; height: 20.741%; }
.second-door-panel { display: block; width: 100%; height: 100%; image-rendering: pixelated; transform-origin: 6% 50%; transition: transform 250ms ease-out; }
.doorway-hole { position: absolute; inset: 3%; clip-path: polygon(7% 0, 100% 46%, 61% 100%, 0 65%); background: #14100a; opacity: 0; }
.door-open .doorway-hole { opacity: 1; }
.door-open .second-door-panel { transform: perspective(500px) rotateY(-72deg); }
#second-stickman { position: absolute; width: 4.06%; height: 12.037%; object-fit: contain; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; z-index: 5; }
#second-stickman.teleporting { filter: drop-shadow(0 0 12px #448bff); }
#second-room.missed::after { content: ''; position: absolute; inset: 0; background: #8f202024; pointer-events: none; }

#third-floor { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden; transition: opacity 300ms linear; }
#third-floor.exit-fade { opacity: 0; }
#third-stickman { position: absolute; width: 6.25%; height: 18.52%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#third-door { position: absolute; left: 46.875%; top: 23.148%; width: 7.5%; height: 40.74%; padding: 0; border: 0; background: transparent; }
#third-door:hover { background: #ffff0010; }
#pumpkin-dialogue { position: absolute; z-index: 9; bottom: max(12dvh, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(1100px, 94vw); max-height: 75dvh; overflow-y: auto; padding: 8px 10px; background: #000e; text-align: center; }
.pumpkin-speaker { margin: 0; font-size: 26px; line-height: 1; color: #ae7bbf; }
#pumpkin-line { margin: 4px 0 10px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; color: #d3b0df; }
#pumpkin-dialogue[data-phase="panic"] #pumpkin-line { color: #ff7a69; overflow-wrap: anywhere; }
#pumpkin-answers { display: flex; gap: 16px; justify-content: center; }
#pumpkin-answers .art-button { width: min(280px, calc(50% - 8px)); height: 72px; padding: 8px 16px; }
#pumpkin-answers .ciscotype { font-size: clamp(26px, 3vw, 38px); line-height: 1; }
#pumpkin-answers button:disabled { cursor: default; opacity: .45; }
@media (max-height: 500px) {
  #pumpkin-dialogue { padding: 4px 10px; bottom: 8dvh; width: min(1000px, 94vw); }
  .pumpkin-speaker { font-size: 20px; }
  #pumpkin-line { margin: 2px 0 6px; font-size: 28px; }
  #pumpkin-answers .art-button { height: 54px; }
  #pumpkin-answers .ciscotype { font-size: 26px; }
}

.sound-toggle { position: absolute; z-index: 10; top: max(20px, env(safe-area-inset-top)); right: 86px; min-height: 44px; padding: 8px 12px; border: 0; background: #000b; font-size: 24px; color: #b5ac87; }

#final-room { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden; }
#final-stickman { position: absolute; width: 1.375%; height: 4.074%; object-fit: contain; transform-origin: 50% 100%; image-rendering: pixelated; pointer-events: none; z-index: 3; }
#final-advance { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: clamp(96px, 15vw, 192px); height: auto; aspect-ratio: 2; }
#final-advance:active { transform: translateX(-50%) translateY(2px); }
#final-advance:disabled { opacity: .45; cursor: default; }
#final-book { position: absolute; left: 72.396%; top: 32.87%; width: 10.677%; height: 17.13%; border: 0; padding: 0; background: #000; }
#final-book:disabled { cursor: default; filter: none; }
#final-book:active { transform: none; }
.final-book-art { position: absolute; left: 14.634%; top: 24.324%; width: 65.854%; height: 62.162%; image-rendering: pixelated; pointer-events: none; }
#final-force-field { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
#final-book:enabled:hover .final-book-art { filter: drop-shadow(0 0 5px #caff72); }
#ending { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: #000; text-align: center; }
#ending-fopo { display: block; width: min(48dvh, 82vw, 480px); height: min(48dvh, 82vw, 480px); object-fit: contain; image-rendering: pixelated; filter: brightness(2); opacity: 0; }
#ending-thanks { margin: 0; font-size: clamp(32px, 4.2vw, 58px); font-weight: 400; line-height: 1.05; color: #ffff00; opacity: 0; }
#ending-restart { width: min(460px, 88vw); height: 88px; flex-shrink: 0; opacity: 0; }
#ending-restart .ciscotype { font-size: clamp(26px, 3vw, 34px); }
#ending-restart:disabled { cursor: default; }
@media (max-height: 500px) {
  #ending { gap: 8px; padding: 12px; }
  #ending-fopo { width: min(40dvh, 60vw); height: min(40dvh, 60vw); }
  #ending-thanks { font-size: 32px; }
  #ending-restart { height: 60px; }
}

#final-stickman.on-ladder { filter: drop-shadow(0 0 1px #ffffffb3) drop-shadow(0 0 3px #ffffff66); }

/* This target follows the large pumpkin silhouette in frame 11. */
#pumpkin-start { position: absolute; left: 24%; top: 4%; width: 48%; height: 66%; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; clip-path: polygon(42% 0, 49% 3%, 68% 47%, 77% 49%, 88% 58%, 87% 66%, 95% 72%, 97% 88%, 100% 93%, 87% 100%, 12% 100%, 0 94%, 7% 92%, 7% 82%, 14% 66%, 19% 65%, 15% 54%, 28% 49%, 29% 34%); }
#pumpkin-start:hover, #pumpkin-start:focus-visible { background: #ffe37530; }
#pumpkin-start:focus-visible { outline: none; box-shadow: inset 0 0 0 5px #ffe375; }
#pumpkin-foreword { position: absolute; z-index: 12; left: 50%; bottom: 2%; transform: translateX(-50%); width: 88%; padding: 10px; text-align: center; background: #000c; pointer-events: none; }
#pumpkin-foreword-text { font-size: clamp(12px, 2vw, 28px); line-height: 1.3; margin: 0 0 6px; }
#pumpkin-hint { color: #ffe375; font-size: clamp(12px, 1.8vw, 24px); margin: 0; }

#loading-screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.5vh, 28px); padding: 24px; overflow-y: auto; background: #000b; color: white; text-align: center; }
#loading-title { margin: 0; font-size: clamp(58px, 15vw, 260px); line-height: .95; color: white; }
.loading-subtitle { margin: 0 0 clamp(12px, 4vh, 48px); font-size: clamp(22px, 4vw, 52px); line-height: 1.1; }
#loading-screen #loading { margin: 0; width: auto; max-width: 88vw; font-size: clamp(22px, 3.5vw, 40px); line-height: 1.15; }
#loading-progress { appearance: none; -webkit-appearance: none; border: 1px solid #fff8; border-radius: 0; width: min(60vw, 360px); height: 8px; background: #ffffff18; color: white; }
#loading-progress::-webkit-progress-bar { background: #ffffff18; }
#loading-progress::-webkit-progress-value { background: white; }
#loading-progress::-moz-progress-bar { background: white; }
@media (max-height: 500px) { #loading-screen { gap: 10px; padding: 16px; } #loading-title { font-size: min(14vw, 26vh); } .loading-subtitle { font-size: 24px; margin-bottom: 8px; } #loading-screen #loading { font-size: 24px; } }

/* Keep scene artwork and its interactive coordinates in one shared box. */
#scene-stage { position: relative; width: 100%; height: 100%; }
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse) {
  #game[data-mode="third-floor"] { display: flow-root; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; }
  #game[data-mode="third-floor"] #scene-stage {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    margin-top: max(64px, calc(env(safe-area-inset-top) + 52px), calc((100dvh - 56.25vw) / 2));
  }
  #game[data-mode="third-floor"].pumpkin-conversation #scene-stage {
    transition: margin-top 300ms ease-out;
    margin-top: max(64px, calc(env(safe-area-inset-top) + 52px));
  }
  #game[data-mode="third-floor"] #third-floor { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  #game[data-mode="third-floor"] #pumpkin-dialogue {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 100%; max-width: 100%; max-height: none; overflow: visible;
    padding: 16px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #000;
  }
  #game[data-mode="third-floor"] #pumpkin-line { font-size: clamp(24px, 5vw, 32px); overflow-wrap: anywhere; }
  #game[data-mode="third-floor"] #pumpkin-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #game[data-mode="third-floor"] #pumpkin-answers .art-button { width: 100%; min-width: 0; height: auto; min-height: 64px; padding: 12px 8px; }
  #game[data-mode="third-floor"] #pumpkin-answers .ciscotype { font-size: clamp(22px, 4.7vw, 30px); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  #game[data-mode="third-floor"].pumpkin-conversation #scene-stage { transition: none; }
}

/* button.png is 128 × 64; keep Start inside its hand-drawn interior. */
#begin { width: 160px; max-width: calc(100vw - 48px); height: auto; aspect-ratio: 2 / 1; flex: 0 0 auto; padding: 10px 15px 12px 10px; background-size: contain; }
#begin .ciscotype { font-size: 32px; line-height: 1; white-space: nowrap; }
#loading-screen { justify-content: safe center; }
#pumpkin-foreword-text { color: #fff; }

#pumpkin-line { white-space: pre-line; }

/* Preserve the desktop artwork-relative foreword placement. */
#pumpkin-foreword-stage { position: absolute; z-index: 12; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); pointer-events: none; }
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse) {
  #game[data-mode="third-floor"] #pumpkin-foreword-stage { display: contents; }
  #game[data-mode="third-floor"] #pumpkin-foreword {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 100%; max-width: 100%; margin: 0;
    padding: 16px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #000;
  }
  #game[data-mode="third-floor"] #pumpkin-foreword-text { font-size: clamp(20px, 4.7vw, 28px); overflow-wrap: anywhere; }
  #game[data-mode="third-floor"] #pumpkin-hint { font-size: clamp(18px, 4vw, 24px); overflow-wrap: anywhere; }
}

#pumpkin-feedback { position: fixed; inset: 0; z-index: 30; display: flex; align-items: safe center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow: auto; background: #000b; color: #fff; text-align: center; }
#pumpkin-feedback-text { width: min(100%, 1100px); margin: 0; color: #fff; font-size: clamp(32px, 7vw, 96px); line-height: 1.15; overflow-wrap: anywhere; }
#pumpkin-apology-continue { width: 192px; height: 96px; max-width: 100%; margin-top: 12px; }
#pumpkin-apology-continue .ciscotype { font-size: 28px; line-height: 1; }