/* ============================================================
   MEXHICKENS — Voting UI
   ============================================================ */

.voting-section {
  margin-top: var(--space-6);
}

/* ─── Instruction text ─── */
.voting-instructions {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.voting-instructions strong {
  color: var(--text-primary);
}

/* ─── Thumbnail tray ─── */
.chicken-tray {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.tray-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: visible;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.tray-thumb:hover  { transform: scale(1.08); }
.tray-thumb.active { transform: scale(1.08); }

.tray-thumb img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid var(--border-subtle);
  transition: border-color var(--dur-fast);
  display: block;
}

.tray-thumb.active img {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 2px var(--color-teal);
}

/* Medal overlay on thumbnail */
.tray-medal {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-surface);
  animation: medal-pop 0.3s var(--ease-bounce);
  z-index: 5;
  line-height: 1;
}

.tray-medal--gold   { background: var(--medal-gold);   color: #4A2800; }
.tray-medal--silver { background: var(--medal-silver);  color: #1A2A33; }
.tray-medal--bronze { background: var(--medal-bronze);  color: #fff; }

@keyframes medal-pop {
  0%   { transform: scale(0) rotate(-20deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Flash when medal moves from another thumb */
.tray-thumb.flash-remove img {
  animation: flash-red 0.4s ease;
}
@keyframes flash-red {
  0%, 100% { border-color: var(--border-subtle); }
  50%       { border-color: var(--color-coral); box-shadow: 0 0 12px var(--color-coral); }
}

/* ─── Submit area ─── */
.voting-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.voting-progress {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.voting-progress .count {
  font-weight: 700;
  color: var(--color-teal);
}

/* ─── Results view (post-vote) ─── */
.results-section {
  margin-top: var(--space-6);
}

.results-header {
  text-align: center;
  margin-bottom: var(--space-5);
}

.results-header__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.results-header__subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Results grid: 5 chicken cards with tally bars */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}

.result-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--card-shadow);
}

.result-card.winner {
  border-color: var(--medal-gold);
  box-shadow: var(--card-shadow), var(--shadow-glow-gold);
}

.result-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-raised);
}

.result-card__body {
  padding: var(--space-3);
}

.result-card__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-card__my-vote {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.result-card__my-vote span {
  font-weight: 700;
}

/* ─── "Already voted" notice ─── */
.voted-notice {
  text-align: center;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.voted-notice strong { color: var(--color-teal); }