* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #000;
  overflow: hidden;
}

.stage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.siu {
  margin: 0;
  padding: 0 0.2em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 16vw, 14rem);
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.15),
    0 0 30px rgba(255, 214, 0, 0);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.35s ease,
    text-shadow 0.35s ease;
}

.siu:focus-visible {
  transform: scale(1.08) rotate(-1deg);
  color: #ffd600;
  text-shadow:
    0 0 20px rgba(255, 214, 0, 0.65),
    0 0 60px rgba(255, 214, 0, 0.35),
    0 0 120px rgba(255, 214, 0, 0.15);
}

@media (orientation: landscape) {
  .siu:hover {
    transform: scale(1.08) rotate(-1deg);
    color: #ffd600;
    text-shadow:
      0 0 20px rgba(255, 214, 0, 0.65),
      0 0 60px rgba(255, 214, 0, 0.35),
      0 0 120px rgba(255, 214, 0, 0.15);
  }
}

.siu:active {
  transform: scale(0.94);
}

.siu.kick {
  animation: siu-kick 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes siu-kick {
  0% {
    transform: scale(1);
    color: #fff;
  }
  15% {
    transform: scale(1.35) rotate(-4deg);
    color: #ffd600;
    text-shadow:
      0 0 30px rgba(255, 214, 0, 0.9),
      0 0 90px rgba(255, 214, 0, 0.6);
  }
  30% {
    transform: scale(0.9) rotate(3deg);
  }
  45% {
    transform: scale(1.12) rotate(-2deg);
  }
  60% {
    transform: scale(0.97) rotate(1deg);
  }
  75% {
    transform: scale(1.04) rotate(-0.5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    color: #fff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.15),
      0 0 30px rgba(255, 214, 0, 0);
  }
}

.stage.shake {
  animation: stage-shake 0.5s ease;
}

@keyframes stage-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 2px); }
  20% { transform: translate(6px, -3px); }
  30% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -2px); }
  50% { transform: translate(-4px, 2px); }
  60% { transform: translate(4px, -1px); }
  70% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
  90% { transform: translate(-1px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .siu,
  .siu.kick,
  .stage.shake {
    animation: none !important;
    transition: none !important;
  }
}