/* ═══ CPL Live Voting Styles ═══ */

.vote-page { padding: 80px 0 60px; }

.vote-count-nav {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:50px;
  background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.2);
  font-size:0.85rem; color:var(--accent-purple); font-weight:600;
}

.vote-header { text-align:center; margin-bottom:40px; }

/* ─── BATTLE CARD ─── */
.battle-card {
  background:var(--bg-card); border:1px solid var(--glass-border);
  border-radius:var(--radius); overflow:hidden; position:relative;
}
.battle-header {
  padding:24px 32px; text-align:center;
  border-bottom:1px solid var(--glass-border);
  background:rgba(0,0,0,0.2);
}
.battle-badge {
  font-size:0.75rem; font-weight:700; letter-spacing:2px; color:var(--accent-purple);
  margin-bottom:8px; text-transform:uppercase;
}
.battle-challenge { font-size:1.1rem; font-weight:600; color:var(--text-primary); }

/* ─── ARENA ─── */
.battle-arena {
  display:grid; grid-template-columns:1fr auto 1fr;
  min-height:420px;
}
.battle-side {
  padding:40px 32px; text-align:center; cursor:pointer;
  position:relative; transition:all 0.4s ease; overflow:hidden;
}
.side-glow {
  position:absolute; inset:0; opacity:0; transition:opacity 0.4s;
}
.side-a .side-glow { background:radial-gradient(circle at center, rgba(79,127,255,0.08), transparent 70%); }
.side-b .side-glow { background:radial-gradient(circle at center, rgba(236,72,153,0.08), transparent 70%); }
.battle-side:hover .side-glow { opacity:1; }
.battle-side:hover { background:rgba(255,255,255,0.02); }
.battle-side.voted { pointer-events:none; }
.battle-side.winner { background:rgba(16,185,129,0.04); }
.battle-side.winner .side-avatar { transform:scale(1.1); }

.side-avatar {
  font-size:4rem; width:100px; height:100px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; transition:all 0.4s;
  background:var(--gradient-card); border:3px solid var(--glass-border);
}
.side-a:hover .side-avatar { border-color:rgba(79,127,255,0.4); box-shadow:0 0 30px rgba(79,127,255,0.2); }
.side-b:hover .side-avatar { border-color:rgba(236,72,153,0.4); box-shadow:0 0 30px rgba(236,72,153,0.2); }

.side-name { font-size:1.4rem; font-weight:800; margin-bottom:6px; }
.side-team { font-size:0.85rem; color:var(--text-secondary); margin-bottom:4px; }
.side-meta { font-size:0.8rem; color:var(--text-secondary); margin-bottom:20px; }

.reel-preview {
  width:160px; height:100px; margin:0 auto 20px;
  border-radius:var(--radius-sm); background:rgba(0,0,0,0.4);
  border:1px solid var(--glass-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:all 0.3s;
}
.reel-preview:hover { border-color:rgba(139,92,246,0.3); }
.reel-thumb { font-size:1.5rem; margin-bottom:4px; }
.reel-label { font-size:0.7rem; color:var(--text-secondary); }

/* ─── VOTE BUTTON ─── */
.vote-btn {
  padding:14px 36px; border-radius:50px; border:2px solid var(--glass-border);
  background:transparent; color:var(--text-primary); font-weight:700;
  font-size:1rem; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden;
}
.vote-btn .vote-icon { margin-right:6px; }
.vote-btn-a:hover { border-color:#4f7fff; background:rgba(79,127,255,0.1); box-shadow:0 0 24px rgba(79,127,255,0.2); }
.vote-btn-b:hover { border-color:#ec4899; background:rgba(236,72,153,0.1); box-shadow:0 0 24px rgba(236,72,153,0.2); }
.vote-btn.selected {
  border-color:var(--accent-green); background:rgba(16,185,129,0.15);
  color:var(--accent-green);
}
.vote-btn.selected::after {
  content:'✓ VOTED'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,185,129,0.15); font-weight:700;
}

/* ─── VS CENTER ─── */
.vs-center {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 20px; gap:12px;
  border-left:1px solid var(--glass-border);
  border-right:1px solid var(--glass-border);
  background:rgba(0,0,0,0.2);
}
.vs-badge {
  font-family:'Outfit'; font-size:1.8rem; font-weight:900; color:var(--text-secondary);
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-border);
}
.vs-timer {
  font-family:'Outfit'; font-size:1.2rem; font-weight:700; color:var(--accent-orange);
  padding:6px 14px; border-radius:50px;
  background:rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.2);
}

/* ─── RESULTS ─── */
.battle-results {
  padding:28px 32px; border-top:1px solid var(--glass-border);
  display:none; animation:slideUp 0.5s ease;
}
.battle-results.show { display:block; }
@keyframes slideUp {
  from { transform:translateY(20px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
.results-bar-wrap { margin-bottom:20px; }
.results-bar {
  display:flex; height:40px; border-radius:50px; overflow:hidden;
  background:rgba(0,0,0,0.3); margin-bottom:8px;
}
.bar-fill {
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:'Outfit'; font-size:0.95rem;
  transition:width 1.5s cubic-bezier(0.16,1,0.3,1);
  min-width:40px;
}
.bar-fill-a { background:linear-gradient(90deg, #4f7fff, #6d8fff); color:#fff; border-radius:50px 0 0 50px; }
.bar-fill-b { background:linear-gradient(90deg, #d946a8, #ec4899); color:#fff; border-radius:0 50px 50px 0; }
.results-labels {
  display:flex; justify-content:space-between;
  font-size:0.8rem; color:var(--text-secondary);
}
.next-btn { display:block; margin:0 auto; }

/* ─── PROGRESS DOTS ─── */
.battle-progress { display:flex; justify-content:center; margin-top:24px; gap:8px; }
.progress-dot {
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
  transition:all 0.3s;
}
.progress-dot.active { background:var(--accent-purple); border-color:var(--accent-purple); transform:scale(1.2); }
.progress-dot.done { background:var(--accent-green); border-color:var(--accent-green); }

/* ─── COMPLETED ─── */
.completed-section { margin-top:48px; }
.completed-grid { display:flex; flex-direction:column; gap:12px; }
.completed-item {
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--glass-border);
  animation:fadeSlide 0.4s ease;
}
@keyframes fadeSlide {
  from { transform:translateX(-10px); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}
.completed-item .ci-battle { font-size:0.75rem; color:var(--text-secondary); font-weight:600; min-width:60px; }
.completed-item .ci-winner { display:flex; align-items:center; gap:8px; flex:1; }
.completed-item .ci-winner-emoji { font-size:1.3rem; }
.completed-item .ci-winner-name { font-weight:700; }
.completed-item .ci-vs { color:var(--text-secondary); font-size:0.85rem; }
.completed-item .ci-result {
  font-family:'Outfit'; font-weight:700; font-size:0.9rem;
  padding:4px 14px; border-radius:50px;
  background:rgba(16,185,129,0.1); color:var(--accent-green);
}

/* ─── CONFETTI ─── */
#confetti-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:9999;
}

/* ─── RESPONSIVE ─── */
@media(max-width:768px) {
  .battle-arena { grid-template-columns:1fr; }
  .vs-center {
    flex-direction:row; padding:16px;
    border-left:none; border-right:none;
    border-top:1px solid var(--glass-border);
    border-bottom:1px solid var(--glass-border);
  }
  .side-avatar { width:80px; height:80px; font-size:3rem; }
  .side-name { font-size:1.2rem; }
}