/* Vote is an action page: reward/account context and vote links stay above the fold. */
.uf-v5-vote-page .uf-v5-page-hero,
.uf-v5-vote-page .uf-v5-page-hero__inner {
  min-height: 176px !important;
}

.uf-v5-vote-page .uf-v5-page-hero__inner {
  padding-block: 22px !important;
}

.uf-v5-vote-page .uf-v5-page-hero h1 {
  font-size: clamp(36px, 4vw, 46px) !important;
}

.uf-v5-vote-page .uf-v5-page-hero p {
  margin-top: 10px !important;
  font-size: 14px !important;
}

.uf-vote-action-section {
  padding-block: 24px 72px;
}

.uf-vote-start {
  display: grid;
  align-items: stretch;
  gap: 12px;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
}

.uf-vote-reward-card,
.uf-vote-start .uf-vote-account-strip {
  box-sizing: border-box;
  min-height: 132px;
  margin: 0;
  border: 1px solid rgba(63, 208, 238, .28);
  background:
    linear-gradient(135deg, rgba(63, 208, 238, .08), transparent 48%),
    rgba(5, 18, 23, .96);
}

.uf-vote-reward-card {
  display: grid;
  align-items: center;
  gap: 4px;
  grid-template-columns: 116px minmax(0, 1fr);
  padding: 8px 16px 8px 8px;
  border-color: rgba(230, 185, 80, .38);
  background:
    radial-gradient(circle at 16% 45%, rgba(63, 208, 238, .13), transparent 34%),
    linear-gradient(135deg, rgba(230, 185, 80, .09), transparent 48%),
    rgba(15, 20, 16, .96);
  overflow: hidden;
}

.uf-vote-key {
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  perspective: 600px;
}

.uf-vote-key img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 11px rgba(0, 0, 0, .45)) drop-shadow(0 0 8px rgba(63, 208, 238, .28));
  transform-style: preserve-3d;
  animation: uf-vote-key-spin 5.2s linear infinite;
}

.uf-vote-reward-card .uf-v5-kicker,
.uf-vote-account-strip .uf-v5-kicker {
  display: block;
  margin: 0 0 5px;
  font-size: 9px;
}

.uf-vote-reward-card strong,
.uf-vote-start .uf-vote-account-strip strong {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}

.uf-vote-reward-card p,
.uf-vote-start .uf-vote-account-strip p {
  margin: 6px 0 0;
  color: var(--uf-v4-muted);
  font-size: 12px;
  line-height: 1.4;
}

.uf-vote-reward-card a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--uf-v4-gold);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

.uf-vote-reward-card a:hover,
.uf-vote-reward-card a:focus-visible {
  color: #fff;
}

.uf-vote-reward-card a svg {
  width: 13px;
  height: 13px;
}

.uf-vote-start .uf-vote-account-strip {
  display: grid;
  align-items: center;
  gap: 14px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 17px 18px;
}

.uf-vote-start .uf-vote-account-strip > svg {
  width: 25px;
  height: 25px;
}

.uf-vote-start .uf-vote-account-strip .uf-button {
  min-height: 38px;
  white-space: nowrap;
}

.uf-vote-list-heading {
  display: grid;
  align-items: end;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  margin: 22px 0 12px;
}

.uf-vote-list-heading h2 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.05;
}

.uf-vote-list-heading p {
  margin: 0;
  color: var(--uf-v4-muted);
  font-size: 12px;
  line-height: 1.5;
}

.uf-v5-vote-page .uf-simple-card-grid {
  scroll-margin-top: 90px;
}

.uf-v5-vote-page .uf-simple-card {
  min-height: 154px;
  padding: 14px;
}

.uf-v5-vote-page .uf-simple-card h2 {
  margin: 9px 0 5px;
  font-size: 16px;
  line-height: 1.15;
}

.uf-vote-site-icon {
  width: 68px;
  height: 68px;
}

.uf-v5-vote-page .uf-simple-card strong {
  font-size: 11px;
}

