:root {
  --ballot-ink: #071522;
  --ballot-red: #b52d42;
  --ballot-gold: #c7a65a;
  --ballot-paper: #fffdf8;
  --ballot-wash: #f2ecdf;
  --ballot-line: #ddd2bf;
  --ballot-muted: #69737b;
}

body { background: #f4efe5; }
.hockey-ballot {
  --ballot-red: #256b91;
  --ballot-gold: #a9c9dc;
  --ballot-wash: #e8f0f4;
  --ballot-line: #cbd9e1;
}
.hockey-ballot .design-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  background:
    radial-gradient(circle at 82% 15%, rgba(169,201,220,.25), transparent 32%),
    linear-gradient(128deg, #061521, #12334a 64%, #14242f);
}
.hockey-ballot .design-kicker,
.hockey-ballot .design-hero h1 span,
.hockey-ballot .design-hero-stats strong,
.hockey-ballot .ballot-panel-heading small,
.hockey-ballot .ballot-counter { color: #c7e0ed; }
.hockey-ballot .ticket-year-stack span { min-width: 92px; font-size: 18px; }
.basketball-ballot { --ballot-red: #6f4a9c; --ballot-gold: #e0b45d; --ballot-wash: #efe9f5; --ballot-line: #d8cce4; }
.football-ballot { --ballot-red: #a72c35; --ballot-gold: #c9aa64; --ballot-wash: #eee9df; --ballot-line: #d7cdbd; }
.baseball-ballot { --ballot-red: #b52d42; --ballot-gold: #c7a65a; }
.junk-wax-ballot { --ballot-red: #227a73; --ballot-gold: #d3a642; --ballot-wash: #e5f0ec; --ballot-line: #c8d9d2; }
.basketball-ballot .design-hero { background: radial-gradient(circle at 82% 15%, rgba(224,180,93,.22), transparent 32%), linear-gradient(128deg,#0b1421,#24183c 64%,#411d35); }
.football-ballot .design-hero { background: radial-gradient(circle at 82% 15%, rgba(201,170,100,.2), transparent 32%), linear-gradient(128deg,#071522,#202a32 64%,#3b151a); }
.baseball-ballot .design-hero { background: radial-gradient(circle at 82% 15%, rgba(199,166,90,.2), transparent 32%), linear-gradient(128deg,#071522,#142b3c 64%,#321722); }
.junk-wax-ballot .design-hero { background: radial-gradient(circle at 82% 15%, rgba(211,166,66,.2), transparent 32%), linear-gradient(128deg,#071522,#103b3a 64%,#332715); }
.design-ballot-page { overflow: hidden; }

.design-hero {
  max-width: 1420px;
  min-height: 220px;
  margin: 0 auto;
  padding: 26px clamp(24px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  gap: 34px;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 82% 15%, rgba(199,166,90,.2), transparent 32%),
    linear-gradient(128deg, #071522, #142b3c 64%, #321722);
  position: relative;
}
.design-hero::after {
  content: "VOTE";
  position: absolute;
  right: -22px;
  bottom: -98px;
  color: rgba(255,255,255,.025);
  font-family: var(--hs-serif);
  font-size: 170px;
  font-weight: 700;
  pointer-events: none;
}
.design-hero-copy { position: relative; z-index: 2; }
.design-kicker {
  margin: 0 0 12px;
  color: #ead394;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.design-hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--hs-serif);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: .98;
  letter-spacing: -.025em;
}
.design-hero h1 span { display: block; color: #ead394; }
.design-hero-copy > p:not(.design-kicker) {
  max-width: 690px;
  margin: 12px 0 0;
  color: #c4ced5;
  font-size: 13px;
  line-height: 1.45;
}
.design-hero-stats { display: none; }
.design-hero-stats div { display: grid; }
.design-hero-stats strong { color: #ead394; font-family: var(--hs-serif); font-size: 25px; }
.design-hero-stats span { color: #97a7b2; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.design-hero-ticket {
  min-height: 230px;
  padding: 24px;
  display: grid;
  align-content: space-between;
  background: rgba(255,253,248,.96);
  color: var(--ballot-ink);
  border: 1px solid rgba(234,211,148,.45);
  box-shadow: 0 28px 60px rgba(0,0,0,.28);
  position: relative;
  z-index: 2;
  transform: rotate(1.5deg);
}
.design-hero-card-fan {
  min-height: 190px;
  position: relative;
  z-index: 2;
}
.hero-design-card {
  width: 116px;
  height: 166px;
  object-fit: contain;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.38));
}
.hero-design-card.fan-one { transform: translateX(-160%) rotate(-13deg); }
.hero-design-card.fan-two { transform: translateX(-105%) rotate(-7deg); }
.hero-design-card.fan-three { z-index: 3; width: 128px; height: 180px; transform: translateX(-50%); }
.hero-design-card.fan-four { transform: translateX(5%) rotate(7deg); }
.hero-design-card.fan-five { transform: translateX(60%) rotate(13deg); }
.ticket-top { display: flex; justify-content: space-between; gap: 20px; color: #7e6a39; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ticket-year-stack { display: flex; align-items: end; justify-content: center; gap: 4px; }
.ticket-year-stack span { min-width: 70px; padding: 14px 8px; display: grid; place-items: center; background: #eae1d3; border: 1px solid #d6c7ad; font-family: var(--hs-serif); font-size: 23px; box-shadow: 0 10px 20px rgba(7,21,34,.1); }
.ticket-year-stack span:nth-child(1) { transform: rotate(-7deg) translateY(8px); }
.ticket-year-stack span:nth-child(2) { position: relative; z-index: 2; transform: translateY(-4px); color: #fff; background: var(--ballot-red); border-color: var(--ballot-red); }
.ticket-year-stack span:nth-child(3) { transform: rotate(7deg) translateY(8px); }
.ticket-bottom { padding-top: 12px; display: flex; justify-content: space-between; border-top: 1px dashed #c9b995; font-size: 11px; font-weight: 800; }

.ballot-workspace {
  max-width: 1420px;
  margin: 0 auto;
  padding: 12px 24px 100px;
}
.ballot-stage,
.your-ballot,
.community-results {
  background: var(--ballot-paper);
  border: 1px solid var(--ballot-line);
}
.ballot-stage { padding: 22px; }
.ballot-upper { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ballot-steps { margin-bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ballot-line); }
.ballot-steps-bottom { margin: 24px 0 0; }
.ballot-steps div { min-height: 54px; padding: 9px 12px; display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; }
.ballot-steps div + div { border-left: 1px solid var(--ballot-line); }
.ballot-steps b { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--ballot-ink); border-radius: 50%; font-size: 12px; }
.ballot-steps span { font-size: 11px; font-weight: 800; line-height: 1.25; }

.ballot-toolbar { margin-bottom: 16px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.ballot-toolbar h2 { margin: 0; font-family: var(--hs-serif); font-size: clamp(31px, 3vw, 42px); }
.ballot-toolbar p { margin: 7px 0 0; color: var(--ballot-muted); font-size: 13px; line-height: 1.5; }
.era-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.era-filter button { padding: 8px 10px; color: #52606a; background: #f8f3e9; border: 1px solid var(--ballot-line); cursor: pointer; font-size: 10px; font-weight: 800; }
.era-filter button.active { color: #fff; background: var(--ballot-ink); border-color: var(--ballot-ink); }

.ballot-progress-header { margin: 0 0 14px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f8f3e9; border: 1px solid var(--ballot-line); }
.ballot-progress-header p { margin: 0; color: var(--ballot-muted); font-size: 11px; font-weight: 800; }
.ballot-progress-header strong { margin-left: 3px; color: var(--ballot-red); font-family: var(--hs-serif); font-size: 17px; }
.ballot-position-track { display: grid; grid-template-columns: repeat(10, 27px); gap: 5px; }
.ballot-position-track span { width: 27px; height: 27px; display: grid; place-items: center; color: #7b858c; background: #fff; border: 1px solid var(--ballot-line); border-radius: 50%; font-size: 9px; font-weight: 900; transition: transform .2s, background .2s, color .2s; }
.ballot-position-track span.filled { color: #fff; background: var(--ballot-ink); border-color: var(--ballot-ink); }
.ballot-position-track span.filled.first { color: #251b06; background: var(--ballot-gold); border-color: var(--ballot-gold); font-size: 13px; }
.ballot-position-track span.current { border-color: var(--ballot-red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ballot-red) 13%, transparent); }

.personal-podium { margin: 0 0 16px; padding: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; background: #f8f3e9; border: 1px solid var(--ballot-line); }
.personal-podium::before { content: "Your Top 3"; grid-column: 1 / -1; color: var(--ballot-muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.podium-slot { min-height: 118px; padding: 9px; display: grid; grid-template-columns: 70px 1fr; gap: 11px; align-items: center; background: linear-gradient(145deg,#fffdf8,#eee4d4); border: 1px dashed #c9b997; transition: border-color .2s, box-shadow .2s, transform .2s; }
.podium-slot.filled { border-style: solid; border-color: var(--ballot-gold); box-shadow: 0 8px 22px rgba(64,44,12,.08); }
.podium-slot:first-child.filled { background: linear-gradient(145deg,#fffdf6,#f2e3b6); box-shadow: 0 10px 26px rgba(111,77,13,.13); }
.podium-visual { width: 70px; height: 98px; display: grid; place-items: center; overflow: hidden; background: #e5dccd; color: #8b7750; font-family: var(--hs-serif); font-size: 20px; position: relative; }
.podium-visual img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; }
.podium-copy { min-width: 0; }
.podium-copy b { display: block; color: #9a7113; font-family: var(--hs-serif); font-size: 19px; }
.podium-copy span { margin-top: 4px; display: block; font-size: 11px; font-weight: 800; line-height: 1.25; }

.design-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.design-grid-rest { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 11px; }
.design-card {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-rows: 280px auto auto;
  text-align: left;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ballot-line);
  cursor: pointer;
  font: inherit;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.design-grid-lead .design-card { grid-template-rows: 305px auto auto; }
.design-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(7,21,34,.12); }
.design-card:focus-visible { outline: 3px solid rgba(181,45,66,.3); outline-offset: 2px; }
.design-card.selected { border-color: var(--ballot-gold); box-shadow: inset 0 0 0 2px rgba(199,166,90,.35); }
.design-card.just-selected { animation: chosen-card .5s ease; }
.design-card:disabled:not(.selected) { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.design-image { display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#e9e2d6,#d6ccbb); position: relative; }
.design-image img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; transition: transform .25s; }
.design-card:hover .design-image img { transform: none; }
.design-placeholder { width: 100%; height: 100%; padding: 18px; display: grid; align-content: space-between; color: #fff; background: linear-gradient(145deg,#132a3b,#071522); position: absolute; inset: 0; }
.design-placeholder::after { content: "PHOTO"; align-self: end; color: rgba(255,255,255,.18); font-size: 30px; font-weight: 900; letter-spacing: .08em; }
.design-placeholder small { color: #ead394; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.design-placeholder strong { font-family: var(--hs-serif); font-size: 39px; }
.design-rank { position: absolute; top: 0; left: 0; z-index: 3; min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center; color: #fff; background: var(--ballot-ink); font-size: 12px; font-weight: 900; }
.design-rank.is-first { min-width: 58px; color: #241b08; background: var(--ballot-gold); }
.selected .design-rank { color: #241b08; background: var(--ballot-gold); }
.design-copy { padding: 11px 3px 8px; }
.design-copy small { color: #96721f; font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.design-copy h3 { margin: 3px 0 0; font-family: var(--hs-serif); font-size: 21px; line-height: 1.05; }
.card-ballot .design-grid-rest { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card-ballot .design-copy h3 { font-size: 15px; line-height: 1.18; }
.card-ballot .design-placeholder { gap: 12px; }
.card-ballot .design-placeholder strong { font-size: 18px; line-height: 1.12; }
.card-ballot .design-placeholder::after { font-size: 22px; }
.design-action { min-height: 34px; display: grid; place-items: center; color: #fff; background: var(--ballot-ink); font-size: 10px; font-weight: 900; }
.selected .design-action { background: var(--ballot-red); }

.your-ballot { position: sticky; top: 84px; color: #fff; background: var(--ballot-ink); overflow: hidden; }
.ballot-mobile-toggle { display: none; }
.ballot-panel-body { padding: 22px; }
.ballot-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.ballot-panel-heading small { color: #ead394; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.ballot-panel-heading h2 { margin: 4px 0 0; font-family: var(--hs-serif); font-size: 28px; }
.ballot-counter { color: #ead394; font-family: var(--hs-serif); font-size: 22px; white-space: nowrap; }
.ballot-progress { height: 5px; margin: 16px 0; background: rgba(255,255,255,.13); overflow: hidden; }
.ballot-progress span { width: 0; height: 100%; display: block; background: var(--ballot-gold); transition: width .25s; }
.ballot-tip { margin: 0 0 14px; color: #aebbc4; font-size: 11px; line-height: 1.45; }
.ranked-designs { max-height: 49vh; margin: 0; padding: 0; display: grid; gap: 6px; overflow: auto; list-style: none; }
.ranked-design { padding: 7px; display: grid; grid-template-columns: 30px 42px 1fr; gap: 8px; align-items: center; background: rgba(255,255,255,.07); }
.ranked-design > b { color: #ead394; font-size: 12px; text-align: center; }
.ranked-thumb { width: 42px; height: 56px; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.1); color: #ead394; font-size: 10px; font-weight: 900; position: relative; }
.ranked-thumb img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; }
.ranked-copy { min-width: 0; }
.ranked-copy strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rank-controls { margin-top: 5px; display: flex; gap: 4px; }
.rank-controls button { padding: 4px 6px; color: #dce5eb; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); cursor: pointer; font-size: 9px; }
.rank-empty { padding: 24px 14px; color: #aebbc4; border: 1px dashed rgba(255,255,255,.2); font-size: 12px; line-height: 1.5; text-align: center; }
.ballot-actions { margin-top: 16px; display: grid; gap: 7px; }
.submit-ballot,
.clear-ballot { min-height: 45px; border: 0; cursor: pointer; font-weight: 900; }
.submit-ballot { color: #201707; background: var(--ballot-gold); }
.submit-ballot.ready { min-height: 54px; font-size: 13px; box-shadow: 0 0 0 3px rgba(199,166,90,.18), 0 12px 28px rgba(0,0,0,.24); }
.submit-ballot:disabled { cursor: not-allowed; opacity: .45; }
.clear-ballot { color: #d5dfe5; background: transparent; border: 1px solid rgba(255,255,255,.18); }
.clear-ballot:disabled { opacity: .35; }
.ballot-message { min-height: 18px; margin-top: 9px; color: #ead394; font-size: 11px; line-height: 1.4; }

.community-results { grid-column: 1 / -1; padding: 28px; }
.community-results[hidden] { display: none; }
.results-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.results-head h2 { margin: 0; font-family: var(--hs-serif); font-size: clamp(34px,4vw,52px); }
.results-head p { max-width: 610px; margin: 8px 0 0; color: var(--ballot-muted); }
.share-ballot { padding: 12px 16px; color: #fff; background: var(--ballot-red); border: 0; cursor: pointer; font-weight: 900; }
.community-podium { margin: 28px 0 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: end; }
.community-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.result-card { padding: 12px; background: #f8f2e7; border: 1px solid var(--ballot-line); position: relative; }
.community-podium .result-card:first-child { min-height: 330px; border-color: var(--ballot-gold); box-shadow: 0 18px 45px rgba(99,71,11,.12); }
.community-podium .result-card:not(:first-child) { min-height: 300px; }
.result-image { height: 210px; display: grid; place-items: center; overflow: hidden; background: #e6ddce; }
.result-image img { width: 100%; height: 100%; object-fit: contain; }
.result-image .design-placeholder { position: relative; }
.result-card h3 { margin: 10px 0 8px; font-family: var(--hs-serif); font-size: 17px; }
.result-number { position: absolute; top: 0; left: 0; z-index: 3; padding: 8px 11px; color: #fff; background: var(--ballot-red); font-family: var(--hs-serif); }
.result-comparison { display: flex; flex-wrap: wrap; gap: 5px; }
.result-comparison span { padding: 5px 7px; color: #4e5961; background: #fff; border: 1px solid var(--ballot-line); font-size: 9px; font-weight: 800; }
.result-comparison .yours { color: #7d1d2b; }

.community-results:not([hidden]) { animation: reveal-results .45s ease both; }
.community-results:not([hidden]) .result-card { animation: reveal-card .4s ease both; }
.community-results:not([hidden]) .result-card:nth-child(2) { animation-delay: .07s; }
.community-results:not([hidden]) .result-card:nth-child(3) { animation-delay: .14s; }
.ballot-complete .ballot-progress-header { border-color: var(--ballot-gold); box-shadow: inset 0 0 0 1px rgba(199,166,90,.28); }
.ballot-complete .ballot-position-track { animation: complete-track .55s ease; }

@keyframes chosen-card { 0%,100% { transform: none; } 45% { transform: translateY(-5px) scale(1.018); box-shadow: 0 18px 38px rgba(181,45,66,.2); } }
@keyframes complete-track { 50% { transform: scale(1.035); } }
@keyframes reveal-results { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes reveal-card { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .design-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .design-card { grid-template-rows: 275px auto auto; }
  .design-grid-lead .design-card { grid-template-rows: 290px auto auto; }
  .ballot-upper { grid-template-columns: minmax(0,1fr) 330px; }
  .design-grid-rest { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .card-ballot .design-grid-rest { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .community-list { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 820px) {
  body { padding-bottom: 72px; }
  .design-hero { min-height: auto; grid-template-columns: 1fr; gap: 26px; }
  .design-hero-ticket,
  .design-hero-card-fan { display: none; }
  .ballot-workspace { padding-inline: 12px; }
  .ballot-upper { grid-template-columns: 1fr; }
  .your-ballot { position: fixed; inset: auto 0 0; z-index: 60; border: 0; box-shadow: 0 -18px 44px rgba(0,0,0,.28); }
  .ballot-mobile-toggle { width: 100%; min-height: 70px; padding: 11px 17px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--ballot-ink); border: 0; cursor: pointer; text-align: left; }
  .ballot-mobile-toggle small,
  .ballot-mobile-toggle strong { display: block; }
  .ballot-mobile-toggle small { color: #ead394; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
  .ballot-mobile-toggle strong { margin-top: 2px; }
  .ballot-mobile-toggle b { padding: 8px 11px; color: #211807; background: var(--ballot-gold); font-size: 11px; }
  .ballot-panel-body { display: none; max-height: 78vh; overflow: auto; }
  .your-ballot.open .ballot-panel-body { display: block; }
  .ranked-designs { max-height: 42vh; }
  .community-results { grid-column: auto; }
}

@media (max-width: 640px) {
  .design-hero { padding: 24px 20px 26px; }
  .design-hero h1 { font-size: 38px; }
  .design-hero-stats { gap: 20px; }
  .ballot-stage { padding: 12px; }
  .ballot-steps { grid-template-columns: 1fr; }
  .ballot-steps div { min-height: 46px; }
  .ballot-steps div + div { border-left: 0; border-top: 1px solid var(--ballot-line); }
  .ballot-toolbar { align-items: start; flex-direction: column; }
  .ballot-progress-header { align-items: start; flex-direction: column; }
  .ballot-position-track { width: 100%; grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .ballot-position-track span { width: 100%; max-width: 30px; }
  .era-filter { justify-content: flex-start; }
  .personal-podium { padding: 8px; gap: 5px; }
  .podium-slot { min-height: 128px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .podium-visual { width: 54px; height: 74px; }
  .design-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .design-card,
  .design-grid-lead .design-card { grid-template-rows: 245px auto auto; padding: 6px; }
  .design-copy h3 { font-size: 14px; }
  .community-results { padding: 18px 12px; }
  .results-head { align-items: start; flex-direction: column; }
  .community-podium { grid-template-columns: 1fr; }
  .community-podium .result-card:first-child,
  .community-podium .result-card:not(:first-child) { min-height: 0; }
  .community-list { grid-template-columns: repeat(2,1fr); }
  .result-image { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .design-card,
  .design-image img { transition: none; }
  .design-card.just-selected,
  .ballot-complete .ballot-position-track,
  .community-results:not([hidden]),
  .community-results:not([hidden]) .result-card { animation: none; }
}