/* ================================================================
   Fenobicho — Modal de Aviso / Notícias (home)
   Componente autocontido (não depende do modal.css de jogo).
   Animação segue o contrato [hidden] / .is-open: backdrop usa
   opacity+visibility; card usa translateY+scale (compositor-only).
   ================================================================ */

.notice-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop, 400);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 27, 20, 0.60);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.notice-modal[hidden] { display: none; }

.notice-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.notice-modal__card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--jogo-surface, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 60px rgba(14, 27, 20, 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.notice-modal.is-open .notice-modal__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Header ---- */
.notice-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--jogo-line, #E5EAE0);
}

.notice-modal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--jogo-ink, #0E1B14);
}

.notice-modal__title .icon {
  width: 20px;
  height: 20px;
  color: var(--jogo-primary, #1B9E1B);
}

.notice-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--jogo-bg, #F4F6F1);
  color: var(--jogo-ink-60, rgba(14, 27, 20, 0.60));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast, 150ms ease);
}

.notice-modal__close:hover { background: var(--jogo-line, #E5EAE0); }

.notice-modal__close .icon {
  width: 15px;
  height: 15px;
}

/* ---- Body (banner) ---- */
.notice-modal__body {
  padding: 16px;
}

.notice-modal__body:empty { display: none; }

.notice-modal__body picture,
.notice-modal__body a {
  display: block;
}

.notice-modal__body img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md, 12px);
}

/* ---- Footer ---- */
.notice-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--jogo-line, #E5EAE0);
}

.notice-modal__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--jogo-ink-60, rgba(14, 27, 20, 0.60));
  cursor: pointer;
  white-space: nowrap;
}

.notice-modal__remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--jogo-primary, #1B9E1B);
  cursor: pointer;
}

.notice-modal__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border: none;
  border-radius: var(--radius-full, 9999px);
  background: var(--gradient-cta, linear-gradient(135deg, #1B9E1B 0%, #158A15 100%));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--transition-fast, 150ms ease);
}

.notice-modal__cta:hover { filter: brightness(1.06); }

/* ---- Mobile: ocupa 100% da tela ----
   Card vira fullscreen flex-column: header e footer fixos (flex-shrink: 0),
   só o body (banner) rola. Garante que o CTA e o "não mostrar novamente"
   nunca quebrem ou saiam da viewport. */
@media (max-width: 575px) {
  .notice-modal {
    padding: 0;
  }

  .notice-modal__card {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .notice-modal__header {
    flex-shrink: 0;
  }

  .notice-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .notice-modal__footer {
    flex-shrink: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}