* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #1a1a2e;
  color: #eee;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 24px 16px 40px;
  gap: 24px;
}

h1 {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #ccc;
}

.wheel-container {
  position: relative;
  width: min(1100px, 95vw);
  height: min(1100px, 95vw);
}

.pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 38px solid #f0f0f0;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

#wheelCanvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

#spinBtn {
  padding: 14px 48px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(229,57,53,0.4);
}

#spinBtn:hover {
  background: #ef5350;
  transform: translateY(-1px);
}

#spinBtn:active {
  transform: translateY(1px);
}

#spinBtn:disabled {
  background: #555;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.result {
  text-align: center;
  min-height: 68px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.result.visible {
  opacity: 1;
  pointer-events: auto;
}

.result-emotion {
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFD54F;
  margin-bottom: 8px;
}

.result-path {
  font-size: 0.95rem;
  color: #aaa;
  letter-spacing: 0.04em;
}

/* ── Mode Switch ──────────────────────────────────────────────────────────── */

.mode-switch {
  position: relative;
  display: inline-flex;
  background: #2a2a3e;
  border: 1px solid #4a4a6a;
  border-radius: 30px;
  padding: 3px;
  cursor: pointer;
  margin-top: -8px;
}

.switch-pill {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: #4a4a70;
  border: 1px solid #6a6a99;
  border-radius: 26px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.mode-switch.is-eightball .switch-pill {
  transform: translateX(100%);
}

.mode-opt {
  position: relative;
  z-index: 1;
  padding: 6px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #888;
  border-radius: 26px;
  transition: color 0.2s;
  white-space: nowrap;
  min-width: 96px;
  text-align: center;
  user-select: none;
}

.mode-switch:not(.is-eightball) .mode-opt[data-val="wheel"],
.mode-switch.is-eightball .mode-opt[data-val="eightball"] {
  color: #ccc;
}

/* ── Section Visibility ───────────────────────────────────────────────────── */

#wheelSection,
#eightBallSection {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  /* shift content 10% above true center */
  padding-bottom: 20vh;
  opacity: 1;
  transition: opacity 0.28s ease;
}

#wheelSection.hidden,
#eightBallSection.hidden {
  display: none;
}

#wheelSection.section-exit,
#eightBallSection.section-exit {
  opacity: 0;
  pointer-events: none;
}

#wheelSection.section-enter,
#eightBallSection.section-enter {
  opacity: 0;
}

#eightBallSection {
  gap: 36px;
}

/* ── 8-Ball ───────────────────────────────────────────────────────────────── */

.eight-ball {
  width: min(420px, 85vw);
  height: min(420px, 85vw);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3a3a, #000 65%);
  box-shadow: 0 0 60px rgba(0,0,0,0.8), 0 20px 40px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ball-number {
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.5rem;
  font-weight: 900;
  color: #111;
  position: absolute;
  transition: opacity 0.5s ease 0.15s;
  user-select: none;
}

.ball-window {
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #283593, #0d1257);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: opacity 0.5s ease 0.15s;
  padding: 14px;
}

.emotion-text {
  color: #9fa8da;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.emotion-text strong {
  display: block;
  font-size: 1.15rem;
  color: #fff;
  margin-top: 4px;
  font-weight: 700;
}

.eight-ball.shaking {
  animation: ballShake 0.85s ease;
}

.eight-ball.revealed .ball-number {
  opacity: 0;
}

.eight-ball.revealed .ball-window {
  opacity: 1;
}

@keyframes ballShake {
  0%   { transform: rotate(0deg)    scale(1);    }
  8%   { transform: rotate(-10deg)  scale(0.97) translateX(-6px); }
  18%  { transform: rotate(10deg)   scale(1.02) translateX(6px);  }
  28%  { transform: rotate(-8deg)   scale(0.98) translateX(-4px); }
  38%  { transform: rotate(8deg)    scale(1.01) translateX(4px);  }
  50%  { transform: rotate(-5deg)   translateX(-3px); }
  62%  { transform: rotate(5deg)    translateX(3px);  }
  74%  { transform: rotate(-2deg)   translateX(-2px); }
  86%  { transform: rotate(2deg)    translateX(2px);  }
  93%  { transform: rotate(-1deg);  }
  100% { transform: rotate(0deg)    scale(1);    }
}

#eightBallBtn {
  padding: 14px 48px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: #111;
  color: #fff;
  border: 2px solid #333;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, border-color 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

#eightBallBtn:hover {
  background: #1c1c1c;
  border-color: #555;
  transform: translateY(-1px);
}

#eightBallBtn:active {
  transform: translateY(1px);
}

#eightBallBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

footer {
  margin-top: auto;
  font-size: 0.78rem;
  color: #666;
  text-align: center;
  line-height: 1.6;
  max-width: 550px;
}

footer a {
  color: #888;
  text-decoration: underline;
}

footer a:hover {
  color: #aaa;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  body {
    padding: 14px 10px 20px;
    gap: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  #wheelSection,
  #eightBallSection {
    gap: 16px;
    padding-bottom: 4vh;
  }

  #eightBallSection {
    gap: 20px;
  }

  #spinBtn,
  #eightBallBtn {
    padding: 14px 32px;
    font-size: 1.15rem;
    white-space: nowrap;
  }

  .result-emotion {
    font-size: 1.8rem;
  }

  .result-path {
    font-size: 1rem;
  }

  .emotion-text {
    font-size: 1rem;
  }

  .emotion-text strong {
    font-size: 1.3rem;
  }
}