:root {
  color-scheme: dark;
  --ivory: #e8dfca;
  --red: #8e111e;
  --glitch-x: 0px;
  --glitch-opacity: 0;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  background: #090002;
  color: var(--ivory);
  font-family: "Courier New", Courier, monospace;
}

button,
canvas {
  -webkit-user-select: none;
  user-select: none;
}

#world,
.screen-effects,
.scanlines,
.noise,
.signal-tear,
.vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#world {
  z-index: 0;
  display: block;
  image-rendering: pixelated;
  outline: 0;
  touch-action: none;
}

#world.is-interactive {
  cursor: pointer;
}

.transition-blackout {
  position: fixed;
  z-index: 90;
  inset: 0;
  opacity: 0;
  background: #000;
  pointer-events: none;
  will-change: opacity;
}

.mobile-controls {
  position: fixed;
  z-index: 24;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

body.is-touch-mode.is-observing:not(.is-transitioning) .mobile-controls {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-stick {
  position: absolute;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 17px));
  width: clamp(86px, 25vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
}

.mobile-stick--move {
  left: max(18px, calc(env(safe-area-inset-left) + 12px));
}

.mobile-stick--look {
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
}

.mobile-stick__ring {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(233, 223, 207, .3);
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(233, 223, 207, .045) 0 11%, transparent 12%),
    rgba(9, 2, 4, .17);
  box-shadow:
    inset 0 0 0 6px rgba(0, 0, 0, .08),
    inset 0 0 24px rgba(0, 0, 0, .32),
    0 5px 20px rgba(0, 0, 0, .22);
  backdrop-filter: blur(2px);
}

.mobile-stick__ring::before,
.mobile-stick__ring::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: rgba(232, 222, 205, .16);
  transform: translate(-50%, -50%);
}

.mobile-stick__ring::before {
  width: 46%;
  height: 1px;
}

.mobile-stick__ring::after {
  width: 1px;
  height: 46%;
}

.mobile-stick__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 235, 217, .42);
  border-radius: 50%;
  background: rgba(45, 16, 21, .48);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .42), inset 0 0 12px rgba(255, 227, 215, .07);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.mobile-walk-exit {
  position: absolute;
  right: max(30px, calc(env(safe-area-inset-right) + 24px));
  bottom: max(142px, calc(env(safe-area-inset-bottom) + 135px));
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  border: 1px solid rgba(234, 224, 207, .28);
  border-radius: 50%;
  color: rgba(239, 230, 213, .72);
  background: rgba(9, 2, 4, .28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .26);
  font: 300 25px/1 "Courier New", monospace;
  pointer-events: auto;
  touch-action: manipulation;
}

.mobile-walk-exit:active {
  color: #fff8e8;
  background: rgba(105, 18, 32, .48);
}

body.is-transitioning .transition-blackout {
  pointer-events: auto;
}

.screen-effects {
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.scanlines {
  opacity: .22;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 2px,
    rgba(8, 0, 2, .2) 3px,
    rgba(8, 0, 2, .2) 4px
  );
  mix-blend-mode: multiply;
}

.noise {
  inset: -40%;
  width: 180%;
  height: 180%;
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain 360ms steps(2, end) infinite;
  mix-blend-mode: screen;
}

.signal-tear {
  top: 19%;
  right: -3%;
  bottom: auto;
  left: -3%;
  width: 106%;
  height: 9%;
  opacity: var(--glitch-opacity);
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(255, 18, 43, .2) 13% 47%, transparent 47% 61%, rgba(190, 255, 232, .17) 61% 82%, transparent),
    rgba(17, 0, 4, .34);
  box-shadow: 0 -2px rgba(229, 255, 243, .25), 0 3px rgba(255, 0, 35, .22);
  transform: translateX(var(--glitch-x));
  backdrop-filter: contrast(1.8) saturate(1.8);
}

.vignette {
  background:
    radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(11, 0, 3, .17) 62%, rgba(3, 0, 1, .82) 118%),
    linear-gradient(180deg, rgba(4, 0, 1, .38), transparent 19% 76%, rgba(4, 0, 1, .44));
}

body.is-sky-mode .scanlines,
body.is-sky-mode .signal-tear,
body.is-sky-mode .vignette {
  display: none;
}

body.is-sky-mode .noise {
  opacity: .055;
  filter: contrast(1.12);
  mix-blend-mode: soft-light;
}

@media (pointer: coarse), (max-width: 760px) {
  body.is-sky-mode .noise {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .045;
    filter: none;
    animation: sky-mobile-grain 480ms steps(2, end) infinite;
    will-change: background-position;
  }
}

body.is-sky-mode #world {
  image-rendering: auto;
}

.room-loader {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  background: #070002;
  perspective: 1100px;
  transition: visibility 0s linear 1650ms;
}

