.flirt-champion { min-width: 0; margin-top: 40px; }
.champion-lineup-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.champion-lineup-heading h2 { margin: 0; color: #f7d8ea; font: 450 clamp(18px, 2vw, 25px)/1.4 var(--display, sans-serif); letter-spacing: -.05em; }
.champion-lineup-heading > a { flex: none; color: var(--muted, #b69caf); font: 11px/1.5 var(--pixel, monospace); }
.champion-lineup-heading > a:hover { color: var(--pink, #ffd0e7); text-decoration: underline; }
.champion-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.champion-model { position: relative; display: flex; align-items: center; min-width: 0; gap: 11px; padding: 10px 8px; border: 1px solid transparent; border-bottom-color: #55374b; border-radius: 10px; color: var(--pink, #ffd0e7); text-decoration: none; transition: border-color .18s, background-color .18s; }
.champion-model:hover { border-bottom-color: var(--pink, #ffd0e7); background: #4820351c; }
.champion-face { position: relative; display: block; flex: none; width: 70px; height: 83px; overflow: hidden; border: 1px solid #70495f; border-radius: 40px 40px 10px 10px; background: #281120; }
.champion-face img { position: absolute; width: 240px; max-width: none; height: 137px; object-fit: cover; left: -151px; top: -7px; }
.champion-face-symbol { display: grid; place-items: center; font: 42px/1 Georgia, serif; }
.champion-copy { display: block; min-width: 0; }
.champion-model-name { display: block; color: var(--pink, #ffd0e7); font: 12px/1.5 var(--pixel, monospace); overflow-wrap: anywhere; }
.champion-model-score { display: block; margin-top: 5px; color: var(--muted, #b69caf); font: 9px/1.7 var(--mono, monospace); }
.champion-model.is-flirtiest { border-color: #ffc8e2; background: #ffd0e708; box-shadow: 0 0 0 3px #ffc8e21c, 0 0 23px #e989b512; }
.champion-model.is-flirtiest .champion-face { border-color: #ffd0e7; box-shadow: 0 0 0 2px #ffd0e730; }
.champion-model.is-flirtiest .champion-model-score { color: #dcb9ce; }
.champion-badge { position: absolute; top: -9px; right: 8px; padding: 1px 7px 2px; border: 1px solid #b8789a; border-radius: 20px; background: #23111e; color: #ffd0e7; font: 8px/1.6 var(--mono, monospace); white-space: nowrap; }
.champion-stars { position: absolute; inset: 0; pointer-events: none; color: #ffe0ef; }
.champion-stars > span:first-child { position: absolute; top: -9px; left: -7px; font: 23px/1 Georgia, serif; text-shadow: 0 0 9px #edacd2; }
.champion-stars > span:last-child { position: absolute; right: 6px; bottom: -7px; font: 15px/1 Georgia, serif; text-shadow: 0 0 8px #edacd2; }
.flirt-champion a:focus-visible { outline: 2px solid var(--pink, #ffd0e7); outline-offset: 5px; }
@media (max-width: 800px) { .champion-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; } }
@media (max-width: 550px) {
  .flirt-champion { margin-top: 32px; }
  .champion-lineup-heading { gap: 15px; margin-bottom: 21px; }
  .champion-lineup-heading h2 { font-size: 19px; }
  .champion-lineup-heading > a { font-size: 9px; }
  .champion-lineup { gap: 17px 12px; }
  .champion-model { gap: 8px; padding: 10px 6px; }
  .champion-face { width: 53px; height: 73px; }
  .champion-face img { left: -158px; top: -9px; }
  .champion-model-name { font-size: 11px; }
  .champion-model-score { font-size: 8px; }
  .champion-badge { font-size: 7px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .champion-model { transition: none; } }