/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: 0.5px;
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.btn:active {
  transform: scale(0.94);
}

.btn:hover {
  transform: scale(1.05);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent-yellow) 0%, var(--accent-orange) 100%);
  color: var(--text-dark);
  box-shadow: 0 4px 0 #CC7000, var(--shadow-md);
}

.btn-primary:active {
  box-shadow: 0 1px 0 #CC7000;
  transform: scale(0.94) translateY(3px);
}

.btn-secondary {
  background: linear-gradient(180deg, #A29BFE 0%, #6C5CE7 100%);
  color: var(--text-light);
  box-shadow: 0 4px 0 #4834D4, var(--shadow-md);
}

.btn-secondary:active {
  box-shadow: 0 1px 0 #4834D4;
  transform: scale(0.94) translateY(3px);
}

.btn-ghost {
  background: rgba(255,255,255,0.15);
  color: var(--text-light);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,0.3);
}

.btn-ghost::after { display: none; }

.btn-sm {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: var(--space-lg) var(--space-xxl);
  font-size: var(--font-size-xl);
  border-radius: var(--radius-xl);
}

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-round);
}

.btn-icon.btn-sm {
  width: 36px;
  height: 36px;
}

/* === Cards === */
.card {
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.card-dark {
  background: rgba(45, 27, 105, 0.85);
  color: var(--text-light);
}

/* === Modal === */
.modal {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-xxl);
  min-width: 320px;
  max-width: 480px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modalPop var(--duration-slow) var(--ease-bounce);
}

@keyframes modalPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
}

.modal p {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.modal .btn + .btn {
  margin-left: var(--space-sm);
}

/* === Stars === */
.stars {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
}

.star {
  font-size: 32px;
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.star.earned {
  color: var(--star-gold);
  text-shadow: 0 2px 8px rgba(255, 217, 61, 0.5);
}

.star.empty {
  color: var(--star-empty);
}

/* === HUD (top bar during gameplay) === */
.hud {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}

.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

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

/* === Progress Bar === */
.progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-yellow), var(--accent-orange));
  transition: width var(--duration-slow) var(--ease-smooth);
}

/* === Badge / Pill === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  color: var(--text-light);
}

/* === Tooltip === */
.tooltip {
  position: absolute;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-dark);
  color: var(--text-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* === Color Swatch === */
.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-bounce),
              border-color var(--duration-fast);
}

.color-swatch.selected {
  border-color: var(--text-dark);
  transform: scale(1.15);
  box-shadow: var(--shadow-sm);
}

.color-swatch:hover {
  transform: scale(1.1);
}

/* === Tool Button === */
.tool-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.9);
  border: 2px solid transparent;
  transition: transform var(--duration-fast) var(--ease-bounce),
              border-color var(--duration-fast),
              background var(--duration-fast);
}

.tool-btn.selected {
  border-color: var(--space-primary, #6C5CE7);
  background: rgba(108, 92, 231, 0.15);
}

.tool-btn:hover {
  transform: scale(1.08);
}