/* Published lists use the regular discovery, vote, and results layouts. */
.published-comparison-section {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(116, 220, 204, .3);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(12, 36, 39, .9), rgba(6, 16, 20, .96));
}

.published-comparison-section-copy {
  max-width: 62ch;
  margin: .3rem 0 1.1rem;
  color: #c4d7d3;
  line-height: 1.5;
}

.published-comparison-section .wip-v2-category-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wip-v2-category-button.is-published-list,
.chooser-card.is-published-list {
  min-width: 0;
  border-color: rgba(116, 220, 204, .32);
}

.wip-v2-category-button.is-published-list .wip-v2-category-button-inner {
  grid-template-rows: auto 1fr;
}

.wip-v2-category-button.is-published-list .wip-v2-category-copy,
.chooser-card.is-published-list .chooser-title,
.chooser-card.is-published-list .chooser-text {
  display: grid;
}

.wip-v2-category-button.is-published-list .wip-v2-category-copy {
  align-content: start;
  gap: .45rem;
  padding: .75rem;
}

.wip-v2-category-button.is-published-list .wip-v2-category-title,
.chooser-card.is-published-list .chooser-title {
  color: #f6f2ea;
  overflow-wrap: anywhere;
}

.wip-v2-category-button.is-published-list .wip-v2-category-text,
.chooser-card.is-published-list .chooser-text {
  color: #bdd5d0;
  line-height: 1.4;
}

.published-card-art-link {
  display: block;
  min-width: 0;
  text-decoration: none;
}

.published-card-art-link:focus-visible,
.published-card-actions a:focus-visible,
.reference-vote-feedback-link:focus-visible {
  outline: 3px solid #f6c64b;
  outline-offset: 3px;
}

.published-card-art-link .wip-v2-category-thumb,
.published-card-art-link .chooser-art {
  width: 100%;
}

.published-comparison-card-label {
  width: fit-content;
  max-width: 100%;
  font-size: .65rem;
  letter-spacing: .04em;
}

.published-comparison-card-label::before {
  content: "⇄";
  margin-right: .35rem;
  font-size: .9rem;
  line-height: 0;
}

.chooser-card.is-published-list .published-comparison-card-label {
  margin-top: .15rem;
}

.published-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: end;
  gap: .45rem;
  width: 100%;
  margin-top: .45rem;
}

.published-card-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  padding: .55rem .6rem;
  border: 1px solid rgba(116, 220, 204, .52);
  border-radius: 7px;
  color: #d7f4ed;
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.published-card-actions .published-card-vote {
  border-color: #74dccc;
  background: #74dccc;
  color: #061014;
}

.published-card-actions a:hover {
  border-color: #f6c64b;
  background: rgba(246, 198, 75, .16);
  color: #fff5d3;
}

.published-card-actions .published-card-vote:hover {
  background: #9be9dc;
  color: #061014;
}

.reference-context--comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border: 1px solid rgba(116, 220, 204, .38);
  border-left: 4px solid #74dccc;
  border-radius: 8px;
  background: #10272b;
}

.reference-context-copy,
.reference-context-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

.reference-context-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .55rem .8rem;
  border: 1px solid rgba(116, 220, 204, .48);
  border-radius: 7px;
  color: #c9f3e8;
  text-decoration: none;
  font-weight: 800;
}

.reference-context-actions a:hover {
  border-color: #f6c64b;
  color: #fff4ce;
}

.reference-vote-feedback[hidden] {
  display: none;
}

.reference-vote-feedback {
  display: grid;
  gap: .3rem;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(116, 220, 204, .46);
  border-left: 4px solid #f6c64b;
  border-radius: 8px;
  background: #10272b;
  color: #f6f2ea;
  line-height: 1.45;
}

.reference-vote-feedback-heading {
  color: #f6d782;
  font-size: 1rem;
}

.reference-vote-feedback-copy,
.reference-vote-feedback-source {
  margin: 0;
}

.reference-vote-feedback-source {
  color: #bed5d0;
  font-size: .86rem;
}