body.is-ready .room-loader {
  background: transparent;
  visibility: hidden;
  pointer-events: none;
}

.loader-curtain {
  position: absolute;
  z-index: 1;
  top: -5vh;
  left: -4vw;
  width: 108vw;
  height: 119vh;
  overflow: hidden;
  border-radius: 0 0 48% 48% / 0 0 7.5vh 7.5vh;
  background:
    radial-gradient(ellipse at 48% -9%, rgba(255, 112, 128, .28), transparent 38%),
    linear-gradient(92deg, rgba(15, 0, 4, .74), transparent 12% 86%, rgba(13, 0, 4, .78)),
    repeating-linear-gradient(
      88deg,
      #260006 0%,
      #500713 1.05%,
      #a0182c 2.45%,
      #67101d 3.72%,
      #b71e35 5.06%,
      #5b0715 6.23%,
      #8d1227 7.16%,
      #310008 9.48%,
      #210005 10.35%
    );
  box-shadow:
    inset 0 -2.5vh 4vh rgba(19, 0, 5, .58),
    inset 0 3vh 5vh rgba(255, 83, 105, .08),
    0 4vh 8vh rgba(0, 0, 0, .82);
  transform: translate3d(0, 0, 0) rotateX(-1.2deg) scaleX(1.012);
  transform-origin: 50% 0;
  will-change: transform;
  transition: transform 1550ms cubic-bezier(.76, 0, .2, 1);
}

.loader-curtain::after {
  content: "";
  position: absolute;
  right: 4.5%;
  bottom: 3.1vh;
  left: 4.5%;
  height: 1.3vh;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 72, 96, .14), rgba(25, 0, 6, .62));
  filter: blur(1px);
}

.loader-curtain-relief,
.loader-curtain-relief::before,
.loader-curtain-relief::after {
  position: absolute;
  inset: 0;
  content: "";
}

.loader-curtain-relief {
  background:
    radial-gradient(ellipse at 7% 44%, rgba(255, 97, 116, .13), transparent 5% 13%, rgba(0, 0, 0, .2) 18%, transparent 23%),
    radial-gradient(ellipse at 29% 18%, rgba(255, 117, 132, .12), transparent 4% 16%, rgba(23, 0, 5, .25) 23%, transparent 31%),
    radial-gradient(ellipse at 57% 62%, rgba(255, 105, 122, .11), transparent 5% 14%, rgba(20, 0, 5, .24) 21%, transparent 28%),
    radial-gradient(ellipse at 83% 35%, rgba(255, 100, 120, .1), transparent 4% 17%, rgba(18, 0, 4, .28) 24%, transparent 31%);
  mix-blend-mode: soft-light;
}

.loader-curtain-relief::before {
  background: repeating-linear-gradient(
    91deg,
    transparent 0 1.2%,
    rgba(255, 126, 139, .12) 2.05%,
    transparent 3.5% 4.7%,
    rgba(11, 0, 3, .48) 6.25%,
    transparent 8.6% 10.8%
  );
  filter: blur(2.4px);
  opacity: .86;
}

.loader-curtain-relief::after {
  background:
    linear-gradient(180deg, rgba(255, 80, 103, .06), transparent 24% 67%, rgba(16, 0, 4, .35)),
    radial-gradient(ellipse at 50% 112%, transparent 46%, rgba(14, 0, 4, .42) 74%);
}

body.is-ready .loader-curtain {
  transform: translate3d(0, -120%, 0) rotateX(8deg) scaleX(.955);
}

.noscript {
  position: fixed;
  z-index: 120;
  inset: auto 20px 20px;
  margin: 0;
  padding: 12px;
  color: #eee2cc;
  background: #1a0207;
  font-size: 12px;
  text-align: center;
}

@keyframes grain {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(2%, -2%, 0); }
  50% { transform: translate3d(1%, 2%, 0); }
  75% { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(2%, 1%, 0); }
}

@keyframes sky-mobile-grain {
  0% { transform: none; background-position: 0 0; }
  25% { transform: none; background-position: 19px -13px; }
  50% { transform: none; background-position: -11px 23px; }
  75% { transform: none; background-position: 27px 9px; }
  100% { transform: none; background-position: -17px -21px; }
}

@media (prefers-reduced-motion: reduce) {
  .noise {
    animation: none;
  }

  .loader-curtain {
    transition-duration: 700ms;
  }

  .room-loader {
    transition-delay: 800ms;
  }
}

@media (pointer: fine) and (hover: hover) {
  .mobile-controls {
    display: none;
  }
}

@media (max-height: 520px) {
  .mobile-stick {
    bottom: max(13px, env(safe-area-inset-bottom));
    width: 82px;
  }

  .mobile-walk-exit {
    right: max(24px, calc(env(safe-area-inset-right) + 18px));
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px));
  }
}


