:root {
  --terminal-ink: #e7e5df;
}

.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;
}

.controller-shell {
  cursor: default !important;
  text-decoration: none;
}

.cheat-code-hint {
  position: absolute;
  isolation: isolate;
  top: calc(100% - 2px);
  left: 50%;
  width: max-content;
  margin: 0;
  color: rgba(255, 255, 255, .38);
  font: 600 clamp(8px, .72vw, 10px) / 1.2 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: .28em;
  text-shadow: 0 0 18px rgba(255, 255, 255, .12);
  transform: translateX(-50%);
  transition: color .22s ease, opacity .22s ease, text-shadow .22s ease;
}

.cheat-code-hint::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -34px;
  background: radial-gradient(ellipse, rgba(2, 2, 2, .94) 0 34%, rgba(2, 2, 2, .7) 50%, transparent 74%);
  pointer-events: none;
}

.cheat-code-hint span {
  display: inline-block;
  color: rgba(235, 62, 50, .74);
  animation: hint-cursor .92s steps(1, end) infinite;
}

.controller-shell:focus-within .cheat-code-hint,
.page[data-konami-progress]:not([data-konami-progress="0"]) .cheat-code-hint {
  color: rgba(255, 255, 255, .68);
  text-shadow: 0 0 22px rgba(255, 255, 255, .2);
}

.page[data-mode] .cheat-code-hint {
  opacity: 0;
}

@keyframes hint-cursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .12; }
}

.controller-face {
  position: relative;
  width: 100%;
  transform: perspective(900px) rotateX(var(--controller-rx)) rotateY(var(--controller-ry)) rotateZ(-5deg);
  transform-origin: 50% 55%;
  filter: drop-shadow(0 36px 40px rgba(0, 0, 0, .72)) drop-shadow(0 0 28px rgba(255, 255, 255, .035));
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), filter .28s ease;
  will-change: transform;
}

.controller-render {
  display: block;
  width: 100%;
  height: auto;
  opacity: .98;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  user-select: none;
  pointer-events: none;
}

.controller-face.is-hit {
  transform: perspective(900px) rotateX(var(--controller-rx)) rotateY(var(--controller-ry)) rotateZ(-5deg) scale(.987);
  filter: drop-shadow(0 27px 31px rgba(0, 0, 0, .76)) drop-shadow(0 0 34px rgba(255, 255, 255, .08));
}

.controller-face.is-complete {
  animation: controller-confirm .54s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes controller-confirm {
  0% { filter: drop-shadow(0 36px 40px rgba(0, 0, 0, .72)); }
  32% { transform: perspective(900px) rotateZ(-5deg) scale(1.075); filter: drop-shadow(0 0 44px rgba(220, 38, 38, .42)); }
  100% { transform: perspective(900px) rotateZ(-5deg) scale(.98); filter: drop-shadow(0 42px 55px rgba(0, 0, 0, .88)); }
}

.controller-control,
.book-control {
  position: absolute;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.controller-control::after,
.book-control::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .12s ease, transform .15s cubic-bezier(.16, 1, .3, 1);
}

.controller-control:hover::after,
.book-control:hover::after {
  opacity: .2;
  transform: scale(1);
  box-shadow: 0 0 20px rgba(255, 255, 255, .28);
}

.controller-control.is-pressed::after,
.book-control:active::after {
  opacity: .72;
  transform: scale(.78);
  background: radial-gradient(circle, rgba(255, 255, 255, .6), transparent 68%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .76), 0 0 22px rgba(255, 255, 255, .3);
}

.control-a.is-pressed::after,
.control-b.is-pressed::after {
  background: radial-gradient(circle, rgba(255, 133, 120, .88), rgba(216, 26, 26, .34) 52%, transparent 72%);
  box-shadow: inset 0 3px 9px rgba(86, 0, 0, .74), 0 0 25px rgba(240, 48, 48, .42);
}

.controller-control:focus-visible,
.book-control:focus-visible,
.terminal-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .95);
  outline-offset: 4px;
}

