/* =========================================================
   Tarefas da família (app da criança)
   ---------------------------------------------------------
   - painel no topo de Missões: tarefas com o círculo de "terminei!";
   - a festa ao marcar (check que estoura + medalha com o prêmio);
   - a festa de "liberado!" quando o responsável confirma;
   - o aviso de travado e o relógio do tempo liberado;
   - o cadeado nos cartões da lista de jogos.
   ========================================================= */

.family-tasks { gap: var(--s-3); margin-bottom: var(--s-4); }
.family-tasks__head h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.15rem; }
.family-tasks__head p { margin: 0; font-size: 0.86rem; }

.family-tasks__status { display: flex; flex-wrap: wrap; gap: 6px; }
.family-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 700;
  border: 1px solid transparent;
}
.family-chip--open {
  color: var(--state-success);
  background: color-mix(in srgb, var(--state-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--state-success) 40%, transparent);
}
.family-chip--locked {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
}

.family-tasks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }

.family-task {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  transition: background 0.3s, border-color 0.3s;
}
.family-task--pending {
  background: color-mix(in srgb, var(--state-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--state-warning) 45%, transparent);
}
.family-task--approved {
  background: color-mix(in srgb, var(--state-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--state-success) 45%, transparent);
}
.family-task--rejected { border-color: color-mix(in srgb, var(--state-danger) 45%, transparent); }

.family-task__check {
  position: relative;
  flex: none;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 3px dashed color-mix(in srgb, var(--brand-mint) 70%, transparent);
  background: color-mix(in srgb, var(--brand-mint) 10%, transparent);
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.18s var(--ease-liquid), background 0.2s;
}
.family-task__check:not(:disabled):hover { transform: scale(1.06); }
.family-task__check:not(:disabled):active { transform: scale(0.94); }
.family-task__check:focus-visible { outline: 3px solid var(--brand-violet); outline-offset: 3px; }
.family-task__check:disabled { cursor: default; border-style: solid; }
.family-task--pending .family-task__check { border-color: var(--state-warning); background: color-mix(in srgb, var(--state-warning) 18%, transparent); }
.family-task--approved .family-task__check {
  border-color: var(--state-success);
  background: var(--state-success);
  color: #fff; font-weight: 800;
}

.family-task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.family-task__title { font-family: var(--font-display); font-size: 1rem; }
.family-task__reward { font-size: 0.82rem; color: var(--text-secondary); }
.family-task__state { font-size: 0.78rem; font-weight: 700; }
.family-task--pending .family-task__state { color: var(--state-warning); }
.family-task--approved .family-task__state { color: var(--state-success); }
.family-task--rejected .family-task__state { color: var(--state-danger); }
.family-task__undo { flex: none; }

/* "Terminei!": o círculo estoura e solta faíscas. */
.family-task.is-bursting .family-task__check { animation: family-pop 0.6s var(--ease-liquid); }
.family-task__sparks { position: absolute; inset: 50% auto auto 50%; pointer-events: none; }
.family-task__sparks i {
  position: absolute; left: -4px; top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-mint);
  animation: family-spark 0.75s ease-out var(--sd, 0s) forwards;
}
.family-task__sparks i:nth-child(3n) { background: var(--brand-violet); }
.family-task__sparks i:nth-child(3n + 1) { background: var(--state-warning); }

@keyframes family-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.3) rotate(-8deg); }
  65% { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1); }
}
@keyframes family-spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.3); opacity: 0; }
}

/* Medalha da tarefa feita, com o prêmio que vem. */
.family-done, .family-unlock { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.family-done h3, .family-unlock h3 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; }
.family-done p { margin: 0; }
.family-done__medal {
  position: relative;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 2.8rem;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 60%), var(--grad-primary);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-mint) 40%, transparent);
  animation: family-medal 0.8s var(--ease-liquid) both;
}
.family-done__medal i {
  position: absolute; right: -2px; bottom: -2px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-style: normal; font-size: 1.1rem; font-weight: 900; color: #fff;
  background: var(--state-success);
  border: 3px solid var(--bg-deep);
  animation: family-check 0.5s 0.35s var(--ease-liquid) both;
}
.family-done__gift {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  border: 2px dashed color-mix(in srgb, var(--brand-violet) 60%, transparent);
  background: color-mix(in srgb, var(--brand-violet) 10%, transparent);
  text-align: left;
  animation: family-rise 0.5s 0.5s var(--ease-liquid) both;
}
.family-done__gift-icon { font-size: 1.8rem; animation: family-wiggle 1.4s 1s ease-in-out infinite; }
.family-done__gift small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.family-done__wait { font-size: 0.85rem; animation: family-rise 0.5s 0.7s var(--ease-liquid) both; }

