/* Black and yellow theme. Change --accent to adjust the site's highlight color. */
:root { --accent: #ffb31a; --accent-dark: #d99100; --ink: #f4f4f4; --muted: #bdbdbd; --surface: #1b1b1b; }
* { box-sizing: border-box; }
body { margin: 0; background: #101010; color: var(--ink); font: 16px "Poppins", Arial, sans-serif; }
.topbar { background: #080808; border-bottom: 4px solid var(--accent); color: white; }
.topbar-inner { max-width: 960px; min-height: 72px; padding: 0 18px; margin: auto; display: flex; align-items: center; justify-content: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; color: #fff; font-size: 37px; font-weight: 700; letter-spacing: 0; line-height: 1; text-decoration: none; font-family: "Poppins", Arial, sans-serif; }
.logo-main { color: #fff; }
.logo-main, .logo-highlight { letter-spacing: -2px; line-height: 1; }
.logo-highlight { display: inline-block; margin: 0; padding: 4px 5px 5px; border-radius: 5px; background: var(--accent); color: #111; font-weight: 700; }
.logo-domain { margin: 0; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; align-self: flex-end; padding-bottom: 3px; }
nav { display: flex; gap: 22px; }
nav a { color: #eee; font-weight: bold; font-size: 14px; text-decoration: none; }
nav a:hover { color: var(--accent); }
main { max-width: 900px; margin: 0 auto; padding: 0 18px 34px; }
.tagline { text-align: center; font: italic 14px "Poppins", Arial, sans-serif; color: var(--muted); margin: 19px 0 25px; }
.intro { text-align: center; margin-bottom: 20px; }
h1 { font: 700 25px "Poppins", Arial, sans-serif; margin: 0 0 8px; }
.intro h1 { font-family: "Playfair Display", Georgia, serif; }
.intro h1 em { color: #ffb6d9; font-style: italic; }
.intro p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.5; }
.matchup { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 14px; }
.person { position: relative; display: flex; flex-direction: column; padding: 8px; border: 1px solid #444; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px #0008; transition: transform .12s, border-color .12s, background-color .12s; }
.person:disabled { cursor: default; }
.person:hover, .person:focus-visible { transform: translateY(-3px); border-color: var(--accent); outline: 2px solid #ffb31a44; }
.person:disabled:hover { transform: none; border-color: #444; outline: none; }
.person img { width: 100%; height: clamp(210px, 38vw, 360px); object-fit: cover; background: #292929; }
.person-name { text-align: center; font: 700 20px "Poppins", Arial, sans-serif; padding: 11px 0 5px; }
.choose { color: var(--accent); font-size: 13px; font-weight: bold; padding-bottom: 5px; }
.winner-flash { z-index: 2; border-color: #ff1493 !important; background: #5a1038; box-shadow: 0 0 0 3px #ff149377, 0 0 28px #ff1493aa; animation: winner-pop 2s ease-in-out forwards; }
.winner-flash .person-name { margin: 7px 0 3px; padding: 8px 4px; border-radius: 5px; background: #ff1493; color: #fff; }
.loser-flash { z-index: 2; border-color: #ff2020 !important; background: #5a1010; box-shadow: 0 0 0 2px #ff202066; animation: loser-vibrate .09s linear 9; }
.loser-flash .person-name { margin: 7px 0 3px; padding: 8px 4px; border-radius: 5px; background: #ed1515; color: #fff; }
#leftChoice.loser-exit { animation: profile-exit-left .32s ease-in forwards; }
#rightChoice.loser-exit { animation: profile-exit-right .32s ease-in forwards; }
.challenger-enter-left { animation: profile-enter-left .38s ease-out both; }
.challenger-enter-right { animation: profile-enter-right .38s ease-out both; }
@keyframes winner-pop {
  0%, 100% { transform: scale(1); }
  24%, 72% { transform: scale(1.055); }
}
@keyframes loser-vibrate {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-4px) rotate(-.35deg); }
  40% { transform: translateX(4px) rotate(.35deg); }
  60% { transform: translateX(-3px) rotate(-.25deg); }
  80% { transform: translateX(3px) rotate(.25deg); }
}
@keyframes profile-exit-left { to { opacity: 0; transform: translateX(-48px); } }
@keyframes profile-exit-right { to { opacity: 0; transform: translateX(48px); } }
@keyframes profile-enter-left { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes profile-enter-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
.or { color: var(--accent); font: 700 19px "Poppins", Arial, sans-serif; text-align: center; }
.status { min-height: 20px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; margin: 14px 0 34px; }
.about-link { display: block; width: fit-content; margin: 0 auto 12px; color: #ffb6d9; font-size: 13px; font-style: italic; font-weight: 600; text-decoration: none; }
.about-link:hover, .about-link:focus-visible { color: #ffd1e5; text-decoration: underline; }
.leaderboard { max-width: 580px; margin: auto; padding: 19px 22px; background: var(--surface); border: 1px solid #444; }
.leaderboard h2 { color: var(--accent); font: 700 21px "Poppins", Arial, sans-serif; margin: 0 0 4px; }
.small-note { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
#rankings { margin: 0; padding-left: 30px; }
#rankings li { padding: 8px 4px; border-top: 1px solid #333; }
.ranking-item { min-height: 42px; }
.rank-name { display: inline-block; color: #f4f4f4; text-decoration: none; font-weight: 700; }
.rank-name:hover { color: var(--accent); }
.rank-first .rank-name { padding: 5px 10px; border: 2px solid #d4af37; border-radius: 5px; font-size: 21px; }
.rank-second .rank-name { padding: 4px 9px; border: 2px solid #c0c0c0; border-radius: 5px; font-size: 19px; }
.rank-third .rank-name { padding: 3px 8px; border: 2px solid #cd7f32; border-radius: 5px; font-size: 18px; }
.rank-other .rank-name { font-size: 16px; }
.rating { float: right; color: var(--muted); font-size: 13px; }
.reset { margin-top: 14px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: #111; font-weight: bold; cursor: pointer; }
.reset:hover { background: #ffc24d; }
footer { text-align: center; color: #999; font-size: 12px; margin: 23px auto 0; }
@media (max-width: 560px) {
  .topbar-inner { flex-direction: row; align-items: center; padding-top: 8px; padding-bottom: 8px; gap: 11px; }
  nav { gap: 16px; }
  .matchup { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 6px; }
  .person { padding: 5px; }
  .person img { height: 220px; }
  .person-name { font-size: 17px; }
}