:root {
  --stage-width: min(100vw, 430px);
  --gold: #ffd76a;
  --cream: #fff6c9;
  --shadow: rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #150505;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
}

button {
  font: inherit;
}

.page-shell {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 50% 95%, rgba(255, 188, 48, 0.24), transparent 25rem),
    #120405;
}

.game-card {
  position: relative;
  width: var(--stage-width);
  min-height: 100dvh;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-image: url("assets/background.png");
  background-size: cover;
  background-position: center top;
  isolation: isolate;
}

.game-card::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.status {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 44.5%;
  z-index: 5;
  min-height: 2.4rem;
  display: grid;
  place-items: center;
  padding: 0.42rem 0.85rem;
  color: var(--cream);
  text-align: center;
  font-size: clamp(0.94rem, 4.2vw, 1.1rem);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(255, 214, 76, 0.62);
}

.egg-grid {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 49.2%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.12rem, 1.4vw, 0.42rem) clamp(0.3rem, 2.3vw, 0.72rem);
}

.egg {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
  outline-offset: -0.18rem;
  transform: translateZ(0);
}

.egg.is-ready {
  cursor: pointer;
}

.egg.is-ready:active {
  transform: scale(0.96);
}

.egg.is-smashed {
  cursor: default;
}

.egg-image {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 0.35rem 0.34rem var(--shadow));
  user-select: none;
  pointer-events: none;
}

.burst,
.shards {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 158%;
  max-width: none;
  transform: translate(-50%, -50%) scale(0.36);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.shards {
  width: 128%;
}

.egg.is-animating {
  animation: eggShake 460ms ease-in-out 280ms both;
}

.egg.is-animating .burst {
  animation: burstPop 680ms ease-out 300ms both;
}

.egg.is-animating .shards {
  animation: shardsFly 720ms ease-out 360ms both;
}

.reward {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) scale(0.35);
  z-index: 4;
  color: #fff9cd;
  opacity: 0;
  font-size: clamp(1.45rem, 8.3vw, 2.15rem);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 0.11rem 0 #7d2100,
    0 0.2rem 0.55rem #000,
    0 0 1rem #ffda54;
  pointer-events: none;
}

.egg.is-smashed .reward {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.egg.reveal .reward {
  animation: rewardReveal 520ms cubic-bezier(0.18, 1.28, 0.38, 1) both;
}

.image-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.image-button img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.play-button {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: max(3.1%, env(safe-area-inset-bottom));
  z-index: 6;
  filter: drop-shadow(0 0.35rem 0.42rem rgba(0, 0, 0, 0.58));
  animation: buttonPulse 1.8s ease-in-out infinite;
}

.play-button.is-hidden {
  display: none;
}

.hammer {
  --hammer-x: 50%;
  --hammer-y: 60%;
  position: absolute;
  left: var(--hammer-x);
  top: var(--hammer-y);
  z-index: 8;
  width: 33%;
  max-width: 9rem;
  opacity: 0;
  transform: translate(-46%, -86%) rotate(-38deg) scale(0.75);
  transform-origin: 64% 78%;
  filter: drop-shadow(0 0.35rem 0.28rem rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.hammer.is-active {
  animation: hammerSmash 720ms cubic-bezier(0.2, 0.78, 0.36, 1) both;
}

.result-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8% 5%;
}

.result-modal.is-visible {
  display: flex;
}

.result-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
}

.result-content {
  position: relative;
  z-index: 1;
  width: min(92%, 24.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalIn 360ms ease-out both;
}

.result-art {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.42rem 1rem rgba(0, 0, 0, 0.72));
}

.claim-button {
  width: 78%;
  margin-top: -3.5%;
  filter: drop-shadow(0 0.35rem 0.42rem rgba(0, 0, 0, 0.62));
  animation: buttonPulse 1.8s ease-in-out infinite;
}

.game-card.is-locked .egg,
.game-card.is-animating .egg {
  pointer-events: none;
}

.game-card.is-started:not(.is-locked):not(.is-animating) .egg.is-ready {
  pointer-events: auto;
}

@media (min-width: 431px) {
  .game-card {
    min-height: min(100dvh, 764px);
    height: min(100dvh, 764px);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.55);
  }
}

@media (max-height: 690px) and (max-width: 430px) {
  .status {
    top: 43.7%;
  }

  .egg-grid {
    top: 48.2%;
    gap: 0 0.28rem;
  }

  .play-button {
    bottom: max(2%, env(safe-area-inset-bottom));
  }
}

@keyframes buttonPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@keyframes hammerSmash {
  0% {
    opacity: 0;
    transform: translate(-112%, -190%) rotate(-62deg) scale(0.7);
  }
  18% {
    opacity: 1;
  }
  48% {
    transform: translate(-48%, -88%) rotate(-38deg) scale(0.82);
  }
  66% {
    opacity: 1;
    transform: translate(-30%, -34%) rotate(18deg) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(-44%, -72%) rotate(-24deg) scale(0.84);
  }
}

@keyframes eggShake {
  0%,
  100% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-0.26rem) rotate(-2deg);
  }
  36% {
    transform: translateX(0.24rem) rotate(2deg);
  }
  54% {
    transform: translateX(-0.16rem) rotate(-1deg);
  }
  72% {
    transform: translateX(0.13rem) rotate(1deg);
  }
}

@keyframes burstPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.32);
  }
  26% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes shardsFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.34) rotate(-8deg);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -57%) scale(1) rotate(8deg);
  }
}

@keyframes rewardReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}