/* FIREFLYSMP VOTE PAGE — simple 5-banner layout */

.vote-page {
  min-height: 720px;
  background: #fff;
}

.vote-banner-section {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 84px 0 135px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 194, 26, .12), transparent 20%),
    radial-gradient(circle at 88% 20%, rgba(133, 211, 232, .20), transparent 25%),
    linear-gradient(180deg, #eefafd 0%, #dff5f9 45%, #eaf8f2 100%);
}

.vote-banner-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(8, 117, 145, .035) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(8, 117, 145, .035) 50%, transparent 50.2%);
  background-size: 52px 52px;
}

.vote-banner-inner {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.vote-banner-heading {
  margin-bottom: 34px;
}

.vote-banner-heading .section-label {
  color: #0a7897;
}

.vote-banner-heading h1 {
  margin: 8px 0 5px;
  color: #102126;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5vw, 61px);
  line-height: 1;
  letter-spacing: -.045em;
}

.vote-banner-heading p {
  margin: 0;
  color: #5f7378;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.vote-banner-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.vote-banner {
  grid-column: span 2;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 129, .12);
  border-radius: 11px;
  background: #fff;
  box-shadow:
    0 5px 0 rgba(13, 87, 104, .08),
    0 16px 32px rgba(19, 86, 101, .08);
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.vote-banner:nth-child(4) {
  grid-column: 2 / span 2;
}

.vote-banner:nth-child(5) {
  grid-column: 4 / span 2;
}

.vote-banner:hover {
  transform: translateY(-5px);
  box-shadow:
    0 7px 0 rgba(13, 87, 104, .07),
    0 24px 42px rgba(19, 86, 101, .13);
}

.vote-banner-image {
  position: relative;
  height: 190px;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .35s ease, filter .35s ease;
}

.vote-banner:hover .vote-banner-image {
  transform: scale(1.025);
  filter: saturate(1.08);
}

/* Lightweight Minecraft-inspired banner art */

.banner-one {
  background: linear-gradient(180deg, #a8d8ed 0 46%, #74a75c 46% 60%, #4d753f 60%);
}

.banner-two {
  background: linear-gradient(180deg, #b7dff0 0 46%, #718b65 46% 59%, #66513e 59%);
}

.banner-three {
  background: linear-gradient(180deg, #b6e1f1 0 43%, #6da058 43% 57%, #4b8ba3 57% 75%, #496d3f 75%);
}

.banner-four {
  background: linear-gradient(180deg, #bce4f2 0 43%, #78a65f 43% 58%, #a67b55 58%);
}

.banner-five {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 214, 73, .35), transparent 26%),
    linear-gradient(180deg, #b9e0ef 0 45%, #709b59 45% 62%, #4e713f 62%);
}

.banner-land {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 63px;
  background: #466b3b;
  transform: rotate(-2deg);
}

.banner-tree {
  position: absolute;
  bottom: 24px;
  width: 55px;
  height: 116px;
}

.banner-tree::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 0;
  width: 13px;
  height: 62px;
  background: #6f4a31;
}

.banner-tree::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 55px;
  height: 72px;
  background: #3d7a3e;
  clip-path: polygon(50% 0, 100% 38%, 86% 100%, 15% 100%, 0 38%);
}

.tree-left { left: 25px; }
.tree-right { right: 25px; transform: scale(1.08); }
.tree-three { right: 32px; bottom: 15px; }

.banner-house {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 138px;
  height: 78px;
  transform: translateX(-50%);
  background: #9a7049;
  box-shadow: inset 0 -18px 0 #775238;
}

.banner-house::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -33px;
  height: 38px;
  background: #804238;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.banner-mountain {
  position: absolute;
  bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mountain-one {
  left: -15px;
  width: 210px;
  height: 145px;
  background: #728274;
}

.mountain-two {
  right: -25px;
  width: 240px;
  height: 165px;
  background: #566a59;
}

.banner-lantern {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 35px;
  width: 27px;
  height: 45px;
  transform: translateX(-50%);
  background: #f5ad31;
  border: 5px solid #72502f;
  box-shadow: 0 0 28px rgba(255, 187, 56, .5);
}

.banner-water {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 78px;
  background: #4f91aa;
  transform: skewX(-8deg);
}

.banner-bridge {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: 205px;
  height: 27px;
  transform: translateX(-50%) rotate(-3deg);
  background: #825c3c;
  box-shadow: inset 0 -8px 0 #62422d;
}

.banner-shop {
  position: absolute;
  left: 48px;
  bottom: 31px;
  width: 150px;
  height: 87px;
  background: #a8794e;
}

.banner-shop::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -27px;
  height: 31px;
  background: repeating-linear-gradient(90deg, #f2e4cb 0 22px, #bd594d 22px 44px);
  transform: skewX(-11deg);
}

.banner-crate {
  position: absolute;
  right: 46px;
  bottom: 31px;
  width: 65px;
  height: 65px;
  border: 6px solid #765237;
  background:
    linear-gradient(45deg, transparent 44%, #795538 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #795538 45% 55%, transparent 56%),
    #a87a4b;
}

.banner-path {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35px;
  background: #b28b63;
}

.banner-platform {
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 185px;
  height: 48px;
  transform: translateX(-50%);
  background: #674830;
  box-shadow: inset 0 10px 0 #7fa84f;
}

.banner-beacon {
  position: absolute;
  left: 50%;
  bottom: 73px;
  width: 46px;
  height: 73px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #d7f7f7, #fff, #bceef1);
  box-shadow: 0 0 30px rgba(255, 222, 88, .55);
}

.banner-firefly {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #ffe15d;
  box-shadow: 0 0 14px #ffd128;
  animation: banner-fly 3.5s ease-in-out infinite;
}

.firefly-a { left: 29%; top: 26%; }
.firefly-b { right: 25%; top: 34%; animation-delay: -1.5s; }
.firefly-c { right: 20%; top: 24%; animation-delay: -.8s; }
.firefly-d { left: 30%; top: 25%; animation-delay: -2s; }
.firefly-e { right: 28%; top: 25%; animation-delay: -1.2s; }
.firefly-f { left: 29%; top: 27%; }
.firefly-g { right: 28%; top: 22%; animation-delay: -1.4s; }
.firefly-h { left: 60%; top: 39%; animation-delay: -2.4s; }

.vote-banner-bar {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: #07566c;
  color: #fff;
}

.banner-number {
  min-width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #153139;
  background: #f3fbfc;
  font-size: 9px;
  font-weight: 800;
}

.vote-banner-bar strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #172c25;
  background: #ffc21a;
  font-size: 12px;
  transition: transform .18s ease;
}

.vote-banner:hover .banner-arrow {
  transform: translate(2px, -2px);
}

.vote-bottom-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 76px;
}

@keyframes banner-fly {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(4px,-10px) rotate(12deg); }
}

