/* ============================================================
   Root
   ============================================================ */

.slovak-poll {
  --slovak-poll-name-fs: 18.859px;
  --slovak-poll-count-fs: 14.341px;
  --slovak-poll-gap: 6px;
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: inherit;
  color: #000;
}

.slovak-poll *,
.slovak-poll *::before,
.slovak-poll *::after {
  box-sizing: border-box;
}

/* ============================================================
   Chart container
   ============================================================ */

.slovak-poll__chart {
  display: flex;
  gap: var(--slovak-poll-gap);
  align-items: flex-end;
  contain: layout style; /* bar transitions inside here cannot trigger full-page reflow */
}

/* ============================================================
   Item — entrance animation states
   ============================================================ */

.slovak-poll__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 12px;
  border-radius: 20px;
  font: inherit;
  color: inherit;
  opacity: 0;
}


.slovak-poll__item.is-entered {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease-out, transform 0.72s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.slovak-poll__item.is-entered:hover {
  background: rgba(0, 0, 0, 0.06);
}

.slovak-poll__item.is-entered:active {
  transform: scale(0.95);
  transition: transform 0.1s ease-out, background-color 0.3s ease;
}

.slovak-poll__item.is-disabled {
  cursor: not-allowed;
}

/* ============================================================
   Bar wrap
   ============================================================ */

.slovak-poll__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Crown slot — holds desktop crown + vote badge (both absolute)
   ============================================================ */

.slovak-poll__crown-slot {
  position: relative;
  min-height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slovak-poll__crown {
  width: 28px;
  height: 28px;
  color: #eab308;
  transform: scale(0) rotate(-180deg);
  animation: slovakPollCrown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* +1 badge: pops in and floats away */
.slovak-poll__vote-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 5px 12px 5px 11px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.4;
  animation: slovakPollVoteBadge 0.96s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================
   Bar
   ============================================================ */

.slovak-poll__bar {
  position: relative;
  overflow: hidden;
  width: 24px;
  background: #000;
  border-radius: 17px;
  height: var(--bar-h, 40px);
  transform-origin: bottom;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: height; /* pre-promote for Safari — height transitions are layout-bound */
}

.slovak-poll__bar.is-dip {
  animation: slovakPollDip 0.55s ease-in-out;
  transform-origin: bottom;
}

.slovak-poll__bar.is-boosted::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--boost-pct, 0%);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 17px 17px 0 0;
  animation: slovakPollBoostFade 1.55s ease-out forwards;
}

.slovak-poll__bar.is-personal {
  background: linear-gradient(
    to top,
    #000 calc(100% - var(--personal-pct, 30%)),
    #4ade80 calc(100% - var(--personal-pct, 30%))
  );
}

/* ============================================================
   Name — direct child of btn
   ============================================================ */

.slovak-poll__name {
  font-size: var(--slovak-poll-name-fs);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  color: #000;
  margin: 0;
  width: 70px;
}

/* ============================================================
   Count wrap — direct child of btn (crown-mini + count)
   ============================================================ */

.slovak-poll__count-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Mini crown: hidden on desktop, shown on mobile for winner */
.slovak-poll__crown-mini {
  display: none;
  align-items: center;
  flex-shrink: 0;
}

.slovak-poll__count {
  font-size: var(--slovak-poll-count-fs);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #000;
}

.slovak-poll__count.is-bump {
  animation: slovakPollBump 0.3s ease-out;
}

/* ============================================================
   Pills
   ============================================================ */

.slovak-poll__pills {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.slovak-poll__live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.7);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.slovak-poll__live.is-incoming {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22);
}

.slovak-poll__live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: slovakPollBreathe 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: background-color 0.3s ease;
}

.slovak-poll__live.is-incoming .slovak-poll__live-dot {
  animation-duration: 1s;
}

.slovak-poll__live-dot::before,
.slovak-poll__live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #10b981;
  opacity: 0;
  animation: slovakPollHalo 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.slovak-poll__live-dot::after {
  animation-delay: 1.4s;
}

.slovak-poll__live-text.is-bump {
  animation: slovakPollLiveBump 0.25s ease-out;
}

.slovak-poll__remaining {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(245, 158, 11, 0.18));
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.slovak-poll__remaining-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ea580c;
  animation: slovakPollFlame 1.4s ease-in-out infinite;
  transform-origin: 50% 80%;
}

.slovak-poll__remaining.is-done {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.22), rgba(234, 179, 8, 0.22));
  color: #854d0e;
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.3);
}

.slovak-poll__remaining.is-done .slovak-poll__remaining-icon {
  color: #ca8a04;
  animation: slovakPollSparkle 2.2s ease-in-out infinite;
}