.control-up { left: 20.6%; top: 49.8%; width: 6.2%; height: 10.2%; border-radius: 2px; }
.control-down { left: 20.6%; top: 67.3%; width: 6.2%; height: 10.2%; border-radius: 2px; }
.control-left { left: 14.7%; top: 58.2%; width: 8.3%; height: 9%; border-radius: 2px; }
.control-right { left: 24.9%; top: 58.2%; width: 8.3%; height: 9%; border-radius: 2px; }
.control-b { left: 64%; top: 62.1%; width: 9.8%; height: 17.2%; }
.control-a { left: 75.6%; top: 62.1%; width: 9.8%; height: 17.2%; }
.book-select { left: 38.1%; top: 67%; width: 8.4%; height: 7%; border-radius: 8px; }
.book-start { left: 49.2%; top: 67%; width: 8.4%; height: 7%; border-radius: 8px; }

.crate-unlock,
.terminal {
  position: fixed;
  z-index: 110;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.crate-unlock.is-visible,
.terminal.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.crate-unlock {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .065), transparent 34%),
    rgba(0, 0, 0, .9);
  transition: opacity .12s steps(2, end);
}

.crate-stage {
  position: relative;
  width: min(62vw, 500px);
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  transform: translateY(2vh);
}

.crate {
  position: relative;
  width: min(54vw, 420px);
  aspect-ratio: 5 / 3;
  image-rendering: pixelated;
  filter: drop-shadow(18px 24px 0 rgba(0, 0, 0, .55));
}

