:root {
  --art-w: 1748;
  --art-h: 899;
  --ink: #efe6d4;
  --ink-dim: #b7ab93;
  --gold: #d4b45a;
  --olive: #4d5e32;
  --olive-plaque: #3a4a2e;
  --olive-edge: #55663c;
  --olive-dark: #2a341c;
  --panel: #101810;
  --night: #0b1210;
  --font: "Press Start 2P", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
}

html.is-mobile,
html.is-mobile body {
  background: #070a12;
}

.mobile-sorry {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #070a12;
  overflow: hidden;
}

.mobile-sorry img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

html.is-mobile .mobile-sorry {
  display: block;
}

html.is-mobile #app {
  display: none !important;
}

@media (hover: none) and (pointer: coarse) and (max-width: 1280px) {
  html:not(.is-desktop) .mobile-sorry {
    display: block;
  }
  html:not(.is-desktop) #app {
    display: none !important;
  }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .mobile-sorry img {
    object-fit: contain;
  }
}

#app,
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body,
#app {
  width: 100vw;
  height: 100dvh;
}

.screen[hidden] {
  display: none;
}

.art-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  container-type: size;
  container-name: stage;
}

.screen-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.start-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.start-ui > * {
  pointer-events: auto;
}

.game-title {
  position: absolute;
  left: 50%;
  top: 34.4%;
  transform: translateX(-50%);
  margin: 0;
  width: 19.85%;
  line-height: 0;
}

.game-title img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.btn-start,
.btn-how {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  appearance: none;
  border-radius: 0;
}

.btn-start {
  top: 53%;
  width: 15.06%;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
}

.btn-start img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.btn-how {
  top: 62%;
  width: auto;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: clamp(8px, 0.85cqw, 12px);
  letter-spacing: 0.12em;
  text-shadow:
    2px 2px 0 #12160e,
    -1px 0 0 #12160e,
    1px 0 0 #12160e,
    0 1px 0 #12160e;
}

.btn-start:focus,
.btn-how:focus {
  outline: none;
}

.btn-start:hover img,
.btn-start:focus-visible img {
  filter: brightness(1.12);
}

.btn-how:hover,
.btn-how:focus-visible {
  color: var(--gold);
}

.btn-start:active {
  transform: translateX(-50%) translate(1px, 1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.62;
  z-index: 10;
  cursor: pointer;
}

.modal-overlay[hidden] {
  display: none;
}

.pixel-window {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: var(--panel);
  color: var(--ink);
  text-align: center;
  padding: 28px 24px 24px;
  border: 0;
  border-radius: 0;
  box-shadow:
    -4px 0 0 var(--ink),
    4px 0 0 var(--ink),
    0 -4px 0 var(--ink),
    0 4px 0 var(--ink),
    -8px 0 0 var(--olive),
    8px 0 0 var(--olive),
    0 -8px 0 var(--olive),
    0 8px 0 var(--olive),
    -12px 0 0 var(--olive-dark),
    12px 0 0 var(--olive-dark),
    0 -12px 0 var(--olive-dark),
    0 12px 0 var(--olive-dark);
}

.pixel-window[hidden] {
  display: none;
}

.pixel-window-title {
  color: var(--gold);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1px;
  margin-bottom: 22px;
}

.pixel-window-text {
  color: var(--ink);
  font-size: 11px;
  line-height: 2.1;
}

.pixel-btn {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 28px;
  background: var(--olive);
  color: var(--ink);
  border: 4px solid var(--olive-dark);
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pixel-btn:hover,
.pixel-btn:focus-visible {
  color: var(--gold);
  outline: none;
}

.pixel-btn:active {
  transform: translate(2px, 2px);
}

.settings-list {
  display: grid;
  gap: 16px;
  margin: 4px auto 0;
  width: min(260px, 100%);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.setting-row:hover,
.setting-row:focus-visible {
  color: var(--gold);
  outline: none;
}

.setting-value {
  color: var(--gold);
  min-width: 3.2em;
  text-align: right;
}

.setting-row.is-off .setting-value {
  color: var(--ink-dim);
}

.level-stage {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: var(--night);
  cursor: default;
}

.level-map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.level-map.is-ready {
  opacity: 1;
}

.level-stage:not(.is-ready) .level-map,
.level-stage:not(.is-ready) .bitfoot,
.level-stage:not(.is-ready) .level-covers,
.level-stage:not(.is-ready) .hint-trail {
  visibility: hidden;
  opacity: 0;
}

.bitfoot {
  position: absolute;
  z-index: 2;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: default;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.bitfoot:hover,
.bitfoot:focus,
.bitfoot.is-found,
.bitfoot.is-found:hover {
  cursor: default;
}

.bitfoot.is-baked,
.bitfoot.is-baked:hover,
.bitfoot.is-baked:focus,
.bitfoot.is-baked.is-found,
.bitfoot.is-baked.is-found:hover {
  cursor: pointer;
  box-shadow: none;
}

.bitfoot.is-baked img {
  display: none;
}

.bitfoot img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  opacity: 0.32;
  filter: brightness(0.38) saturate(0.28) contrast(0.9);
}

.bitfoot.is-found {
  z-index: 4;
}

.bitfoot.is-found img {
  opacity: 1;
  filter: none;
}

.bitfoot.is-found {
  box-shadow:
    -2px 0 0 var(--ink),
    2px 0 0 var(--ink),
    0 -2px 0 var(--ink),
    0 2px 0 var(--ink),
    -4px 0 0 var(--night),
    4px 0 0 var(--night),
    0 -4px 0 var(--night),
    0 4px 0 var(--night);
}

.level-covers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.level-cover {
  position: absolute;
  display: block;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.hint-trail {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.hint-trail[hidden] {
  display: none;
}

.hint-print {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
  image-rendering: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.4s linear;
}

.hint-print.is-visible {
  opacity: 1;
}

.miss-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.miss-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--night);
  animation: miss-fade 0.7s linear forwards;
}

@keyframes miss-fade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%);
  }
}