@media (max-width: 950px) {
  .vote-banner-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vote-banner,
  .vote-banner:nth-child(4),
  .vote-banner:nth-child(5) {
    grid-column: auto;
  }

  .vote-banner:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .vote-banner-section {
    padding-top: 60px;
  }

  .vote-banner-inner {
    width: calc(100% - 30px);
  }

  .vote-banner-grid {
    grid-template-columns: 1fr;
  }

  .vote-banner:last-child {
    grid-column: auto;
  }

  .vote-banner-image {
    height: 180px;
  }

  .vote-banner-heading h1 {
    font-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-firefly {
    animation: none;
  }

  .vote-banner,
  .vote-banner-image,
  .banner-arrow {
    transition: none;
  }
}

.vote-showcase-banner{
  position:relative;
  min-height:420px;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
  color:#fff;
  background:#1b231c;
}
.vote-showcase-bg{
  position:absolute;
  inset:-18px;
  z-index:-3;
}
.vote-showcase-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  filter:blur(2.8px) saturate(.9) brightness(.82);
  transition:opacity 1s ease,transform 7s ease;
}
.vote-showcase-slide.active{
  opacity:1;
  transform:scale(1.1);
}
.vote-showcase-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(15,18,14,.76) 0%,rgba(15,18,14,.52) 46%,rgba(15,18,14,.34) 100%),
    radial-gradient(circle at 70% 50%,rgba(102,173,80,.12),transparent 42%);
}
.vote-showcase-content{
  width:min(1100px,calc(100% - 44px));
  margin:auto;
  padding:68px 0;
}
.vote-showcase-content>span{
  display:inline-block;
  margin-bottom:11px;
  color:#f2bd2f;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.17em;
}
.vote-showcase-content h2{
  max-width:690px;
  margin:0;
  color:#fff;
  font-family:"Archivo Black",sans-serif;
  font-size:clamp(36px,5vw,62px);
  line-height:1.02;
  letter-spacing:-.045em;
  text-shadow:0 5px 18px rgba(0,0,0,.25);
}
.vote-showcase-content p{
  max-width:540px;
  margin:17px 0 0;
  color:#d7dfd7;
  font-size:11px;
  line-height:1.75;
  font-weight:700;
}
.vote-showcase-button{
  margin-top:23px;
  min-height:44px;
  padding:0 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#2c270d;
  background:linear-gradient(180deg,#ffd152,#edb624);
  box-shadow:0 5px 0 #ad7912;
  font-size:8px;
  font-weight:1000;
  text-decoration:none;
  transition:.16s ease;
}
.vote-showcase-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}
.vote-showcase-dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
}
.vote-showcase-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.32);
  transition:.3s;
}
.vote-showcase-dots span.active{
  width:18px;
  border-radius:5px;
  background:#f1c13a;
}
@media(max-width:700px){
  .vote-showcase-banner{min-height:360px}
  .vote-showcase-content{padding:56px 0}
  .vote-showcase-content h2{font-size:38px}
}


