/* Magic 8 Ball Styles */
#ball-wrapper { cursor: pointer; display: inline-block; margin: 2rem auto; perspective: 600px; }
#ball {
  width: 260px; height: 260px; border-radius: 50%; margin: 0 auto;
  background: radial-gradient(circle at 35% 35%, #444, #111 60%, #000);
  box-shadow: 0 0 60px rgba(99,102,241,.3), inset 0 -20px 40px rgba(0,0,0,.8), inset 0 20px 40px rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s cubic-bezier(.25,.8,.5,1.4);
  position: relative;
}
#ball.shaking { animation: shake .6s ease-in-out; }
@keyframes shake {
  0%,100% { transform: rotate(0) translateY(0); }
  10% { transform: rotate(-8deg) translateY(-15px); }
  20% { transform: rotate(6deg) translateY(-10px); }
  30% { transform: rotate(-4deg) translateY(-20px); }
  40% { transform: rotate(5deg) translateY(-5px); }
  50% { transform: rotate(-3deg) translateY(-12px); }
  60% { transform: rotate(2deg) translateY(-8px); }
  80% { transform: rotate(-1deg) translateY(-3px); }
}
#ball-window {
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a0a3e, #0d0620);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,.8), 0 0 15px rgba(99,102,241,.2);
}
#triangle {
  width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent;
  border-bottom: 70px solid rgba(30,30,80,.9);
  display: flex; align-items: center; justify-content: center; position: relative;
}
#answer-text {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .7rem; font-weight: 700; text-align: center;
  width: 60px; line-height: 1.2; text-transform: uppercase; letter-spacing: .5px;
  opacity: 0; transition: opacity .5s ease .3s;
}
#answer-text.visible { opacity: 1; }
#answer-text.initial { opacity: 1; font-size: 1.5rem; color: var(--color-accent); }
.history-item { padding: .5rem 0; border-bottom: 1px solid var(--color-border); font-size: .85rem; display: flex; justify-content: space-between; gap: .5rem; }
.history-q { color: var(--color-muted); }
.history-a { font-weight: 600; }
.history-a.positive { color: #22c55e; }
.history-a.negative { color: #ef4444; }
.history-a.neutral { color: #eab308; }