.enfados-loading { color: var(--text-muted); text-align: center; padding: var(--space-6) 0; }

.enfados-offline {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center; color: var(--text-muted); padding: var(--space-6) var(--space-4);
}
.enfados-offline__retry {
  background: var(--accent); color: white; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 600;
}

.enfados-view { display: flex; flex-direction: column; gap: var(--space-5); }
.enfados-title { font-size: var(--text-xl); color: var(--accent); text-align: center; }

.enfados-ranking { display: flex; flex-direction: column; gap: var(--space-3); }

.enfados-rank-row {
  background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.enfados-rank-row__header {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3) var(--space-4); text-align: left;
}
.enfados-rank-row__medal { font-size: var(--text-xl); width: 28px; text-align: center; flex-shrink: 0; }
.enfados-rank-row__medal--bounce { animation: enfados-medal-bounce 1.2s var(--ease-out) infinite; }
.enfados-rank-row__body { flex: 1; min-width: 0; }
.enfados-rank-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.enfados-rank-row__name { font-weight: 600; }
.enfados-rank-row__count { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent); }
.enfados-rank-row__bar-track { height: 6px; border-radius: 3px; background: var(--accent-soft); margin-top: var(--space-2); overflow: hidden; }
.enfados-rank-row__bar { height: 100%; background: var(--alert); border-radius: 3px; transition: width var(--dur-base) var(--ease-out); }
.enfados-rank-row__bar--positive { background: var(--accent); }
.enfados-rank-row__last { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.enfados-rank-row__chevron { color: var(--text-muted); font-size: var(--text-sm); flex-shrink: 0; }

.enfados-history { border-top: 1px solid var(--border); }
.enfados-history__empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3) var(--space-4); }
.enfados-history__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border);
}
.enfados-history__row:first-child { border-top: none; }
.enfados-history__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enfados-history__at { font-size: var(--text-sm); font-weight: 600; }
.enfados-history__reason { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.enfados-history__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.enfados-history__edit-btn, .enfados-history__delete-btn {
  font-size: var(--text-base); min-width: 36px; min-height: 36px; border-radius: var(--radius-sm);
}
.enfados-history__edit-btn:active, .enfados-history__delete-btn:active { background: var(--accent-soft); }

.enfados-history__row--editing { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.enfados-history__confirm-text { font-size: var(--text-sm); }
.enfados-history__edit-at, .enfados-history__edit-reason {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  padding: var(--space-2); font-size: var(--text-sm);
}
.enfados-history__edit-actions { display: flex; gap: var(--space-2); }
.enfados-history__edit-actions button { flex: 1; padding: var(--space-2); border-radius: var(--radius-sm); font-weight: 600; text-align: center; }
.enfados-history__cancel, .enfados-history__cancel-delete { background: var(--accent-soft); color: var(--text-muted); }
.enfados-history__save { background: var(--accent); color: white; }
.enfados-history__confirm-delete { background: var(--alert); color: white; }

.enfados-hint { color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

.enfados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.enfados-grid .enfados-button:nth-child(1) .enfados-button__emoji { animation-delay: 0.03s; }
.enfados-grid .enfados-button:nth-child(2) .enfados-button__emoji { animation-delay: 0.08s; }
.enfados-grid .enfados-button:nth-child(3) .enfados-button__emoji { animation-delay: 0.13s; }
.enfados-grid .enfados-button:nth-child(4) .enfados-button__emoji { animation-delay: 0.18s; }
.enfados-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-1); border-radius: var(--radius-lg); background: var(--accent-soft);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.enfados-button:active { transform: scale(0.95); background: var(--alert-soft); }
.enfados-button:disabled { opacity: 0.6; }
.enfados-button__emoji { font-size: 34px; animation: enfados-pop-in 0.35s var(--ease-out) backwards; }
.enfados-button__name { font-weight: 600; font-size: var(--text-xs); color: var(--accent-strong); }

.enfados-sensor-panel {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.enfados-sensor-panel__title { font-weight: 600; text-align: center; }
.enfados-sensor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.enfados-sensor-grid .enfados-sensor-button:nth-child(1) .enfados-sensor-button__emoji { animation-delay: 0.03s; }
.enfados-sensor-grid .enfados-sensor-button:nth-child(2) .enfados-sensor-button__emoji { animation-delay: 0.08s; }
.enfados-sensor-grid .enfados-sensor-button:nth-child(3) .enfados-sensor-button__emoji { animation-delay: 0.13s; }
.enfados-sensor-grid .enfados-sensor-button:nth-child(4) .enfados-sensor-button__emoji { animation-delay: 0.18s; }
.enfados-sensor-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-1); border-radius: var(--radius-md); background: var(--accent-soft);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.enfados-sensor-button:active { transform: scale(0.95); background: var(--alert-soft); }
.enfados-sensor-button__emoji { font-size: 30px; animation: enfados-pop-in 0.35s var(--ease-out) backwards; }
.enfados-sensor-button__label { font-weight: 600; font-size: var(--text-xs); color: var(--accent-strong); text-align: center; }
.enfados-sensor-panel__back { padding: var(--space-2); border-radius: var(--radius-sm); font-weight: 600; text-align: center; color: var(--text-muted); }

.enfados-reason-panel {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.enfados-reason-panel__title { font-weight: 600; text-align: center; }
.enfados-reason-panel__input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  padding: var(--space-3); font-size: var(--text-base);
}
.enfados-char-counter { font-size: var(--text-xs); color: var(--text-muted); text-align: right; margin-top: calc(var(--space-2) * -1); }
.enfados-provoker-label { font-size: var(--text-sm); color: var(--text-muted); }
.enfados-provoker-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.enfados-provoker-chip {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: 999px; background: var(--accent-soft);
  font-size: var(--text-sm); font-weight: 600; color: var(--accent-strong);
}
.enfados-provoker-chip input { accent-color: var(--accent); }
.enfados-reason-panel__actions { display: flex; gap: var(--space-3); }
.enfados-reason-panel__cancel, .enfados-reason-panel__submit {
  flex: 1; padding: var(--space-3); border-radius: var(--radius-sm); font-weight: 600; text-align: center;
}
.enfados-reason-panel__cancel { background: var(--accent-soft); color: var(--text-muted); }
.enfados-reason-panel__submit { background: var(--accent); color: white; }
.enfados-reason-panel__submit:disabled { opacity: 0.6; }

.enfados-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; }
.enfados-tab {
  display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0;
  padding: var(--space-2) var(--space-3); border-radius: 999px; background: var(--bg-elevated);
  box-shadow: var(--shadow-sm); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
}
.enfados-tab--active { background: var(--accent); color: white; }

.enfados-provokers { font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
.enfados-provokers strong { color: var(--accent-strong); }

/* Celebration burst — a fully-offline, no-assets stand-in for an animated
   gif when an event gets registered. */
.enfados-burst { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.enfados-burst__center {
  position: absolute; top: 38%; left: 50%; font-size: 96px;
  animation: enfados-burst-pop 3s var(--ease-out) forwards;
}
.enfados-burst__particle {
  position: absolute; top: -10%; font-size: 40px; opacity: 0;
  animation-name: enfados-burst-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
/* Milestone-only badge under the trophy — see playMilestoneBurst in
   enfados.js. Longer-lived than the center emoji's pop so there's time to
   actually read it. */
.enfados-burst__caption {
  position: absolute; top: 54%; left: 50%; transform: translate(-50%, 0);
  max-width: 78vw; text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-base); color: var(--text); background: var(--bg-elevated);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  animation: enfados-caption-pop 4.5s var(--ease-out) forwards;
}

@keyframes enfados-pop-in {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes enfados-medal-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  50% { transform: translateY(0); }
}
@keyframes enfados-burst-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes enfados-burst-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--drift, 0px), 100vh) rotate(var(--spin, 360deg)); opacity: 0; }
}
@keyframes enfados-caption-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.92); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .enfados-button__emoji, .enfados-sensor-button__emoji,
  .enfados-rank-row__medal--bounce, .enfados-burst__center, .enfados-burst__particle {
    animation: none;
  }
  .enfados-burst { display: none; }
}