:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --white: #ffffff;
  --deep-purple: #52123f;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #ff315f;
  font-family:
    "Arial Rounded MT Bold",
    "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    sans-serif;
}

body {
  position: fixed;
  inset: 0;
}

button,
img {
  -webkit-user-drag: none;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}

.animated-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(255, 255, 120, 0.95),
      transparent 25%
    ),
    radial-gradient(
      circle at 85% 22%,
      rgba(80, 255, 235, 0.88),
      transparent 29%
    ),
    radial-gradient(
      circle at 75% 85%,
      rgba(171, 76, 255, 0.9),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #ff2a62 0%,
      #ff6a2b 32%,
      #ffcf3a 55%,
      #18d5cf 78%,
      #8d3cff 100%
    );
  background-size: 160% 160%;
  animation: gradient-shift 10s ease-in-out infinite alternate;
}

.animated-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(78, 0, 70, 0.05),
      rgba(49, 0, 66, 0.24)
    );
}

.background-glow {
  position: absolute;
  width: min(55vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.35;
  animation: glow-float 8s ease-in-out infinite alternate;
}

.glow-one {
  left: -15%;
  top: 12%;
  background: #ffec6b;
}

.glow-two {
  right: -18%;
  top: 33%;
  background: #ff5fd2;
  animation-delay: -2s;
}

.glow-three {
  left: 26%;
  bottom: -15%;
  background: #54fff2;
  animation-delay: -4s;
}

.ambient-decoration {
  position: absolute;
  pointer-events: none;
  opacity: 0.42;
  animation: ambient-float linear infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.65);
}

.screen {
  position: absolute;
  inset: 0;
  padding:
    calc(var(--safe-top) + 18px)
    calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 18px)
    calc(var(--safe-left) + 16px);
}

.loading-screen,
.start-screen,
.win-screen {
  display: grid;
  place-items: center;
}

.loading-screen {
  text-align: center;
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  text-shadow: 0 2px 12px rgba(80, 0, 40, 0.3);
}

.loading-number,
.glowing-number,
.win-number {
  font-weight: 1000;
  line-height: 0.85;
  color: #fff38a;
  text-shadow:
    0 0 8px #ffffff,
    0 0 22px #ffeb3b,
    0 0 38px #ff5c20,
    0 8px 0 rgba(120, 0, 80, 0.18);
}

.loading-number {
  font-size: clamp(6rem, 30vw, 11rem);
  animation: number-pulse 1.2s ease-in-out infinite;
}

.loader-ring {
  width: 46px;
  height: 46px;
  margin: 28px auto 12px;
  border: 5px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

.sound-toggle {
  position: absolute;
  z-index: 50;
  top: calc(var(--safe-top) + 12px);
  right: calc(var(--safe-right) + 12px);
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(78, 0, 72, 0.28);
  box-shadow: 0 8px 25px rgba(80, 0, 70, 0.18);
  backdrop-filter: blur(10px);
}

.opening-card,
.win-card {
  width: min(92vw, 480px);
  max-height:
    calc(
      100dvh
      - var(--safe-top)
      - var(--safe-bottom)
      - 28px
    );
  overflow: auto;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: clamp(24px, 7vw, 38px);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.29),
      rgba(255, 255, 255, 0.12)
    );
  box-shadow:
    0 18px 55px rgba(76, 0, 70, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
}

.opening-card {
  padding:
    clamp(22px, 6vw, 36px)
    clamp(18px, 5vw, 30px);
}

.glowing-number {
  font-size: clamp(5rem, 25vw, 9rem);
  animation: number-pulse 1.8s ease-in-out infinite;
}

.opening-card h1,
.win-card h1 {
  margin: 10px 0;
  font-size: clamp(1.65rem, 7vw, 2.65rem);
  line-height: 1.12;
  text-shadow: 0 3px 0 rgba(109, 0, 70, 0.18);
}

.subtitle {
  margin: 12px 0 18px;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  font-weight: 800;
  line-height: 1.4;
}

.instructions {
  padding: 13px 16px;
  border-radius: 20px;
  background: rgba(84, 0, 72, 0.2);
  text-align: left;
  line-height: 1.35;
}

.instructions p {
  margin: 6px 0;
}

.ready-text {
  margin: 18px 0 10px;
  font-weight: 900;
}

