/* ══════════════════════════════════════════════════════
   VOTE.CSS — Styles specific to the Areos Vote page
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════ */
#hero {
  min-height:52vh; padding-top:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 110% 70% at 50% -10%, rgba(255,47,179,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 110%, rgba(51,0,26,.35) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 110%, rgba(51,0,26,.35) 0%, transparent 50%),
    var(--abyss);
}
#hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,47,179,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,47,179,.025) 1px, transparent 1px);
  background-size:100px 100px;
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 20%, transparent 80%);
}
#hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,47,179,.07) 0%, transparent 14%),
    linear-gradient(270deg, rgba(255,47,179,.07) 0%, transparent 14%);
}

.hero-inner {
  position:relative; z-index:2; padding:52px 24px 60px; width:100%; max-width:820px;
}
#hero .hero-title {
  font-size: clamp(38px, 7vw, 80px);
}

/* ══════════════════════════════════════════════════════
   HOW VOTING WORKS — STEPS BANNER
══════════════════════════════════════════════════════ */
#how {
  background:var(--mid); position:relative; padding:70px 0 60px;
}
#how::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), var(--gold-dim), var(--blood-dim), transparent);
}
#how::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), transparent);
}

.how-steps {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--border-blood); border:1px solid var(--border-blood);
  border-radius:var(--radius); overflow:hidden;
}
.how-step {
  background:var(--card); padding:28px 24px; text-align:center;
  position:relative; transition:background .3s;
}
.how-step:hover { background:var(--card-h); }
.how-step::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blood), var(--gold), var(--blood), transparent);
  opacity:0; transition:opacity .35s;
}
.how-step:hover::before { opacity:1; }
.how-num {
  font-family:'Cinzel Decorative',serif; font-size:32px; font-weight:900;
  color:var(--blood); line-height:1; margin-bottom:12px;
  text-shadow: 0 0 20px rgba(255,47,179,.35);
}
.how-title {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700;
  color:var(--text-hi); margin-bottom:8px; letter-spacing:.3px;
}
.how-desc { font-size:17px; color:var(--bone-mid); line-height:1.65; }

/* ══════════════════════════════════════════════════════
   VOTE SITES SECTION
══════════════════════════════════════════════════════ */
#sites {
  padding:90px 0 100px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,47,179,.06) 0%, transparent 55%),
    var(--abyss);
  position:relative;
}

/* Vote site card */
.site-card {
  display:grid; grid-template-columns:64px 1fr auto;
  align-items:center; gap:0;
  background:var(--card); border:1px solid var(--border-blood);
  border-radius:var(--radius); margin-bottom:14px;
  overflow:hidden; position:relative;
  transition:background .25s, border-color .25s, box-shadow .25s;
  text-decoration:none;
}
.site-card:hover {
  background:var(--card-h); border-color:var(--blood-dim);
  box-shadow: 0 6px 40px rgba(255,47,179,.14), 0 0 0 1px rgba(255,47,179,.08);
}
.site-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blood), var(--gold), var(--blood), transparent);
  opacity:0; transition:opacity .35s;
}
.site-card:hover::before { opacity:1; }

/* Left ordinal column */
.site-num {
  display:flex; align-items:center; justify-content:center; align-self:stretch;
  background:rgba(255,47,179,.06); border-right:1px solid var(--border-blood);
  font-family:'Cinzel Decorative',serif; font-size:22px; font-weight:900;
  color:var(--blood); text-shadow:0 0 16px rgba(255,47,179,.4);
  min-width:64px; padding:0 10px; transition:background .25s, color .25s;
}
.site-card:hover .site-num { background:rgba(255,47,179,.1); color:var(--blood-bright); }

