/* Modal de Atividade Diária (usuário). Mobile-first, prefixo atd- para não
   colidir com nada existente. Mesma identidade do jogo: roxo, ouro, menta. */

.atd-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 5, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: atd-aparecer 0.25s ease;
}

@keyframes atd-aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

.atd-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92dvh;
  overflow-y: auto;
  border: 1px solid #3b2a70;
  border-radius: 20px;
  background:
    radial-gradient(400px 200px at 50% -10%, #7c5cff38, transparent 65%),
    linear-gradient(180deg, #261a52 0%, #150e2e 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 48px rgba(124, 92, 255, 0.28);
  animation: atd-subir 0.3s ease;
  overscroll-behavior: contain;
}

@keyframes atd-subir {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.atd-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(8, 5, 26, 0.65);
  color: #eef1ff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.atd-fechar:hover { background: rgba(8, 5, 26, 0.9); }

.atd-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  background: #0d081e;
}

.atd-corpo { padding: 20px 22px 24px; text-align: center; }

.atd-dia {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.18);
  color: #c9bcff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.atd-titulo {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #fff 20%, #ffd166 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: break-word;
}

.atd-descricao {
  margin: 0 0 20px;
  color: #c6cdea;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: break-word;
  white-space: pre-line;
}

.atd-cta {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00e5a8, #00c2ff);
  color: #04281c;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 229, 168, 0.35);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.atd-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.atd-cta:active { transform: none; }

body.atd-travado { overflow: hidden; }

@media (min-width: 768px) {
  .atd-modal { max-width: 460px; }
  .atd-titulo { font-size: 27px; }
}

/* ============================================================
 * Borda neon perimetral — SOMENTE VISUAL.
 * Uma faixa de luz multicolorida percorre o contorno do modal em
 * loop (topo → direita → baixo → esquerda), sobre uma base discreta.
 * Técnica: anel via máscara + conic-gradient girando (propriedade
 * registrada). Sem JS, sem DOM novo, conteúdo 100% preservado.
 * ============================================================ */

@property --atd-ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.atd-modal {
  position: relative;
  isolation: isolate; /* contém o glow do anel dentro do overlay */
}

/* Anel de luz: só 2px no contorno, segue o border-radius do modal. */
.atd-modal::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--atd-ang),
    transparent 0deg,
    transparent 268deg,
    rgba(124, 92, 255, 0) 268deg,
    rgba(124, 92, 255, 0.6) 296deg,
    rgba(255, 77, 196, 0.85) 314deg,
    rgba(255, 255, 255, 0.95) 326deg,
    rgba(0, 194, 255, 0.85) 338deg,
    rgba(0, 229, 168, 0.55) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255, 77, 196, 0.55));
  animation: atd-volta 6s linear infinite;
}

/* Uma volta completa, sempre na mesma direção, sem salto no loop. */
@keyframes atd-volta {
  to { --atd-ang: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .atd-modal::before { animation: none; }
}