@font-face {
  font-family: "Open Sans";
  src: url("open-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --accent: #f2d64b;
  --danger: #ff6b6b;
  --ink: #111111;
  --panel: rgba(255, 255, 255, 0.75);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Open Sans", "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000000;
}


.bg {
  position: absolute;
  inset: 0;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: saturate(1.05) contrast(1.05);
  transform: none;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  z-index: 0;
}

.bg-1 {
  background-image: url("bg2.png");
  animation-name: bgSwap1;
}

.bg-2 {
  background-image: url("bg3.png");
  animation-name: bgSwap2;
}

.bg-alt {
  display: none;
}

.bg-alt-1 {
  background-image: url("bg alt/bg1.png");
}

.bg-alt-2 {
  background-image: url("bg alt/bg2.png");
}

.bg-alt-3 {
  background-image: url("bg alt/bg3.png");
}

.bg-alt-4 {
  background-image: url("bg alt/bg4.png");
}

#app.is-blank .bg-1,
#app.is-blank .bg-2 {
  display: none;
}

#app.is-blank .bg-alt {
  display: block;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

#app.is-blank .bg-alt-1 {
  animation-name: bgAltFade1;
}

#app.is-blank .bg-alt-2 {
  animation-name: bgAltFade2;
}

#app.is-blank .bg-alt-3 {
  animation-name: bgAltFade3;
}

#app.is-blank .bg-alt-4 {
  animation-name: bgAltFade4;
}

#game-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#app.is-start #game-stage {
  display: none;
}

#app.is-intro #game-stage {
  display: none;
}

#app.is-station .bg,
#app.is-station .bg-alt {
  display: none;
}

#ui-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  pointer-events: none;
}

#egg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: auto;
  transform: translate(-50%, -50%);
  display: none;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  z-index: 4;
  aspect-ratio: 1 / 1;
  animation: eggPulse 1.6s ease-in-out infinite;
}

#app.is-blank #egg {
  display: block;
}

#blank-back {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 78vw);
  aspect-ratio: 3.2 / 1;
  border: none;
  background: transparent url("back.png") center / contain no-repeat;
  cursor: pointer;
  padding: 0;
  display: none;
  pointer-events: auto;
  z-index: 5;
  transform: translate(-50%, 260px);
  transition: transform 0.15s ease;
}

#app.is-blank #blank-back {
  display: block;
}

#blank-screen {
  position: absolute;
  inset: 0;
  max-width: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.blank-text {
  max-width: min(720px, 80vw);
  font-size: 1.2rem;
  line-height: 1.5;
  color: #9ceff5;
  text-align: center;
  text-shadow:
    -1px 0 rgba(0, 0, 0, 0.6),
    1px 0 rgba(0, 0, 0, 0.6),
    0 -1px rgba(0, 0, 0, 0.6),
    0 1px rgba(0, 0, 0, 0.6);
  margin-top: 140px;
}

#blank-back:hover,
#blank-back:focus-visible {
  background-image: url("backhov.png");
  transform: translate(-50%, 260px) scale(1.02);
}

.egg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease-in-out;
}

.egg-frame-1 {
  animation: eggFrame1 1.6s ease-in-out infinite;
}

.egg-frame-2 {
  animation: eggFrame2 1.6s ease-in-out infinite;
}

#app.is-lose .bg,
#app.is-lose .bg-alt {
  display: none;
}

.screen {
  text-align: center;
  display: none;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  pointer-events: auto;
}

#station-screen {
  position: absolute;
  inset: 0;
  max-width: none;
  align-items: flex-start;
  justify-content: flex-start;
  background: url("station/cosmos.png") center / cover no-repeat;
  padding: 32px;
}

#station-ufo {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 140px;
  height: auto;
  opacity: 0;
  transform: translate(0, 0) scale(0.6);
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
  pointer-events: none;
}

#station-ufo.is-approaching {
  animation: ufoApproach 12s ease-in-out forwards;
}

#station-screen::before {
  content: "";
  position: absolute;
  inset: 4%;
  background: url("station/station.png") center / contain no-repeat;
  animation: stationDrift 10s ease-in-out infinite alternate;
  z-index: 1;
}