.uf-vote-leaderboard {
  margin-top: 20px;
}

@keyframes uf-vote-key-spin {
  0% { transform: rotateY(0deg) translateY(0); }
  25% { transform: rotateY(90deg) translateY(-3px); }
  50% { transform: rotateY(180deg) translateY(0); }
  75% { transform: rotateY(270deg) translateY(-3px); }
  100% { transform: rotateY(360deg) translateY(0); }
}

@media (max-width: 760px) {
  .uf-v5-vote-page .uf-v5-page-hero,
  .uf-v5-vote-page .uf-v5-page-hero__inner {
    min-height: 154px !important;
  }

  .uf-v5-vote-page .uf-v5-page-hero__inner {
    padding-block: 15px !important;
  }

  .uf-v5-vote-page .uf-v5-page-hero h1 {
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  .uf-v5-vote-page .uf-v5-page-hero p {
    max-width: 31ch;
    margin-top: 7px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .uf-vote-action-section {
    padding-block: 12px 48px;
  }

  .uf-vote-start {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uf-vote-reward-card,
  .uf-vote-start .uf-vote-account-strip {
    min-height: 154px;
  }

  .uf-vote-reward-card {
    display: block;
    position: relative;
    padding: 12px;
  }

  .uf-vote-key {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 64px;
    height: 64px;
    opacity: .92;
  }

  .uf-vote-reward-card > div {
    position: relative;
    z-index: 1;
    padding-top: 4px;
  }

  .uf-vote-reward-card .uf-v5-kicker {
    max-width: 10ch;
  }

  .uf-vote-reward-card strong,
  .uf-vote-start .uf-vote-account-strip strong {
    max-width: 11ch;
    font-size: 15px;
  }

  .uf-vote-reward-card p,
  .uf-vote-start .uf-vote-account-strip p {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .uf-vote-reward-card a {
    margin-top: 7px;
    font-size: 10px;
  }

  .uf-vote-start .uf-vote-account-strip {
    align-content: start;
    gap: 5px 8px;
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 12px;
  }

  .uf-vote-start .uf-vote-account-strip > svg {
    width: 19px;
    height: 19px;
  }

  .uf-vote-start .uf-vote-account-strip .uf-button {
    width: 100%;
    min-height: 32px;
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 4px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .uf-vote-list-heading {
    display: block;
    margin: 15px 0 9px;
  }

  .uf-vote-list-heading h2 {
    font-size: 21px;
  }

  .uf-vote-list-heading p {
    margin-top: 5px;
    font-size: 11px;
  }

  .uf-v5-vote-page .uf-simple-card {
    min-height: 132px;
    padding: 10px 7px;
  }

  .uf-vote-site-icon {
    width: 54px;
    height: 54px;
  }

  .uf-v5-vote-page .uf-simple-card h2 {
    margin: 7px 0 4px;
    font-size: 13px;
  }

  .uf-v5-vote-page .uf-simple-card strong {
    font-size: 9.5px;
  }

  .uf-v5-vote-page .uf-simple-card small {
    margin-top: 5px;
    font-size: 8.5px;
  }
}

@media (max-width: 360px) {
  .uf-vote-start {
    grid-template-columns: 1fr;
  }

  .uf-vote-reward-card,
  .uf-vote-start .uf-vote-account-strip {
    min-height: 132px;
  }
}

/* Keep the linked Vote Key guide useful on a phone instead of spending the
 * first screen on its long title. Other guide heroes keep their own layout. */
@media (max-width: 760px) {
  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero,
  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero__inner {
    min-height: 360px;
  }

  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero__inner {
    padding-block: 34px;
  }

  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero__title {
    display: grid;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero__title > span {
    width: 46px;
    height: 46px;
  }

  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero__title > span svg {
    width: 20px;
    height: 20px;
  }

  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero h1 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.04;
  }

  .uf-v5-guides--vote-keys-and-vote-crate .uf-v5-page-hero__copy > p {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uf-vote-key img {
    animation: none;
  }
}