/*
 * O aviso de recompensa offline (17/08) → PERGAMINHO DA VOLTA (26/09, Eventos de Retorno). Ver `index.js`.
 *
 * 🚨 Prefixo `avoff`: ninguém mais usa esse nome (varrido em 17/08).
 * 🚨 z-index 9500: por cima do combate, do HUD (≤ 1000) e das janelas (9000); abaixo da novel (9600/9700),
 *    que é quem conta a história quando as duas coisas acontecem juntas.
 */

.avoff {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(8 6 4 / 0.62);
  animation: avoff-fundo 240ms ease-out;
}

/* Zera o que o navegador põe em todo [popover] (margem auto, borda, fundo branco, tamanho pelo conteúdo). */
.avoff[popover] {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  overflow: visible;
  color: inherit;
}

@keyframes avoff-fundo {
  from { opacity: 0; }
}

.avoff__rolo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  padding: 26px 22px 18px;
  border-radius: 6px;
  /* Papel: bege com manchas e borda queimada, sem arte externa. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(255 250 232 / 0.55), transparent 60%),
    radial-gradient(90% 60% at 10% 100%, rgb(150 104 52 / 0.22), transparent 70%),
    linear-gradient(180deg, #f3e2bb, #e7cf9c 60%, #dcbd84);
  box-shadow:
    inset 0 0 0 2px #b88a4a,
    inset 0 0 28px rgb(120 72 24 / 0.45),
    0 18px 40px -12px #000000cc;
  color: #3b2512;
  font-family: 'Baloo 2', system-ui, sans-serif;
  animation: avoff-abre 360ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transform-origin: 50% 0;
}

/* Os dois rolinhos de madeira em cima e embaixo. */
.avoff__rolo::before,
.avoff__rolo::after {
  content: '';
  position: sticky;
  left: 0;
  display: block;
  height: 14px;
  margin: -26px -22px 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #8a5a2b, #5b3714 55%, #3e240c);
  box-shadow: 0 2px 4px #0006;
  top: -26px;
  z-index: 1;
  flex: 0 0 auto;
}
.avoff__rolo::after {
  margin: 0 -22px -18px;
  top: auto;
  bottom: -18px;
}

@keyframes avoff-abre {
  from { opacity: 0; transform: scaleY(0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .avoff, .avoff__rolo { animation: none; }
}

.avoff__titulo {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  color: #5a2e0c;
  letter-spacing: 0.02em;
}

.avoff__sub {
  margin-top: -6px;
  font-size: 12px;
  text-align: center;
  color: #7a5431;
}

.avoff__rendimento,
.avoff__ev {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(255 248 228 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(150 104 52 / 0.35);
}

.avoff__rendeu {
  font-size: 11.5px;
  color: #7a5431;
}

.avoff__eventos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avoff__ev-texto,
.avoff__resultado {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.avoff__resultado {
  font-style: italic;
  color: #6a3d12;
}

.avoff__ev--raro {
  background: linear-gradient(180deg, rgb(255 236 180 / 0.8), rgb(246 214 140 / 0.6));
  box-shadow: inset 0 0 0 1.5px #c9922e, 0 0 14px -4px #e9b54a;
}

.avoff__ev--feito {
  opacity: 0.92;
}

.avoff__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avoff__chips:empty {
  display: none;
}

.avoff__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 5px;
  border-radius: 999px;
  background: #fff6de;
  box-shadow: inset 0 0 0 1px #c79a5b;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a2c10;
}
.avoff__chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.avoff__chip--mais {
  padding-left: 9px;
  color: #9b1f3a;
  background: #ffe6ea;
  box-shadow: inset 0 0 0 1px #e89aa9;
}
.avoff__chip--menos {
  padding-left: 9px;
  color: #6b5a52;
  background: #eee4dc;
  box-shadow: inset 0 0 0 1px #bfae9f;
}

.avoff__opcoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avoff__opcao {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #7a4b1f, #5b3412);
  box-shadow: inset 0 1px 0 #ffffff33, 0 2px 0 #3a200a;
  color: #fff3d6;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.avoff__opcao:hover { filter: brightness(1.12); }
.avoff__opcao:disabled { opacity: 0.6; cursor: default; }

.avoff__dica {
  font-size: 11px;
  text-align: center;
  color: #7a5431;
}

.avoff__acoes {
  /* Grudado no pé do papel: com 3 eventos o texto rola, mas Resgatar/Fechar ficam sempre à vista. */
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -8px;
  padding: 8px 8px 2px;
  background: linear-gradient(180deg, rgb(231 207 156 / 0), #e3c890 30%);
}

.avoff__btn {
  min-width: 96px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #8a6a45, #664a2a);
  box-shadow: inset 0 1px 0 #ffffff33, 0 3px 0 #3f2b14;
  color: #fff3d6;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.avoff__btn--ok {
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 55%, #a9782c);
  box-shadow: inset 0 1px 0 #ffffff88, 0 3px 0 #6d3f06;
  color: #3b2204;
}
.avoff__btn:hover { filter: brightness(1.08); }
.avoff__btn:active { translate: 0 1px; }
.avoff__btn:disabled { opacity: 0.6; }

@media (max-width: 420px) {
  .avoff { padding: 10px; }
  .avoff__rolo { padding: 24px 14px 16px; }
  .avoff__rolo::before { margin: -24px -14px 0; top: -24px; }
  .avoff__rolo::after { margin: 0 -14px -16px; bottom: -16px; }
  .avoff__titulo { font-size: 18px; }
}

/* 18/09 (painel Ações admin, interruptor de interface de combate): esconde só o AVISO — a recompensa continua
   guardada no servidor e resgatável em Talentos normalmente. */
body[data-cenario-aviso-offline='off'] .avoff {
  display: none !important;
}