@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Bold";
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Italic";
  src: url("fonts/Montserrat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #000000;
  --text: #f3f3f3;

  --hole-size: min(44vw, 760px);
  --counter-size: clamp(14px, 1.1vw, 24px);
  --desc-size: clamp(13px, 1.08vw, 22px);
  --astronaut-size: clamp(120px, 14vw, 300px);

  --display-size: clamp(92px, 11.2vw, 196px);
  --montserrat-display-size: calc(var(--display-size) * 0.82);
  --montserrat-letter-spacing: 0.01em;

  --back-text-width: 94vw;
  --back-text-opacity: 0.22;
  --hole-word-color: #d8d8d8;

  --astro-word-size: 60px;
  --astro-word-mobile-size: clamp(22px, 3.8vw, 44px);

  --space-message-size: clamp(84px, 10.8vw, 206px);
  --space-message-stroke: clamp(2px, 0.2vw, 4px);

  --final-footer-size: 70px;
  --final-footer-stroke: 1.2px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  color: var(--text);
  overflow-x: hidden;
}

img {
  user-select: none !important;
  -webkit-user-drag: none;
}


.top-screens {
  position: relative;
  width: 100%;
  height: 200dvh;
  min-height: 200dvh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.top-screens-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.top-screens-bg-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.03);
  pointer-events: none;
}

.top-screens-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center 24%,
      rgba(0, 0, 0, 0) 0 15%,
      rgba(0, 0, 0, 0.06) 28%,
      rgba(0, 0, 0, 0.14) 46%,
      rgba(0, 0, 0, 0.26) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.03) 0%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0.03) 100%
    );
}


.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100dvh + 1px);
  overflow: hidden;
  background: transparent;
  z-index: 2;
  isolation: isolate;
}

.astronaut-layer,
.hero-counter,
.hero-back-text,
.hero-description,
.center-stage,
.hole-word {
  position: absolute;
}

.astronaut-layer {
  inset: 0;
}

.hero-counter {
  top: 2.1vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  font-size: var(--counter-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
}

.hero-counter span {
  display: inline-block;
  min-width: 1.6ch;
  text-align: center;
}

.hero-back-text {
  top: 50%;
  left: 50%;
  width: var(--back-text-width);
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
  font-size: var(--display-size);
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, var(--back-text-opacity));
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.hero-back-text span {
  display: block;
  width: 100%;
  transform: translateX(-1.15vw);
}

.center-stage {
  left: 50%;
  top: 50%;
  width: var(--hole-size);
  height: var(--hole-size);
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
}

.black-hole-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.black-hole {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 36px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 90px rgba(0, 0, 0, 0.88));
}

.black-hole-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 48%,
      #070707 0%,
      #020202 46%,
      #000000 72%,
      #000000 100%
    );
}

.black-hole-ring {
  position: absolute;
  inset: -2.8%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.04) 38%,
      rgba(255, 255, 255, 0.02) 50%,
      transparent 68%
    );
  filter: blur(14px);
  animation: holePulse 4.2s ease-in-out infinite;
}

.black-hole-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 36%,
      transparent 58%
    );
  filter: blur(24px);
  animation: holeGlow 5.5s ease-in-out infinite;
}

.hole-word {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 140;
  font-family: "Montserrat Bold", Arial, Helvetica, sans-serif;
  font-size: var(--montserrat-display-size);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: var(--montserrat-letter-spacing);
  color: var(--hole-word-color);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  pointer-events: auto;
  will-change: left, top, transform, opacity, filter;
}

.hole-word.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 10px 24px rgba(255, 255, 255, 0.12));
}

.hole-word.sucking {
  pointer-events: none;
  animation: suckWordIntoHole 0.95s cubic-bezier(0.22, 0.8, 0.19, 1) forwards;
}

