* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #111; }
body { display: flex; justify-content: center; align-items: center; }
#wrapper { display: flex; flex-direction: column; align-items: center; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#hud { width: 100%; height: 24px; background: #222; border-top: 2px solid #444; display: flex; align-items: center; padding: 0 8px; font-family: monospace; font-size: 13px; color: #ccc; white-space: nowrap; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); display: none; justify-content: center; align-items: center; z-index: 10; }
#overlay.active { display: flex; }
#overlay-content { font-family: monospace; text-align: center; color: #fff; }
#overlay-content h1 { font-size: 36px; margin-bottom: 16px; letter-spacing: 2px; }
#overlay-content h2 { font-size: 28px; margin-bottom: 12px; }
#overlay-content p { font-size: 16px; margin-bottom: 8px; color: #aaa; }
#overlay-content .score-line { font-size: 22px; color: #ffcc00; margin: 12px 0; }
#overlay-content .blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }