/* ==========================================================================
   Lobby dos pets e modal de recomeço
   ========================================================================== */

/* ---------- Atalho "Pets" na coluna de lugares da tela do pet ---------- */
.pet-link--lobby { --tone: var(--brand-teal); }

/* ---------- Lobby ---------- */
.lobby-screen { padding-bottom: var(--nav-space, 110px); }
.lobby-screen.is-busy { pointer-events: none; opacity: 0.75; }
.lobby-head { display: grid; gap: 4px; text-align: center; padding-top: var(--s-3); }
.lobby-head h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }

.lobby-scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--brand-mint) 30%, transparent), transparent 62%),
    radial-gradient(80% 60% at 15% 0%, color-mix(in srgb, var(--brand-purple) 26%, transparent), transparent 70%),
    var(--glass-surface);
}
.lobby-yard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 44%), 1fr));
  gap: var(--s-3);
}

.lobby-pet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-deep) 35%, var(--glass-surface-soft));
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-liquid), border-color var(--t-med) linear, box-shadow var(--t-med) linear;
}
.lobby-pet:hover { border-color: var(--glass-border-bright); }
.lobby-pet:active { transform: scale(0.97); }
.lobby-pet:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.lobby-pet.is-active {
  border-color: color-mix(in srgb, var(--brand-mint) 70%, transparent);
  box-shadow: var(--shadow-glow-green);
}
.lobby-pet__badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; padding: 2px 8px; white-space: nowrap; z-index: 1; }
.lobby-pet__art {
  width: min(110px, 100%);
  aspect-ratio: 1;
  margin-top: var(--s-2);
  animation: lobby-bob 3.2s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}
.lobby-pet__art svg { width: 100%; height: 100%; }
.lobby-pet__name { font-family: var(--font-display); font-size: 1.02rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-pet__tag { font-size: 0.72rem; color: var(--text-secondary); }
.lobby-pet__mood { font-size: 0.78rem; color: var(--text-secondary); }
.lobby-pet__needs { display: grid; gap: 3px; width: 100%; margin-top: 6px; }
.lobby-meter { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 4px; font-size: 0.66rem; }
.lobby-meter__icon { line-height: 1; text-align: center; }
.lobby-meter__track { height: 6px; border-radius: var(--r-pill); background: var(--glass-surface-strong); overflow: hidden; }
.lobby-meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--meter-color); transition: width var(--t-slow) var(--ease-liquid); }
.lobby-meter.is-critical .lobby-meter__fill { background: var(--state-danger); }

.lobby-adopt { display: grid; gap: var(--s-2); }
.lobby-adopt__note { text-align: center; color: var(--text-secondary); }

@keyframes lobby-bob { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .lobby-pet__art { animation: none; } }

/* ---------- "Voltar para meus pets" na escolha de adoção ---------- */
.start-back { justify-self: start; align-self: flex-start; margin-top: var(--s-3); }

/* ---------- Modal de recomeço ---------- */
.modal--reset { max-height: calc(var(--app-height, 100dvh) - 32px); overflow-y: auto; }
.reset-options { display: grid; gap: var(--s-2); }
.reset-option {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-med) linear, background var(--t-med) linear;
}
.reset-option:hover:not(:disabled) { border-color: var(--glass-border-bright); }
.reset-option:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.reset-option:disabled { opacity: 0.45; cursor: not-allowed; }
.reset-option.is-active {
  border-color: var(--brand-mint);
  background: color-mix(in srgb, var(--brand-mint) 14%, var(--glass-surface-soft));
}
.reset-option--danger.is-active {
  border-color: var(--state-danger);
  background: color-mix(in srgb, var(--state-danger) 14%, var(--glass-surface-soft));
}
.reset-option__icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.reset-option__body { display: grid; gap: 3px; min-width: 0; }
.reset-option__title { font-family: var(--font-display); font-size: 1rem; }
.reset-option__desc { font-size: 0.82rem; color: var(--text-secondary); }
.reset-option__keeps { font-size: 0.74rem; color: var(--text-muted); }
.reset-warning { text-align: center; color: var(--text-secondary); }
.reset-option--danger.is-active { box-shadow: 0 0 0 1px var(--state-danger), 0 6px 20px color-mix(in srgb, var(--state-danger) 25%, transparent); }
.reset-option.is-active:not(.reset-option--danger) { box-shadow: 0 0 0 1px var(--brand-mint); }
.reset-actions { display: grid; gap: var(--s-2); }