/* Middle content */
.site-body { padding:22px 28px; display:flex; flex-direction:column; gap:6px; }
.site-name {
  font-family:'Cinzel',serif; font-size:18px; font-weight:700;
  color:var(--text-hi); letter-spacing:.3px;
}
.site-desc { font-size:17px; color:var(--bone-mid); line-height:1.6; }
.site-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.site-tag {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:2px; text-transform:uppercase;
  padding:3px 10px; border-radius:1px; border:1px solid;
}
.tag-blood { color:#FF4FD8; border-color:var(--blood-dim); background:rgba(255,47,179,.09); }
.tag-gold { color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(138,43,226,.07); }
.tag-bone { color:var(--bone-mid); border-color:var(--border-g); background:rgba(100,90,80,.06); }
.site-reset {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:1px;
  color:var(--text-md); display:flex; align-items:center; gap:6px;
}
.site-reset::before { content:'\23F3'; font-size:16px; }

/* Right CTA column */
.site-cta {
  padding:22px 28px; display:flex; align-items:center; gap:16px; flex-shrink:0;
  border-left:1px solid var(--border-blood); align-self:stretch;
}
.site-vote-btn {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  background: linear-gradient(160deg, var(--blood-bright), var(--blood), #4D1040);
  color:var(--bone); border:1px solid rgba(255,47,179,.5);
  padding:13px 28px; border-radius:var(--radius); cursor:pointer; white-space:nowrap;
  box-shadow: 0 0 18px var(--blood-glow), inset 0 1px 0 rgba(255,255,255,.07);
  transition:all .25s;
}
.site-card:hover .site-vote-btn {
  box-shadow: 0 0 32px var(--blood-glow), inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.site-arrow { font-size:20px; color:var(--blood); transition:color .25s, transform .25s; }
.site-card:hover .site-arrow { color:var(--blood-bright); transform:translateX(4px); }

/* Featured / #1 site gold accent */
.site-card.featured { border-color:var(--gold-dim); }
.site-card.featured .site-num {
  background:rgba(138,43,226,.06); border-right-color:var(--gold-dim);
  color:var(--gold); text-shadow:0 0 16px var(--gold-glow);
}
.site-card.featured:hover {
  border-color:var(--gold);
  box-shadow: 0 6px 40px rgba(138,43,226,.1), 0 0 0 1px rgba(138,43,226,.06);
}
.site-card.featured::before {
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold-bright), var(--gold-dim), transparent);
}
.site-card.featured .site-vote-btn {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold), #00BFFF);
  color:var(--abyss); border-color:var(--gold-dim);
  box-shadow: 0 0 18px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.15);
}
.site-card.featured:hover .site-vote-btn {
  box-shadow: 0 0 32px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.featured-crown {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold-bright); border:1px solid var(--gold-dim);
  padding:3px 10px; background:rgba(138,43,226,.1); border-radius:1px;
}

/* ══════════════════════════════════════════════════════
   REWARDS SECTION
══════════════════════════════════════════════════════ */
#rewards {
  padding:80px 0 90px; background:var(--mid); position:relative;
}
#rewards::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), transparent);
}
#rewards::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), transparent);
}

.rewards-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:48px;
}
.rew-card {
  background:var(--card); border:1px solid var(--border-blood); border-radius:var(--radius);
  padding:28px 20px; text-align:center;
  position:relative; overflow:hidden; transition:all .3s;
}
.rew-card:hover {
  background:var(--card-h); transform:translateY(-3px);
  box-shadow: 0 10px 36px rgba(255,47,179,.12);
}
.rew-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blood), var(--gold), var(--blood), transparent);
  opacity:0; transition:opacity .35s;
}
.rew-card:hover::before { opacity:1; }
.rew-card.rare { border-color:var(--gold-dim); }
.rew-card.rare:hover { box-shadow:0 10px 36px rgba(138,43,226,.1); }
.rew-card.rare::before {
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold-bright), var(--gold-dim), transparent);
}

.rew-icon { font-size:36px; margin-bottom:14px; display:block; filter:drop-shadow(0 0 10px rgba(255,47,179,.3)); }
.rew-card.rare .rew-icon { filter:drop-shadow(0 0 10px var(--gold-glow)); }
.rew-cost {
  font-family:'Cinzel',serif; font-size:26px; font-weight:900;
  color:var(--blood-bright); margin-bottom:6px;
  text-shadow: 0 0 14px rgba(255,47,179,.4);
}
.rew-card.rare .rew-cost { color:var(--gold-bright); text-shadow:0 0 14px var(--gold-glow); }
.rew-name {
  font-family:'Cinzel',serif; font-size:15px; font-weight:700;
  color:var(--text-hi); margin-bottom:8px; letter-spacing:.3px;
}
.rew-desc { font-size:17px; color:var(--bone-mid); line-height:1.6; }