.reference-vote-feedback-link {
  width: fit-content;
  margin-top: .3rem;
  color: #aaf1dc;
  font-weight: 800;
  text-underline-offset: 3px;
}

/* Size the choice for the category, but preserve each cover's own proportions.
   Even the same list can mix posters, box art and wide game banners. */
body.published-vote-page {
  --published-card-width: 240px;
}

body.published-vote-page[data-category-slug="published-pcgamer-2025"] {
  --published-card-width: 332px;
}

body.published-vote-page .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  max-width: calc(var(--published-card-width) * 2 + 1rem);
  margin-inline: auto;
}

body.published-vote-page .card-grid > .game-card {
  width: 100%;
  max-width: none;
  height: auto;
}

body.published-vote-page .card-frame {
  height: auto;
}

body.published-vote-page .card-art:has(img) {
  height: auto;
  max-height: none;
  aspect-ratio: auto;
}

body.published-vote-page .card-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.reference-page.reference-page,
.reference-page .reference-shell {
  background: #061014;
}

.reference-page .reference-shell {
  width: min(1180px, calc(100% - 32px));
}

.reference-page .reference-intro {
  border-color: rgba(116, 220, 204, .3);
  border-radius: 10px;
  background: linear-gradient(145deg, #102c32, #0c181e);
}

.reference-page .reference-comparison {
  min-width: 0;
}

.reference-page .reference-row {
  grid-template-columns: 72px minmax(0, 1fr) 150px 110px;
  gap: 1rem;
  border-color: rgba(116, 220, 204, .18);
  border-radius: 8px;
  background: #0c1d24;
}

.reference-page .reference-table-labels {
  grid-template-columns: 72px minmax(0, 1fr) 150px 110px;
  gap: 1rem;
  padding-inline: 21px;
}

.reference-page .reference-item {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.reference-item-art {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 72px;
  border-radius: 5px;
  background: #081318;
  object-fit: contain;
}

.reference-item-art--fallback {
  display: grid;
  place-items: center;
  color: #a8f0dc;
  font-size: 1.5rem;
  font-weight: 900;
}

.reference-item-copy {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.reference-item-copy strong {
  color: #f6f2ea;
  line-height: 1.3;
}

.reference-item-copy span {
  color: #b5cbc6;
  font-size: .77rem;
}

.reference-comparison-help {
  margin: -.2rem 0 1rem;
  color: #b8d3cd;
  font-size: .83rem;
  line-height: 1.5;
}

.reference-comparison-help summary {
  width: fit-content;
  cursor: pointer;
  color: #aaf1dc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reference-comparison-help p {
  max-width: 80ch;
  margin: .5rem 0;
}

.reference-biggest-differences {
  padding: 1rem;
  border: 1px solid rgba(246, 198, 75, .3);
  border-radius: 8px;
  background: #11272b;
}

.reference-biggest-differences h3 {
  margin: 0 0 .4rem;
}

.reference-biggest-differences p {
  margin: .3rem 0 .8rem;
  color: #bdd2cc;
}

.reference-biggest-differences ol {
  display: grid;
  gap: .65rem;
  padding-left: 1.4rem;
  margin: 0;
}

.reference-biggest-differences li {
  padding-left: .25rem;
  line-height: 1.45;
}

.reference-biggest-differences li strong {
  color: #f6d782;
}

.reference-disagreement-pair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}

.reference-disagreement-pair img {
  width: 30px;
  height: 40px;
  border-radius: 4px;
  background: #081318;
  object-fit: contain;
}

.reference-disagreement-gap {
  display: block;
  margin-top: .2rem;
  color: #bdd2cc;
  font-size: .8rem;
}

@media (max-width: 700px) {
  .published-comparison-section .wip-v2-category-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reference-page .reference-shell {
    width: min(100% - 24px, 1180px);
  }

  .reference-page .reference-row {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: .65rem;
    padding: .8rem;
  }

  .reference-page .reference-item {
    align-items: flex-start;
    gap: .65rem;
  }

  .reference-item-art {
    flex-basis: 45px;
    width: 45px;
    height: 58px;
  }

  .reference-page .reference-dynamic,
  .reference-page .reference-difference {
    grid-column: 2;
  }

  .reference-page .reference-modes a {
    padding: .65rem;
  }

  .reference-page .reference-modes a strong {
    font-size: .83rem;
  }
}

@media (max-width: 640px) {
  .chooser-card.is-published-list {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 6px;
  }

  .chooser-card.is-published-list .published-card-art-link {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .chooser-card.is-published-list .chooser-art {
    aspect-ratio: 1;
  }

  .chooser-card.is-published-list .published-comparison-card-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .chooser-card.is-published-list .chooser-title {
    grid-column: 2;
    grid-row: 2;
  }

  .chooser-card.is-published-list .chooser-text {
    grid-column: 2;
    grid-row: 3;
  }

  .chooser-card.is-published-list .published-card-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .65rem;
  }
}

@media (max-width: 480px) {
  .published-comparison-section .wip-v2-category-buttons {
    grid-template-columns: 1fr;
  }

  .published-card-actions {
    grid-template-columns: 1fr;
  }

  .wip-v2-category-button.is-published-list .published-card-actions {
    grid-template-columns: 1fr;
  }

  .chooser-card.is-published-list .published-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reference-page .reference-modes {
    grid-template-columns: 1fr;
  }
}

/* Keep published-list voting as focused as a regular matchup. */
body.published-vote-page .vote-page {
  margin-top: .7rem;
}

body.published-vote-page .vote-stage {
  padding: clamp(.8rem, 1.8vw, 1.15rem);
}

body.published-vote-page .vote-context {
  margin-bottom: .7rem;
}

body.published-vote-page .vote-context > div:first-child {
  gap: .2rem;
}

body.published-vote-page .vote-context-head {
  min-height: 1.4rem;
}

body.published-vote-page .vote-context-head:has(.has-group) {
  min-height: 2.42rem;
}

body.published-vote-page .group-bar-state.is-empty,
body.published-vote-page .card-chip-row {
  display: none;
}

body.published-vote-page .vote-context-kicker {
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #74dccc;
  font-size: .69rem;
  line-height: 1.25;
}

body.published-vote-page .vote-context h1 {
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

body.published-vote-page .vote-context-intro {
  font-size: .87rem;
  line-height: 1.35;
}

/* The retained result has a bounded width, independent of either title. */
body.published-vote-page .reference-vote-feedback[hidden] {
  display: none;
}

body.published-vote-page .reference-vote-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem .55rem;
  box-sizing: border-box;
  width: min(100%, 34rem);
  min-width: 0;
  max-width: 100%;
  margin: .7rem auto 0;
  padding: .4rem .75rem;
  border: 1px solid rgba(116, 220, 204, .4);
  border-radius: 999px;
  background: rgba(16, 39, 43, .88);
  color: #d3e7df;
  line-height: 1.3;
  text-align: center;
}

body.published-vote-page .reference-vote-feedback[data-agrees="false"] {
  border-color: rgba(246, 198, 75, .55);
}

body.published-vote-page .reference-vote-feedback-heading {
  color: #aaf1dc;
  font-size: .78rem;
  white-space: normal;
}

body.published-vote-page .reference-vote-feedback[data-agrees="false"] .reference-vote-feedback-heading {
  color: #f6d782;
}

body.published-vote-page .reference-vote-feedback-verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
  color: #aaf1dc;
}

body.published-vote-page .reference-vote-feedback-icon {
  display: inline-flex;
  flex: none;
}

body.published-vote-page .reference-vote-feedback[data-agrees="false"] .reference-vote-feedback-verdict {
  color: #f6d782;
}

body.published-vote-page .reference-vote-feedback[data-agrees="true"] .reference-vote-feedback-icon--different,
body.published-vote-page .reference-vote-feedback[data-agrees="false"] .reference-vote-feedback-icon--match {
  display: none;
}

body.taste-vote-page .vote-share-pick {
  gap: .35rem;
}

body.published-vote-page .reference-vote-feedback-copy {
  color: #c7d9d4;
  font-size: .76rem;
  overflow-wrap: anywhere;
}

body.published-vote-page .vote-stage:has(.reference-vote-feedback:not([hidden])) .vote-actions {
  margin-top: .65rem;
}

/* Source positions appear only after a saved pick, then yield to the next pair. */
body.published-vote-page .reference-rank-reveal {
  position: absolute;
  top: .55rem;
  left: .55rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: .3rem .55rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(3, 13, 17, .92);
  color: #fff;
  font-size: .73rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: referenceRankReveal .5s ease-out both;
}

body.published-vote-page .game-card.reference-choice-winner .card-frame {
  opacity: 1;
  filter: none;
  border-color: #74dccc;
  animation: referenceChoiceGlow .78s ease-out both;
}

body.published-vote-page .vote-stage[data-reference-verdict="different"] .game-card.reference-choice-winner .card-frame {
  border-color: #f6c64b;
}

body.published-vote-page .game-card.reference-choice-other .card-frame {
  opacity: .55;
  filter: saturate(.65);
  transform: scale(.98);
}

body.published-vote-page .vote-versus.reference-choice-verdict {
  width: 8.1rem !important;
  height: 3rem !important;
  border-color: #74dccc;
  background: #103a3d;
  color: #d8fff0;
  font-size: .9rem !important;
  letter-spacing: .08em;
  white-space: nowrap;
  animation: referenceVerdictPop .65s cubic-bezier(.17,.67,.3,1.2) both;
}

body.published-vote-page .vote-stage[data-reference-verdict="different"] .vote-versus.reference-choice-verdict {
  border-color: #f6c64b;
  background: #493916;
  color: #fff0ba;
}

@keyframes referenceChoiceGlow {
  0% { box-shadow: 0 0 0 0 rgba(116, 220, 204, .56); transform: translateY(-4px) scale(1); }
  45% { box-shadow: 0 0 0 9px rgba(116, 220, 204, .08), 0 0 30px rgba(116, 220, 204, .4); transform: translateY(-6px) scale(1.02); }
  100% { box-shadow: 0 0 0 2px rgba(116, 220, 204, .12); transform: translateY(-4px) scale(1); }
}

@keyframes referenceVerdictPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.09); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes referenceRankReveal {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  body.published-vote-page .vote-context {
    margin-bottom: .55rem !important;
  }

  body.published-vote-page .vote-context-kicker {
    min-height: 0 !important;
    padding: 0 !important;
  }

  body.published-vote-page .vote-context h1 {
    font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
  }

  body.published-vote-page .reference-vote-feedback {
    gap: .2rem .45rem;
    margin-top: .55rem;
    padding: .4rem .6rem;
    border-radius: 14px;
  }

  body.published-vote-page .reference-rank-reveal {
    top: .35rem;
    left: .35rem;
    min-height: 1.55rem;
    padding: .2rem .4rem;
    font-size: .61rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.published-vote-page .reference-rank-reveal,
  body.published-vote-page .game-card.reference-choice-winner .card-frame,
  body.published-vote-page .vote-versus.reference-choice-verdict {
    animation: none;
  }
}

/* Saved-choice recap and the brief line joining the two original positions. */
body.published-vote-page .reference-vote-feedback-pick {
  flex-basis: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c7d9d4;
  font-size: .73rem;
}

body.published-vote-page .reference-position-line {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #74dccc;
  pointer-events: none;
}

body.published-vote-page .vote-stage[data-reference-verdict="different"] .reference-position-line {
  color: #f6c64b;
}

body.published-vote-page .reference-position-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px #031116);
  stroke-dasharray: 1;
  animation: referencePositionConnect .32s ease-out both;
}

@keyframes referencePositionConnect {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.published-vote-page .reference-position-line path {
    animation: none;
  }
  body.published-vote-page .game-card.reference-choice-other .card-frame {
    transform: none;
  }
}