* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100vmin;
  height: 100vmin;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 8%;
}

.coin-stage {
  width: 280px;
  height: 280px;
  perspective: 1000px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: none;
  outline: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coin-stage.ready {
  opacity: 1;
}

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

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

.coin.flipping-tails {
  animation: coinFlipTails 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Front and back faces */
.coin-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 30% 25%, #3a3a50, #1a1a2a 50%, #0e0e18 85%);
  border: 6px solid #d4a520;
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.8),
    inset 0 3px 8px rgba(255, 255, 255, 0.12),
    inset 0 -4px 10px rgba(0, 0, 0, 0.5);
}

/* Metallic rim highlight */
.coin-face::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 30deg,
    #b8860b,
    #ffd700,
    #daa520,
    #b8860b,
    #cd950c,
    #ffd700,
    #daa520,
    #b8860b
  );
  -webkit-mask: radial-gradient(circle, transparent 87%, black 88%);
  mask: radial-gradient(circle, transparent 87%, black 88%);
  z-index: -1;
}

/* Inner ring detail */
.coin-face::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px solid rgba(220, 200, 150, 0.12);
  pointer-events: none;
}

/* Specular shine overlay */
.coin-face .coin-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.18), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.04), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
  z-index: 2;
}

.coin-face img {
  width: 98%;
  height: 98%;
  object-fit: cover;
  object-position: center 50%;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  z-index: 1;
}

.coin-heads img {
  transform: translateY(4%) scale(0.97);
}

.coin-tails img {
  transform: translateY(3%);
}

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

/* 3D coin edge - multiple layers for thickness */
.coin-edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  background: transparent;
}

.coin-edge-slice {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 5px solid #d4a520;
  backface-visibility: hidden;
  box-shadow: none;
  background: transparent;
}

.coin-edge-slice:nth-child(1) { transform: translateZ(-2px); border-color: #e6be3a; }
.coin-edge-slice:nth-child(2) { transform: translateZ(-4px); border-color: #d4a520; }
.coin-edge-slice:nth-child(3) { transform: translateZ(-7px); border-color: #c4951a; }

/* Flip animations - land on heads (full rotations) */
@keyframes coinFlip {
  0% {
    transform: rotateY(0deg) translateY(0) scale(1);
  }
  10% {
    transform: rotateY(360deg) translateY(-60px) scale(1.05);
  }
  25% {
    transform: rotateY(1080deg) translateY(-140px) scale(1.1);
  }
  40% {
    transform: rotateY(1800deg) translateY(-100px) scale(1.05);
  }
  55% {
    transform: rotateY(2520deg) translateY(-40px) scale(1);
  }
  70% {
    transform: rotateY(3060deg) translateY(-10px) scale(1);
  }
  85% {
    transform: rotateY(3420deg) translateY(5px) scale(0.98);
  }
  92% {
    transform: rotateY(3560deg) translateY(0) scale(1);
  }
  100% {
    transform: rotateY(3600deg) translateY(0) scale(1);
  }
}

/* Flip animations - land on tails (full rotations + 180) */
@keyframes coinFlipTails {
  0% {
    transform: rotateY(0deg) translateY(0) scale(1);
  }
  10% {
    transform: rotateY(360deg) translateY(-60px) scale(1.05);
  }
  25% {
    transform: rotateY(1080deg) translateY(-140px) scale(1.1);
  }
  40% {
    transform: rotateY(1800deg) translateY(-100px) scale(1.05);
  }
  55% {
    transform: rotateY(2520deg) translateY(-40px) scale(1);
  }
  70% {
    transform: rotateY(3060deg) translateY(-10px) scale(1);
  }
  85% {
    transform: rotateY(3420deg) translateY(5px) scale(0.98);
  }
  92% {
    transform: rotateY(3740deg) translateY(0) scale(1);
  }
  100% {
    transform: rotateY(3780deg) translateY(0) scale(1);
  }
}

/* Shadow under coin that moves with the flip */
.coin-shadow {
  position: absolute;
  bottom: -20px;
  left: 10%;
  width: 80%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  transition: opacity 0.2s, transform 0.2s;
}

.coin.flipping .coin-shadow,
.coin.flipping-tails .coin-shadow {
  animation: shadowMove 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes shadowMove {
  0% { opacity: 0.8; transform: scale(1); }
  25% { opacity: 0.2; transform: scale(0.5); }
  50% { opacity: 0.4; transform: scale(0.7); }
  75% { opacity: 0.7; transform: scale(0.9); }
  100% { opacity: 0.8; transform: scale(1); }
}

.result {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
  text-shadow: 0 0 20px rgba(100, 60, 255, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.result.show {
  opacity: 1;
}

.hint {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  animation: hintPulse 2.5s ease-in-out infinite;
}

.hint.hidden {
  opacity: 0;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.score {
  position: absolute;
  bottom: 8%;
  display: flex;
  gap: 40px;
  align-items: center;
}

.score-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.score-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
}

@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.result.bounce {
  animation: bounceIn 0.4s ease-out forwards;
}