/* ══════════════════════════════════════════════════════
   VP PROGRESS TRACKER
══════════════════════════════════════════════════════ */
.vp-tracker {
  background:var(--card); border:1px solid var(--border-blood); border-radius:var(--radius);
  padding:32px 36px; position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.vp-tracker::before {
  content:'\2726  THE BLOOD ALTAR  \2726';
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:4px;
  color:var(--blood); background:var(--mid); padding:0 14px; white-space:nowrap;
}
.vp-heading {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700;
  color:var(--text-hi); margin-bottom:8px; letter-spacing:.4px;
}
.vp-desc { font-size:17px; color:var(--bone-mid); line-height:1.65; margin-bottom:20px; }
.vp-milestones { display:flex; flex-direction:column; gap:10px; }
.vp-milestone { display:flex; align-items:center; gap:12px; }
.vp-m-bar-wrap { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.vp-m-bar { height:100%; border-radius:2px; background:linear-gradient(90deg, var(--blood), var(--blood-bright)); }
.vp-milestone.gold .vp-m-bar { background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.vp-m-label {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:1.5px;
  color:var(--text-md); white-space:nowrap; width:80px;
}
.vp-m-val {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700;
  color:var(--blood-bright); white-space:nowrap; width:40px; text-align:right;
}
.vp-milestone.gold .vp-m-val { color:var(--gold-bright); }

.vp-claim-label {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:4px;
  text-transform:uppercase; color:var(--text-md); margin-bottom:16px;
}
.claim-cmd {
  display:flex; align-items:center; gap:14px;
  background:var(--deep); border:1px solid var(--border-blood); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:16px;
}
.claim-cmd-text {
  font-family:'Cinzel',serif; font-size:18px; font-weight:700;
  color:var(--blood-bright); letter-spacing:1px; flex:1;
  text-shadow: 0 0 14px rgba(255,47,179,.4);
}
.copy-btn {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px; text-transform:uppercase;
  background:rgba(255,47,179,.1); border:1px solid var(--border-blood); color:var(--text-md);
  padding:8px 14px; border-radius:var(--radius); cursor:pointer; transition:all .2s; white-space:nowrap;
}
.copy-btn:hover { background:rgba(255,47,179,.2); border-color:var(--blood-dim); color:var(--bone); }
.copy-btn.copied { color:var(--gold-bright); border-color:var(--gold-dim); }
.vp-claim-note { font-size:17px; color:var(--text-md); line-height:1.6; }

/* ══════════════════════════════════════════════════════
   CLAIM FORM
══════════════════════════════════════════════════════ */
#claim-section {
  padding:80px 0 90px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255,47,179,.04) 0%, transparent 65%),
    var(--abyss);
  position:relative;
}
.claim-box {
  max-width:600px; margin:0 auto;
  background:var(--card); border:1px solid var(--border-blood); border-radius:var(--radius);
  padding:40px; position:relative; overflow:hidden;
}
.claim-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), var(--gold-dim), var(--blood-dim), transparent);
}
.claim-box-title {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--blood); text-align:center; margin-bottom:6px;
}
.claim-box-sub {
  font-size:17px; color:var(--bone-mid); text-align:center;
  margin-bottom:28px; line-height:1.6;
}
.claim-row { display:flex; gap:10px; }
.claim-input {
  flex:1; background:var(--deep); border:1px solid var(--border-blood);
  color:var(--text-hi); font-family:'Inter',sans-serif; font-size:16px;
  padding:13px 18px; border-radius:var(--radius); outline:none; transition:border-color .25s;
}
.claim-input::placeholder { color:var(--text-md); }
.claim-input:focus { border-color:var(--blood-dim); }
.claim-btn {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
  background: linear-gradient(135deg, var(--blood-bright), var(--blood));
  color:var(--bone); border:none; padding:13px 24px; border-radius:var(--radius); cursor:pointer;
  white-space:nowrap; box-shadow:0 0 16px var(--blood-glow); transition:box-shadow .25s;
}
.claim-btn:hover { box-shadow:0 0 28px var(--blood-glow); }
.claim-result {
  margin-top:14px; padding:14px 18px; border-radius:var(--radius);
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:1.5px; text-align:center;
  display:none;
}
.claim-result.show { display:block; }
.claim-result.found { background:rgba(26,100,50,.1); border:1px solid #1a4a2a; color:#44bb77; }
.claim-result.none { background:rgba(255,47,179,.08); border:1px solid var(--border-blood); color:#FF4FD8; }

/* ══════════════════════════════════════════════════════
   VOTES TODAY COUNTER
══════════════════════════════════════════════════════ */
#votes-today {
  padding:40px 0 0; background:var(--mid); position:relative;
}
.votes-today-box {
  text-align:center; padding:32px 20px;
  background:var(--card); border:1px solid var(--border-blood); border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.votes-today-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--blood), var(--gold), var(--blood), transparent);
}
.votes-today-number {
  font-family:'Cinzel Decorative',serif; font-size:clamp(48px,8vw,80px); font-weight:900;
  color:var(--gold-bright); line-height:1;
  text-shadow:0 0 30px var(--gold-glow), 0 0 60px rgba(138,43,226,.2);
  animation:vt-glow 3s ease-in-out infinite alternate;
}
@keyframes vt-glow {
  0% { text-shadow:0 0 20px var(--gold-glow), 0 0 40px rgba(138,43,226,.15); }
  100% { text-shadow:0 0 40px var(--gold-glow), 0 0 80px rgba(138,43,226,.3); }
}
.votes-today-label {
  font-family:'Cinzel',serif; font-size:clamp(15px,1.8vw,18px); letter-spacing:3px;
  text-transform:uppercase; color:var(--text-md); margin-top:8px;
}

