/* ==========================================================================
   moon.css: the secret "Shoot the Moon" toy in the hero (moon.js)
   A Jumpshot crossover. Everything lives in .moon-layer inside .hero-stage.
   The layer never takes pointer events; only the ball and the scoreboard do.
   ========================================================================== */

.moon-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --mb-bg: #171329;
  --mb-surface: #2b2345;
  --mb-acc: #ff9f2e;
  --mb-acc-2: #ff4f86;
  --mb-ink: #f3ead0;
  --mb-ball: 26px;
}
.moon-layer.is-hidden .moon-perch { display: none; }

.moon-fx {
  position: absolute;
  z-index: 2; /* sparks and splashes play over the sulking moon */
  left: 0;
  top: 0;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── The ball on its post ──────────────────────────────────────────────── */
/* .moon-perch sits exactly on the ball's contact point (bottom centre) */
.moon-perch {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.moon-ball {
  position: absolute;
  left: -22px;
  top: calc(var(--mb-ball) / -2 - 22px); /* 44px target centred on the ball, which sits on y = 0 */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.moon-ball.is-held { cursor: grabbing; }
.moon-ball:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; border-radius: 50%; }

.moon-bob {
  display: block;
  width: var(--mb-ball);
  height: var(--mb-ball);
  transform-origin: 50% 100%;
  animation: moon-idle 5s steps(1, end) infinite;
}
.moon-sprite {
  display: block;
  width: var(--mb-ball);
  height: var(--mb-ball);
  max-width: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 5px rgba(255, 106, 60, .28));
  transition: transform .18s var(--ease-out);
}
.moon-sprite.is-snap { transition: transform .34s var(--ease-back); }
.moon-layer.is-dragging .moon-sprite { transition: none; } /* the ball stays glued to the finger */
@media (hover: hover) and (pointer: fine) {
  .moon-ball:hover .moon-sprite { transform: translateY(-2px); }
}

.moon-shadow {
  position: absolute;
  left: calc(var(--mb-ball) * -.44);
  top: -3px;
  width: calc(var(--mb-ball) * .88);
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  animation: moon-shadow 5s steps(1, end) infinite;
  transition: opacity .2s;
}

/* one small hop every five seconds */
@keyframes moon-idle {
  0%, 84% { transform: none; }
  85% { transform: translateY(1px) scale(1.08, .9); }
  86.5% { transform: translateY(-4px); }
  88% { transform: translateY(-7px); }
  89.5% { transform: translateY(-8px); }
  91% { transform: translateY(-6px); }
  92.5% { transform: translateY(-2px); }
  94% { transform: translateY(1px) scale(1.1, .88); }
  95.5% { transform: translateY(-2px); }
  97%, 100% { transform: none; }
}
@keyframes moon-shadow {
  0%, 84% { transform: none; opacity: 1; }
  86.5% { transform: scale(.8); opacity: .75; }
  88%, 91% { transform: scale(.62); opacity: .5; }
  92.5% { transform: scale(.85); opacity: .8; }
  94%, 100% { transform: none; opacity: 1; }
}

.moon-layer.is-off .moon-bob,
.moon-layer.is-off .moon-shadow,
.moon-layer.is-off .moon-hint { animation-play-state: paused; }
.moon-layer.is-dragging .moon-bob,
.moon-layer.is-charging .moon-bob,
.moon-layer.is-away .moon-bob,
.moon-layer.is-dragging .moon-shadow,
.moon-layer.is-charging .moon-shadow,
.moon-layer.is-away .moon-shadow { animation: none; }
.moon-layer.is-dragging .moon-shadow { opacity: .35; }
.moon-layer.is-away .moon-sprite,
.moon-layer.is-away .moon-shadow { opacity: 0; transition: none; }
.moon-layer.is-away .moon-ball { cursor: default; }

/* back on the rail after a shot */
.moon-layer.is-respawn .moon-sprite { animation: moon-drop .62s var(--ease-out) both; }
.moon-layer.is-respawn .moon-shadow { animation: moon-shadow-in .62s var(--ease-out) both; }
.moon-layer.is-respawn .moon-bob { animation: none; } /* hop and shadow restart together */
@keyframes moon-drop {
  0% { transform: translateY(-36px); opacity: 0; }
  25% { opacity: 1; }
  52% { transform: translateY(0) scale(1.14, .84); }
  68% { transform: translateY(-6px); }
  84% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: none; opacity: 1; }
}
@keyframes moon-shadow-in { 0% { opacity: 0; transform: scale(.4); } 52%, 100% { opacity: 1; transform: none; } }