@keyframes family-medal {
  0% { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes family-check { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes family-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes family-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* Liberado! (o responsável confirmou) */
.family-unlock__burst {
  width: 110px; height: 110px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 3.4rem;
  background: conic-gradient(from 0deg, var(--brand-mint), var(--brand-violet), var(--state-warning), var(--brand-mint));
  animation: family-medal 0.8s var(--ease-liquid) both, family-spin 6s linear infinite;
}
.family-unlock__burst span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--bg-deep); animation: family-spin 6s linear infinite reverse; }
.family-unlock__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); width: 100%; }
.family-unlock__list li {
  display: grid; gap: 2px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--state-success) 12%, transparent);
  animation: family-rise 0.5s 0.4s var(--ease-liquid) both;
}
.family-unlock__task { font-size: 0.85rem; color: var(--text-secondary); }
.family-unlock__reward { font-family: var(--font-display); font-size: 1.05rem; color: var(--state-success); }
@keyframes family-spin { to { transform: rotate(360deg); } }

/* Aviso de travado */
.family-lock { display: grid; gap: var(--s-2); text-align: center; justify-items: center; }
.family-lock p { margin: 0; }
.family-lock__lead { font-family: var(--font-display); font-size: 1.05rem; }
.family-lock__orb { position: relative; font-size: 2.6rem; }
.family-lock__orb i { position: absolute; right: -14px; bottom: -6px; font-style: normal; font-size: 1.5rem; }
.family-lock__tasks { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.family-lock__tasks li {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.family-lock__tasks small { display: block; font-size: 0.76rem; color: var(--text-secondary); }
.family-lock__icon { font-size: 1.5rem; }

/* Relógio do tempo liberado: no alto, por cima até do jogo em tela cheia. */
.family-timer {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 0.9rem;
  color: #fff;
  background: rgba(20, 16, 48, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.family-timer.is-ending { background: rgba(176, 30, 70, 0.88); animation: family-pulse 1s ease-in-out infinite; }
@keyframes family-pulse { 50% { transform: translateX(-50%) scale(1.08); } }

/* Cadeado / tempo nos cartões da lista de jogos */
.family-lock-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 800;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 9%, transparent);
  white-space: nowrap;
}
.family-lock-chip--open { color: var(--state-success); background: color-mix(in srgb, var(--state-success) 14%, transparent); }
.game-card.is-locked .game-card__badge,
.game-card.is-locked .game-card__body { filter: grayscale(0.7); opacity: 0.72; }

/* Bolinha em "Missões" quando há tarefa para fazer. */
.nav__item.has-tasks { position: relative; }
.nav__item.has-tasks::after {
  content: '';
  position: absolute; top: 6px; right: calc(50% - 18px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--state-warning);
  box-shadow: 0 0 0 2px var(--bg-deep);
  animation: family-pulse-dot 2s ease-in-out infinite;
}
@keyframes family-pulse-dot { 50% { transform: scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .family-task.is-bursting .family-task__check,
  .family-done__medal, .family-done__medal i, .family-done__gift, .family-done__gift-icon, .family-done__wait,
  .family-unlock__burst, .family-unlock__burst span, .family-unlock__list li,
  .family-timer.is-ending, .nav__item.has-tasks::after { animation: none; }
}

/* Atalho do responsável na barra do topo (só em conta de responsável). */
.guardian-button {
  position: relative;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: color-mix(in srgb, var(--brand-violet) 16%, transparent);
  font-size: 1.1rem; text-decoration: none;
}
.guardian-button.has-alerts { border-color: var(--state-warning); }
.guardian-button__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--state-warning); color: #241a00;
  font-size: 0.68rem; font-weight: 800; text-align: center;
}
.guardian-button__badge[hidden] { display: none; }

/* Horário combinado, no painel de tarefas. */
.family-tasks__clock { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--state-warning); }
.family-tasks__clock--ok { color: var(--text-secondary); font-weight: 600; }

/* Escondido pelo responsável: o botão do menu sai da tela de verdade
   (`.nav__item` declara display:flex e venceria o [hidden] do navegador). */
.nav__item[hidden] { display: none; }