/* ══════════════════════════════════════════════════════
   DAILY VOTE STREAK TRACKER
══════════════════════════════════════════════════════ */
#streak-section {
  padding:24px 0 0; background:var(--mid);
}
.streak-tracker {
  background:var(--card); border:1px solid var(--border-blood); border-radius:var(--radius);
  padding:24px 28px; position:relative; overflow:hidden;
}
.streak-tracker::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-dim), var(--gold-bright), var(--gold-dim), transparent);
}
.streak-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px;
}
.streak-title {
  font-family:'Cinzel',serif; font-size:17px; font-weight:700;
  color:var(--text-hi); letter-spacing:1px; text-transform:uppercase;
}
.streak-fire {
  font-family:'Cinzel',serif; font-size:17px; font-weight:700;
  color:var(--gold-bright); text-shadow:0 0 12px var(--gold-glow);
}
.streak-days {
  display:flex; gap:8px; justify-content:space-between;
}
.streak-day {
  flex:1; text-align:center; min-width:0;
}
.streak-day-inner {
  width:100%; aspect-ratio:1; max-width:56px; margin:0 auto;
  border:2px solid var(--border-blood); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,47,179,.04); transition:all .3s;
  position:relative; overflow:hidden;
}
.streak-check { display:none; font-size:18px; color:var(--abyss); font-weight:900; }
.streak-num {
  font-family:'Cinzel',serif; font-size:17px; font-weight:700; color:var(--text-md);
}
.streak-day-label {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-md); margin-top:6px;
}

/* Completed day */
.streak-day.completed .streak-day-inner {
  background:linear-gradient(135deg, var(--gold-bright), var(--gold), #00BFFF);
  border-color:var(--gold-bright);
  box-shadow:0 0 16px var(--gold-glow);
}
.streak-day.completed .streak-check { display:block; }
.streak-day.completed .streak-num { display:none; }
.streak-day.completed .streak-day-label { color:var(--gold); }

/* Current day - pulsing */
.streak-day.current .streak-day-inner {
  border-color:var(--gold-dim);
  animation:streak-pulse 2s ease-in-out infinite;
}
.streak-day.current .streak-num { color:var(--gold-bright); }
@keyframes streak-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(138,43,226,.3); border-color:var(--gold-dim); }
  50% { box-shadow:0 0 16px 4px rgba(138,43,226,.25); border-color:var(--gold-bright); }
}

/* ══════════════════════════════════════════════════════
   VP CURRENT LABEL
══════════════════════════════════════════════════════ */
.vp-current-label {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:1.5px;
  color:var(--text-md); margin-top:14px; text-align:center;
  padding:8px 12px; background:rgba(138,43,226,.05); border:1px solid var(--gold-dim);
  border-radius:var(--radius);
}