#station-screen::after {
  content: "";
  position: absolute;
  inset: 18% -14% -22% 18%;
  background: url("station/earth.png") center / contain no-repeat;
  animation: earthDrift 14s ease-in-out infinite alternate;
  z-index: 0;
}

.station-panel,
#station-screen .continue-image {
  position: relative;
  z-index: 2;
}

.station-panel {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: min(520px, 60vw);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #9ceff5;
  box-shadow: 0 0 12px rgba(156, 239, 245, 0.35);
  border-radius: 14px;
  padding: 16px 18px;
}

.station-text {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #9ceff5;
  text-shadow: none;
  text-align: left;
}

#station-screen .continue-image {
  position: absolute;
  right: 32px;
  bottom: 32px;
}

.win-title {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: #ffffff;
  text-shadow:
    -2px 0 #9ceff5,
    2px 0 #9ceff5,
    0 -2px #9ceff5,
    0 2px #9ceff5;
  pointer-events: none;
}

.win-title.is-visible {
  display: flex;
}

#intro-screen {
  align-items: center;
  position: relative;
}

.intro-content {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: min(1400px, 94vw);
}

.intro-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

.intro-title {
  font-size: 1.6rem;
  font-weight: 400;
  color: #000000;
  text-shadow:
    -1px 0 #9ceff5,
    1px 0 #9ceff5,
    0 -1px #9ceff5,
    0 1px #9ceff5;
}

.skip-button {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 2;
  border: 1px solid #9ceff5;
  background: rgba(156, 239, 245, 0.2);
  color: #000000;
  font-family: "Open Sans", "Segoe UI", sans-serif;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.screen.is-active {
  display: flex;
}

.intro-gif {
  width: min(620px, 60vw);
  height: auto;
  margin-left: -108px;
}

.intro-text {
  font-size: 1.35rem;
  line-height: 1.5;
  color: #000000;
  text-shadow:
    -1px 0 #9ceff5,
    1px 0 #9ceff5,
    0 -1px #9ceff5,
    0 1px #9ceff5;
  max-width: 680px;
  text-align: left;
  width: 420px;
  margin-left: -16px;
  background: rgba(156, 239, 245, 0.18);
  border: 2px solid #9ceff5;
  border-radius: 12px;
  padding: 16px 18px;
}

#lose-screen .intro-text {
  color: #9ceff5;
  text-shadow: none;
}

.intro-text-wrap {
  animation: introBounce 1.4s ease-in-out infinite;
}

.intro-text.is-typing::after {
  content: "|";
  margin-left: 4px;
  animation: caretBlink 0.8s steps(1, end) infinite;
}

.intro-text::after {
  content: "";
}

.intro-text.is-typing {
  animation: introBounce 1.4s ease-in-out infinite;
}

.intro-text:not(.is-typing) {
  animation: introBounce 1.8s ease-in-out infinite;
}

.continue-image {
  width: min(420px, 70vw);
  aspect-ratio: 4 / 1;
  border: none;
  background: transparent url("con.png") center / contain no-repeat;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
  opacity: 0;
  pointer-events: none;
}

.continue-image:hover,
.continue-image:focus-visible {
  background-image: url("conhov.png");
  transform: scale(1.02);
}

.continue-image.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.continue-image:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

h1,
h2 {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  letter-spacing: 1px;
  margin: 0;
  text-transform: none;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
}

h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}

p {
  margin: 0;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.7);
}

.primary {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  color: #0a0f1a;
  background: linear-gradient(135deg, var(--accent), #f6a14b);
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(246, 161, 75, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 30px rgba(246, 161, 75, 0.4);
}

#game-ui-left,
#game-ui-right {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
}

#game-ui-left.is-active,
#game-ui-right.is-active {
  display: flex;
}

#game-ui-right {
  left: auto;
  right: 24px;
}

#cpu-life-panel {
  text-align: right;
}

#player-life-panel {
  order: 0;
  text-align: left;
}

.life-panel {
  background: transparent;
  padding: 10px 16px;
  border-radius: 16px;
  border: none;
  min-width: 140px;
  text-align: left;
  position: relative;
  height: auto;
}

.life-panel .label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  color: #ffffff;
  margin-bottom: 20px;
}

.life-panel .value {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  color: #ffffff;
}