.hero-description {
  left: 50%;
  bottom: 2.5vh;
  transform: translateX(-50%);
  z-index: 20;
  width: min(34vw, 620px);
  font-size: var(--desc-size);
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

.astronaut-layer {
  z-index: 25;
  touch-action: none;
}

.astronaut {
  position: absolute;
  width: var(--astronaut-size);
  aspect-ratio: 0.66 / 1;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  cursor: grab;
  will-change: left, top, transform, opacity, filter;
  pointer-events: auto;
}

.astronaut img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.astronaut.dragging {
  cursor: grabbing;
  z-index: 60;
  filter: drop-shadow(0 10px 24px rgba(255, 255, 255, 0.12));
}

.astronaut.sucking {
  pointer-events: none;
  animation: suckIntoHole 0.9s cubic-bezier(0.22, 0.8, 0.19, 1) forwards;
}

.counter-bump {
  animation: counterBump 0.28s ease;
}


.astro-screen {
  position: absolute;
  top: calc(100dvh - 1px);
  left: 0;
  width: 100%;
  height: calc(100dvh + 2px);
  overflow: hidden;
  background: transparent;
  z-index: 2;
  isolation: isolate;
}

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

.balloons-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.astro-word {
  position: absolute;
  z-index: 2;
  font-family: "Montserrat Bold", Arial, Helvetica, sans-serif;
  font-size: var(--astro-word-size);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: 0.01em;
  color: rgba(239, 239, 239, 0.74);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.14),
    0 0 14px rgba(255, 255, 255, 0.08),
    0 0 26px rgba(255, 255, 255, 0.04);
  animation: astroWordTwinkle 4.8s ease-in-out infinite;
}

.astro-word span {
  display: block;
  text-align: center;
}

.astro-word span + span {
  margin-top: 0.2em;
}

.astro-word::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.06) 35%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(24px);
  opacity: 0.45;
  z-index: -1;
  animation: astroGlowPulse 5.5s ease-in-out infinite;
}

.astro-word-1 { left: 5.4%; top: 4.6%; }
.astro-word-2 { left: 14.8%; top: 36.8%; }
.astro-word-3 { left: 47.6%; top: 15.6%; }
.astro-word-4 { left: 39.8%; top: 63.6%; }
.astro-word-5 { left: 3.8%; top: 76.6%; }
.astro-word-6 { left: 71.2%; top: 43.8%; }
.astro-word-7 { left: 81.8%; top: 6.8%; }


.space-message-screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  cursor: crosshair;
}

.space-message-top,
.space-message-bottom,
.space-message-center,
.space-message-cosmos,
.space-message-light {
  position: absolute;
  left: 0;
  width: 100%;
}

.space-message-top {
  top: 0;
  z-index: 4;
  pointer-events: none;
}

.space-message-bottom {
  bottom: 0;
  z-index: 4;
  pointer-events: none;
}

.space-message-top-image,
.space-message-bottom-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.space-message-cosmos {
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path, opacity;
}

.space-message-cosmos-image {
  width: 108%;
  height: 108%;
  object-fit: cover;
  display: block;
  transform: translate(-4%, -4%) scale(1.02);
  filter: brightness(1.02) contrast(1.04);
  pointer-events: none;
}

.space-message-light {
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, background;
  mix-blend-mode: screen;
}

.space-message-center {
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3vw;
}

.space-message-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04em;
  font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
  font-size: var(--space-message-size);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: var(--space-message-stroke) #f2f2f2;
  text-stroke: var(--space-message-stroke) #f2f2f2;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.04);
  will-change: transform, text-shadow;
  transition: text-shadow 0.25s ease;
}

.space-message-title span {
  display: block;
}

.space-message-screen:hover .space-message-title {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(255, 255, 255, 0.05);
}

.space-message-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.025), transparent 42%),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.03) 24%,
      rgba(0, 0, 0, 0.03) 76%,
      rgba(0, 0, 0, 0.18) 100%
    );
}


.final-screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  cursor: pointer;
}

.final-screen-bg,
.final-screen-overlay {
  position: absolute;
  inset: 0;
}

.final-screen-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.02);
}

.final-screen-overlay {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.final-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.03), transparent 28%),
    radial-gradient(circle at 72% 44%, rgba(255, 255, 255, 0.02), transparent 30%),
    radial-gradient(circle at 58% 78%, rgba(255, 255, 255, 0.02), transparent 28%);
}

.final-quotes {
  position: absolute;
  top: 1.8%;
  right: 1.6%;
  z-index: 4;
  width: clamp(80px, 8vw, 150px);
  pointer-events: none;
}

.final-quotes-image {
  display: block;
  width: 100%;
  height: auto;
}

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

.final-line {
  position: absolute;
  white-space: nowrap;
  font-family: "Montserrat Italic", Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 2.8vw, 50px);
  font-weight: 400;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.96);
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.03);
  opacity: 0;
  transform:
    translate3d(var(--from-x, 0px), var(--from-y, 0px), 0)
    rotate(var(--from-r, 0deg))
    scale(0.72);
  filter: blur(10px);
  transition:
    transform 0.9s cubic-bezier(0.18, 0.86, 0.18, 1),
    opacity 0.55s ease,
    filter 0.9s ease;
  will-change: transform, opacity, filter;
}

