body[data-game="falling-star-catch"] {
  background:
    radial-gradient(circle at 18% 8%, rgba(127, 212, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #071a46 0%, #102a63 54%, #203b72 100%);
}

body[data-game="falling-star-catch"] .stage-wrap {
  border-color: rgba(255, 226, 141, 0.32);
  background: #0b1f50;
  box-shadow: 0 18px 44px rgba(5, 14, 40, 0.38);
}

body[data-game="falling-star-catch"] .hud {
  border-color: rgba(255, 226, 141, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.88)),
    #ffffff;
  box-shadow: 0 18px 44px rgba(5, 14, 40, 0.18);
}

body[data-game="falling-star-catch"] .eyebrow {
  color: #c77b19;
}

body[data-game="falling-star-catch"] .primary {
  background: linear-gradient(180deg, #ffc94c, #e58b23);
  color: #2b210f;
  box-shadow: 0 12px 24px rgba(231, 139, 35, 0.28);
}

body[data-game="falling-star-catch"] .secondary {
  border-color: rgba(247, 184, 63, 0.42);
  background: #fffaf0;
  color: #243451;
}

body[data-game="falling-star-catch"] .screen {
  background:
    linear-gradient(180deg, rgba(4, 12, 34, 0.18), rgba(4, 12, 34, 0.72)),
    url("./assets/night-garden-background.png") center / cover;
}

body[data-game="falling-star-catch"] .screen-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 236, 169, 0.44);
  background: linear-gradient(180deg, rgba(12, 28, 72, 0.92), rgba(22, 42, 88, 0.82));
  color: #fff7d8;
  box-shadow: 0 24px 70px rgba(2, 8, 28, 0.48);
}

body[data-game="falling-star-catch"] .screen-card::before {
  content: "";
  position: absolute;
  inset: -36px -20px auto auto;
  width: 150px;
  height: 150px;
  background: url("./assets/star.png") center / contain no-repeat;
  opacity: 0.3;
  transform: rotate(10deg);
}

body[data-game="falling-star-catch"] .screen-card h1,
body[data-game="falling-star-catch"] .screen-card h2 {
  color: #fff3bd;
  text-shadow: 0 4px 18px rgba(255, 205, 65, 0.34);
}

body[data-game="falling-star-catch"] .screen-card p {
  color: #dce9ff;
}

body[data-game="falling-star-catch"] .screen-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

body[data-game="falling-star-catch"] .summary-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(255, 226, 141, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
}

body[data-game="falling-star-catch"] .summary-item strong {
  color: #ffe071;
  font-size: 1.26rem;
  line-height: 1;
}

body[data-game="falling-star-catch"] .summary-item small {
  color: #bcd0ef;
  font-size: 0.68rem;
  font-weight: 900;
}

@media (max-width: 520px) {
  body[data-game="falling-star-catch"] .screen-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}