/* plugins/voting-stats.html: Vote Rewards & Stats. Built on the rank page shell (rank-pages.css, plugin-pages.css)
   so it reads as one with plugins/voting.html. Gold accents; milestones are big tiles, players do not read. */
.vs-wrap { padding-top: 1.6rem; }
.vs-hero { position: relative; overflow: hidden; }
.vs-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-weight: 600; font-size: 0.9rem; color: var(--rk-accent-bright); text-decoration: none; }
.vs-back svg { width: 16px; height: 16px; }
.vs-back:hover { text-decoration: underline; }
.vs-empty { margin: 0; color: var(--muted); }
.vs-skel { height: 140px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07), rgba(255,255,255,0.03)); background-size: 200% 100%; animation: vs-shimmer 1.4s linear infinite; }
@keyframes vs-shimmer { to { background-position: -200% 0; } }

/* server switch (sticky under the header so it is always one tap away) */
.vs-switch { position: sticky; top: calc(var(--zl-header-bottom, 64px) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; padding: 0.45rem; border-radius: 999px; width: max-content; max-width: 100%; background: rgba(13, 15, 21, 0.86); border: 1px solid var(--rk-accent-line); backdrop-filter: blur(8px); }
.vs-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.vs-tab i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.vs-tab:hover { color: #fff; }
.vs-tab.is-on { color: #1a1205; background: linear-gradient(180deg, #ffe08a, #e6c84a); }
.vs-tab.is-on i { background: #1a1205; box-shadow: none; }
.vs-tab:focus-visible { outline: 2px solid var(--rk-accent-bright); outline-offset: 2px; }

/* items: icon tiles with amounts */
.vs-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vs-item { display: grid; justify-items: center; gap: 0.25rem; width: 76px; text-align: center; }
.vs-item-ico { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.1); }
.vs-item-ico img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.vs-item-ico svg, .vs-glyph svg { width: 34px; height: 34px; color: var(--muted); }
.vs-amt { position: absolute; right: -6px; bottom: -6px; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: #1a1205; background: var(--rk-accent-bright); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.vs-item-name { font-size: 0.72rem; line-height: 1.2; color: var(--muted); }

/* every vote package */
.vs-pkg { padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--rk-accent-line); background: linear-gradient(120deg, rgba(230, 200, 74, 0.12), rgba(230, 200, 74, 0.03) 60%, transparent), var(--rk-panel); }
.vs-pkg-h { margin: 0 0 0.7rem; font-family: "Cinzel", serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rk-accent-bright); }
.vs-pkg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; }
.vs-pkg-t { display: grid; gap: 0.1rem; padding: 0.8rem 0.9rem; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); }
.vs-pkg-t b { font-family: "Cinzel", serif; font-size: 2rem; line-height: 1; color: #fff; }
.vs-pkg-t small { font-weight: 700; color: var(--muted); }
.vs-pkg-t em { display: block; font-style: normal; font-weight: 500; font-size: 0.78rem; color: var(--rk-accent); }
.vs-pkg-t.is-sp b { color: #8ff0b4; } .vs-pkg-t.is-rp b { color: var(--rk-accent-bright); } .vs-pkg-t.is-xp b { color: #9fd0ff; }
.vs-every { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--rk-accent-line); }
.vs-every-n { font-weight: 700; color: var(--muted); } .vs-every-n b { color: #fff; font-size: 1.1rem; }

/* you are here */
.vs-here { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.4rem 0.8rem; margin: 1rem 0; padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid rgba(143, 240, 180, 0.4); background: rgba(143, 240, 180, 0.07); }
.vs-here p { margin: 0; } .vs-here b { color: #fff; }
.vs-here .vs-bar { grid-column: 1 / -1; }
.vs-here-pin { width: 14px; height: 14px; border-radius: 50%; background: #8ff0b4; box-shadow: 0 0 0 4px rgba(143, 240, 180, 0.2), 0 0 14px #8ff0b4; animation: vs-pulse 1.8s ease-in-out infinite; }
@keyframes vs-pulse { 50% { box-shadow: 0 0 0 8px rgba(143, 240, 180, 0.05), 0 0 20px #8ff0b4; } }
.vs-bar { position: relative; display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #5fe39a, #b8f7d0); }
.vs-bar.is-thin { height: 6px; margin-top: 0.3rem; }
.vs-bar.is-thin i { background: linear-gradient(90deg, rgba(230, 200, 74, 0.55), var(--rk-accent-bright)); }
.vs-bar.is-gold i { background: linear-gradient(90deg, #a8871f, #ffe08a); }

/* milestone tiles */
.vs-ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.vs-ms { position: relative; display: grid; align-content: start; gap: 0.7rem; padding: 1rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--rk-panel); overflow: hidden; animation: vs-rise 0.45s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes vs-rise { from { opacity: 0; transform: translateY(10px); } }
.vs-ms-n { display: flex; align-items: baseline; gap: 0.4rem; }
.vs-ms-n b { font-family: "Cinzel", serif; font-size: 2.4rem; line-height: 1; color: #fff; }
.vs-ms-n small { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vs-ms-x { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--rk-accent); }
.vs-ms.is-special { border-color: var(--rk-accent-line); background: radial-gradient(260px 140px at 85% -10%, rgba(230, 200, 74, 0.22), transparent 70%), linear-gradient(160deg, #2a2618, var(--rk-panel) 70%); box-shadow: 0 0 0 1px rgba(230, 200, 74, 0.25), 0 12px 32px rgba(230, 200, 74, 0.12); }
.vs-ms.is-special .vs-ms-n b { background: linear-gradient(180deg, #fff6cf, #e6c84a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-ms-ribbon { justify-self: start; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #e6c84a); }
.vs-ms.is-got { opacity: 0.62; }
.vs-ms.is-got .vs-ms-n b { color: #8ff0b4; -webkit-text-fill-color: currentColor; }
.vs-ms.is-next { border-color: #8ff0b4; box-shadow: 0 0 0 2px rgba(143, 240, 180, 0.35), 0 12px 32px rgba(95, 227, 154, 0.18); }
.vs-ms-state { justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }
.vs-ms-state svg { width: 14px; height: 14px; }
.vs-ms-state.is-got { color: #8ff0b4; background: rgba(143, 240, 180, 0.1); }
.vs-ms-state.is-next { color: #1a1205; background: #8ff0b4; }

/* your voting */
.vs-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--rk-accent-line); background: linear-gradient(120deg, rgba(230, 200, 74, 0.14), rgba(230, 200, 74, 0.04) 60%, transparent); }
.vs-nudge-t { flex: 1 1 260px; } .vs-nudge-t b { display: block; font-family: "Cinzel", serif; font-size: 1.15rem; color: #fff; } .vs-nudge-t small { color: var(--muted); }
.vs-signin { display: inline-flex; align-items: center; padding: 0.6rem 1.1rem; border-radius: 999px; font-weight: 800; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #e6c84a); text-decoration: none; }
.vs-votes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 0.9rem; }
.vs-votecard { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--c); background: var(--rk-panel); }
.vs-votecard-n { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; color: #fff; }
.vs-votecard-n i, .vs-others i, .vs-hall-n small i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; display: inline-block; }
.vs-vote { justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px; font-weight: 800; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #e6c84a); text-decoration: none; box-shadow: 0 6px 18px rgba(230, 200, 74, 0.25); transition: transform 0.15s ease; }
.vs-vote:hover { transform: translateY(-1px); }
.vs-vote svg { width: 18px; height: 18px; }
.vs-today { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; }
.vs-site { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid rgba(255, 179, 71, 0.45); background: rgba(255, 179, 71, 0.07); }
.vs-site.is-done { border-color: rgba(143, 240, 180, 0.45); background: rgba(143, 240, 180, 0.07); }
.vs-site-n { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vs-site-ok { display: inline-flex; align-items: center; gap: 0.4rem; font-family: "Cinzel", serif; font-size: 1.35rem; color: #8ff0b4; } .vs-site-ok svg { width: 22px; height: 22px; }
.vs-site-no { font-family: "Cinzel", serif; font-size: 1.35rem; color: #ffcf8a; }
.vs-site small { color: var(--muted); }
.vs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.vs-tile { display: grid; align-content: start; gap: 0.15rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--rk-panel); }
.vs-tile small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.vs-tile b { font-family: "Cinzel", serif; font-size: 2.2rem; line-height: 1.05; color: #fff; }
.vs-tile b.is-text { font-size: 1.35rem; }
.vs-tile span { color: var(--muted); font-size: 0.86rem; }
.vs-tile em { font-style: normal; margin-top: 0.3rem; font-size: 0.82rem; font-weight: 600; color: var(--rk-accent); }
.vs-tile.is-streak.is-hot { border-color: rgba(255, 140, 66, 0.5); background: radial-gradient(200px 120px at 90% -10%, rgba(255, 120, 50, 0.22), transparent 70%), var(--rk-panel); }
.vs-tile.is-streak.is-hot b { color: #ffb37a; }
.vs-others { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.vs-others li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.5rem 0.8rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.vs-others b { color: #fff; } .vs-others span { color: var(--muted); font-size: 0.88rem; }
.vs-others .vs-vote { padding: 0.3rem 0.8rem; font-size: 0.85rem; margin-left: auto; }
.vs-ok-s { margin-left: auto; color: #8ff0b4 !important; font-weight: 700; }

/* people */
.vs-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; object-fit: cover; font-family: "Cinzel", serif; font-weight: 700; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #b8952a); }
.vs-av.is-hidden { color: var(--muted); background: rgba(255, 255, 255, 0.08); }
.vs-av.is-hidden svg { width: 18px; height: 18px; }
.vs-name { font-weight: 700; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
a.vs-name:hover { color: var(--rk-accent-bright); text-decoration: underline; }
.vs-name.is-hidden { color: var(--muted); font-style: italic; font-weight: 600; }
.vs-you { display: inline-block; margin-left: 0.35rem; padding: 0.02rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1205; background: #8ff0b4; vertical-align: middle; }

/* race */
.vs-race-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.vs-race, .vs-streaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.vs-racer, .vs-streaks li { display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--rk-panel); border: 1px solid rgba(255, 255, 255, 0.06); animation: vs-rise 0.4s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
.vs-rank { font-family: "Cinzel", serif; font-weight: 800; font-size: 1.15rem; text-align: center; color: var(--muted); }
.vs-racer.is-r1 { border-color: rgba(255, 217, 100, 0.55); background: linear-gradient(90deg, rgba(255, 217, 100, 0.14), transparent 70%), var(--rk-panel); }
.vs-racer.is-r1 .vs-rank { color: #ffd964; } .vs-racer.is-r2 .vs-rank { color: #d9dee8; } .vs-racer.is-r3 .vs-rank { color: #e0a36a; }
.vs-racer.is-me, .vs-streaks li.is-me, .vs-pool-l li.is-me { box-shadow: 0 0 0 2px rgba(143, 240, 180, 0.6); }
.vs-racer-n, .vs-streak-n, .vs-pool-n, .vs-hall-n { min-width: 0; display: grid; }
.vs-votes-n { font-family: "Cinzel", serif; font-size: 1.3rem; color: #fff; }
.vs-empty-card { display: grid; gap: 0.7rem; justify-items: start; padding: 1.1rem; border-radius: 14px; border: 1px dashed var(--rk-accent-line); }
.vs-empty-card p { margin: 0; color: var(--muted); }
.vs-pool { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--rk-accent-line); background: radial-gradient(280px 160px at 90% -10%, rgba(230, 200, 74, 0.2), transparent 70%), linear-gradient(160deg, #24211a, var(--rk-panel) 70%); }
.vs-pool-h { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; font-family: "Cinzel", serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.vs-crown svg { width: 22px; height: 22px; color: var(--rk-accent-bright); filter: drop-shadow(0 0 6px rgba(255, 217, 100, 0.6)); }
.vs-pool-x { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--muted); }
.vs-pool-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.vs-pool-l li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: 10px; }
.vs-pool-w { display: grid; justify-items: end; } .vs-pool-w b { font-family: "Cinzel", serif; font-size: 1.15rem; color: var(--rk-accent-bright); } .vs-pool-w small { color: var(--muted); font-size: 0.75rem; }
.vs-pool-tie { margin: 0.7rem 0 0; font-size: 0.82rem; color: #ffcf8a; }
.vs-pool-when { margin: 0.7rem 0 0; font-weight: 700; color: #fff; }
.vs-pool-more { display: inline-block; margin-top: 0.5rem; font-size: 0.86rem; font-weight: 700; color: var(--rk-accent-bright); }

/* streaks + numbers side by side */
.vs-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.4rem; }
.vs-flame { display: inline-flex; align-items: baseline; gap: 0.25rem; font-family: "Cinzel", serif; font-size: 1.3rem; color: #ffb37a; }
.vs-flame svg { width: 18px; height: 18px; align-self: center; color: #ff8c42; filter: drop-shadow(0 0 5px rgba(255, 120, 50, 0.6)); }
.vs-flame small { font-family: "Inter", sans-serif; font-size: 0.75rem; color: var(--muted); }
.vs-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.vs-num { display: grid; gap: 0.1rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--rk-panel); border: 1px solid rgba(255, 255, 255, 0.06); }
.vs-num b { font-family: "Cinzel", serif; font-size: 1.55rem; color: #fff; line-height: 1.1; }
.vs-num small { font-size: 0.8rem; color: var(--muted); }
.vs-num.is-wide { grid-column: 1 / -1; }
.vs-hours { display: flex; align-items: flex-end; gap: 2px; height: 42px; margin-top: 0.5rem; }
.vs-hours i { flex: 1; border-radius: 2px 2px 0 0; background: rgba(230, 200, 74, 0.35); }
.vs-hours i.is-top { background: var(--rk-accent-bright); box-shadow: 0 0 8px rgba(255, 217, 100, 0.6); }

/* hall of top voters */
.vs-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.9rem; }
.vs-hall-m { padding: 0.9rem 1rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--rk-panel); animation: vs-rise 0.45s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.vs-hall-m.is-latest { border-color: var(--rk-accent-line); background: radial-gradient(240px 140px at 90% -10%, rgba(230, 200, 74, 0.18), transparent 70%), var(--rk-panel); }
.vs-hall-h { margin: 0 0 0.6rem; font-family: "Cinzel", serif; font-weight: 700; letter-spacing: 0.04em; color: var(--rk-accent-bright); }
.vs-hall-m ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.vs-hall-m li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 0.6rem; }
.vs-hall-m li.is-cur .vs-av { box-shadow: 0 0 0 2px var(--c); }
.vs-hall-n small { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--muted); }

@media (max-width: 900px) {
  .vs-race-wrap, .vs-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .vs-switch { width: 100%; border-radius: 16px; }
  .vs-tab { flex: 1 1 auto; justify-content: center; padding: 0.5rem 0.7rem; }
  .vs-ms-grid { grid-template-columns: minmax(0, 1fr); }
  .vs-ms-n b { font-size: 2rem; }
  .vs-racer, .vs-streaks li { grid-template-columns: 26px 32px minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.5rem 0.6rem; }
  .vs-av { width: 32px; height: 32px; }
  .vs-item { width: 68px; } .vs-item-ico { width: 56px; height: 56px; } .vs-item-ico img { width: 42px; height: 42px; }
  .vs-nums { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .vs-ms, .vs-racer, .vs-streaks li, .vs-hall-m { animation: none; }
  .vs-here-pin, .vs-skel { animation: none; }
}

/* art (Web Visuals): tier badges on milestone tiles, the Top Voter crest on the pool and the latest Hall month */
.vs-ms-badge { position: absolute; top: 0.6rem; right: 0.6rem; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); pointer-events: none; }
.vs-ms-badge.is-burst { width: 78px; height: 78px; top: 0.3rem; right: 0.3rem; filter: drop-shadow(0 0 14px rgba(255, 170, 60, 0.55)); }
.vs-ms.is-got .vs-ms-badge { filter: grayscale(0.4) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
.vs-ms .vs-items { padding-right: 0; }
.vs-ms-n, .vs-ms-ribbon { margin-right: 72px; }
.vs-pool-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.3rem; }
.vs-pool-top .vs-crest { width: 64px; height: 64px; filter: drop-shadow(0 0 12px rgba(255, 217, 100, 0.35)); }
.vs-pool-top .vs-pool-h { margin: 0; }
.vs-hall-m { position: relative; }
.vs-hall-m.is-latest .vs-crest { position: absolute; top: -0.4rem; right: -0.2rem; width: 96px; height: 96px; filter: drop-shadow(0 0 16px rgba(255, 217, 100, 0.35)); pointer-events: none; }
.vs-hall-m.is-latest ul { margin-right: 70px; }
.vs-hall-tag { display: inline-block; margin-right: 0.45rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-family: "Inter", sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #e6c84a); vertical-align: middle; }
@media (max-width: 560px) { .vs-ms-badge { width: 52px; height: 52px; } .vs-ms-badge.is-burst { width: 62px; height: 62px; } .vs-ms-n, .vs-ms-ribbon { margin-right: 58px; } }

/* the hero art has its own dark left side for the title, so it shows brighter than the shared backdrop default */
.vs-hero .pp-hero-bg img { opacity: 0.92; filter: saturate(1) contrast(1.05); --pp-bg-pos: 80% 50%; object-position: 80% 50%; }
.vs-hero .pp-hero-bg::after { background: linear-gradient(180deg, rgba(5, 7, 13, 0.25) 0%, rgba(5, 7, 13, 0.1) 40%, rgba(5, 7, 13, 0.6) 82%, #05070d 100%), linear-gradient(90deg, rgba(5, 7, 13, 0.85) 0%, rgba(5, 7, 13, 0.45) 40%, transparent 70%); }
@media (max-width: 720px) { .vs-hero .pp-hero-bg img { opacity: 0.6; object-position: 85% 50%; } }

.vs-nline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.4rem; min-width: 0; }
.vs-nline .vs-you { margin-left: 0; }
.vs-hall-m.is-latest .vs-hall-h { margin-right: 76px; }

/* live data (Web API 2026-10-04): big unlocks, the tier ladder, not-yet-available states */
.vs-sub { margin: 1.4rem 0 0.7rem; font-family: "Cinzel", serif; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rk-accent-bright); }
.vs-item.is-special .vs-item-ico { border-color: var(--rk-accent-line); box-shadow: 0 0 0 1px rgba(230, 200, 74, 0.35), 0 0 16px rgba(230, 200, 74, 0.2); }
.vs-ms-state:not(.is-got):not(.is-next) { color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.vs-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.5rem; }
.vs-rung { position: relative; display: grid; justify-items: center; gap: 0.1rem; padding: 0.6rem 0.4rem 0.55rem; border-radius: 12px; text-align: center; background: var(--rk-panel); border: 1px solid rgba(255, 255, 255, 0.07); }
.vs-rung img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.vs-rung b { font-family: "Cinzel", serif; font-size: 1.3rem; line-height: 1.1; color: #fff; }
.vs-rung small { font-size: 0.72rem; line-height: 1.3; color: var(--muted); }
.vs-rung.is-big { border-color: var(--rk-accent-line); background: linear-gradient(160deg, rgba(230, 200, 74, 0.14), var(--rk-panel) 70%); }
.vs-rung-star { position: absolute; top: 0.35rem; right: 0.5rem; color: var(--rk-accent-bright); font-size: 0.9rem; }
.vs-rung.is-got { opacity: 0.5; }
.vs-rung.is-got b { color: #8ff0b4; }
.vs-rung.is-next { border-color: #8ff0b4; box-shadow: 0 0 0 2px rgba(143, 240, 180, 0.35), 0 8px 22px rgba(95, 227, 154, 0.2); }
.vs-rung-here { margin-top: 0.2rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #1a1205; background: #8ff0b4; }
.vs-ladder-note { margin: 0.7rem 0 0; font-size: 0.86rem; color: var(--muted); }
.vs-site.is-unknown { border-color: var(--rk-accent-line); background: rgba(230, 200, 74, 0.06); }
.vs-site-un { font-family: "Cinzel", serif; font-size: 1.35rem; color: var(--rk-accent-bright); }
.vs-best { display: block; font-family: "Inter", sans-serif; font-style: normal; font-size: 0.7rem; color: var(--muted); }
.vs-flame { flex-wrap: wrap; justify-content: flex-end; }
.vs-num.is-na b { color: var(--muted); font-size: 1.2rem; }
.vs-source { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 560px) { .vs-ladder { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .vs-rung b { font-size: 1.1rem; } }


/* the voting period (force wipe to force wipe) above the race */
.vs-period { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin: 0 0 0.3rem; }
.vs-period b { font-family: "Cinzel", serif; font-size: 1.2rem; color: #fff; }
.vs-period span { color: var(--rk-accent-bright); font-weight: 700; }
.vs-period-note { margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--muted); }
.vs-since { display: block; font-style: normal; font-size: 0.74rem; color: var(--rk-accent); }
.vs-pool.is-off { opacity: 0.9; }
.vs-pool.is-off .vs-crest { filter: grayscale(0.6); }

/* compact hero (owner 2026-10-04: about half the height): one-line title, one short lead, chips and the back link in
   one row, the art cropped to the chest on the right */
.vs-hero .rk-hero-inner { padding: 1.1rem 0 1.1rem !important; min-height: 0; }
.vs-hero .rk-breadcrumb-row { margin-bottom: 0.35rem; }
.vs-hero .rk-kicker { margin: 0 0 0.15rem; }
.vs-hero .rk-title { font-size: clamp(2rem, 3.3vw, 2.7rem); line-height: 1.05; margin: 0 0 0.35rem; }
.vs-hero .rk-tagline { margin: 0 0 0.65rem; font-size: 0.98rem; max-width: 62ch; }
.vs-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.vs-hero-row .rk-meta { margin: 0; flex-wrap: wrap; }
.vs-hero-row .vs-back { margin-top: 0; }
.vs-hero .pp-hero-bg { inset: 0 0 0 auto; width: 58%; }
.vs-hero .pp-hero-bg img { object-position: 78% 42%; }
.vs-hero .pp-hero-bg::after { background: linear-gradient(90deg, #05070d 0%, rgba(5, 7, 13, 0.55) 30%, rgba(5, 7, 13, 0.1) 65%, transparent 100%), linear-gradient(180deg, transparent 60%, #05070d 100%); }
@media (max-width: 720px) {
  .vs-hero .pp-hero-bg { width: 100%; }
  .vs-hero .pp-hero-bg img { opacity: 0.4; object-position: 80% 40%; }
  .vs-hero .rk-hero-inner { padding: 0.9rem 0 1rem !important; }
}
.vs-hero .rk-tagline .vs-back { display: inline-flex; margin: 0 0 0 0.4rem; vertical-align: baseline; }
.vs-hero .rk-tagline { max-width: none; }

/* skill points stand out (owner 2026-10-04): the Every Vote headline card, a +SP badge on every tier and big unlock */
.vs-pkg.has-sp { padding: 1.3rem 1.4rem; border-color: rgba(255, 217, 100, 0.55); background: radial-gradient(420px 220px at 8% 50%, rgba(255, 210, 90, 0.28), transparent 70%), linear-gradient(120deg, rgba(230, 200, 74, 0.14), rgba(230, 200, 74, 0.03) 60%, transparent), var(--rk-panel); box-shadow: 0 0 0 1px rgba(255, 217, 100, 0.2), 0 16px 40px rgba(230, 180, 60, 0.16); }
.vs-sphero { display: flex; align-items: center; gap: 1.2rem; }
.vs-sphero-img { flex: none; width: 110px; height: auto; filter: drop-shadow(0 0 18px rgba(255, 210, 90, 0.65)); animation: vs-spglow 3.2s ease-in-out infinite; }
@keyframes vs-spglow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 210, 90, 0.5)); transform: translateY(0); } 50% { filter: drop-shadow(0 0 26px rgba(255, 220, 110, 0.85)); transform: translateY(-3px); } }
.vs-sphero-t { min-width: 0; }
.vs-sphero-t .vs-pkg-h { margin: 0 0 0.2rem; }
.vs-sphero-h { margin: 0; font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.1; background: linear-gradient(180deg, #fff6cf, #e6c84a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-sphero-x { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.95rem; }
.vs-pkg.has-sp .vs-pkg-row, .vs-pkg.has-sp .vs-every { margin-top: 1rem; }
.vs-sp { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.45rem 0.08rem 0.2rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; color: #1a1205; background: linear-gradient(180deg, #ffe9a6, #e6c84a); box-shadow: 0 0 10px rgba(255, 210, 90, 0.35); }
.vs-sp img { width: 16px; height: 16px; object-fit: contain; }
.vs-rung .vs-sp { margin: 0.15rem 0 0.05rem; }
.vs-ms-x { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.vs-ms-x .vs-sp { font-size: 0.8rem; }
.vs-tile-sp { display: flex; align-items: center; gap: 0.35rem; color: #ffe08a !important; }
.vs-tile-sp img { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 210, 90, 0.6)); }
.vs-tile-sp b { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: #fff6cf !important; }
@media (max-width: 560px) { .vs-sphero { gap: 0.8rem; } .vs-sphero-img { width: 76px; } .vs-pkg.has-sp { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .vs-sphero-img { animation: none; } }

/* hero chips stay on one line at desktop with live data (three chips) */
@media (min-width: 721px) {
  .vs-hero .rk-hero-text { max-width: 900px; }
  .vs-hero .rk-meta-chip { padding: 0.32rem 0.75rem; font-size: 0.84rem; }
}
.vs-tile .vs-tile-sp span { color: inherit; font-size: inherit; }
/* your servers list: fixed tab order, the selected server marked, the others switch the tab */
.vs-others li.is-on { background: rgba(230, 200, 74, 0.08); box-shadow: inset 3px 0 0 var(--c); }
.vs-others-n { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #fff; cursor: pointer; text-decoration: underline dotted rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.vs-others-n:hover, .vs-others-n:focus-visible { color: var(--rk-accent-bright); }
.vs-others .vs-others-on { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: var(--rk-accent-bright); background: rgba(230, 200, 74, 0.12); }

/* exact vote site feed: open listings, live countdowns */
.vs-site.is-open { border-color: rgba(255, 179, 71, 0.6); }
.vs-cd { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; }
.vs-ok-s time { font-variant-numeric: tabular-nums; }
/* listing rank: hero chip and the chart in Community Numbers */
.vs-rank-chip { font-weight: 800; color: var(--rk-accent-bright); }
.vs-rankbox { display: grid; gap: 0.2rem; }
.vs-rankline { display: block; width: 100%; height: 96px; margin-top: 0.4rem; }
.vs-rank-line { fill: none; stroke: var(--rk-accent-bright); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.vs-rank-fill { fill: rgba(230, 200, 74, 0.1); }
.vs-rank-ax { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); }