.final-line.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  filter: blur(0);
}

.final-line-bold {
  font-family: "Montserrat Bold", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: italic;
}

.final-line-big {
  font-family: "Montserrat Bold", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(46px, 5.2vw, 88px);
  letter-spacing: -0.02em;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.1),
    0 0 22px rgba(255, 255, 255, 0.04);
}


.final-line-1 {
  left: 3%;
  top: 4.6%;
  white-space: normal;
  line-height: 0.95;
}

.final-line-2 {
  left: 16%;
  top: 24.5%;
}

.final-line-3 {
  left: 3%;
  top: 31.6%;
}

.final-line-4 {
  left: 29.5%;
  top: 39.4%;
}

.final-line-5 {
  left: 3%;
  top: 47.8%;
}

.final-line-6 {
  left: 36%;
  top: 54%;
}

.final-line-7 {
  left: 51.4%;
  top: 60%;
}

.final-line-8 {
  left: 67%;
  top: 67%;
}

.final-line-9 {
  left: 74.8%;
  top: 73%;
}

.final-line-10 {
  left: 66.8%;
  top: 79%;
}

.final-line-11 {
  left: 1.2%;
  bottom: 12.4%;
  transform:
    translate3d(var(--from-x, 0px), var(--from-y, 0px), 0)
    rotate(var(--from-r, 0deg))
    scale(0.72);
}

.final-line-11.is-visible {
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.final-click-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 1.8vw, 30px);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  pointer-events: none;
  animation: finalHintPulse 1.4s ease-in-out infinite;
  transition: opacity 0.35s ease;
}

.final-click-hint.is-hidden {
  opacity: 0;
}

.final-footer {
  position: absolute;
  left: 0;
  bottom: 1.2vh;
  width: 100%;
  padding: 0 0.8vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
}

.final-footer-left,
.final-footer-right {
  font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
  font-size: var(--final-footer-size);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: var(--final-footer-stroke) #f2f2f2;
  text-stroke: var(--final-footer-stroke) #f2f2f2;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

@keyframes holePulse {
  0%, 100% {
    transform: scale(0.985);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes holeGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.045);
    opacity: 0.92;
  }
}

@keyframes astroWordTwinkle {
  0%, 100% {
    opacity: 0.7;
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.12),
      0 0 14px rgba(255, 255, 255, 0.07),
      0 0 24px rgba(255, 255, 255, 0.03);
  }
  50% {
    opacity: 0.82;
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.2),
      0 0 18px rgba(255, 255, 255, 0.12),
      0 0 34px rgba(255, 255, 255, 0.06);
  }
}

@keyframes astroGlowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.38;
  }
}

@keyframes suckIntoHole {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(var(--start-rotate, 0deg));
    opacity: 1;
    filter: blur(0);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.84) rotate(calc(var(--start-rotate, 0deg) + 130deg));
    opacity: 0.96;
  }
  65% {
    transform: translate(-50%, -50%) scale(0.42) rotate(calc(var(--start-rotate, 0deg) + 310deg));
    opacity: 0.7;
    filter: blur(1px);
  }
  100% {
    left: var(--hole-x);
    top: var(--hole-y);
    transform: translate(-50%, -50%) scale(0.05) rotate(calc(var(--start-rotate, 0deg) + 760deg));
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes suckWordIntoHole {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
  35% {
    transform: translate(-50%, -50%) scale(0.86) rotate(80deg);
    opacity: 0.95;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.45) rotate(220deg);
    opacity: 0.66;
    filter: blur(1.5px);
  }
  100% {
    left: var(--hole-x);
    top: var(--hole-y);
    transform: translate(-50%, -50%) scale(0.05) rotate(560deg);
    opacity: 0;
    filter: blur(5px);
  }
}

@keyframes counterBump {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.12);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes finalHintPulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 1400px) {
  :root {
    --astro-word-size: 56px;
  }
}

@media (max-width: 1200px) {
  :root {
    --hole-size: min(52vw, 680px);
    --display-size: clamp(84px, 10.2vw, 164px);
    --back-text-width: 95vw;
    --space-message-size: clamp(72px, 10vw, 178px);
    --final-footer-size: clamp(48px, 5.6vw, 70px);
    --astro-word-size: 52px;
  }

  .hero-back-text span {
    transform: translateX(-0.95vw);
  }

  .hero-description {
    width: min(44vw, 560px);
  }

  .final-line {
    font-size: clamp(20px, 2.4vw, 40px);
  }

  .final-line-big {
    font-size: clamp(40px, 4.4vw, 70px);
  }
}