.slovak-poll__remaining.is-pop {
  animation: slovakPollPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slovak-poll__remaining.is-shake {
  animation: slovakPollShake 0.35s ease-in-out;
}

/* ============================================================
   Fireworks
   ============================================================ */

.slovak-poll__fireworks {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}

.slovak-poll__spark {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: slovakPollSpark 1.0s ease-out forwards;
}

/* ============================================================
   Mobile layout — driven by .is-mobile class (JS-controlled)
   ============================================================ */

.slovak-poll.is-mobile .slovak-poll__chart {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
}

.slovak-poll.is-mobile .slovak-poll__item {
  flex-direction: row;
  align-items: center;
  padding: 8px 6px;
  gap: 8px;
  border-radius: 14px;
}

/* Name: left column, wider for long city names, vertically centered */
.slovak-poll.is-mobile .slovak-poll__name {
  order: -2;
  width: 100px;
  min-width: 100px;
  text-align: left;
  font-size: 15px;
  line-height: 1.2;
  align-self: center;
  /* Allow wrapping — long names like "Banská Bystrica" split naturally */
  white-space: normal;
  overflow-wrap: break-word;
}

/* Bar wrap: middle, takes flex space */
.slovak-poll.is-mobile .slovak-poll__bar-wrap {
  order: -1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 0;
  position: relative;
  overflow: visible;
}

/* Crown slot: absolutely positioned above bar end, badge-only on mobile */
.slovak-poll.is-mobile .slovak-poll__crown-slot {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  /* Slides rightward to follow bar tip */
  transform: translateX(calc(var(--bar-h, 40px) - 10px));
  min-height: unset;
  width: 20px;
  height: 20px;
  justify-content: flex-start;
}

/* Hide desktop crown SVG on mobile — shown via crown-mini instead */
.slovak-poll.is-mobile .slovak-poll__crown {
  display: none;
}

/* Bar: horizontal on mobile */
.slovak-poll.is-mobile .slovak-poll__bar {
  height: 24px;
  width: var(--bar-h, 40px);
  max-width: 100%;
  border-radius: 4px 17px 17px 4px;
  flex-shrink: 0;
  transition-property: width;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); /* smooth decelerate, no overshoot on mobile */
  will-change: width;
}

/* Count wrap: right side, min-width to reserve space */
.slovak-poll.is-mobile .slovak-poll__count-wrap {
  order: 0;
  justify-content: flex-start;
  min-width: 38px;
}

/* Crown mini: shown on mobile when item is the winner */
.slovak-poll.is-mobile .slovak-poll__item.is-winner .slovak-poll__crown-mini {
  display: inline-flex;
}

/* Personal gradient: right-to-left on mobile horizontal bar */
.slovak-poll.is-mobile .slovak-poll__bar.is-personal {
  background: linear-gradient(
    to right,
    #000 calc(100% - var(--personal-pct, 30%)),
    #4ade80 calc(100% - var(--personal-pct, 30%))
  );
}

/* Boost: flash on right (newly grown) end of bar */
.slovak-poll.is-mobile .slovak-poll__bar.is-boosted::after {
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  height: 100%;
  width: var(--boost-pct, 0%);
  border-radius: 0 17px 17px 0;
}

/* +1 badge: floats rightward on mobile (bar grows right) */
.slovak-poll.is-mobile .slovak-poll__vote-badge {
  animation-name: slovakPollVoteBadgeMobile;
}

/* Dip: compress horizontally */
.slovak-poll.is-mobile .slovak-poll__bar.is-dip {
  animation: slovakPollDipMobile 0.55s ease-in-out;
  transform-origin: left center;
}


/* ============================================================
   Keyframes
   ============================================================ */



@keyframes slovakPollCrown {
  to { transform: scale(1) rotate(0deg); }
}

@keyframes slovakPollVoteBadge {
  0%   { opacity: 0;   transform: translateX(-50%) scale(0.4) translateY(10px); }
  28%  { opacity: 1;   transform: translateX(-50%) scale(1.18) translateY(-7px); }
  50%  { opacity: 1;   transform: translateX(-50%) scale(1)    translateY(-2px); }
  72%  { opacity: 1;   transform: translateX(-50%) scale(1)    translateY(-5px); }
  100% { opacity: 0;   transform: translateX(-50%) scale(0.85) translateY(-18px); }
}

/* Mobile: badge drifts rightward since the bar grows to the right */
@keyframes slovakPollVoteBadgeMobile {
  0%   { opacity: 0;   transform: translate(-50%, 0)    scale(0.5); }
  22%  { opacity: 1;   transform: translate(-20%, -4px) scale(1.18); }
  55%  { opacity: 1;   transform: translate(10%,  -3px) scale(1); }
  100% { opacity: 0;   transform: translate(50%,  -3px) scale(0.85); }
}

@keyframes slovakPollDip {
  0%   { transform: scaleY(1); }
  32%  { transform: scaleY(0.78); }
  66%  { transform: scaleY(1.04); }
  100% { transform: scaleY(1); }
}

@keyframes slovakPollDipMobile {
  0%   { transform: scaleX(1); }
  32%  { transform: scaleX(0.82); }
  66%  { transform: scaleX(1.04); }
  100% { transform: scaleX(1); }
}

@keyframes slovakPollBoostFade {
  0%   { opacity: 1; }
  40%  { opacity: 0.65; }
  100% { opacity: 0; }
}

@keyframes slovakPollBump {
  0%   { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(1);   opacity: 1;   }
}

@keyframes slovakPollHalo {
  0%   { transform: scale(1);   opacity: 0.45; }
  70%  { transform: scale(2.6); opacity: 0;    }
  100% { transform: scale(2.6); opacity: 0;    }
}

@keyframes slovakPollBreathe {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(0.92); opacity: 0.8; }
}

@keyframes slovakPollFlame {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.12) rotate(2deg); }
}

@keyframes slovakPollSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.15) rotate(8deg); }
}

@keyframes slovakPollPop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes slovakPollShake {
  0%, 100% { transform: translateX(0);   }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px);  }
}

@keyframes slovakPollLiveBump {
  0%   { transform: translateY(-3px); opacity: 0.4; }
  100% { transform: translateY(0);    opacity: 1;   }
}

@keyframes slovakPollSpark {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translate(0px, 0px) scale(1);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--sp-dx, 0px), var(--sp-dy, 0px)) scale(0.15);
  }
}