:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body { background: #050805; color: #f4e8c8; }

.scene {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2,5,3,.78), transparent 34%, transparent 68%, rgba(2,5,3,.72)),
    radial-gradient(circle at 68% 40%, rgba(255,154,44,.17), transparent 25%),
    repeating-linear-gradient(90deg, transparent 0 13%, rgba(0,0,0,.2) 13.3% 14%),
    repeating-linear-gradient(0deg, transparent 0 12%, rgba(0,0,0,.23) 12.3% 13%),
    linear-gradient(155deg, #152319 0%, #0a120d 48%, #182419 100%);
}

.animated-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #070b08;
  animation: frightened-camera 9s ease-in-out infinite;
}

.menu-background {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: 62% center;
  filter: brightness(.72) saturate(.92) contrast(1.06);
  transform-origin: 65% 70%;
  animation: menu-breath 7s ease-in-out infinite;
}

.menu-torch-glow {
  position: absolute;
  right: 19%;
  top: -10%;
  width: min(38vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,172,69,.52), rgba(255,93,14,.15) 36%, transparent 70%);
  mix-blend-mode: screen;
  animation: menu-glow 1.2s ease-in-out infinite alternate;
}

.menu-flame {
  position: absolute;
  right: 27.8%;
  top: 5%;
  width: 42px;
  height: 95px;
  border-radius: 70% 30% 60% 40%;
  background: linear-gradient(#fff7b1, #ffae35 48%, #ef4b0b 85%, transparent 86%);
  filter: blur(1px) drop-shadow(0 0 18px #ff7a18);
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  animation: menu-fire .18s ease-in-out infinite alternate;
}

.menu-flame,
.vines { display: none; }

.bg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(.73) saturate(.9) contrast(1.06);
  animation: nervous-frames 8s linear infinite;
  will-change: opacity, transform;
}

.frame-1 { animation-delay: 0s; }
.frame-2 { animation-delay: -6s; }
.frame-3 { animation-delay: -4s; }
.frame-4 { animation-delay: -2s; }

.isi-stage { display: none; }
.bg-frame { display: none; }

@keyframes nervous-frames {
  0%, 23% { opacity: 1; transform: translate(0, 0) scale(1.006); }
  25%, 100% { opacity: 0; transform: translate(0, 2px) scale(1.006); }
}

@keyframes frightened-camera {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(-1px, 1px); }
  21% { transform: translate(1px, -1px); }
  24% { transform: translate(-1px, 0); }
  50% { transform: translate(0, 0); }
  68% { transform: translate(1px, 1px); }
  71% { transform: translate(-1px, -1px); }
  74% { transform: translate(1px, 0); }
}

@keyframes menu-breath {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-.3%, .25%) scale(1.006); }
  58% { transform: translate(.3%, -.15%) scale(1.003); }
  76% { transform: translate(-.15%, .15%) scale(1.008); }
}