.primary-button {
  width: min(100%, 320px);
  min-height: 58px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  color: #8a164e;
  background:
    linear-gradient(
      180deg,
      #fff58a,
      #ffc83d
    );
  box-shadow:
    0 8px 0 #ee7b24,
    0 16px 30px rgba(80, 0, 50, 0.25);
  font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  font-weight: 1000;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.primary-button:active {
  transform: translateY(5px) scale(0.98);
  box-shadow:
    0 3px 0 #ee7b24,
    0 8px 20px rgba(80, 0, 50, 0.23);
}

.game-screen {
  padding: 0;
}

.game-hud {
  position: absolute;
  z-index: 25;
  top: calc(var(--safe-top) + 10px);
  left: calc(var(--safe-left) + 10px);
  right: calc(var(--safe-right) + 10px);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding-right: clamp(102px, 29vw, 138px);
}

.hud-pill {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(80, 0, 70, 0.28);
  box-shadow: 0 8px 22px rgba(80, 0, 70, 0.18);
  backdrop-filter: blur(10px);
  font-size: clamp(0.84rem, 3.5vw, 1rem);
  white-space: nowrap;
}

.score-pill strong,
.combo-pill strong {
  margin: 0 2px;
  font-size: 1.16em;
}

.game-area {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

.falling-layer,
.feedback-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.falling-layer {
  z-index: 8;
}

.feedback-layer {
  z-index: 18;
}

.falling-heart {
  position: absolute;
  top: 0;
  width: clamp(66px, 18vw, 94px);
  aspect-ratio: 1;
  will-change: transform;
  filter: drop-shadow(0 7px 7px rgba(85, 0, 70, 0.25));
}

.heart-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path:
    polygon(
      50% 92%,
      42% 84%,
      15% 61%,
      7% 42%,
      8% 26%,
      17% 13%,
      31% 9%,
      42% 15%,
      50% 26%,
      58% 15%,
      69% 9%,
      83% 13%,
      92% 26%,
      93% 42%,
      85% 61%,
      58% 84%
    );
  background: linear-gradient(145deg, #ffffff, #ffe4ed);
  border: 4px solid rgba(255, 255, 255, 0.95);
}

.heart-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55),
      transparent 36%
    );
  pointer-events: none;
}

.falling-heart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.05);
}

.player {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: calc(var(--safe-bottom) - 4px);
  width: clamp(110px, 32vw, 180px);
  transform: translateX(-50%);
  will-change: left;
  pointer-events: none;
}

.player img {
  display: block;
  width: 100%;
  height: auto;
}

.basket-hitbox {
  position: absolute;

  /*
   * Collision area for the actual opening of Robin's basket.
   * The PNG includes transparent space above the basket, so this
   * must be positioned relative to the visible basket rather than
   * the top of the image canvas.
   */
  left: 25%;
  top: 18%;
  width: 50%;
  height: 8.5%;

  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.floating-feedback {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 1000;
  font-size: clamp(1rem, 5vw, 1.45rem);
  text-shadow:
    0 2px 0 rgba(80, 0, 50, 0.28),
    0 0 10px #ffffff;
  animation: feedback-rise 0.75s ease-out forwards;
}

.floating-feedback.correct {
  color: #edff87;
}

.floating-feedback.wrong {
  color: #ffffff;
}

.combo-message {
  position: absolute;
  z-index: 23;
  left: 50%;
  top: 23%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 999px;
  color: #7b1749;
  background: #fff58a;
  box-shadow: 0 10px 30px rgba(70, 0, 60, 0.28);
  font-weight: 1000;
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  animation: combo-pop 1s ease forwards;
}

.final-banner {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 88vw;
  padding: 15px 25px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  color: #8b144f;
  background:
    linear-gradient(
      180deg,
      #fffbd0,
      #ffd43d
    );
  box-shadow:
    0 0 30px #fff26c,
    0 16px 45px rgba(80, 0, 70, 0.32);
  font-size: clamp(1.7rem, 9vw, 3rem);
  font-weight: 1000;
  animation: final-pulse 0.72s ease-in-out infinite alternate;
}

.score-final-pulse {
  animation: score-pulse 0.65s ease-in-out infinite alternate;
}

.correct-flash::before,
.wrong-flash::before,
.final-glow::before {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  pointer-events: none;
}

.correct-flash::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 238, 100, 0.45),
      rgba(42, 255, 142, 0.16),
      transparent 68%
    );
  animation: flash-out 0.42s ease-out forwards;
}

.wrong-flash::before {
  background: rgba(255, 20, 55, 0.31);
  animation: flash-out 0.45s ease-out forwards;
}

.final-glow::before {
  box-shadow:
    inset 0 0 90px 30px rgba(255, 246, 96, 0.7);
  animation:
    final-screen-glow 1s ease-in-out infinite alternate;
}

.screen-shake {
  animation: screen-shake 0.34s linear;
}

