#void-orb {
  position: relative;
  width: 240px;
  height: 240px;
  cursor: pointer;
  user-select: none;
  margin-bottom: var(--gap-xl);
  transition: transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1199px) {
  #void-orb { width: 140px; height: 140px; margin-bottom: 0; }
}

.orb-inner {
  position: absolute;
  width: 65%;
  height: 65%;
  background: radial-gradient(circle at 30% 30%, #444 0%, #050510 50%, var(--essence-cyan) 100%);
  border-radius: 50%;
  z-index: 2;
  box-shadow: inset -10px -10px 30px rgba(0, 229, 255, 0.5), 0 0 40px rgba(0, 229, 255, 0.5);
  animation: orbPulse 4s infinite alternate ease-in-out;
}

.orb-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--essence-cyan) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.5;
  z-index: 1;
  animation: orbBreathe 3s ease-in-out infinite alternate;
}

.orb-ring {
  position: absolute;
  width: 90%;
  height: 90%;
  border: 2px dashed rgba(0, 229, 255, 0.8);
  border-radius: 50%;
  z-index: 1;
  animation: orbRotate 30s linear infinite;
  filter: drop-shadow(0 0 10px var(--essence-cyan));
}

.orb-ring::before, .orb-ring::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 20px var(--essence-cyan), 0 0 40px var(--essence-cyan);
}
.orb-ring::before { top: -7px; left: calc(50% - 7px); }
.orb-ring::after { bottom: -7px; left: calc(50% - 7px); }

@keyframes orbPulse { 0% { filter: brightness(1); transform: scale(1); } 100% { filter: brightness(1.3); transform: scale(1.02); } }
@keyframes orbBreathe { 0% { transform: scale(0.9); opacity: 0.3; } 100% { transform: scale(1.1); opacity: 0.7; } }
@keyframes orbRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#void-orb:active { transform: scale(0.92); }
.orb-clicked .orb-inner { animation: clickPulse 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes clickPulse { 0% { transform: scale(1); filter: brightness(2); } 50% { transform: scale(1.2); filter: brightness(3); box-shadow: 0 0 60px #fff; } 100% { transform: scale(1); filter: brightness(1); } }

#resource-display { text-align: center; margin-top: var(--gap-md); }
.resource-main { margin-bottom: var(--gap-sm); }
.resource-label { display: block; font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 3px; font-weight: 800; margin-bottom: 8px; }
.resource-value { font-size: 3.5rem; font-weight: 900; font-family: var(--font-display); color: #fff; text-shadow: 0 0 20px var(--essence-glow), 0 0 40px var(--essence-glow); line-height: 1; }
@media (max-width: 1199px) { .resource-value { font-size: 2.2rem; } }
.resource-secondary { font-family: var(--font-mono); color: var(--essence-cyan); font-size: 1.1rem; font-weight: 700; text-shadow: 0 0 10px rgba(0, 229, 255, 0.4); margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: var(--gap-md); background: rgba(0,0,0,0.3); padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid rgba(0,229,255,0.1); }
.resource-divider { opacity: 0.3; }
#prestige-summary { margin-top: var(--gap-xl); font-size: 1rem; color: var(--prestige-violet); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 15px var(--prestige-glow); background: rgba(213, 0, 249, 0.1); padding: 10px 20px; border-radius: var(--radius-full); border: 1px solid rgba(213, 0, 249, 0.3); }