/* charging: the ball crouches */
.moon-layer.is-charging .moon-sprite { transform: translateY(1px) scale(1.06, .92); }

/* ── First-visit hint: a JRPG "look here" marker ───────────────────────── */
.moon-hint {
  position: absolute;
  left: -7px;
  top: calc(var(--mb-ball) * -1 - 19px);
  width: 14px;
  height: 10px;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(242, 177, 62, .55)) drop-shadow(1px 1px 0 rgba(0, 0, 0, .8));
  transition: opacity .5s var(--ease-out);
}
.moon-hint svg { display: block; width: 14px; height: 10px; }
.moon-layer.show-hint .moon-hint { opacity: 1; animation: moon-hint 1.1s steps(1, end) infinite; }
@keyframes moon-hint {
  0%, 100% { transform: none; opacity: 1; }
  50% { transform: translateY(3px); opacity: .7; }
}
.moon-layer.is-away .moon-hint,
.moon-layer.is-dragging .moon-hint,
.moon-layer.is-charging .moon-hint { opacity: 0; animation: none; }

/* ── Tip label and timing meter, beside the ball ───────────────────────── */
.moon-side { position: absolute; left: 0; top: 0; pointer-events: none; }

.moon-tip {
  position: absolute;
  left: 22px;
  top: calc(var(--mb-ball) / -2 - 17px);
  display: grid;
  gap: 3px;
  padding: 6px 9px 5px;
  background: rgba(12, 10, 8, .88);
  border: 1px solid var(--line-2);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
  font-family: var(--f-pixel);
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s, transform .22s var(--ease-out);
}
.moon-tip-b { color: var(--gold); font-size: 10px; letter-spacing: .14em; }
.moon-tip-b:empty { display: none; }
.side-left .moon-tip { left: auto; right: 22px; transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .moon-ball:hover ~ .moon-side .moon-tip { opacity: 1; transform: none; }
}
.moon-ball:focus-visible ~ .moon-side .moon-tip,
.moon-layer.show-tip .moon-tip { opacity: 1; transform: none; }
.moon-layer.is-dragging .moon-tip,
.moon-layer.is-charging .moon-tip,
.moon-layer.is-away .moon-tip { opacity: 0 !important; }

/* Jumpshot's battle meter: dark well, bone frame, green sweet spot with a yellow line */
.moon-meter-wrap {
  position: absolute;
  left: 24px;
  top: calc(var(--mb-ball) / -2 - 36px);
  display: grid;
  justify-items: start;
  gap: 8px;
  opacity: 0;
  transform: scale(.7);
  transform-origin: 0 50%;
  transition: opacity .12s, transform .22s var(--ease-back);
}
.side-left .moon-meter-wrap { left: auto; right: 24px; justify-items: end; transform-origin: 100% 50%; }
.moon-layer.is-charging .moon-meter-wrap { opacity: 1; transform: none; }
.moon-meter {
  position: relative;
  display: block;
  width: 14px;
  height: 72px;
  background: #0d0b1a;
  box-shadow: 0 0 0 2px #d9d0b8, 0 0 0 4px #0b0816, 5px 5px 0 4px rgba(0, 0, 0, .45);
}
.moon-meter-sweet { position: absolute; left: 0; right: 0; background: #34ad47; }
.moon-meter-sweet::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #e4e25a;
}
.moon-meter-mark {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px #0b0816;
}
.moon-meter.is-sweet .moon-meter-mark { background: #e4e25a; box-shadow: 0 0 0 1px #0b0816, 0 0 8px rgba(228, 226, 90, .8); }
.moon-meter-cap {
  font-family: var(--f-pixel);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
  margin-left: -4px;
}
.side-left .moon-meter-cap { margin: 0 -4px 0 0; }

/* ── The sulking headband moon ─────────────────────────────────────────── */
.moon-swap {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .7s var(--ease-io), transform .7s var(--ease-io);
  -webkit-user-select: none;
  user-select: none;
}
.moon-swap.is-on {
  opacity: 1;
  transform: none;
  animation: moon-pop .64s var(--ease-out) both;
  transition: opacity .12s, transform .3s var(--ease-out);
  filter: drop-shadow(0 0 22px rgba(255, 159, 46, .28));
}
@keyframes moon-pop {
  0% { transform: scale(.3); opacity: 0; }
  16% { opacity: 1; }
  36% { transform: scale(1.17, .83); }
  54% { transform: scale(.9, 1.1); }
  72% { transform: scale(1.05, .96); }
  88% { transform: scale(.99, 1.01); }
  100% { transform: none; opacity: 1; }
}

/* ── Scoreboard ────────────────────────────────────────────────────────── */
.moon-board {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: min(336px, calc(100% - 32px));
  padding: 15px 16px 17px;
  color: var(--mb-ink);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    var(--mb-bg);
  box-shadow:
    inset 0 0 0 2px #e9dfc4,
    inset 0 0 0 4px var(--mb-bg),
    inset 0 0 0 5px rgba(233, 223, 196, .18),
    0 0 0 2px #07050f,
    7px 7px 0 2px rgba(0, 0, 0, .55);
  font-family: var(--f-pixel);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.55);
  transition: opacity .45s var(--ease-io), visibility 0s linear .45s, transform .45s var(--ease-io);
}
.moon-board.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .1s, visibility 0s, transform .32s steps(4, end);
}