.cpu-heart-a,
.cpu-heart-b,
.player-heart-a,
.player-heart-b,
.player-heart-gif,
.cpu-heart-gif {
  position: absolute;
  width: 120px;
  height: 120px;
  right: 12px;
  top: 18px;
  width: 5px;
  height: 5px;
  pointer-events: none;
}

.player-heart-a,
.player-heart-b,
.player-heart-gif {
  right: -8px;
}

.cpu-heart-frame,
.player-heart-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cpu-heart-gif {
  position: absolute;
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0;
}

.player-heart-gif {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.player-heart.burst .player-heart-frame,
.player-heart.burst .player-heart-a,
.player-heart.burst .player-heart-b {
  display: none;
}

.player-heart.burst .player-heart-gif {
  opacity: 1;
}

.cpu-heart.burst .cpu-heart-frame,
.cpu-heart.burst .cpu-heart-a,
.cpu-heart.burst .cpu-heart-b {
  display: none;
}

.cpu-heart.burst .cpu-heart-gif {
  opacity: 1;
}
.cpu-heart.burst {
  position: absolute;
  top: 0;
  right: 14px;
  opacity: 1;
}

.cpu-heart-a {
  animation: cpuHeartSwap 0.4s steps(1, end) infinite;
}

.cpu-heart-b {
  animation: cpuHeartSwap 0.4s steps(1, end) infinite;
  animation-delay: 0.2s;
}

.player-heart-a {
  animation: playerHeartSwap 0.4s steps(1, end) infinite;
}

.player-heart-b {
  animation: playerHeartSwap 0.4s steps(1, end) infinite;
  animation-delay: 0.2s;
}

.heart-shake {
  animation: heartShake 0.09s steps(1, end) infinite;
}

@keyframes cpuHeartSwap {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes playerHeartSwap {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes heartShake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3px, 2px);
  }
  50% {
    transform: translate(3px, -2px);
  }
  75% {
    transform: translate(-2px, -3px);
  }
  100% {
    transform: translate(0, 0);
  }
}

#round-message {
  margin-top: 16px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  font-size: 1rem;
  color: #ffffff;
}


#end-screen {
  position: absolute;
  inset: 0;
  max-width: none;
  background: rgba(255, 255, 255, 0.9);
  padding: 28px 32px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}

#end-continue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lose-continue {
  background-image: url("pa.png");
}

#lose-continue:hover,
#lose-continue:focus-visible {
  background-image: url("pahov.png");
}

@keyframes bgSwap1 {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes bgSwap2 {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

@keyframes bgAltFade1 {
  0%,
  24% {
    opacity: 1;
  }
  34%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bgAltFade2 {
  0%,
  19% {
    opacity: 0;
  }
  24%,
  48% {
    opacity: 1;
  }
  58%,
  100% {
    opacity: 0;
  }
}

@keyframes bgAltFade3 {
  0%,
  43% {
    opacity: 0;
  }
  48%,
  72% {
    opacity: 1;
  }
  82%,
  100% {
    opacity: 0;
  }
}

@keyframes bgAltFade4 {
  0%,
  67% {
    opacity: 0;
  }
  72%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes introBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes stationDrift {
  0% {
    transform: scale(1) rotate(-1.2deg);
  }
  100% {
    transform: scale(1.08) rotate(1.2deg);
  }
}

@keyframes ufoApproach {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    transform: translate(48vw, 32vh) scale(1.2);
    opacity: 1;
  }
}

@keyframes earthDrift {
  0% {
    transform: translate(-6px, 4px) scale(1) rotate(-0.6deg);
  }
  100% {
    transform: translate(6px, -4px) scale(1.03) rotate(0.6deg);
  }
}

@keyframes eggFrame1 {
  0%,
  40% {
    opacity: 1;
  }
  60%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes eggFrame2 {
  0%,
  40% {
    opacity: 0;
  }
  60%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes eggPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes caretBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 760px) {
  #game-ui {
    flex-direction: column;
    gap: 12px;
  }
}
.start-image {
  width: min(520px, 70vw);
  aspect-ratio: 4 / 3;
  border: none;
  background: transparent url("head.png") center / contain no-repeat;
  cursor: pointer;
  padding: 0;
  transform: scale(0.9);
  transition: transform 0.15s ease;
}

.start-image:hover,
.start-image:focus-visible {
  background-image: url("headhov.png");
  transform: scale(0.92);
}

.start-image:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}