* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #090a0b;
}

#cat {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#cat picture,
#cat img {
  display: block;
  width: 100%;
  height: 100%;
}

#cat img {
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.welcome {
  position: absolute;
  top: clamp(1.25rem, 7vh, 5.5rem);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.05rem, 0.35vw, 0.3rem);
  transform: translateX(-50%);
  color: #fff4c7;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow:
    0 0.04em 0 #c86321,
    0 0.08em 0 #71320d,
    0 0.14em 0.22em rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
}

.welcome span:nth-child(odd) {
  transform: rotate(-6deg) translateY(0.04em);
}

.welcome span:nth-child(even) {
  transform: rotate(5deg) translateY(-0.04em);
}

#cat:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: -4px;
}

#cat:active img {
  transform: scale(0.995);
}

@media (prefers-reduced-motion: reduce) {
  #cat:active img {
    transform: none;
  }
}

@media (orientation: portrait) {
  .welcome {
    top: clamp(2rem, 11vh, 7rem);
    font-size: clamp(2.6rem, 14vw, 6rem);
  }
}