/* V11 - new screenshots on the actual vote link cards */
.vote-card img,
.vote-site img,
.vote-link img,
.server-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(1.35px) brightness(.78) saturate(.92);
  transform:scale(1.015);
  transition:filter .2s ease, transform .25s ease;
}
.vote-card:hover img,
.vote-site:hover img,
.vote-link:hover img,
.server-card:hover img {
  filter:blur(.45px) brightness(.88) saturate(1);
  transform:scale(1.035);
}


/* =========================================================
   V12 - ACTUAL FIVE VOTE LINK BANNERS
   ========================================================= */

.vote-banner-image.vote-photo-banner{
  position:relative !important;
  overflow:hidden !important;
  background:#1d2b20 !important;
}

.vote-banner-image.vote-photo-banner > img{
  position:absolute;
  inset:-4px;
  width:calc(100% + 8px);
  height:calc(100% + 8px);
  object-fit:cover;
  display:block;
  filter:blur(1.6px) brightness(.82) saturate(.92);
  transform:scale(1.02);
  transition:
    transform .35s ease,
    filter .35s ease;
}

.vote-photo-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,16,11,.03),rgba(10,16,11,.17)),
    radial-gradient(circle at 50% 45%,transparent 32%,rgba(10,15,10,.12) 100%);
}

.vote-banner:hover .vote-photo-banner > img{
  filter:blur(.65px) brightness(.9) saturate(1);
  transform:scale(1.055);
}

/* Ensure the old CSS-built art cannot appear behind the screenshots. */
.vote-photo-banner .banner-land,
.vote-photo-banner .banner-tree,
.vote-photo-banner .banner-house,
.vote-photo-banner .banner-mountain,
.vote-photo-banner .banner-lantern,
.vote-photo-banner .banner-water,
.vote-photo-banner .banner-bridge,
.vote-photo-banner .banner-shop,
.vote-photo-banner .banner-crate,
.vote-photo-banner .banner-path,
.vote-photo-banner .banner-platform,
.vote-photo-banner .banner-beacon,
.vote-photo-banner .banner-firefly{
  display:none !important;
}


/* =========================================================
   V13 Vote page cleanup
   ========================================================= */

/* Old rotating showcase is intentionally removed. */
.vote-showcase-banner{
  display:none !important;
}

/* Curved transition from Vote content into footer */
.vote-footer-wave{
  position:relative;
  height:86px;
  margin-top:20px;
  margin-bottom:-1px;
  overflow:hidden;
  background:transparent;
}

.vote-footer-wave svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.vote-footer-wave path{
  fill:#e7ebe7;
}