.hud {
  position: absolute;
  z-index: 6;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 8px 14px;
  background: var(--panel);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow:
    -3px 0 0 var(--ink),
    3px 0 0 var(--ink),
    0 -3px 0 var(--ink),
    0 3px 0 var(--ink),
    -6px 0 0 var(--olive-dark),
    6px 0 0 var(--olive-dark),
    0 -6px 0 var(--olive-dark),
    0 6px 0 var(--olive-dark);
}

.hud-time.is-low {
  color: var(--gold);
}

.result-plus {
  color: var(--gold);
  margin-top: 4px;
}

.hud.is-away {
  opacity: 0;
  pointer-events: none;
}

.ending {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: transparent;
}

.ending[hidden] {
  display: none;
}

.ending-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #070a08;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.ending.is-dimming .ending-fade {
  opacity: 1;
  pointer-events: auto;
}

.ending-stage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: center center;
  pointer-events: none;
  container-type: size;
  container-name: ending;
  transition:
    opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.ending.is-letter .ending-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ending-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.ending-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.ending.is-ui .ending-ui {
  opacity: 1;
  pointer-events: auto;
}

.ending-time {
  position: absolute;
  left: 50%;
  top: 85.2%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62cqw;
  margin: 0;
  font-family: Caveat, "Segoe Script", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: 2.52cqw;
  line-height: 0.86;
  white-space: nowrap;
  text-shadow:
    0 0.045em 0 #1a0c06,
    0 0.08em 0.16em rgba(0, 0, 0, 0.75);
}

.ending-found-label {
  color: #f3e4c4;
  letter-spacing: 0.045em;
}

.ending-found-value {
  color: #efb144;
  font-size: 1.12em;
  letter-spacing: 0.015em;
  margin-left: 0.08em;
}

.ending-rule {
  position: relative;
  flex: 0 0 auto;
  width: 4.05cqw;
  height: 0.12cqw;
  background: #ead6b2;
  box-shadow: 0 0.06cqw 0.1cqw rgba(0, 0, 0, 0.55);
}

.ending-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.16cqw;
  height: 0.72cqw;
  background: #ead6b2;
  transform: translateY(-50%);
  box-shadow: 0 0.05cqw 0.08cqw rgba(0, 0, 0, 0.45);
}

.ending-rule-left::after {
  right: 0;
}

.ending-rule-right::after {
  left: 0;
}

.share-x-btn {
  appearance: none;
  position: absolute;
  left: 50%;
  top: 92.95%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.92cqw;
  width: 21.4%;
  height: 5.25%;
  margin: 0;
  padding: 0 1.05cqw 0.08cqw;
  border: 0.13cqw solid #c9844a;
  border-radius: 0.52cqw;
  background:
    repeating-linear-gradient(
      98deg,
      rgba(0, 0, 0, 0) 0 0.5cqw,
      rgba(0, 0, 0, 0.16) 0.58cqw,
      rgba(0, 0, 0, 0) 0.82cqw
    ),
    linear-gradient(180deg, #3a2214 0%, #2a170c 42%, #1d1008 100%);
  color: #f6ecd8;
  font-family: Caveat, "Segoe Script", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: 1.86cqw;
  letter-spacing: 0.085em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 0.08cqw 0 rgba(232, 176, 112, 0.28),
    inset 0 -0.11cqw 0.08cqw rgba(0, 0, 0, 0.45),
    0 0.2cqw 0.12cqw rgba(0, 0, 0, 0.62);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.share-x-logo {
  width: 2.12cqw;
  height: 2.12cqw;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0.05cqw 0.04cqw rgba(0, 0, 0, 0.75));
}

.share-x-label {
  position: relative;
  top: 0.04em;
  text-shadow:
    0 0.05em 0 #1a0c06,
    0 0.08em 0.14em rgba(0, 0, 0, 0.7);
}

.share-x-btn:hover,
.share-x-btn:focus-visible {
  outline: none;
  transform: translate(-50%, -50%) scale(1.02);
  box-shadow:
    inset 0 0.14cqw 0 rgba(232, 176, 112, 0.32),
    inset 0 -0.18cqw 0.12cqw rgba(0, 0, 0, 0.45),
    0 0.48cqw 0.32cqw rgba(0, 0, 0, 0.72);
}

.share-x-btn:active {
  transform: translate(-50%, calc(-50% + 0.12cqw)) scale(0.98);
  box-shadow:
    inset 0 0.18cqw 0.16cqw rgba(0, 0, 0, 0.45),
    0 0.12cqw 0.1cqw rgba(0, 0, 0, 0.4);
}

.bitfoot.is-found:not(.is-baked) img {
  animation: found-settle 0.45s ease-out;
}

@keyframes found-settle {
  0% {
    opacity: 0.32;
    filter: brightness(0.38) saturate(0.28) contrast(0.9);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 700px) {
  .btn-how {
    font-size: 9px;
    padding: 12px 16px;
  }

  .pixel-window {
    padding: 24px 18px 20px;
  }

  .pixel-window-title {
    font-size: 12px;
  }

  .pixel-window-text,
  .setting-row,
  .pixel-btn,
  .hud {
    font-size: 9px;
  }

  .hud {
    gap: 12px;
    padding: 7px 10px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .pixel-window {
    padding: 16px 20px;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .pixel-window-title {
    margin-bottom: 14px;
  }

  .pixel-btn {
    margin-top: 14px;
  }
}