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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.strip-layer {
  --strip-copies: 2;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  background: #000;
}

.strip-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0.45;
  pointer-events: none;
}

.strip-col {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.strip-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
  animation: ufrog-scroll-down var(--strip-duration, 30s) linear infinite;
  animation-delay: var(--strip-delay, 0s);
}

.strip-img {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  opacity: 0.28;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes ufrog-scroll-down {
  from {
    transform: translateY(calc(-100% / var(--strip-copies, 2)));
  }
  to {
    transform: translateY(0);
  }
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

body.is-ready .boot {
  display: none;
}

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

.frame {
  --dpad-x: 22.50;
  --dpad-y: 74.80;
  --dpad-w: 10.20;
  --dpad-h: 14.50;
  position: relative;
  z-index: 10;
  width: min(100vw, calc(100dvh * 3 / 2));
  height: min(100dvh, calc(100vw * 2 / 3));
  isolation: isolate;
}

.frame__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 0;
  -webkit-mask-image: var(--console-mask, none);
  mask-image: var(--console-mask, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.rule-cover {
  position: absolute;
  left: 35.2%;
  top: 41.25%;
  width: 31.2%;
  height: 2.55%;
  background: #d0d6ad;
  pointer-events: none;
  z-index: 2;
}

.rule {
  position: absolute;
  left: 50%;
  top: 41.95%;
  width: 26.8%;
  height: auto;
  transform: translateX(-50%);
  aspect-ratio: 217 / 7;
  color: #3a4638;
  pointer-events: none;
  overflow: visible;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 2;
}

.pond-cover {
  position: absolute;
  left: 36.6%;
  top: 46.12%;
  width: 26.8%;
  height: 3.1%;
  background: #d0d6ad;
  pointer-events: none;
  z-index: 2;
}

.pond-line {
  position: absolute;
  left: 50%;
  top: 46.37%;
  margin: 0;
  transform: translateX(-50%);
  color: #4429a6;
  font-family: "Press Start 2P", ui-monospace, monospace;
  /* Cell width matches THE POND IS OPEN. on the 8x art (2711px / 17 chars). */
  font-size: calc(min(100vw, 100dvh * 3 / 2) * 2711 / 17 / 12288);
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-font-smoothing: none;
  z-index: 2;
}

.lcd-ground {
  position: absolute;
  left: 29.88%;
  top: 50.73%;
  width: 40.43%;
  height: 18.77%;
  pointer-events: none;
  z-index: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: url("../assets/lcd-ground.png?v=6") 0 0 / 100% 100% no-repeat;
}

.lcd-spot {
  position: absolute;
  left: 49.45%;
  top: 50.48%;
  width: 1.40%;
  height: 0.40%;
  background: rgb(209, 216, 174);
  pointer-events: none;
  z-index: 2;
}

.frog {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  transform-origin: 49.91% 67.80%;
}

.frog__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.screen-off {
  position: absolute;
  left: 28.90%;
  top: 23.34%;
  width: 42.40%;
  height: 47.05%;
  overflow: hidden;
  border-radius: 2.4% / 3.3%;
  background: #0b0b0d;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transform-origin: 50% 50%;
}

.screen-off::before,
.screen-off::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.screen-off::before {
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(236, 239, 212, 0.75) 0 1px,
    rgba(11, 11, 13, 0.65) 1px 2px,
    transparent 2px 5px
  );
}

.screen-off::after {
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  background: #0b0b0d;
}

.power-cover {
  position: absolute;
  left: 21.05%;
  top: 33.26%;
  width: 1.28%;
  height: 1.96%;
  border-radius: 50%;
  background: #b69be6;
  box-shadow: 0 0 0 3px #b69be6;
  pointer-events: none;
  z-index: 6;
}

.power-dot {
  position: absolute;
  left: 21.24%;
  top: 33.52%;
  width: 0.944%;
  height: 1.428%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(circle at 50% 50%, var(--led-fill) 0 54%, var(--led-ring) 58% 100%);
}

.power-dot--on {
  --led-fill: #3edc64;
  --led-ring: #33283c;
  opacity: 1;
}

.power-dot--off {
  --led-fill: #e6e8ea;
  --led-ring: #33283c;
  opacity: 0;
}

.side-btn {
  --x: 20.59;
  --w: 5.31;
  --h: 7.96;
  position: absolute;
  left: calc(var(--x) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  z-index: 8;
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: 50%;
}

.side-btn--x {
  top: 36.20%;
}

.side-btn--mu {
  top: 46.01%;
}

.side-btn:focus,
.side-btn:focus-visible,
.side-btn:active,
.side-btn:hover {
  outline: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  filter: none;
}

.side-btn__face {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  background: transparent;
  transform: translateY(0);
  transition: transform 120ms linear;
}

.side-btn__face img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.side-btn.is-pressed .side-btn__face,
.side-btn:active .side-btn__face {
  transform: translateY(3px);
}

.face-btn {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.face-btn:focus {
  outline: none;
}

.face-btn:focus-visible {
  outline: 2px solid #3d3558;
  outline-offset: 2px;
}

.face-btn--b {
  --x: 59.25;
  --y: 78.15;
  --w: 5.95;
  --h: 8.32;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}

.face-btn--a {
  --x: 66.88;
  --y: 76.62;
  --w: 5.95;
  --h: 8.32;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}

.face-btn__cover,
.face-btn__face {
  position: absolute;
  pointer-events: none;
}

.face-btn__cover {
  z-index: 0;
  inset: 0;
  background: #b69be6;
}

.face-btn__cover::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -4px;
  right: -4px;
  height: 16px;
  background: #b69be6;
}

.face-btn__face {
  z-index: 1;
  inset: 0;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 120ms linear;
}

.face-btn__face::before {
  content: "";
  position: absolute;
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
  width: calc(100 / var(--w) * 100%);
  height: calc(100 / var(--h) * 100%);
  background: url("../assets/hero.png?v=11") 0 0 / 100% 100% no-repeat;
}

.face-btn.is-pressed .face-btn__face,
.face-btn:active .face-btn__face {
  transform: translateY(3px);
}

.pad-btn {
  position: absolute;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pad-btn:focus {
  outline: none;
}

.pad-btn:focus-visible {
  outline: 2px solid #3d3558;
  outline-offset: 2px;
}

.pad-btn--up {
  --x: 25.55;
  --y: 75.50;
  --w: 4.20;
  --h: 6.50;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}

.pad-btn--down {
  --x: 25.55;
  --y: 81.70;
  --w: 4.40;
  --h: 6.70;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}

.pad-btn--left {
  --x: 23.10;
  --y: 79.60;
  --w: 4.60;
  --h: 4.70;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}

.pad-btn--right {
  --x: 27.50;
  --y: 79.60;
  --w: 4.70;
  --h: 4.70;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}

.dpad-well,
.dpad {
  --x: var(--dpad-x);
  --y: var(--dpad-y);
  --w: var(--dpad-w);
  --h: var(--dpad-h);
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  pointer-events: none;
}

.dpad-well {
  z-index: 4;
  background: #b69be6;
}

.dpad {
  --dx: 0px;
  --dy: 0px;
  z-index: 5;
  overflow: visible;
  transform: translate3d(var(--dx), var(--dy), 0);
  transition: transform 80ms linear;
}

.dpad__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dpad__face::before {
  content: "";
  position: absolute;
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
  width: calc(100 / var(--w) * 100%);
  height: calc(100 / var(--h) * 100%);
  background: url("../assets/hero.png?v=11") 0 0 / 100% 100% no-repeat;
}

.frame.is-shutting .screen-off {
  animation: screen-crt-off 480ms steps(6, end) forwards;
}

.frame.is-shutting .screen-off::before {
  animation: lcd-noise 480ms steps(6, end) forwards;
}

.frame.is-shutting .screen-off::after {
  animation: lcd-rollbar 480ms steps(5, end) forwards;
}

.frame.is-shutting .power-dot--on {
  animation: power-on-out 480ms steps(4, end) forwards;
}

.frame.is-shutting .power-dot--off {
  animation: power-out 480ms steps(4, end) forwards;
}

.frame.is-glitching .screen-off {
  animation: screen-glitch 420ms steps(6, end) forwards;
}

.frame.is-glitching .screen-off::before {
  animation: lcd-noise 420ms steps(6, end) forwards;
}

.frame.is-glitching .screen-off::after {
  animation: lcd-rollbar-glitch 420ms steps(5, end) forwards;
}

.frame.is-off .screen-off {
  opacity: 1;
  transform: none;
}

.frame.is-off .power-dot--on {
  opacity: 0;
}

.frame.is-off .power-dot--off {
  opacity: 1;
}

.frame.is-booting .screen-off {
  animation: screen-crt-on 420ms steps(4, end) forwards;
}

.frame.is-booting .power-dot--on {
  opacity: 1;
}

.frame.is-booting .power-dot--off {
  opacity: 0;
}

.frame.is-booting .pond-cover,
.frame.is-booting .pond-line,
.frame.is-booting .rule-cover,
.frame.is-booting .rule,
.frame.is-booting .lcd-ground,
.frame.is-booting .lcd-spot,
.frame.is-booting .frog {
  z-index: 7;
  animation: lcd-content-in 420ms steps(3, end) forwards;
}

@keyframes screen-crt-off {
  0% {
    opacity: 0;
    background: #0b0b0d;
  }
  8% {
    opacity: 0.55;
    background: #ecefd4;
  }
  16% {
    opacity: 0;
    background: #0b0b0d;
  }
  28% {
    opacity: 0.4;
    background: #0b0b0d;
  }
  40% {
    opacity: 0.12;
    background: #d0d6ad;
  }
  52% {
    opacity: 0.7;
    background: #0b0b0d;
  }
  68% {
    opacity: 0.2;
    background: #0b0b0d;
  }
  82%,
  100% {
    opacity: 1;
    background: #0b0b0d;
  }
}

@keyframes lcd-noise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 0.9;
    transform: translateY(-10%);
  }
  22% {
    opacity: 0.2;
    transform: translateY(14%);
  }
  36% {
    opacity: 1;
    transform: translateY(-6%);
  }
  50% {
    opacity: 0.35;
    transform: translateY(18%);
  }
  64% {
    opacity: 0.85;
    transform: translateY(-16%);
  }
  78% {
    opacity: 0.15;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes lcd-rollbar {
  0% {
    opacity: 0;
    top: 8%;
    height: 10%;
  }
  18% {
    opacity: 1;
    top: 28%;
    height: 14%;
  }
  36% {
    opacity: 1;
    top: 62%;
    height: 22%;
  }
  54% {
    opacity: 1;
    top: 12%;
    height: 38%;
  }
  72% {
    opacity: 1;
    top: 0;
    height: 70%;
  }
  100% {
    opacity: 1;
    top: 0;
    height: 100%;
  }
}

@keyframes screen-glitch {
  0% {
    opacity: 0;
    background: #0b0b0d;
  }
  8% {
    opacity: 0.55;
    background: #ecefd4;
  }
  16% {
    opacity: 0;
    background: #0b0b0d;
  }
  28% {
    opacity: 0.4;
    background: #0b0b0d;
  }
  40% {
    opacity: 0.12;
    background: #d0d6ad;
  }
  52% {
    opacity: 0.45;
    background: #0b0b0d;
  }
  68% {
    opacity: 0.15;
    background: #0b0b0d;
  }
  82%,
  100% {
    opacity: 0;
    background: #0b0b0d;
  }
}

@keyframes lcd-rollbar-glitch {
  0% {
    opacity: 0;
    top: 8%;
    height: 10%;
  }
  18% {
    opacity: 1;
    top: 28%;
    height: 14%;
  }
  36% {
    opacity: 1;
    top: 62%;
    height: 22%;
  }
  54% {
    opacity: 1;
    top: 12%;
    height: 38%;
  }
  72% {
    opacity: 1;
    top: 40%;
    height: 18%;
  }
  100% {
    opacity: 0;
    top: 78%;
    height: 10%;
  }
}

@keyframes screen-crt-on {
  0% {
    opacity: 1;
    background: #0b0b0d;
    transform: scaleY(1);
  }
  18% {
    opacity: 1;
    background: #ecefd4;
    transform: scaleY(0.06);
  }
  42% {
    opacity: 0.55;
    background: #d0d6ad;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    background: #d0d6ad;
    transform: scaleY(1);
  }
}

@keyframes power-on-out {
  0%,
  42% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0;
  }
}

@keyframes power-out {
  0%,
  42% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
  78%,
  100% {
    opacity: 1;
  }
}

@keyframes lcd-content-in {
  0%,
  22% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 1024px), (max-height: 600px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html,
  body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .strip-layer {
    width: auto;
    height: auto;
  }

  .frame {
    width: min(
      calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
      calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 3 / 2)
    );
    height: min(
      calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * 2 / 3)
    );
    width: min(
      calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
      calc((100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 3 / 2)
    );
    height: min(
      calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * 2 / 3)
    );
  }

  .pond-line {
    font-size: calc(min(100vw, calc(100dvh * 3 / 2)) * 2711 / 17 / 12288);
    font-size: calc(min(100vw, calc(100svh * 3 / 2)) * 2711 / 17 / 12288);
  }

  .power-cover {
    box-shadow: none;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .frame {
    transform: scale(1.38);
    transform-origin: 50% 50%;
  }
}

@media (pointer: coarse) {
  .face-btn::after,
  .pad-btn::after {
    content: "";
    position: absolute;
    z-index: 3;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .face-btn::after {
    inset: -14px;
  }

  .pad-btn::after {
    inset: -10px;
  }
}