.crate-lid {
  position: absolute;
  z-index: 3;
  inset: 0 0 57%;
  border: 12px solid #d0d0d0;
  border-bottom-width: 9px;
  background: repeating-linear-gradient(90deg, #8e8e8e 0 13%, #bdbdbd 13% 18%, #747474 18% 31%);
  box-shadow: inset 0 -10px 0 #4e4e4e, 0 8px 0 #1d1d1d;
  transform-origin: 50% 100%;
}

.crate-lid span {
  position: absolute;
  inset: 21% 17%;
  border: 7px solid #ececec;
  background: #383838;
  box-shadow: inset 0 0 0 7px #727272;
}

.crate-body {
  position: absolute;
  inset: 36% 0 0;
  overflow: visible;
  border: 12px solid #bdbdbd;
  background:
    linear-gradient(135deg, transparent 46%, #858585 47% 53%, transparent 54%),
    linear-gradient(45deg, transparent 46%, #858585 47% 53%, transparent 54%),
    #4d4d4d;
  box-shadow: inset 0 0 0 9px #252525, 0 10px 0 #111;
}

.crate-rib {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  background: #9b9b9b;
  box-shadow: inset 7px 0 0 #d7d7d7, inset -7px 0 0 #555;
}

.crate-rib-left { left: 7%; }
.crate-rib-right { right: 7%; }

.crate-latch {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: -13px;
  min-width: 132px;
  padding: 8px 11px;
  color: #050505;
  background: #eee;
  border: 5px solid #1d1d1d;
  box-shadow: 0 0 0 5px #a7a7a7;
  font: 800 11px / 1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.crate-burst {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 47%;
  width: 1px;
  height: 1px;
}

.crate-burst i {
  --burst-x: 0px;
  --burst-y: -120px;
  position: absolute;
  width: clamp(7px, 1vw, 12px);
  aspect-ratio: 1;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 22px rgba(255, 255, 255, .8);
}

.crate-burst i:nth-child(1) { --burst-x: -230px; --burst-y: -150px; }
.crate-burst i:nth-child(2) { --burst-x: -175px; --burst-y: -245px; }
.crate-burst i:nth-child(3) { --burst-x: -118px; --burst-y: -195px; }
.crate-burst i:nth-child(4) { --burst-x: -54px; --burst-y: -285px; }
.crate-burst i:nth-child(5) { --burst-x: 18px; --burst-y: -230px; }
.crate-burst i:nth-child(6) { --burst-x: 76px; --burst-y: -305px; }
.crate-burst i:nth-child(7) { --burst-x: 142px; --burst-y: -205px; }
.crate-burst i:nth-child(8) { --burst-x: 225px; --burst-y: -148px; }
.crate-burst i:nth-child(9) { --burst-x: -255px; --burst-y: -20px; }
.crate-burst i:nth-child(10) { --burst-x: -168px; --burst-y: 64px; }
.crate-burst i:nth-child(11) { --burst-x: -92px; --burst-y: 142px; }
.crate-burst i:nth-child(12) { --burst-x: -22px; --burst-y: 205px; }
.crate-burst i:nth-child(13) { --burst-x: 52px; --burst-y: 154px; }
.crate-burst i:nth-child(14) { --burst-x: 126px; --burst-y: 88px; }
.crate-burst i:nth-child(15) { --burst-x: 210px; --burst-y: 24px; }
.crate-burst i:nth-child(16) { --burst-x: 268px; --burst-y: -58px; }

.crate-unlock.is-opening .crate {
  animation: crate-assemble .44s steps(4, end) both;
}

.crate-unlock.is-opening .crate-latch {
  animation: crate-latch-flash .56s steps(2, end) .28s both;
}

.crate-unlock.is-opening .crate-lid {
  animation: crate-lid-open 1s steps(4, end) .42s both;
}

.crate-unlock.is-opening .crate-burst i {
  animation: crate-pixel-burst .72s steps(4, end) 1.05s both;
}

.crate-unlock.is-reduced .crate-lid {
  transform: translateY(-52%) scaleY(.18);
}

@keyframes crate-assemble {
  from { opacity: 0; transform: translateY(24px) scale(.78); filter: contrast(2) blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes crate-latch-flash {
  0%, 38% { color: #eee; background: #2b2b2b; }
  39%, 100% { color: #050505; background: #fff; box-shadow: 0 0 0 5px #a7a7a7, 0 0 36px rgba(255, 255, 255, .7); }
}

@keyframes crate-lid-open {
  from { transform: translateY(0) scaleY(1); }
  to { transform: translateY(-52%) scaleY(.18); }
}

@keyframes crate-pixel-burst {
  from { opacity: 0; transform: translate(0, 0) scale(1); }
  30% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(6); }
}

.terminal {
  z-index: 120;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: clamp(28px, 7vw, 110px);
  color: var(--terminal-ink);
  background: #000;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  transition: opacity .08s linear;
}

.terminal-memory {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  opacity: .42;
  image-rendering: pixelated;
}

.terminal-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .84) 38%, rgba(0, 0, 0, .36) 70%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .36), transparent 42%);
}

.terminal-content {
  position: relative;
  width: min(54vw, 760px);
}

.terminal-output {
  max-width: 78ch;
  margin: 0;
  white-space: pre-wrap;
  color: inherit;
  font: 500 clamp(12px, 1.42vw, 20px) / 1.62 inherit;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(255, 255, 255, .06);
}

.terminal-link {
  display: none;
  margin-top: .05em;
  color: #fff;
  text-decoration: none;
  font: 600 clamp(18px, 2.5vw, 34px) / 1.3 inherit;
  letter-spacing: .035em;
}

.terminal.is-ready .terminal-link {
  display: inline-block;
  animation: terminal-link-in .22s steps(2, end) both;
}

.terminal-link:hover {
  color: #000;
  background: #f3f1e9;
}

.terminal-link span {
  animation: terminal-cursor .78s steps(1, end) infinite;
}

@keyframes terminal-link-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes terminal-cursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .controller-face {
    transform: rotateZ(-4deg);
  }

  .cheat-code-hint {
    top: calc(100% + 14px);
    font-size: clamp(8px, 2.55vw, 10px);
    letter-spacing: .22em;
  }

  .controller-control::before,
  .book-control::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
  }

  .terminal {
    align-items: end;
    overflow-y: auto;
    padding: 8svh 24px 7svh;
  }

  .terminal-memory {
    object-fit: contain;
    object-position: center;
    opacity: .27;
  }

  .terminal-shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .97) 74%);
  }

  .terminal-content {
    width: 100%;
  }

  .terminal-output {
    font-size: clamp(11px, 3.2vw, 15px);
    line-height: 1.55;
  }

  .crate-stage {
    width: min(92vw, 430px);
  }

  .crate {
    width: min(84vw, 380px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .controller-face,
  .controller-face.is-complete,
  .cheat-code-hint,
  .cheat-code-hint span,
  .controller-control::after,
  .book-control::after,
  .crate,
  .crate-lid,
  .crate-latch,
  .crate-burst i,
  .terminal,
  .terminal-link,
  .terminal-link span {
    animation: none !important;
    transition: none !important;
  }
}