/* VPG Swag Showdown — mobile-first; reuses site.css tokens */
.vote-section { padding-top: 2rem; padding-bottom: 5.5rem; }
.vote-kicker { margin: 0 0 .25rem; font-size: .85rem; font-weight: 600; color: var(--vpg-muted); }
.vote-kicker a { color: var(--vpg-blue-dark); text-decoration: none; }
.vote-kicker a:hover { text-decoration: underline; }
.vote-title { margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vote-plane { display: inline-block; animation: vote-fly 3.2s var(--ease) infinite alternate; }
@keyframes vote-fly { from { transform: translate(0, 2px) rotate(-6deg); } to { transform: translate(10px, -4px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .vote-plane, .vr-plane { animation: none !important; } }
.vote-intro { max-width: 44rem; margin: 0 0 1rem; color: var(--vpg-text); font-size: 1.02rem; line-height: 1.6; }
.vote-howto { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vote-howto li { display: flex; align-items: center; gap: .45rem; background: var(--vpg-bg-alt); border: 1px solid var(--vpg-border); border-radius: 999px; padding: .3rem .8rem .3rem .35rem; font-size: .85rem; font-weight: 600; color: var(--vpg-navy); }
.vote-howto li > span:first-child { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--vpg-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }

/* Grid + cards */
.vote-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: 1rem; }
@media (min-width: 560px) { .vote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vote-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.vote-loading { grid-column: 1 / -1; text-align: center; color: var(--vpg-muted); padding: 2rem 0; }
.vote-card { position: relative; background: #fff; border: 2px solid var(--vpg-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(6, 54, 98, .08); transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .2s ease; }
.vote-card:hover { box-shadow: 0 14px 36px rgba(6, 54, 98, .16); transform: translateY(-3px); }
.vote-card.is-picked { border-color: var(--vpg-blue); box-shadow: 0 0 0 3px rgba(61, 132, 198, .25), 0 12px 30px rgba(6, 54, 98, .16); }
.vote-card-img { position: relative; background: #fff; aspect-ratio: 5 / 4; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--vpg-border); }
.has-voted .vote-card-img { cursor: default; }
.vote-card-img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.vote-card:hover .vote-card-img img { transform: scale(1.03); }
.vote-badge { position: absolute; top: .6rem; left: .6rem; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 4px; background: var(--vpg-ice); color: var(--vpg-navy); }
.vote-picked-flag { position: absolute; top: .6rem; right: .6rem; font-size: .75rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px; background: var(--vpg-blue); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s var(--ease); }
.vote-card.is-picked .vote-picked-flag { opacity: 1; transform: scale(1); }
.vote-card-body { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.vote-card-body h3 { margin: 0; font-size: 1.12rem; color: var(--vpg-heading); }
.vote-tagline { margin: 0; font-size: .92rem; color: var(--vpg-muted); font-style: italic; }
.vote-price { margin: 0; font-size: .92rem; color: var(--vpg-navy); }
.vote-price strong { font-size: 1.08rem; }
.vote-placement { margin: 0; font-size: .86rem; line-height: 1.45; }
.vote-placement span { font-weight: 700; color: var(--vpg-navy); }
.vote-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.vote-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: var(--sw); box-shadow: 0 0 0 1px var(--vpg-border); cursor: pointer; padding: 0; transition: box-shadow .15s, transform .15s; }
.vote-swatch:hover { transform: scale(1.1); }
.vote-swatch.is-on { box-shadow: 0 0 0 2px var(--vpg-blue); }
.vote-swatch:focus-visible { outline: 2px solid var(--vpg-navy); outline-offset: 2px; }
.vote-swatch-name { font-size: .78rem; color: var(--vpg-muted); margin-left: .15rem; }
.vote-specs { font-size: .84rem; border-top: 1px dashed var(--vpg-border); padding-top: .45rem; }
.vote-specs summary { cursor: pointer; font-weight: 600; color: var(--vpg-blue-dark); padding: .2rem 0; }
.vote-specs p { margin: .4rem 0; }
.vote-table-wrap { overflow-x: auto; margin-top: .4rem; }
.vote-specs table { border-collapse: collapse; width: 100%; font-size: .78rem; }
.vote-specs th, .vote-specs td { text-align: left; padding: .3rem .35rem; border-bottom: 1px solid var(--vpg-border); vertical-align: top; }
.vote-specs thead th { color: var(--vpg-navy); background: var(--vpg-bg-alt); }
.vote-pick { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 48px; border-radius: 10px; border: 2px solid var(--vpg-blue); background: #fff; color: var(--vpg-blue-dark); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .2s, color .2s, transform .1s; }
.vote-pick:hover:not(:disabled) { background: var(--vpg-bg-alt); }
.vote-pick:active:not(:disabled) { transform: scale(.98); }
.vote-pick[aria-pressed="true"] { background: var(--vpg-blue); color: #fff; }
.vote-pick:disabled { cursor: not-allowed; opacity: .55; }
.has-voted .vote-pick[aria-pressed="true"] { opacity: 1; }
.vote-pick-icon { font-size: 1.15rem; line-height: 1; }
.vote-tally { font-size: .85rem; color: var(--vpg-navy); font-weight: 600; }
.vote-meter { height: 10px; border-radius: 999px; background: var(--vpg-bg-alt); border: 1px solid var(--vpg-border); overflow: hidden; margin-bottom: .3rem; }
.vote-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--vpg-blue), var(--vpg-heading)); transition: width .8s var(--ease); }
.vote-footnote { font-size: .8rem; color: var(--vpg-muted); margin: 0 0 1.75rem; max-width: 52rem; }

/* Form */
.vote-form { background: var(--vpg-bg-alt); border: 1px solid var(--vpg-border); border-radius: 14px; padding: 1.2rem 1rem; max-width: 640px; margin: 0 auto; scroll-margin-top: calc(var(--header-h) + 1rem); }
.vote-form h2 { margin: 0 0 .4rem; font-size: 1.35rem; }
.vote-form-picks { margin: 0 0 1rem; font-size: .95rem; }
.vote-fields { display: grid; gap: .8rem; margin-bottom: 1rem; }
.vote-fields label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--vpg-navy); }
.vote-fields .opt { font-weight: 400; color: var(--vpg-muted); }
.vote-fields input, .vote-fields textarea { font: inherit; font-size: 16px; padding: .65rem .75rem; border: 1px solid var(--vpg-border); border-radius: 8px; background: #fff; width: 100%; }
.vote-fields input:focus, .vote-fields textarea:focus { outline: 2px solid var(--vpg-blue); outline-offset: 1px; border-color: var(--vpg-blue); }
.vote-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vote-submit { width: 100%; min-height: 50px; font-size: 1.05rem; }
.vote-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.vote-msg { min-height: 1.2em; margin: .6rem 0 0; font-size: .9rem; color: var(--vpg-navy); }
.vote-msg.is-error { color: #a4262c; font-weight: 600; }
.vote-privacy { margin: .4rem 0 0; font-size: .78rem; color: var(--vpg-muted); }

/* Sticky mobile bar */
.vote-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(6, 54, 98, .96); color: #fff; box-shadow: 0 -6px 20px rgba(0, 0, 0, .18); }
.vote-bar[hidden] { display: none; }
.vote-bar-count { font-weight: 700; font-size: .95rem; }
.vote-bar-btn { padding: .55rem 1rem; font-size: .92rem; white-space: nowrap; }
@media (min-width: 900px) { .vote-bar { left: 50%; right: auto; bottom: 1rem; transform: translateX(-50%); border-radius: 999px; padding: .5rem .6rem .5rem 1.3rem; min-width: 360px; } }

/* Results */
.vote-results { background: #fff; border: 2px solid var(--vpg-blue); border-radius: 16px; padding: 1.1rem 1rem 1rem; margin: 0 0 1.75rem; box-shadow: var(--vpg-shadow-card); scroll-margin-top: calc(var(--header-h) + 1rem); }
.vote-results.is-new { animation: vote-pop .5s var(--ease); }
@keyframes vote-pop { from { transform: scale(.97); opacity: .3; } to { transform: none; opacity: 1; } }
.vr-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.vr-head h2 { margin: 0 0 .2rem; font-size: 1.1rem; line-height: 1.3; }
@media (min-width: 720px) { .vr-head h2 { font-size: 1.3rem; } }
.vr-head p { margin: 0; font-size: .9rem; color: var(--vpg-muted); }
.vr-plane { font-size: 2rem; line-height: 1; animation: vote-fly 2.4s var(--ease) infinite alternate; }
.vr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.vr-list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name num" "bar bar"; gap: .2rem .6rem; align-items: center; padding: .45rem .6rem; border-radius: 10px; }
.vr-list li.is-mine { background: var(--vpg-bg-alt); }
.vr-name { grid-area: name; font-weight: 600; font-size: .95rem; color: var(--vpg-navy); }
.vr-name em { font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--vpg-blue); color: #fff; padding: .1rem .4rem; border-radius: 4px; margin-left: .25rem; vertical-align: middle; }
.vr-bar { grid-area: bar; height: 12px; background: #eef3f8; border-radius: 999px; overflow: hidden; }
.vr-bar span { display: block; height: 100%; min-width: 4px; background: linear-gradient(90deg, var(--vpg-blue), var(--vpg-heading)); border-radius: 999px; transition: width .9s var(--ease); }
.vr-num { grid-area: num; font-weight: 700; color: var(--vpg-navy); font-size: .95rem; }
.vr-num small { font-weight: 500; color: var(--vpg-muted); }
.vr-foot { margin: .8rem 0 0; font-size: .85rem; color: var(--vpg-muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vr-refresh { font: inherit; font-size: .82rem; font-weight: 600; border: 1px solid var(--vpg-border); background: #fff; color: var(--vpg-blue-dark); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
@media (min-width: 720px) {
  .vote-results { padding: 1.4rem 1.6rem; }
  .vr-list li { grid-template-columns: minmax(180px, 260px) 1fr 90px; grid-template-areas: "name bar num"; }
  .vr-num { text-align: right; }
  .vote-form { padding: 1.6rem 1.8rem; }
}