/* Magic 8 ball. Layout comes from tool.css (.tool grid, .t-wheel area). */

.t-ball { display: flex; flex-direction: column; align-items: center; }

.ball-stage {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid; place-items: center;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
@media (max-width: 899px) { .ball-stage { width: min(100%, 240px); } }

.ball {
  position: relative; z-index: 1;
  width: 80%; aspect-ratio: 1; padding: 0;
  border: 3px solid var(--foreground); border-radius: var(--r-full);
  background: radial-gradient(circle at 34% 28%, #64748B 0%, var(--foreground) 46%, #0B1120 100%);
  box-shadow: 8px 8px 0 0 var(--foreground);
  overflow: hidden; cursor: pointer;
  transition: transform var(--t-bounce);
}
.ball:hover { transform: scale(1.02) rotate(-2deg); }
.ball:focus-visible { outline: 4px solid var(--ring); outline-offset: 6px; }

.ball-shine {
  position: absolute; left: 16%; top: 9%; width: 34%; height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  transform: rotate(-24deg); pointer-events: none; z-index: 3;
}

/* The white "8" side. */
.ball-front {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--card); border: 3px solid var(--foreground); border-radius: var(--r-full);
  transform: translate(-50%, -50%);
  transition: transform 320ms var(--bounce), opacity 200ms ease;
  z-index: 2;
}
.ball-eight { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.6rem, 10vw, 6rem); line-height: 1; color: var(--foreground); }

/* The answer side, a dark window with the floating triangle. */
.ball-window {
  position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 3px solid #475569; border-radius: var(--r-full);
  background: radial-gradient(circle at 50% 45%, #312E81 0%, #1E1B4B 45%, #0B1120 100%);
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition: transform 320ms var(--bounce), opacity 200ms ease;
  z-index: 1;
}
.ball-tri {
  width: 84%; aspect-ratio: 1 / 0.87;
  display: grid; place-items: end center;
  padding: 0 12% 14%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--yes);
  color: var(--foreground);
}
.tri-maybe { background: var(--maybe); }
.tri-no { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 3px, transparent 3px 10px), var(--no); }
.ball-answer-text {
  display: block; text-align: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(0.62rem, 1.7vw, 0.92rem); line-height: 1.15; letter-spacing: 0.02em;
  max-width: 100%;
}

.ball-stage.is-answered .ball-front { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
.ball-stage.is-answered .ball-window { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.ball-stage.is-answered .ball-tri { animation: tri-rise 950ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tri-rise {
  0% { transform: translateY(18%) scale(0.55) rotate(-14deg); opacity: 0; filter: blur(6px); }
  60% { opacity: 1; filter: blur(1px); }
  100% { transform: none; opacity: 1; filter: none; }
}

.ball-stage.is-shaking .ball { animation: ball-shake 900ms ease-in-out; }
@keyframes ball-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-7%, -3%) rotate(-12deg); }
  26% { transform: translate(6%, 2%) rotate(10deg); }
  40% { transform: translate(-5%, 3%) rotate(-9deg); }
  54% { transform: translate(5%, -2%) rotate(8deg); }
  68% { transform: translate(-3%, 1%) rotate(-5deg); }
  84% { transform: translate(2%, 0) rotate(3deg); }
}

.ball-stage.is-idle .ball { animation: ball-bob 2.2s ease-in-out infinite; }
@keyframes ball-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(-3deg); } }

.ball-shadow {
  position: absolute; left: 50%; bottom: 3%; width: 56%; height: 8%;
  border-radius: 50%; background: var(--foreground); opacity: 0.18;
  transform: translateX(-50%);
}

/* Always-on hint, same style as the wheel and coin hints. */
.ball-hint {
  position: absolute; right: -4%; bottom: 10%; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px;
  background: var(--tertiary); color: var(--foreground);
  border: var(--bw) solid var(--foreground); border-radius: var(--r-full); box-shadow: var(--pop);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; white-space: nowrap;
  transform: rotate(-7deg); pointer-events: none;
  animation: pill-bob 1.3s var(--bounce) infinite alternate;
  transition: opacity 250ms ease;
}
.ball-hint .hand { display: grid; place-items: center; width: 32px; height: 32px; background: var(--card); border: var(--bw) solid var(--foreground); border-radius: var(--r-full); }
.ball-hint .hand .icon { width: 18px; height: 18px; }
.ball-stage.is-shaking .ball-hint { opacity: 0; }
@media (max-width: 899px) { .ball-hint { right: -6%; bottom: 0; font-size: 0.9rem; } }

.shake-btn[hidden] { display: none; }
.verdict-sub { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--muted-fg); }

@media (prefers-reduced-motion: reduce) {
  .ball-stage.is-idle .ball, .ball-hint { animation: none; }
}