/* The daily event, "Surto do dia" (systems/event.js): the species of the day, the community goal's
   bar and tiers, your part, the prizes to take. */

.ev { display: grid; gap: 14px; }
.ev-ends { font-family: var(--pixel); font-size: 0.95rem; }

.ev-species { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ev-art {
  width: 112px; height: 112px; display: grid; place-items: center; border-radius: 12px;
  background: radial-gradient(circle, #2a3f6a 0%, #0b1424 75%); border: 1px solid var(--line);
}
.ev-species-info { display: grid; gap: 6px; flex: 1 1 220px; justify-items: start; }
.ev-species-info h3 { font-family: var(--pixel); font-size: 1.35rem; }
.ev-bonus { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-bonus span {
  padding: 3px 10px; border-radius: 999px; background: #0b1424; border: 1px solid #3d6b4a;
  color: #7ee08a; font-family: var(--pixel); font-size: 0.85rem;
}

.ev-goal { display: grid; gap: 10px; }
.ev-goal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ev-goal-head h3 { font-family: var(--pixel); font-size: 1.1rem; }
.ev-goal-text { color: var(--text); }
.ev-count { font-family: var(--pixel); color: var(--muted); }
.ev-count b { color: var(--accent); font-size: 1.2rem; }

.ev-bar { position: relative; height: 18px; border-radius: 999px; background: #0b1424; border: 1px solid var(--line); margin: 10px 0 6px; }
.ev-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #7a3df0, #c06bff); transition: width 0.4s; }
.ev-mark {
  position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1.05rem; line-height: 1;
  filter: grayscale(1) brightness(0.7); text-shadow: 0 0 3px #000;
}
.ev-mark.on { filter: none; }

.ev-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ev-tier { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: #0b1424; border: 1px solid var(--line); opacity: 0.85; }
.ev-tier.reached { opacity: 1; border-color: #c8a24a; box-shadow: 0 0 0 1px #c8a24a44; }
.ev-tier.claimed { opacity: 0.6; }
.ev-tier-head { display: flex; justify-content: space-between; gap: 6px; font-family: var(--pixel); font-size: 0.9rem; }
.ev-tier-state { color: var(--muted); }
.ev-tier.reached .ev-tier-state { color: #ffd23f; }

.ev-prizes { display: flex; flex-wrap: wrap; gap: 4px; }
.ev-prize {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px;
  background: var(--card-2); font-size: 0.8rem; white-space: nowrap;
}
.ev-prize img { width: 16px; height: 16px; image-rendering: pixelated; }
.ev-prize.gold { color: #ffd23f; }
.ev-prize.star { color: #b39cff; }

.ev-me { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.ev-note { color: var(--muted); }
.ev-past-title { font-family: var(--pixel); margin-top: 6px; }

/* a prize waiting: a dot on the menu button */
.nav-btn[data-panel="event"] { position: relative; }
.nav-btn.has-prize::after {
  content: ''; position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff4d6d; box-shadow: 0 0 0 2px #0b1424;
}

@media (max-width: 720px) {
  .ev-tiers { grid-template-columns: 1fr; }
  .ev-art { width: 88px; height: 88px; }
}