/* ============================================================
   FARMEAR AURA — estilos propios.
   Usa los tokens de AL DOPE: no hay un color fuera del sistema.
   ============================================================ */

.aura {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  animation: rise var(--base) var(--ease) both;
}

/* ---------- Contador ---------- */
.meter {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
}

.meter__label {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meter__n {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 26vw, 8rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  text-shadow: 0 0 40px rgba(0, 85, 255, 0.35);
}

.meter__n.is-red {
  color: var(--danger, #ff4444);
  text-shadow: 0 0 40px rgba(255, 68, 68, 0.3);
}

.meter__unit {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
}

.lvl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-3);
}

.lvl b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  line-height: 1.05;
}

.lvl span {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.bar {
  width: 100%;
  max-width: 420px;
  height: 10px;
  background: var(--surface-2);
  border-radius: 6px;
  overflow: hidden;
  margin-top: var(--sp-3);
}

.bar i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 6px;
  transition: width var(--slow) var(--ease);
}

.bar__l {
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.combo {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 700;
}

.combo b {
  color: var(--primary);
  font-family: var(--font-display);
}

/* ---------- Misión ---------- */
.mission {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  border: var(--bd) solid var(--primary);
  border-radius: var(--radius-lg);
}

.mission--done {
  border-color: var(--border);
  border-style: dashed;
}

.mission__t {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.12;
  text-wrap: balance;
}

.mission__a {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--primary);
}

.mission__a b {
  color: var(--warning);
}

.mission__ok {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--success);
}

.btn--farm {
  font-size: var(--step-1);
  padding-block: var(--sp-4);
  letter-spacing: 0.04em;
}

.btn--farm:active {
  transform: scale(0.97);
}

/* ---------- Confesar ---------- */
.confess {
  border: var(--bd) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.confess summary {
  font-family: var(--font-display);
  font-size: var(--step-0);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.confess summary::-webkit-details-marker {
  display: none;
}

.confess summary::after {
  content: ' ▾';
  color: var(--primary);
}

.confess[open] summary {
  margin-bottom: var(--sp-3);
}

.confess__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.confess__b {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--step--1);
  line-height: 1.4;
}

.confess__b b {
  font-family: var(--font-display);
  color: var(--danger, #ff4444);
  flex: none;
}

.confess__b:active {
  transform: scale(0.98);
}

/* ---------- Logros ---------- */
.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}

.badge {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0.45;
}

.badge.is-on {
  opacity: 1;
  border-color: var(--primary);
  background: var(--surface);
}

.badge__i {
  font-size: 1.3rem;
}

.badge b {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.badge__d {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.badge__win {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--primary);
}

/* ---------- Flash del farmeo ---------- */
.flashwrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.82);
  animation: fadein 120ms var(--ease);
  overflow: hidden;
}

.flash {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: pop var(--base) var(--ease) both;
  padding: var(--sp-4);
}

.flash__n {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 20vw, 6rem);
  line-height: 1;
  color: var(--primary);
  text-shadow: 0 0 60px rgba(0, 85, 255, 0.6);
}

.flash--bad .flash__n,
.flash__n.is-red {
  color: var(--danger, #ff4444);
  text-shadow: 0 0 60px rgba(255, 68, 68, 0.4);
}

.flash__u {
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  font-size: var(--step-0);
}

.flash__m {
  font-size: var(--step--1);
  color: var(--warning);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.flash__crit {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--warning);
  letter-spacing: 0.1em;
  animation: shake 400ms var(--ease);
}

.flash__msg {
  margin-top: var(--sp-3);
  font-size: var(--step-0);
  font-weight: 700;
  max-width: 24ch;
}

.flash--crit .flash__n {
  animation: shake 500ms var(--ease);
}

@keyframes shake {
  0%, 100% { transform: translateX(0) }
  20% { transform: translateX(-8px) rotate(-2deg) }
  40% { transform: translateX(8px) rotate(2deg) }
  60% { transform: translateX(-5px) }
  80% { transform: translateX(5px) }
}

@keyframes fadein {
  from { opacity: 0 }
}

/* Partículas */
.spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--primary);
  animation: fly 900ms var(--ease) forwards;
}

@keyframes fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0 }
}

/* Modales (evento y logros) */
.ask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 10, 10, 0.88);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  animation: fadein 150ms var(--ease);
}

.ask__box {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: var(--bd) solid var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: center;
  align-items: center;
  animation: pop var(--base) var(--ease) both;
}

.ask__box--bad {
  border-color: var(--danger, #ff4444);
}

.ask__box h2 {
  font-size: var(--step-1);
  line-height: 1.2;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .flash, .flash__n, .flash__crit, .ask__box, .aura { animation: none !important }
  .spark { display: none }
}