/* Homepage-only marketing simulation. The actual leaderboard keeps its layout. */
.hero.hero-arcade { max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.72fr); align-items:center; gap:52px; padding:72px 0 94px }
.hero-arcade .hero-copy { min-width:0 }
.hero-arcade h1 { font-size:clamp(64px,7.2vw,96px) }
.hero-arcade .lede { max-width:490px; font-size:19px }
.hero-arcade .hero-proof { margin-top:38px }
.hero-copy:has(.connect[hidden]) > .github-privacy { display:none }
.arcade { --arcade-step:55px; min-width:0; background:#fff; border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); position:relative }
.arcade-header { padding:18px 21px 16px; background:var(--lime); border-bottom:2px solid var(--ink) }
.arcade-kicker { display:flex; align-items:center; justify-content:space-between; gap:10px; font:500 11px/1.5 "DM Mono",monospace; letter-spacing:.05em }
.arcade-simulation { border:1px solid var(--ink); padding:3px 6px; background:#ffffff5c; font-size:10px; letter-spacing:.04em }
.arcade h2 { font:500 clamp(25px,2.3vw,30px)/1.05 "DM Mono",monospace; letter-spacing:-.07em; text-transform:uppercase; margin:13px 0 10px }
.arcade-disclaimer { margin:0; font-size:12px; line-height:1.5; color:#3a4a16 }
.arcade-columns { display:flex; justify-content:space-between; gap:8px; padding:12px 18px 7px; color:#65705f; font:10px/1.5 "DM Mono",monospace; letter-spacing:.04em }
.arcade-rows { position:relative; height:calc(var(--arcade-step) * 5); padding:0; margin:0 10px; list-style:none; overflow:hidden }
.arcade-rows:empty { background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--arcade-step) - 2px),var(--line) calc(var(--arcade-step) - 1px),transparent var(--arcade-step)) }
.arcade-row { position:absolute; inset:0 0 auto; height:calc(var(--arcade-step) - 3px); display:grid; grid-template-columns:24px 34px minmax(0,1fr) 75px; align-items:center; gap:10px; padding:0 8px; border-bottom:1px solid var(--line); background:#fff; transform:translateY(calc(var(--arcade-slot) * var(--arcade-step))); transition:transform .72s cubic-bezier(.2,.8,.2,1); will-change:transform }
.arcade-rank,.arcade-score { font:500 14px "DM Mono",monospace; font-variant-numeric:tabular-nums }
.arcade-rank { color:#65705f }
.arcade-score { text-align:right; letter-spacing:-.05em }
.arcade-avatar { position:relative; width:34px; height:34px; border:1px solid #c5ceb9; background:#edf2e4; box-shadow:2px 2px 0 #d8dfce; display:grid; place-items:center; color:#506b25; font:12px "DM Mono",monospace }
.arcade-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.arcade-avatar img[hidden] { display:none }
.arcade-identity { min-width:0 }
.arcade-username { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 12px/1.5 "DM Mono",monospace }
.arcade-change { display:block; color:#65705f; font:10px/1.6 "DM Mono",monospace }
.arcade-row[data-moving="true"] { z-index:2; animation:arcade-overtake 2.5s ease-out both }
.arcade-row[data-moving="true"] .arcade-score { animation:arcade-score-pop .55s ease-out }
.arcade-row[data-moving="true"] .arcade-change { color:#354b11 }
.arcade-moment { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); margin:8px 0 0; padding:10px 19px; min-height:51px; color:#46651c; font:11px/1.5 "DM Mono",monospace }
.arcade-moment > span:first-child { flex:none; font-size:21px }
.arcade-moment [data-arcade-message] { overflow-wrap:anywhere }
.arcade-invitation { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border:1px dashed #819556; margin:0 17px 7px; padding:10px }
.arcade-invitation strong { font-size:16px; letter-spacing:-.04em }
.arcade-invitation button { min-height:44px; padding:10px 12px; background:var(--lime); color:var(--ink); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); font:500 11px "DM Mono",monospace }
.arcade-invitation button[hidden] { display:none }
.arcade-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 17px 7px; font:10px/1.5 "DM Mono",monospace }
.arcade-footer a { color:#46651c; text-underline-offset:3px }
.arcade-toggle { flex:none; min-height:44px; border:0; padding:8px 0 8px 6px; background:transparent; color:#5c6859; font:inherit; text-decoration:underline; text-underline-offset:3px }
.arcade-toggle:disabled { cursor:default; text-decoration:none; opacity:.7 }
.arcade a:focus-visible,.arcade button:focus-visible { outline:2px solid var(--ink); outline-offset:4px }
@keyframes arcade-overtake { 0%,45% { background:#e3ff85; box-shadow:inset 3px 0 0 #739d22 } 100% { background:#fff; box-shadow:inset 0 0 0 transparent } }
@keyframes arcade-score-pop { 35% { transform:translateY(-3px) scale(1.08) } }
@media(min-width:701px) and (max-width:1050px) {
  .hero.hero-arcade { gap:32px; grid-template-columns:minmax(0,1fr) 340px }
  .hero-arcade h1 { font-size:clamp(54px,7.1vw,76px) }
  .hero-arcade .eyebrow { font-size:10px; line-height:1.7 }
  .hero-arcade .hero-actions { flex-wrap:wrap; gap:18px }
  .arcade-header { padding-inline:18px }
  .arcade-row { grid-template-columns:21px 30px minmax(0,1fr) 66px; gap:8px }
  .arcade-avatar { width:30px; height:30px }
}
@media(max-width:800px) {
  .hero.hero-arcade { grid-template-columns:minmax(0,1fr); gap:40px; padding:55px 0 68px }
  .hero-arcade h1 { font-size:clamp(52px,9vw,78px) }
  .arcade { width:100%; max-width:470px; justify-self:center }
}
@media(max-width:700px) {
  .hero.hero-arcade { gap:32px; padding-top:44px }
  .hero-arcade h1 { font-size:clamp(48px,10.7vw,66px) }
  .hero-arcade .lede { font-size:17px; margin:24px 0 }
  .hero-arcade .hero-proof { margin-top:28px; font-size:12px }
  .arcade { --arcade-step:59px; box-shadow:5px 5px 0 var(--ink) }
  .arcade-header { padding:17px 16px 14px }
  .arcade h2 { font-size:27px; margin:12px 0 8px }
  .arcade-columns { padding:12px 12px 7px; font-size:9px }
  .arcade-rows { height:calc(var(--arcade-step) * 3); margin:0 6px }
  .arcade-row { grid-template-columns:20px 28px minmax(0,1fr) 65px; gap:7px; padding-inline:6px }
  .arcade-row[data-rank="4"],.arcade-row[data-rank="5"] { visibility:hidden }
  .arcade-avatar { width:28px; height:28px }
  .arcade-rank,.arcade-score { font-size:12px }
  .arcade-username { font-size:11px }
  .arcade-change { font-size:10px }
  .arcade-moment { padding:11px 14px; min-height:55px }
  .arcade-invitation { margin:0 12px 8px; padding:11px }
  .arcade-invitation strong { font-size:15px }
  .arcade-invitation button { min-width:44px }
  .arcade-invitation button span { display:none }
  .arcade-footer { padding:0 12px 9px; flex-wrap:wrap; gap:0 8px }
}
@media(prefers-reduced-motion:reduce) {
  .arcade-row { transition:none; will-change:auto }
  .arcade-row[data-moving="true"],.arcade-row[data-moving="true"] .arcade-score { animation:none }
}