/* Horda em 7 dias: PRESENTE DO BENTO (2026-11-06). Quem perde a horda ganha 1 presente que dura 1 hora para comprar.
   1. a fila do presente no cartão da derrota (a caixa cai e balança); 2. o presente aberto (o que tem dentro e o preço);
   3. o botão com o relógio na coluna do lado do mapa, enquanto a hora não acaba. */

/* a caixa de presente, desenhada em CSS: corpo vermelho com fita amarela, tampa e laço */
.j-presente-caixa { position: relative; flex: none; width: 44px; height: 40px; display: block; }
.j-presente-caixa::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 24px; border-radius: 4px;
  background: linear-gradient(90deg, #c92a2a 0 41%, #ffd36b 41% 59%, #c92a2a 59%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.22); }
.j-presente-caixa i { position: absolute; left: 1px; right: 1px; top: 9px; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #e03131 0 41%, #ffe08a 41% 59%, #e03131 59%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.j-presente-caixa i::before, .j-presente-caixa i::after { content: ""; position: absolute; top: -10px; width: 13px; height: 11px;
  border: 3px solid #ffd36b; background: rgba(255, 211, 107, 0.15); }
.j-presente-caixa i::before { right: 50%; border-radius: 60% 10% 60% 60%; }
.j-presente-caixa i::after { left: 50%; border-radius: 10% 60% 60% 60%; }

/* 1. no cartão da derrota */
.j-presente { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 10px; padding: 10px 12px; border-radius: 16px; text-align: left;
  border: 1.5px solid var(--luz, #ffd36b); background: linear-gradient(180deg, rgba(70, 52, 10, 0.95), rgba(36, 27, 8, 0.95)); color: var(--texto, #fff);
  font: inherit; box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45); animation: j-presente-brilho 2.4s ease-in-out infinite; }
.j-presente .j-presente-caixa { animation: j-presente-cai 0.75s cubic-bezier(0.3, 1.4, 0.5, 1) both, j-presente-mexe 2.6s ease-in-out 1s infinite; }
.j-presente-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.j-presente-txt > b { font-size: 15px; line-height: 1.15; }
.j-presente-txt small { color: #e9d9a8; font-size: 12.5px; }
.j-presente-txt small b, [data-relogio] { font-variant-numeric: tabular-nums; }
.j-presente-txt small b { color: var(--luz, #ffd36b); }
.j-presente-seta { font-style: normal; font-weight: 900; font-size: 26px; line-height: 1; color: var(--luz, #ffd36b); }
.j-presente:active { translate: 0 2px; }
@keyframes j-presente-cai { 0% { transform: translateY(-70px) rotate(-14deg); opacity: 0; } 55% { transform: translateY(3px) rotate(5deg); opacity: 1; }
  75% { transform: translateY(-5px) rotate(-3deg); } 100% { transform: none; } }
@keyframes j-presente-mexe { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-9deg); } 84% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
@keyframes j-presente-brilho { 50% { box-shadow: 0 0 0 5px rgba(255, 211, 107, 0.2), 0 6px 22px rgba(255, 190, 60, 0.3); } }

/* 2. o presente aberto */
.j-presente-aberto { text-align: center; }
.j-presente-tampa { display: flex; justify-content: center; height: 58px; margin: 14px 0 4px; }
.j-presente-tampa .j-presente-caixa { width: 60px; height: 54px; transform-origin: 50% 100%; }
.j-presente-tampa .j-presente-caixa::before { height: 32px; }
.j-presente-tampa .j-presente-caixa i { top: 12px; height: 13px; animation: j-presente-tampa 0.7s ease-out 0.1s both; }
.j-presente-tampa .j-presente-caixa i::before, .j-presente-tampa .j-presente-caixa i::after { top: -13px; width: 17px; height: 14px; }
@keyframes j-presente-tampa { 0% { transform: none; } 45% { transform: translate(14px, -22px) rotate(24deg); } 100% { transform: translate(18px, -8px) rotate(26deg); } }
.j-presente-aberto h2 { margin-top: 2px; }
.j-presente-itens { list-style: none; margin: 10px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.j-presente-itens li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 211, 107, 0.25); animation: j-presente-item 0.4s ease-out both; }
.j-presente-itens li:nth-child(2) { animation-delay: 0.12s; }
.j-presente-itens li:nth-child(3) { animation-delay: 0.24s; }
.j-presente-itens li:nth-child(4) { animation-delay: 0.36s; }
@keyframes j-presente-item { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.j-presente-itens li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.j-presente-itens li small { color: var(--apagado, #aab3c5); font-size: 12px; line-height: 1.25; }
.j-presente-itens em { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #e9d9a8;
  padding: 2px 7px; border-radius: 999px; background: rgba(255, 211, 107, 0.14); }
.j-pi-emoji { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: radial-gradient(circle at 50% 40%, rgba(255, 211, 107, 0.28), rgba(255, 255, 255, 0.04) 70%); }
.j-pi-emoji.ouro::before { width: 24px; height: 15px; margin: 0; }
.j-presente-vale { margin: 4px 0 10px; color: #e9d9a8; font-size: 13.5px; }

/* 3. o botão com o relógio, na coluna do lado do mapa */
#j-mapa-lado #j-mapa-presente { border-color: var(--luz, #ffd36b); background: linear-gradient(180deg, rgba(92, 66, 12, 0.96), rgba(46, 33, 8, 0.96)); color: var(--luz, #ffd36b);
  animation: j-presente-brilho 2.4s ease-in-out infinite; }
#j-mapa-presente span { font-weight: 900; font-size: 11px; }
#j-mapa-presente .j-lado-emoji { display: inline-block; animation: j-presente-mexe 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .j-presente, .j-presente .j-presente-caixa, .j-presente-tampa .j-presente-caixa i, .j-presente-itens li,
  #j-mapa-lado #j-mapa-presente, #j-mapa-presente .j-lado-emoji { animation: none !important; }
}