@media (max-width: 900px) {
  :root {
    --hole-size: min(62vw, 560px);
    --astronaut-size: clamp(125px, 23vw, 260px);
    --display-size: clamp(76px, 10vw, 130px);
    --back-text-width: 96vw;
    --space-message-size: clamp(62px, 9.6vw, 138px);
    --final-footer-size: clamp(38px, 5.2vw, 56px);
    --final-footer-stroke: 1.6px;
    --astro-word-size: 46px;
  }

  .hero-back-text span {
    transform: translateX(-0.55vw);
  }

  .hero-description {
    width: min(64vw, 520px);
    bottom: 5vh;
  }

  .final-footer {
    padding: 0 1.4vw;
  }

  .final-line {
    font-size: clamp(18px, 2.2vw, 30px);
  }

  .final-line-big {
    font-size: clamp(34px, 4vw, 56px);
  }

  .final-line-11 {
    bottom: 13.5%;
  }
}

@media (max-width: 640px) {
  :root {
    --hole-size: min(76vw, 440px);
    --astronaut-size: clamp(135px, 30vw, 210px);
    --display-size: clamp(58px, 10.4vw, 94px);
    --space-message-size: clamp(48px, 11.6vw, 96px);
    --space-message-stroke: 1.6px;
    --final-footer-size: clamp(24px, 5.8vw, 34px);
    --final-footer-stroke: 1.2px;
    --astro-word-size: 40px;
  }

  .hero-back-text {
    width: 98vw;
  }

  .hero-back-text span {
    transform: none;
  }

  .hole-word {
    letter-spacing: 0.005em;
  }

  .hero-counter {
    top: max(14px, env(safe-area-inset-top));
    font-size: clamp(12px, 3.2vw, 16px);
  }

  .hero-description {
    width: min(82vw, 360px);
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.2;
    bottom: 4.5vh;
  }

  .astro-word {
    font-size: var(--astro-word-mobile-size);
    line-height: 0.9;
  }

  .astro-word span + span {
    margin-top: 0.05em;
  }

  .astro-word-1 { left: 4%; top: 8%; }
  .astro-word-2 { left: 14%; top: 34%; }
  .astro-word-3 { left: 42%; top: 18%; }
  .astro-word-4 { left: 36%; top: 60%; }
  .astro-word-5 { left: 4%; top: 78%; }
  .astro-word-6 { left: 65%; top: 45%; }
  .astro-word-7 { left: 73%; top: 8%; }

  .space-message-center {
    padding: 0 5vw;
  }

  .final-quotes {
    width: 72px;
    top: 2.2%;
    right: 2%;
  }

  .final-footer {
    bottom: 2vh;
    padding: 0 2vw;
  }

  .final-line {
    font-size: clamp(14px, 3vw, 20px);
    line-height: 0.98;
  }

  .final-line-big {
    font-size: clamp(24px, 5.2vw, 34px);
  }

  .final-line-1 {
    left: 4%;
    top: 6%;
  }

  .final-line-2 { left: 19%; top: 25%; }
  .final-line-3 { left: 4%; top: 33%; }
  .final-line-4 { left: 30%; top: 41%; }
  .final-line-5 { left: 4%; top: 49%; }
  .final-line-6 { left: 36%; top: 58%; }
  .final-line-7 { left: 52%; top: 65%; }
  .final-line-8 { left: 63%; top: 73%; }
  .final-line-9 { left: 77%; top: 80%; }
  .final-line-10 { left: 67%; top: 87%; }
  .final-line-11 { left: 2%; bottom: 14%; }

  .final-click-hint {
    font-size: clamp(14px, 4vw, 22px);
  }
}

@media (max-width: 480px) {
  :root {
    --hole-size: min(80vw, 400px);
    --astronaut-size: clamp(145px, 34vw, 205px);
    --display-size: clamp(52px, 11vw, 82px);
    --space-message-size: clamp(42px, 11vw, 76px);
    --final-footer-size: clamp(20px, 5.4vw, 28px);
  }

  .hero-back-text {
    width: 99vw;
  }

  .hero-back-text span {
    transform: none;
  }

  .hero-description {
    width: 88vw;
    bottom: 4vh;
  }
}

.final-footer-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12vh;
  background: #000;
  z-index: 4;
}