:root{ --fg:#0b0d12; --muted:#6b7280; --card:#fff; --border:#e5e7eb; --brand:#b91c1c; --accent:#ef4444; --bg0:#fff5f5; --bg1:#ffffff; }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; color:var(--fg); font:16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial;
  background: radial-gradient(1000px 700px at 15% 0%, #fee2e2 0%, transparent 40%),
             radial-gradient(800px 600px at 100% 10%, #fecaca 0%, transparent 40%),
             linear-gradient(180deg, var(--bg1) 0%, var(--bg1) 40%, var(--bg0) 100%); }
.container{max-width:1080px; margin:0 auto; padding:24px}
h1{font-size:clamp(28px,3.2vw,44px); margin:0; letter-spacing:-.02em; font-weight:900}
.lead{color:var(--muted); margin:.5rem 0 0}
.hero{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.05)}
.btn{appearance:none; border:1px solid var(--border); background:#fff; padding:10px 14px; border-radius:12px; font-size:14px; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.08)}
.btn.primary{color:#fff; border:none; background:linear-gradient(135deg, var(--brand), var(--accent)); box-shadow:0 8px 22px rgba(185,28,28,.25)}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 8px 30px rgba(0,0,0,.06); display:flex; flex-direction:column; min-height:140px}
.duel{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.small{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.quote{font-size:18px; margin-top:6px}
.clickable{cursor:pointer}
.clickable:focus,.clickable:hover{outline:2px solid #991b1b33; outline-offset:2px}
.panel{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px}
.grid{display:grid; gap:12px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:13px}
.progress{width:100%; height:10px; background:#f1f5f9; border:1px solid #e5e7eb; border-radius:999px; overflow:hidden}
.progress>i{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand), var(--accent))}
.footer{color:var(--muted); font-size:12px; padding-top:8px}
.badge{background:var(--brand); color:#fff; padding:3px 8px; border-radius:999px; font-size:12px}
.badge.b{background:#ea580c}
.voted{animation:pulse .25s ease-out}
@keyframes pulse{0%{transform:scale(1)} 60%{transform:scale(1.01)} 100%{transform:scale(1)}}
@media (max-width:720px){.duel{grid-template-columns:1fr}}