/* ══════════════════════════════════════════════════════
   VOTE RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .rewards-grid { grid-template-columns:repeat(2, 1fr); }
  .how-steps { grid-template-columns:repeat(2, 1fr); }
  .vp-tracker { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .site-card { grid-template-columns:48px 1fr auto; }
  .site-cta {
    display:flex; padding:10px 12px; border-left:1px solid var(--border-blood);
    align-items:center; justify-content:center;
  }
  .site-cta .site-vote-btn { display:none; }
  .site-cta .site-arrow {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--blood-bright), var(--blood));
    color:var(--bone); font-size:16px; font-weight:700;
    box-shadow:0 0 12px var(--blood-glow);
  }
  .site-card.featured .site-cta .site-arrow {
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    color:var(--abyss);
    box-shadow:0 0 12px var(--gold-glow);
  }
  .site-body { padding:18px 20px; }
  .site-name { font-size:17px; }
  .how-steps { grid-template-columns:1fr 1fr; }
  .vp-tracker { padding:24px 20px; }
  .claim-box { padding:28px 20px; }
  .streak-days { gap:5px; }
  .streak-day-inner { max-width:42px; }
  .streak-check { font-size:17px; }
  .streak-num { font-size:15px; }
}

@media (max-width:540px) {
  .how-steps { grid-template-columns:1fr; }
  .rewards-grid { grid-template-columns:1fr 1fr; }
  .claim-row { flex-direction:column; }
  .claim-btn { width:100%; }
  .site-card { grid-template-columns:40px 1fr auto; }
  .streak-day-inner { max-width:36px; }
  .streak-day-label { font-size:15px; }
}

@media (max-width:380px) {
  .rewards-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════
   VOTE COOLDOWN STATES
══════════════════════════════════════════════════════ */
.site-on-cooldown {
  opacity: 0.6;
  filter: grayscale(30%);
  transition: opacity .3s, filter .3s;
}
.site-on-cooldown:hover {
  opacity: 0.75;
}
.vote-cooldown {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.vote-timer {
  display: none;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--gold);
  text-align: center;
  padding: 8px 16px;
  margin-top: 0;
  border-top: 1px solid var(--border);
  background: rgba(138,43,226,.08);
  grid-column: 1 / -1;
}
.vote-timer i {
  margin-right: 6px;
  color: var(--gold-dim);
}

/* ══════════════════════════════════════════════════════
   ANIMATED CHECKMARKS — SVG DRAW
══════════════════════════════════════════════════════ */
.vote-check-svg {
  width:24px; height:24px; display:inline-block;
}
.vote-check-svg circle {
  fill: var(--emerald, #2d5a27);
  opacity:0; animation: checkCircle .3s ease forwards;
}
.vote-check-svg path {
  stroke:#fff; stroke-width:2; fill:none;
  stroke-dasharray:20; stroke-dashoffset:20;
  animation: checkDraw .4s .2s ease forwards;
}
@keyframes checkCircle { to { opacity:1; } }
@keyframes checkDraw { to { stroke-dashoffset:0; } }

/* ══════════════════════════════════════════════════════
   STREAK FIRE CSS ANIMATION
══════════════════════════════════════════════════════ */
.streak-fire {
  display:inline-block; position:relative;
  text-shadow: 0 0 8px rgba(255,47,179,.6), 0 0 16px rgba(138,43,226,.4), 0 0 24px rgba(138,43,226,.2);
  animation: fireFlicker 0.15s infinite alternate;
}
@keyframes fireFlicker {
  0% { text-shadow: 0 0 6px rgba(255,47,179,.5), 0 0 12px rgba(138,43,226,.3); }
  25% { text-shadow: 0 0 10px rgba(255,79,216,.7), 0 0 20px rgba(138,43,226,.5); }
  50% { text-shadow: 0 0 8px rgba(255,47,179,.6), 0 0 16px rgba(138,43,226,.4); }
  75% { text-shadow: 0 0 12px rgba(255,79,216,.8), 0 0 24px rgba(138,43,226,.5); }
  100% { text-shadow: 0 0 7px rgba(255,47,179,.5), 0 0 14px rgba(138,43,226,.3); }
}