/* Spin the Moon: the lAr moon's görev (js/tasks/spin.js).
   The drawn moon itself (.moon-fig, .moon-quarter, .moon-half) is shared with
   the engine's moon beats and stays in base.css; everything spin-only lives
   here. */

/* The court covers the screen but takes no taps (holding is read from the
   document), so the counter and the map orb stay reachable. */
.spin-court {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* The moon sits low, full and heavy, and turns as one piece. The rotation
   lives in an inline transform (engine.js owns it), so no animation may
   touch transform here. */
.spin-moon {
  position: fixed;
  left: 50%;
  bottom: 15vh; /* clear of the hint line, with sky above it to fall through */
  margin: 0;
  width: clamp(150px, 26vh, 210px);
  opacity: 1;
  transform: translateX(-50%);
  will-change: transform;
  transition: box-shadow 0.3s ease;
}
.spin-moon.happy { animation: moon-happy 0.6s ease; }
.spin-moon.sad { animation: moon-sad 0.55s ease; }
/* Four faces: the seams run diagonally, so the quarters sit squarely at
   N, E, S and W, each label in the middle of its own wedge. Works for the
   tappable intro moon and the spinning görev moon alike. */
.moon-fig.quad { display: block; overflow: hidden; }
.moon-fig.quad::before { transform: rotate(45deg); }
.moon-fig.quad::after {
  content: '';
  position: absolute;
  left: 5%; right: 5%; top: 50%;
  border-top: 1px dashed rgba(243, 234, 216, 0.35);
  transform: rotate(-45deg);
}
/* Each quarter IS its wedge: a full-size layer clipped to its triangle, so
   the whole slice takes the tap, not just the suffix. Hit-testing respects
   the clip-path, so overlapping layers never steal each other's clicks. The
   label sits where it always did, pushed to its wedge's outer edge. */
.moon-quarter {
  position: absolute;
  inset: 0;
  display: flex;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.4vh, 1.3rem);
  color: #74B0FF;
  text-shadow: 0 0 12px rgba(116, 176, 255, 0.55);
}
.moon-quarter.q0 { clip-path: polygon(50% 50%, 0 0, 100% 0); align-items: flex-start; justify-content: center; padding-top: 8%; }
.moon-quarter.q1 { clip-path: polygon(50% 50%, 100% 0, 100% 100%); align-items: center; justify-content: flex-end; padding-right: 9%; }
.moon-quarter.q2 { clip-path: polygon(50% 50%, 100% 100%, 0 100%); align-items: flex-end; justify-content: center; padding-bottom: 8%; }
.moon-quarter.q3 { clip-path: polygon(50% 50%, 0 100%, 0 0); align-items: center; justify-content: flex-start; padding-left: 9%; }
/* A quarter with places to give invites the tap: the whole wedge glows. */
.moon-quarter.drops { cursor: pointer; transition: text-shadow 0.3s ease, background 0.3s ease; }
.moon-quarter.drops:hover, .moon-quarter.drops:focus-visible {
  background: rgba(116, 176, 255, 0.08);
  text-shadow: 0 0 22px rgba(116, 176, 255, 0.95);
  outline: none;
}

/* A wrong word breaks against the moon: its letters scatter and fade. */
.spin-shard {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream);
  animation: shard-fly 0.8s ease-out forwards;
}
@keyframes shard-fly {
  to {
    transform: translate(var(--sx, 0px), var(--sy, -60px)) rotate(var(--sr, 0deg));
    opacity: 0;
  }
}
@keyframes moon-happy {
  30% { box-shadow: 0 0 60px rgba(116, 176, 255, 0.65), inset -10px -12px 26px rgba(0, 0, 0, 0.28); }
}
@keyframes moon-sad {
  25%, 75% { box-shadow: 0 0 40px rgba(217, 138, 138, 0.55), inset -10px -12px 26px rgba(0, 0, 0, 0.28); filter: saturate(0.5); }
}

/* The falling word: its deciding last vowel lit by engine.js. */
.spin-word {
  position: fixed;
  transform: translate(-50%, -50%);
  will-change: top;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  color: var(--cream);
  text-shadow: 0 0 12px rgba(243, 234, 216, 0.3);
}
.spin-word .spin-suffix { color: #74B0FF; text-shadow: 0 0 10px rgba(116, 176, 255, 0.6); }

/* The correction: the plural the word really wanted, shown over the moon. */
.spin-flash {
  position: fixed;
  left: 50%;
  bottom: min(36vh, 320px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.spin-flash.show { opacity: 1; transition: opacity 0.25s ease; }
.spin-flash .spin-word { position: static; transform: none; }

/* The one instruction, shown until the first hold teaches itself. */
.spin-tutorial {
  position: fixed;
  left: 50%;
  bottom: calc(15vh + clamp(150px, 26vh, 210px) + 24px);
  transform: translateX(-50%);
  max-width: 18em;
  padding: 0.7em 1.1em;
  border: 1px solid rgba(116, 176, 255, 0.35);
  border-radius: 16px;
  background: rgba(18, 14, 36, 0.62);
  backdrop-filter: blur(3px);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.3vw, 1.1rem);
  line-height: 1.45;
  color: var(--cream);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.spin-tutorial.show { opacity: 1; animation: spin-tut 2.2s ease-in-out infinite; }
@keyframes spin-tut {
  50% { box-shadow: 0 0 28px rgba(116, 176, 255, 0.4); border-color: rgba(116, 176, 255, 0.7); }
}