.sanity {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 440px;
  margin: 0 auto;
}

/* Lives here rather than layout.css so it wins over the base .sanity rule above. */
@media (max-width: 767.98px) {
  .sanity {
    flex: 1 1 11rem;
    gap: 0.4rem;
    max-width: none;
  }

  .sanity-face {
    font-size: 1.15rem;
  }
}

.sanity-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sanity-face {
  display: inline-block;
  font-size: 1.4rem;
}

.sanity-face.bump {
  animation: bump 0.45s ease;
}

.sanity-track {
  --value: 100%;
  flex: 1;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sanity-fill {
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b5cff, #c29bff);
  box-shadow: 0 0 12px rgba(160, 120, 255, 0.7);
  transition: width 0.6s ease;
}

.sanity-track[data-level='mid'] .sanity-fill {
  background: linear-gradient(90deg, #d68a2e, var(--gold-bright));
  box-shadow: 0 0 12px rgba(240, 180, 80, 0.6);
}

.sanity-track[data-level='low'] .sanity-fill {
  background: linear-gradient(90deg, #a3192e, #ff5a5a);
  box-shadow: 0 0 14px rgba(255, 70, 70, 0.75);
  animation: pulse 1s ease-in-out infinite;
}

.sanity-value {
  min-width: 2.5ch;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sanity-track.is-hit {
  animation: hit 0.6s ease;
}

.sanity-delta {
  position: absolute;
  right: 0;
  top: 50%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--danger);
  text-shadow: 0 0 10px rgba(224, 80, 74, 0.7);
  opacity: 0;
  pointer-events: none;
}

.sanity-delta.is-showing {
  animation: delta-float 1.6s ease-out;
}

.frustration {
  --value: 0%;
  height: 6px;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.frustration-fill {
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
  transition: width 0.5s ease, background-color 0.5s;
}

.frustration[data-level='mid'] .frustration-fill {
  background: var(--warn);
}

.frustration[data-level='high'] .frustration-fill {
  background: var(--danger);
}

.party-member.shake {
  animation: shake 0.45s ease;
}

@keyframes bump {
  50% {
    transform: scale(1.35) rotate(-8deg);
  }
}

@keyframes hit {
  30% {
    box-shadow: 0 0 0 3px rgba(224, 80, 74, 0.6), 0 0 18px rgba(224, 80, 74, 0.6);
  }
}

@keyframes delta-float {
  0% {
    opacity: 0;
    transform: translate(0, -50%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, 120%);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.6;
  }
}

@keyframes shake {
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}