.door-prompt {
  position: fixed;
  z-index: 32;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 7px 11px 7px 8px;
  border: 1px solid rgba(238, 226, 205, .38);
  border-radius: 5px;
  opacity: 0;
  color: #f0e5d0;
  background: rgba(10, 2, 4, .72);
  box-shadow: 0 7px 24px rgba(0, 0, 0, .48), inset 0 0 18px rgba(122, 21, 37, .12);
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: .08em;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(14px) scale(.96);
  transition: opacity 150ms ease, transform 180ms ease, border-color 150ms ease;
  backdrop-filter: blur(4px);
  text-transform: uppercase;
  white-space: nowrap;
}

.door-prompt.is-visible {
  opacity: .94;
  pointer-events: auto;
  transform: translate(-50%, -50%) translateY(0) scale(1);
}

.door-prompt:hover {
  border-color: rgba(255, 238, 212, .68);
}

.door-prompt kbd {
  display: grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(238, 226, 205, .48);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: #fff3dc;
  background: rgba(104, 20, 32, .54);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .32);
  font: 700 14px/1 "Courier New", monospace;
}

body.is-touch-mode .door-prompt {
  font-size: 12px;
}

body.is-touch-mode .door-prompt kbd {
  min-width: 30px;
  height: 30px;
}


.location-jump {
  position: fixed;
  z-index: 130;
  top: max(22px, calc(env(safe-area-inset-top) + 14px));
  left: 50%;
  width: min(390px, calc(100vw - 28px));
  padding: 18px 18px 15px;
  border: 1px solid rgba(247, 224, 203, .34);
  border-radius: 9px;
  opacity: 0;
  visibility: hidden;
  color: #f5ead5;
  background:
    linear-gradient(135deg, rgba(113, 9, 26, .19), transparent 48%),
    rgba(7, 2, 5, .91);
  box-shadow:
    0 18px 56px rgba(0, 0, 0, .68),
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    inset 0 -22px 48px rgba(72, 2, 12, .17);
  font-family: "Courier New", Courier, monospace;
  pointer-events: none;
  transform: translate(-50%, -14px) scale(.97);
  transition: opacity 170ms ease, transform 210ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 220ms;
  backdrop-filter: blur(12px) saturate(.76);
}

.location-jump::before {
  position: absolute;
  top: -1px;
  right: 18px;
  left: 18px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #b52238 18%, #f4d1aa 50%, #b52238 82%, transparent);
  box-shadow: 0 0 14px rgba(207, 33, 61, .65);
}

.location-jump.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

.location-jump__eyebrow {
  margin-bottom: 9px;
  color: rgba(226, 123, 139, .84);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
}

.location-jump__name {
  min-height: 42px;
  padding-right: 58px;
  font-size: clamp(16px, 3.7vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 16px rgba(255, 226, 205, .15);
}

.location-jump__counter {
  position: absolute;
  top: 46px;
  right: 18px;
  color: rgba(235, 216, 194, .48);
  font-size: 11px;
  letter-spacing: .08em;
}

.location-jump__controls {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 8px;
  margin-top: 12px;
}

.location-jump button {
  min-height: 42px;
  border: 1px solid rgba(239, 220, 201, .31);
  border-radius: 5px;
  color: #f6ead5;
  background: rgba(76, 10, 20, .42);
  box-shadow: inset 0 -10px 22px rgba(0, 0, 0, .2);
  font: 700 16px/1 "Courier New", monospace;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 90ms ease;
}

.location-jump button:hover,
.location-jump button:focus-visible {
  border-color: rgba(255, 232, 202, .72);
  background: rgba(132, 19, 36, .58);
  outline: none;
}

.location-jump button:active {
  transform: translateY(1px);
}

.location-jump .location-jump__go {
  font-size: 12px;
  letter-spacing: .08em;
}

.location-jump kbd {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-left: 5px;
  place-items: center;
  border: 1px solid rgba(255, 238, 216, .45);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .34);
  font: inherit;
}

.location-jump__hint {
  margin-top: 10px;
  color: rgba(229, 214, 196, .46);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .035em;
  text-align: center;
}

@media (max-width: 480px) {
  .location-jump {
    top: max(14px, calc(env(safe-area-inset-top) + 8px));
    padding: 15px 14px 13px;
  }

  .location-jump__counter {
    top: 43px;
    right: 14px;
  }

  .location-jump__controls {
    grid-template-columns: 44px 1fr 44px;
  }
}
body.is-meadow-dead .screen-effects,
body.is-meadow-dead .mobile-controls,
body.is-meadow-dead .door-prompt {
  visibility: hidden;
}