:root {
  --bg-start: #5b21b6;
  --bg-mid: #db2777;
  --bg-end: #f97316;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.75);
  --btn-bg: rgba(255, 255, 255, 0.95);
  --btn-text: #5b21b6;
  --btn-shadow: rgba(0, 0, 0, 0.25);
  --glow: rgba(255, 255, 255, 0.35);
}

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

html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  width: 100%;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(
    135deg,
    var(--bg-start) 0%,
    var(--bg-mid) 45%,
    var(--bg-end) 100%
  );
  background-attachment: fixed;
  overflow-x: clip;
  transition: background 0.6s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, var(--glow), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(251, 191, 36, 0.25), transparent 50%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease;
}

body.warp-active {
  background: #020617;
}

body.warp-active::before {
  opacity: 0;
}

/* Floating sparkles (idle playfulness) */
.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(3px 3px at 10% 20%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 85% 15%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(2px 2px at 70% 80%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(3px 3px at 25% 75%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(2px 2px at 50% 50%, rgba(255, 255, 255, 0.3), transparent);
  animation: sparkleDrift 12s ease-in-out infinite;
}

@keyframes sparkleDrift {
  0%,
  100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px);
  }
}

/* Hyperspace warp (42) */
.hyperspace {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

body.warp-active .hyperspace {
  opacity: 1;
  visibility: visible;
}

.hyperspace__tunnel {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 8deg,
    rgba(56, 189, 248, 0.15) 8deg 9deg,
    transparent 9deg 18deg,
    rgba(244, 114, 182, 0.12) 18deg 19deg
  );
  animation: tunnelSpin 0.35s linear infinite;
  filter: blur(1px);
}

.hyperspace__stars {
  position: absolute;
  inset: -20%;
  background-repeat: repeat;
  background-size: 200px 200px;
}

.hyperspace__stars--a {
  background-image:
    radial-gradient(2px 2px at 10px 20px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80px 60px, #a5f3fc, transparent),
    radial-gradient(2px 2px at 140px 120px, #fff, transparent),
    radial-gradient(1px 1px at 50px 150px, #f0abfc, transparent),
    radial-gradient(2px 2px at 170px 40px, #fff, transparent);
  animation: starWarp 0.5s linear infinite;
}

.hyperspace__stars--b {
  background-image:
    radial-gradient(1.5px 1.5px at 30px 90px, #fde68a, transparent),
    radial-gradient(2px 2px at 100px 30px, #fff, transparent),
    radial-gradient(1px 1px at 160px 170px, #67e8f9, transparent),
    radial-gradient(2px 2px at 20px 160px, #fff, transparent);
  animation: starWarp 0.35s linear infinite reverse;
  opacity: 0.85;
}

.hyperspace__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
  animation: flashPulse 0.2s ease-in-out infinite alternate;
}

@keyframes tunnelSpin {
  to {
    transform: rotate(360deg) scale(1.15);
  }
}

@keyframes starWarp {
  from {
    transform: scale(0.2) translateZ(0);
    opacity: 1;
  }
  to {
    transform: scale(3.5);
    opacity: 0.3;
  }
}

@keyframes flashPulse {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 0.9;
  }
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  gap: 0.75rem;
}

body.warp-active .page {
  z-index: 60;
  animation: warpShake 0.12s linear infinite;
}

body.warp-ending .page {
  animation: warpSettle 0.8s ease-out forwards;
}

@keyframes warpShake {
  0% {
    transform: translate(0, 0) scale(1.02) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: translate(-6px, 4px) scale(1.06) rotate(-1.5deg);
    filter: hue-rotate(90deg) brightness(1.3);
  }
  50% {
    transform: translate(5px, -5px) scale(1.08) rotate(1deg);
    filter: hue-rotate(180deg) brightness(1.5);
  }
  75% {
    transform: translate(-4px, -3px) scale(1.05) rotate(-0.5deg);
    filter: hue-rotate(270deg) brightness(1.2);
  }
  100% {
    transform: translate(3px, 2px) scale(1.07) rotate(0.5deg);
    filter: hue-rotate(360deg) brightness(1.4);
  }
}

@keyframes warpSettle {
  to {
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: none;
  }
}

.domain {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  animation: domainShimmer 3s ease-in-out infinite;
}

@keyframes domainShimmer {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
    letter-spacing: 0.18em;
  }
}

.question {
  margin: 0;
  font-size: clamp(3.5rem, 14vw, 7rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
  animation: float 4s ease-in-out infinite;
}

body.warp-active .question {
  animation: questionWarp 0.25s ease-in-out infinite alternate;
  text-shadow:
    0 0 20px #22d3ee,
    0 0 40px #e879f9,
    0 0 80px #fbbf24;
}

@keyframes questionWarp {
  from {
    transform: scale(1) skewX(0deg);
  }
  to {
    transform: scale(1.08) skewX(-3deg);
  }
}

.answer {
  margin: 0.5rem 0 1.5rem;
  max-width: 28rem;
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  min-height: 2.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.answer__sub {
  display: block;
  font-size: 0.65em;
  font-weight: 600;
  opacity: 0.9;
  letter-spacing: 0.04em;
}

.answer--fortytwo {
  font-size: clamp(4rem, 18vw, 8rem) !important;
  font-weight: 800;
  line-height: 1;
  min-height: auto;
  text-shadow:
    0 0 30px #22d3ee,
    0 0 60px #c026d3,
    0 0 100px #fbbf24;
  animation: fortyTwoGlow 0.15s ease-in-out infinite alternate !important;
}

@keyframes fortyTwoGlow {
  from {
    transform: scale(1);
    filter: brightness(1);
  }
  to {
    transform: scale(1.05);
    filter: brightness(1.4);
  }
}

.answer--change {
  animation: answerIn 0.45s ease-out;
}

body.click-pop .page {
  animation: clickBounce 0.35s ease-out;
}

@keyframes clickBounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: 0 4px 24px var(--btn-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: btnWiggle 5s ease-in-out infinite;
}

.btn:hover:not(:disabled) {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 8px 32px var(--btn-shadow);
}

.btn:active:not(:disabled) {
  transform: scale(0.96) rotate(1deg);
}

.btn:disabled {
  opacity: 0.7;
  cursor: wait;
  animation: none;
}

.btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@keyframes btnWiggle {
  0%,
  92%,
  100% {
    transform: rotate(0deg);
  }
  94% {
    transform: rotate(-3deg) scale(1.02);
  }
  96% {
    transform: rotate(3deg) scale(1.02);
  }
  98% {
    transform: rotate(-2deg);
  }
}

.hint {
  margin: 0.5rem 0 0;
  min-height: 1.25em;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 20rem;
}

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

@keyframes answerIn {
  from {
    opacity: 0;
    transform: translateY(12px) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sparkles,
  .domain,
  .question,
  .btn {
    animation: none;
  }

  .answer--change,
  .answer--fortytwo {
    animation: none !important;
  }

  body.warp-active .page,
  body.warp-active .question {
    animation: none;
  }

  .hyperspace__tunnel,
  .hyperspace__stars,
  .hyperspace__flash {
    animation-duration: 2s;
  }

  body.click-pop .page {
    animation: none;
  }

  .btn:hover:not(:disabled) {
    transform: none;
  }
}