/* Neo-brutalist styling & custom smooth gauge animations */

:root {
  --color-border: #1e293b;
}

/* Custom border widths */
.border-3 {
  border-width: 3px;
}

/* Smooth background transitions between temper tiers */
.theme-chill {
  background-color: #f8f6f0;
}

.theme-simmer {
  background-color: #fffbeb;
}

.theme-volcano {
  background-color: #fef2f2;
}

/* Breathing animation for cool-down reset */
.breath-inhale {
  transform: scale(1.35);
  background-color: #86efac !important;
}

.breath-hold {
  transform: scale(1.35);
  background-color: #fef08a !important;
}

.breath-exhale {
  transform: scale(0.9);
  background-color: #93c5fd !important;
}

/* Question Option tactile cards */
.option-btn {
  border: 2px solid var(--color-border);
  box-shadow: 3px 3px 0px var(--color-border);
  transition: all 0.12s ease-in-out;
}

.option-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--color-border);
}

.option-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--color-border);
}

.option-selected {
  background-color: #fef08a;
  border-color: #1e293b;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--color-border) !important;
}

/* SVG mascot bounce */
@keyframes softBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.mascot-bob {
  animation: softBob 2.5s ease-in-out infinite;
}

/* Scrollbars for history */
#historyList::-webkit-scrollbar {
  width: 6px;
}
#historyList::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}
#historyList::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* Prevent text highlighting on quick taps */
button, .option-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}