.moon-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: rgba(243, 234, 208, .6);
  transition: color .15s;
}
.moon-x::before { content: ''; position: absolute; inset: -5px; }
.moon-x:hover { color: var(--mb-ink); }
.moon-x .ic { width: 16px; height: 16px; }

.moon-board-k {
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mb-acc);
  padding-right: 34px;
}
.moon-board-k span { color: var(--mb-acc-2); letter-spacing: .1em; }

/* the score sits in a dark well, like the board over a court */
.moon-score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 .3em;
  margin: 12px 0 12px;
  padding: 9px 14px 7px;
  background: rgba(7, 5, 15, .55);
  box-shadow: inset 0 0 0 1px rgba(233, 223, 196, .14), inset 0 3px 0 rgba(0, 0, 0, .35);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: .06em;
  white-space: nowrap;
}
.moon-team { display: inline-flex; align-items: baseline; gap: .35em; }
.moon-tn { font-size: .62em; letter-spacing: .2em; color: rgba(243, 234, 208, .72); }
.moon-num { font-weight: 400; color: rgba(243, 234, 208, .82); }
.moon-num.is-you {
  color: var(--mb-acc);
  text-shadow: 0 0 12px rgba(255, 159, 46, .55);
  display: inline-block;
}
.moon-board.is-on .moon-num.is-you { animation: moon-tally .5s steps(3, end) .25s both; }
@keyframes moon-tally { 0% { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; } }
.moon-sep { color: var(--mb-acc-2); }

.moon-line {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .1em;
  color: rgba(243, 234, 208, .86);
}
.moon-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.moon-actions .btn { min-height: 44px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); }
.moon-wish { flex: 1 1 auto; }
.moon-share { --b-bg: rgba(43, 35, 69, .9); --b-bd: rgba(233, 223, 196, .35); }

@media (max-width: 480px) {
  .moon-board { padding: 13px 14px 15px; }
  .moon-score { font-size: 24px; padding-inline: 12px; }
}

/* ── Reduced motion: no hop, no pulsing, no squash; things simply fade ─── */
.reduce-motion .moon-bob,
.reduce-motion .moon-shadow,
.reduce-motion .moon-layer.show-hint .moon-hint { animation: none; }
.reduce-motion .moon-layer.is-respawn .moon-sprite { animation: moon-fade .4s linear both; }
.reduce-motion .moon-layer.is-respawn .moon-shadow { animation: none; }
.reduce-motion .moon-swap,
.reduce-motion .moon-swap.is-on { animation: none; transform: none; }
.reduce-motion .moon-board,
.reduce-motion .moon-board.is-on { transform: none; }
.reduce-motion .moon-board.is-on .moon-num.is-you { animation: none; }
@keyframes moon-fade { from { opacity: 0; } to { opacity: 1; } }