* {
  box-sizing: border-box;
}

:root {
  --nav-height: calc(40px + env(safe-area-inset-top, 0px));
}

.nav {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  background: #4c0eb1;
  box-shadow: 0 2px 10px #02061726;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #142b85;
  text-decoration: none;
}

.nav-logo img {
  display: block;
  width: 150px;
  height: 34px;
  object-fit: contain;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  color: #fff;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: #080f2c;
}

button {
  font: inherit;
}

.hidden {
  display: none !important;
}

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: var(--nav-height);
  align-items: center;
  justify-content: flex-start;
  background: #080f2c url("img/bg3.jpg") center / cover no-repeat;
}

.game {
  position: relative;
  flex-shrink: 0;
  width: min(100vw, calc((100dvh - var(--nav-height)) * 0.5628), 560px);
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  background: url("img/moon-background.jpg") center / 100% 100% no-repeat;
  box-shadow: 0 0 70px #020617;
}

.info {
  width: min(calc(100% - 32px), 720px);
  margin: 24px 0 40px;
  padding: clamp(18px, 4vw, 30px);
  border: 3px solid #283879;
  border-radius: 24px;
  color: #303958;
  background: linear-gradient(145deg, #fffbea, #fff0d5);
  box-shadow: inset 0 0 0 2px #ffe4a0, 0 5px 0 #17214e, 0 12px 24px #02061740;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.info-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: #142b85;
  font-size: clamp(19px, 4.5vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.info-title::before {
  content: "";
  flex: 0 0 20px;
  height: 20px;
  border: 2px solid #263777;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #fff6b1, #ffd34d 65%, #e7a52b);
  box-shadow: 0 2px 0 #263777;
}

.info-list + .info-title {
  padding-top: 16px;
  border-top: 1px solid #d7bc805c;
}

.info-list {
  margin: 0 0 16px;
  padding-left: 1.25em;
}

.info-list li::marker {
  color: #b87816;
}

.info-list li + li {
  margin-top: 5px;
}

.info-notes {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.info-notes li {
  padding-left: 1.15em;
  text-indent: -1.15em;
}

.info a {
  color: #194da6;
  text-underline-offset: 3px;
}

.info strong {
  color: #b63820;
  font-weight: 900;
  background: linear-gradient(transparent 65%, #ffe18b 65%);
}

.game-title {
  position: absolute;
  z-index: 2;
  top: 2.5%;
  right: 7%;
  left: 7%;
  text-align: center;
  transform: scale(1.1025);
  animation: titleFloat 3s ease-in-out infinite;
}

@keyframes titleFloat {
  0%, 100% {
    transform: translateY(-5px) scale(1.1025);
  }
  50% {
    transform: translateY(5px) scale(1.1025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-title {
    animation: none;
  }
}

.status {
  position: absolute;
  z-index: 3;
  top: 27%;
  right: 15%;
  left: 15%;
  display: flex;
  justify-content: space-between;
  gap: 6%;
  pointer-events: none;
}

.status span {
  min-width: 42%;
  padding: 3% 5%;
  border: 3px solid #27277a;
  border-radius: 20px;
  color: #162d75;
  font-size: clamp(12px, 3.5vw, 19px);
  font-weight: 900;
  text-align: center;
  background: #fff0d8e8;
  box-shadow: 0 5px 0 #242461aa;
}

.status b {
  margin-left: 0.3em;
  color: #ef5b3d;
  font-size: 1.35em;
}

.intro,
.play {
  position: absolute;
  inset: 0;
}

.image-button {
  position: absolute;
  z-index: 8;
  right: 14%;
  bottom: 3.1%;
  left: 14%;
  width: 72%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 7px 8px #07122a88);
  transition: transform 0.15s;
}

.image-button:hover {
  transform: scale(1.025);
}

.image-button:active {
  transform: translateY(4px) scale(0.99);
}

.image-button img {
  display: block;
  width: 100%;
  height: auto;
}

/* The field covers the whole artwork, so hole positions match the background. */
.field {
  position: absolute;
  z-index: 5;
  inset: 0;
}

.holeWrap {
  position: absolute;
  width: 29%;
  height: 18%;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keep the visible rabbit's expanded hit area above neighboring holes. */
.holeWrap:has(.rabbit.up) {
  z-index: 8;
}

.holeWrap:has(.rabbit.up)::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--rabbit-x, 50%);
  bottom: calc(var(--rabbit-bottom, -6%) - 10%);
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: auto;
}

/* Positions are based on the six holes in moon-background.jpg. */
.holeWrap:nth-child(1) {
  top: 38.7%;
  left: 10.5%;
  --rabbit-x: 57%;
  --rabbit-bottom: 8%;
}

.holeWrap:nth-child(2) {
  top: 38.7%;
  right: 10.5%;
  --rabbit-x: 41%;
  --rabbit-bottom: 8%;
}

.holeWrap:nth-child(3) {
  top: 51.3%;
  left: 35.5%;
  --rabbit-x: 47.5%;
  --rabbit-bottom: 1.5%;
}

.holeWrap:nth-child(4) {
  top: 62.3%;
  left: 10.5%;
  --rabbit-x: 32.5%;
  --rabbit-bottom: 8%;
}

.holeWrap:nth-child(5) {
  top: 62.3%;
  right: 10.5%;
  --rabbit-x: 63%;
  --rabbit-bottom: 6.5%;
}

.holeWrap:nth-child(6) {
  top: 75.4%;
  left: 35.5%;
  --rabbit-x: 45.5%;
  --rabbit-bottom: 6%;
}

.rabbit {
  position: absolute;
  z-index: 2;
  /* Match each painted opening's center and inner front rim. */
  bottom: var(--rabbit-bottom, -6%);
  left: var(--rabbit-x, 50%);
  width: 100%;
  aspect-ratio: 1312 / 1199;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 35%);
  transition:
    opacity 0.08s,
    transform 0.2s cubic-bezier(0.2, 1.3, 0.4, 1),
    visibility 0s 0.2s;
}

.rabbit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/moon-rabbit.png") center bottom / contain no-repeat;
  clip-path: inset(0 0 15% 0);
}

.rabbit.up {
  opacity: 1;
  visibility: visible;
  filter: drop-shadow(0 0 4px #fff6b8) drop-shadow(0 0 10px #ffd34dcc);
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.rabbit.bonk {
  filter: brightness(1.12) drop-shadow(0 0 6px #fffbe0) drop-shadow(0 0 15px #ffd34d);
  transform: translate(-50%, 0) rotate(-9deg) scale(0.9);
}

.plus {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 5%;
  color: #ff4935;
  font-size: clamp(16px, 5vw, 28px);
  font-weight: 900;
  text-shadow: 0 2px #fff;
  animation: pop 0.45s forwards;
}

@keyframes pop {
  to {
    opacity: 0;
    transform: translateY(-24px) scale(1.3);
  }
}

.overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  background: #080b25bb;
  backdrop-filter: blur(4px);
}

.countdown {
  container-type: inline-size;
}

.countdown b {
  display: grid;
  flex: 0 0 46%;
  width: 46%;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #142b85;
  font-size: 22cqw;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 -1px 1px #6b88dc,
    0 2px 0 #0c206c,
    0 4px 0 #091953,
    0 6px 4px #99560088;
  background: url("img/ymoon.png") center / 100% 100% no-repeat;
  box-shadow:
    0 0 0 7px #15277f,
    0 12px 20px #02061780;
  animation: pulse 0.7s;
}

@keyframes pulse {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

.result-card {
  position: relative;
  width: min(100%, 500px);
}

.result:not(.hidden) .result-card {
  animation: resultPop 0.55s ease-out both;
}

@keyframes resultPop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.65);
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }
  82% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result:not(.hidden) .result-card {
    animation: none;
  }
}

.result-card > img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px #0009);
}

.result-action {
  position: absolute;
  display: block;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.form-action {
  top: 68%;
  right: 15%;
  left: 15%;
  height: 12%;
}

.again-action {
  top: 84%;
  right: 23%;
  left: 23%;
  height: 10%;
}

.result-card.failure .form-action {
  display: none;
}

.result-card.failure .again-action {
  top: 74%;
  right: 15%;
  left: 15%;
  height: 14%;
}

@media (min-width: 600px) {
  .game {
    margin: 18px 0;
    border-radius: 28px;
  }
}