:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow-x: hidden; background: #0a0a0a; color: #dadada; font-family: "Press Start 2P", Inter, Arial, sans-serif; }
.retro-display { width: min(1180px, calc(100% - 28px)); padding: 32px 0; }
.retro-row { margin-top: 1em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5em; font-size: clamp(.82rem, 2vw, 1.5rem); letter-spacing: .08em; }
.retro-stat { min-width: 0; max-width: 280px; display: flex; align-items: center; justify-content: center; gap: .3em; text-align: center; }
.retro-stat i { width: 1.5em; font-size: 1em; }
.retro-stat.total { font-weight: bold; font-size: 1.1em; }
.retro-secondary { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0; margin-left: .5em; font-size: .45em; line-height: 1; text-align: left; opacity: .65; }
.retro-secondary span { display: flex; align-items: center; white-space: nowrap; }
.retro-secondary i { width: 1.5em; margin-right: .2em; }
.retro-track { cursor: default; }
#confetti-canvas { position: fixed; pointer-events: none; inset: 0; width: 100vw; height: 100vh; z-index: 9999; }
.retro-empty { margin-top: 2em; text-align: center; color: #777; font-size: .65rem; line-height: 1.8; }
@media (max-width: 620px) { .retro-row { gap: 1em; } .retro-stat { flex-basis: 100%; } }