.win-screen {
  z-index: 60;
  background:
    linear-gradient(
      145deg,
      rgba(255, 33, 96, 0.9),
      rgba(97, 31, 255, 0.92)
    );
}

.win-card {
  position: relative;
  padding: 18px 20px 26px;
  overflow: hidden;
}

.win-number {
  position: absolute;
  right: 5%;
  top: 2%;
  font-size: clamp(5rem, 30vw, 10rem);
  opacity: 0.38;
  transform: rotate(10deg);
}

.win-robin {
  position: relative;
  z-index: 2;
  display: block;
  width: min(70vw, 310px);
  max-height: 42dvh;
  object-fit: contain;
  margin: 0 auto -4px;
  filter:
    drop-shadow(
      0 12px 18px rgba(69, 0, 55, 0.26)
    );
}

.win-card h2 {
  margin: 0;
  color: #fff38a;
  font-size: clamp(2rem, 9vw, 3.3rem);
}

.win-card h1 {
  position: relative;
  z-index: 2;
}

.win-card p {
  margin: 8px 0;
  line-height: 1.4;
  font-weight: 700;
}

.win-count {
  color: #fff38a;
  font-size: 1.1em;
}

.win-card .primary-button {
  margin-top: 12px;
}

.confetti-particle {
  position: absolute;
  z-index: 70;
  top: -8vh;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}

.error-toast {
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 18px);
  transform: translateX(-50%);
  width: min(90vw, 430px);
  padding: 12px 16px;
  border-radius: 14px;
  color: #ffffff;
  background: rgba(80, 0, 30, 0.88);
  text-align: center;
}

.orientation-blocker {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  place-items: center;
  align-content: center;
  padding: 28px;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #ff315f,
      #803cff
    );
  text-align: center;
}

.rotate-symbol {
  font-size: 5rem;
  animation: rotate-hint 1.5s ease-in-out infinite;
}

.orientation-blocker h2 {
  margin: 15px 0 6px;
  font-size: clamp(1.6rem, 5vw, 2.5rem);
}

.orientation-blocker p {
  margin: 0;
}

@media (orientation: landscape) and (max-height: 600px) {
  .orientation-blocker {
    display: grid;
  }
}

@media (max-height: 700px) {
  .opening-card {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .glowing-number {
    font-size: 4.7rem;
  }

  .opening-card h1 {
    font-size: 1.55rem;
  }

  .instructions {
    padding: 8px 13px;
  }

  .instructions p {
    margin: 3px 0;
  }

  .ready-text {
    margin: 9px 0 6px;
  }

  .primary-button {
    min-height: 50px;
  }

  .player {
    width: clamp(95px, 27.5vw, 145px);
  }
}

@media (min-width: 700px) and (orientation: portrait) {
  .player {
    width: min(25vw, 195px);
  }

  .falling-heart {
    width: min(14vw, 100px);
  }
}

@keyframes gradient-shift {
  to {
    background-position: 100% 100%;
  }
}

@keyframes glow-float {
  to {
    transform: translate(18vw, -4vh) scale(1.2);
  }
}

@keyframes ambient-float {
  from {
    transform:
      translate3d(0, 110vh, 0)
      rotate(0deg);
  }

  to {
    transform:
      translate3d(var(--drift), -20vh, 0)
      rotate(360deg);
  }
}

@keyframes number-pulse {
  50% {
    transform: scale(1.06) rotate(-2deg);
    filter: brightness(1.13);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes feedback-rise {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 0)
      scale(0.72);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -85px)
      scale(1.15);
  }
}

@keyframes combo-pop {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.35)
      rotate(-6deg);
  }

  24% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.13)
      rotate(2deg);
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -90%)
      scale(0.94);
  }
}

@keyframes final-pulse {
  to {
    transform:
      translate(-50%, -50%)
      scale(1.08);
  }
}

@keyframes score-pulse {
  to {
    transform: scale(1.1);
    box-shadow: 0 0 28px #fff26c;
  }
}

@keyframes flash-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes final-screen-glow {
  to {
    opacity: 0.35;
  }
}

@keyframes screen-shake {
  0%,
  100% {
    transform: translate(0);
  }

  20% {
    transform: translate(-8px, 3px);
  }

  40% {
    transform: translate(7px, -3px);
  }

  60% {
    transform: translate(-5px, -2px);
  }

  80% {
    transform: translate(5px, 2px);
  }
}

@keyframes confetti-fall {
  to {
    transform:
      translate3d(var(--x-drift), 115vh, 0)
      rotate(var(--spin));
    opacity: 0.9;
  }
}

@keyframes rotate-hint {
  50% {
    transform:
      rotate(90deg)
      scale(1.08);
  }
}