@keyframes menu-glow { from { opacity: .62; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }
@keyframes menu-fire { from { transform: skewX(-5deg) rotate(-5deg) scale(.88, 1.08); } to { transform: skewX(7deg) rotate(6deg) scale(1.08, .9); } }

.game-screen { position: fixed; z-index: 100; inset: 0; overflow: hidden; background: #050806; }
.game-screen[hidden] { display: none; }
#game-canvas { display: block; width: 100%; height: 100%; }
.game-darkness { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(circle at 62% 56%, transparent 0 20%, rgba(3,6,4,.12) 43%, rgba(1,3,2,.76) 100%); }
.crosshair { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2px; border: 1px solid rgba(255,235,188,.72); border-radius: 50%; box-shadow: 0 0 6px #000; }
.game-help { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 15px; border: 1px solid rgba(223,198,139,.24); border-radius: 999px; color: rgba(245,229,195,.72); background: rgba(3,6,4,.48); font: 12px Arial,sans-serif; letter-spacing: .08em; backdrop-filter: blur(5px); transition: opacity .8s; }
.game-hands { display: none; }
.game-screen.walking .game-hands { animation-play-state: running; }
.pause-overlay, .confirm-overlay { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(2,5,3,.72); backdrop-filter: blur(9px); }
.pause-overlay[hidden], .confirm-overlay[hidden] { display: none; }
.pause-panel, .confirm-panel { width: min(440px, 92vw); padding: 30px; border: 1px solid rgba(226,190,114,.48); border-radius: 10px; color: #eadfbe; background: linear-gradient(145deg,rgba(38,48,37,.97),rgba(12,18,14,.98)); box-shadow: 0 24px 80px #000, inset 0 1px rgba(255,255,255,.08); text-align: center; }
.pause-panel h2, .confirm-panel h2 { margin: 2px 0 22px; color: #fff0c5; font-size: 2rem; }
.pause-kicker { margin: 0; color: #d6a657; font: 700 .72rem Arial,sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.pause-panel button { width: 100%; margin-top: 10px; }
.option-button { display: flex; justify-content: space-between; align-items: center; color: #ded7c0; border-color: #53604f; background: linear-gradient(#354236,#202a22); cursor: not-allowed; }
.option-button span { color: #879184; font-size: .65rem; letter-spacing: .04em; }
.danger-button { color: #ffe5d5; border-color: #9b5b3f; background: linear-gradient(#75442f,#40251c); }
.confirm-panel p { color: #c7c0aa; line-height: 1.55; }
.confirm-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
#continue-world:disabled { opacity: .46; filter: grayscale(.5); cursor: not-allowed; }
.game-arm { position: absolute; bottom: -25%; width: 24%; height: 88%; border-radius: 48% 48% 18% 18%; background: repeating-linear-gradient(84deg, #68482f 0 3px, #9a7351 4px 7px, #503622 8px 11px, #7b5639 12px 15px); box-shadow: inset 0 0 34px #25170f, 0 15px 28px #000; filter: drop-shadow(0 5px 3px rgba(0,0,0,.62)); }
.arm-left { left: 15%; transform: rotate(-25deg); }
.arm-right { right: 14%; transform: rotate(24deg); }
.game-arm::before { content: ""; position: absolute; left: -5%; right: -5%; bottom: -2%; height: 58%; border-radius: 28% 28% 12% 12%; background: linear-gradient(90deg,#263323,#566044 47%,#283421); border-top: 10px solid #827257; box-shadow: inset 0 0 18px #182016; }
.game-arm::after { content: ""; position: absolute; left: 6%; right: 6%; top: 25%; height: 16%; border-radius: 50%; background: repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.06) 9px 11px); opacity: .7; }
.game-arm i { position: absolute; z-index: 3; top: -7%; width: 17%; height: 19%; border-radius: 65% 65% 35% 35%; background: linear-gradient(#eee1bd,#c6a46f 68%,#82633e); box-shadow: inset 0 -7px #98754a, 0 2px 3px #2d1b10; }
.game-arm i:nth-child(1) { left: 17%; transform: rotate(-15deg); }
.game-arm i:nth-child(2) { left: 38%; top: -9%; transform: rotate(-4deg); }
.game-arm i:nth-child(3) { left: 59%; transform: rotate(11deg); }
.held-torch { position: absolute; right: 24%; bottom: 18%; width: 80px; height: 390px; transform: rotate(10deg); transform-origin: 50% 100%; }
.held-stick { position: absolute; left: 29px; top: 95px; width: 26px; height: 285px; border-radius: 13px; background: repeating-linear-gradient(82deg,#2b180e 0 5px,#9d6737 6px 10px,#4a2c17 11px 15px); box-shadow: inset 6px 0 7px rgba(255,205,124,.14), 7px 8px 18px #000; }
.held-wrap { position: absolute; z-index: 3; left: 16px; top: 76px; width: 53px; height: 62px; border-radius: 9px; background: repeating-linear-gradient(35deg,#21130c 0 6px,#85562e 7px 12px); box-shadow: inset 0 0 9px #000, 0 3px 6px #000; }
.held-fire { position: absolute; z-index: 4; left: 20px; top: 0; width: 48px; height: 95px; border-radius: 68% 32% 60% 40%; transform-origin: 50% 100%; animation: held-fire .16s ease-in-out infinite alternate; }
.fire-outer { background: #f46b12; filter: drop-shadow(0 0 14px #ff7a15); }
.fire-inner { left: 34px; top: 30px; width: 23px; height: 63px; background: #ffe390; animation-delay: -.08s; }
.held-glow { position: absolute; left: -150px; top: -150px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle,rgba(255,157,51,.38),transparent 70%); animation: menu-glow 1s ease-in-out infinite alternate; }
@keyframes held-fire { from { transform: rotate(-5deg) scale(.9,1.05); } to { transform: rotate(7deg) scale(1.08,.92); } }
@keyframes hand-bob { from { transform: translateY(0) rotate(-.2deg); } to { transform: translateY(9px) rotate(.25deg); } }

body.playing .scene { display: none; }

.scene::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  opacity: .58;
  background:
    radial-gradient(ellipse at 15% 30%, transparent 0 15%, #17251b 15.5% 17%, transparent 17.5%),
    radial-gradient(ellipse at 88% 18%, transparent 0 13%, #203020 13.5% 15%, transparent 15.5%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 35px, rgba(68,83,56,.13) 37px 39px);
  filter: blur(1px);
  transform: perspective(600px) rotateX(4deg);
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(2,5,3,.9)), repeating-linear-gradient(100deg, transparent 0 90px, rgba(52,68,48,.18) 92px 96px);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}

.menu {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: clamp(24px, 9vw, 150px);
  width: min(470px, 42vw);
  transform: translateY(-52%);
  text-align: center;
  text-shadow: 0 3px 15px #000;
}

.eyebrow { margin: 0 0 8px; color: #e6ae58; font: 700 .78rem/1.2 Arial, sans-serif; letter-spacing: .35em; text-transform: uppercase; }
h1 { margin: 0; color: #fff1ca; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .84; letter-spacing: -.055em; }
.subtitle { margin: 18px 0 36px; color: #d4c5a0; font-size: clamp(1rem, 1.8vw, 1.35rem); font-style: italic; }
.buttons { display: grid; gap: 14px; width: min(330px, 100%); margin: auto; }

button {
  border: 1px solid rgba(250,209,123,.62);
  border-radius: 5px;
  padding: 17px 24px;
  color: #1b1206;
  background: linear-gradient(#f1c66f, #b87627);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 8px 26px rgba(0,0,0,.46);
  font: 800 1.05rem/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: default;
}

button.secondary { color: #eadbb8; border-color: #6d765f; background: linear-gradient(rgba(48,62,47,.94), rgba(24,34,27,.96)); }
button:focus-visible { outline: 3px solid #ffd883; outline-offset: 4px; }
.hint { margin-top: 22px; color: #929887; font: .72rem Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }

.isi-stage {
  position: absolute;
  z-index: 3;
  right: clamp(-80px, 1vw, 30px);
  bottom: -9vh;
  width: min(58vw, 760px);
  height: min(92vh, 900px);
  transform-origin: 55% 100%;
  animation: nervous-body 8s ease-in-out infinite;
}

.isi { position: absolute; inset: 0; transform-origin: 53% 44%; animation: look-around 8s cubic-bezier(.45,.05,.55,.95) infinite; }
.isi img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; filter: sepia(.18) saturate(.86) brightness(.76) contrast(1.18) drop-shadow(0 24px 20px #000); }

.backpack {
  position: absolute;
  z-index: -1;
  width: 36%; height: 43%;
  right: 8%; top: 35%;
  border: 6px solid #4a301c;
  border-radius: 38% 50% 44% 35%;
  background: linear-gradient(110deg, #815a31, #3f2a1a 70%);
  box-shadow: inset 12px 0 rgba(255,255,255,.08), 0 20px 30px #000;
  transform: rotate(10deg);
}

.hat {
  position: absolute;
  top: 9%; left: 30%;
  width: 44%; height: 13%;
  border-radius: 50%;
  background: #7b5a2e;
  box-shadow: inset 0 -12px #4c351e, 0 6px 10px rgba(0,0,0,.6);
}

.hat::before { content: ""; position: absolute; left: 19%; bottom: 32%; width: 62%; height: 150%; border-radius: 50% 50% 28% 28%; background: linear-gradient(90deg, #6a4c27, #a17b3e 50%, #59401f); clip-path: polygon(12% 100%, 24% 6%, 68% 0, 90% 100%); }
.hat span { position: absolute; z-index: 2; left: 22%; right: 22%; top: 17%; height: 25%; background: #352719; border-radius: 50%; }

.brow { position: absolute; top: 31%; width: 11%; height: 1.6%; border-radius: 50%; background: #46301f; opacity: .75; }
.brow-left { left: 39%; transform: rotate(13deg); }
.brow-right { left: 53%; transform: rotate(-13deg); }

.torch { position: absolute; z-index: 5; right: 7%; top: 44%; width: 95px; height: 390px; transform: rotate(12deg); transform-origin: 50% 90%; animation: torch-shiver 2.4s ease-in-out infinite; }
.torch-stick { position: absolute; left: 39px; top: 99px; width: 23px; height: 280px; border-radius: 12px; background: linear-gradient(90deg, #3b2414, #9c6332 45%, #372111); box-shadow: 6px 8px 15px #000; }
.torch-head { position: absolute; z-index: 2; left: 25px; top: 78px; width: 52px; height: 45px; border-radius: 8px; background: repeating-linear-gradient(30deg, #2b1b12 0 7px, #7a4d26 8px 13px); }
.flame { position: absolute; z-index: 3; left: 28px; top: 2px; width: 48px; height: 94px; border-radius: 65% 35% 58% 42%; transform-origin: 50% 100%; filter: drop-shadow(0 0 12px #ff8a20); animation: flame .19s ease-in-out infinite alternate; }
.flame-back { background: #f66d16; transform: rotate(6deg); }
.flame-front { left: 40px; top: 25px; width: 27px; height: 67px; background: #ffd976; animation-delay: -.1s; }
.glow { position: absolute; left: -95px; top: -100px; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,45,.42), transparent 68%); animation: glow 1s ease-in-out infinite alternate; }

.fog { position: absolute; z-index: 2; width: 75vw; height: 22vh; border-radius: 50%; background: rgba(173,196,158,.08); filter: blur(32px); animation: drift 18s linear infinite; }
.fog-a { left: 14%; bottom: 8%; }
.fog-b { right: -10%; top: 15%; animation-duration: 25s; animation-direction: reverse; }
.vines { position: absolute; z-index: 1; top: -8%; width: 18%; height: 70%; border: 10px solid #233a23; border-top: 0; border-radius: 0 0 55% 55%; filter: drop-shadow(0 8px 5px #000); }
.vines-left { left: 3%; transform: rotate(7deg); }
.vines-right { right: 8%; transform: rotate(-11deg); }
.floor-shadow { position: absolute; z-index: 2; right: 2%; bottom: 0; width: 54%; height: 12%; border-radius: 50%; background: #000; filter: blur(20px); opacity: .8; }
.vignette { pointer-events: none; position: absolute; z-index: 20; inset: 0; box-shadow: inset 0 0 130px 38px #020402; }

@keyframes look-around {
  0%, 13% { transform: rotate(0deg) translateX(0); }
  20%, 35% { transform: rotate(-3.8deg) translateX(-1.5%); }
  42%, 52% { transform: rotate(1deg) translateX(0); }
  61%, 76% { transform: rotate(4deg) translateX(1.8%); }
  84%, 100% { transform: rotate(0deg) translateX(0); }
}

@keyframes nervous-body { 0%,100% { transform: translateY(0) rotate(.2deg); } 50% { transform: translateY(7px) rotate(-.4deg); } }
@keyframes torch-shiver { 0%,100% { transform: rotate(11deg); } 35% { transform: rotate(13.5deg); } 67% { transform: rotate(9.5deg); } }
@keyframes flame { from { transform: rotate(-4deg) scale(.92, 1); } to { transform: rotate(7deg) scale(1.08, .93); } }
@keyframes glow { from { opacity: .7; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes drift { from { transform: translateX(-12%) scale(1); } 50% { transform: translateX(18%) scale(1.14); } to { transform: translateX(-12%) scale(1); } }

@media (max-width: 760px) {
  .menu { top: 34%; left: 8%; width: 84%; }
  .isi-stage { right: -18%; width: 90vw; height: 67vh; bottom: -12vh; opacity: .78; }
  .torch { right: 10%; transform: scale(.72) rotate(12deg); }
  .vignette { box-shadow: inset 0 0 70px 18px #020402; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}