* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(160deg, #1b3a2a 0%, #2d5a3d 50%, #1b3a2a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8f5e9;
}

.page {
  text-align: center;
  padding: 2rem;
  max-width: 480px;
}

.title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: #a5d6a7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.subtitle {
  font-size: 1rem;
  color: #c8e6c9;
  margin-bottom: 1.8rem;
}

.flip-btn {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.9rem 2.6rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #66bb6a, #388e3c);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.flip-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.flip-btn:active {
  transform: translateY(1px);
}

.flip-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.coin-scene {
  margin: 2.4rem auto;
  perspective: 900px;
  width: 160px;
  height: 160px;
}

.coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.coin.flipping {
  animation: coinFlip 1.4s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

@keyframes coinFlip {
  0% {
    transform: rotateY(0deg) translateY(0);
  }
  30% {
    transform: rotateY(540deg) translateY(-46px);
  }
  60% {
    transform: rotateY(1080deg) translateY(0);
  }
  80% {
    transform: rotateY(1260deg) translateY(-10px);
  }
  100% {
    transform: rotateY(1440deg) translateY(0);
  }
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #dcedc8 0%, #a5d6a7 45%, #66bb6a 100%);
  border: 5px solid #2e7d32;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.coin-face.head {
  transform: rotateY(0deg);
}

.coin-face.tail {
  transform: rotateY(180deg);
}

.coin-face svg {
  width: 110px;
  height: 110px;
}

.coin-face .label {
  position: absolute;
  bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #1b5e20;
}

.result {
  min-height: 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #fff;
}

.result.heads {
  color: #aef3ae;
}

.result.tails {
  color: #ffd54f;
}

.hint {
  font-size: 0.85rem;
  color: #90a4ae;
}