* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9a9fa5; font-family: Georgia, 'Times New Roman', serif; color: #f3f4f6; user-select: none; }
[hidden] { display: none !important; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
h1 { font-size: clamp(32px, 7vw, 80px); letter-spacing: .08em; font-weight: normal; margin: 0 0 .3em; text-shadow: 0 2px 20px #000a; }
h2 { font-weight: normal; letter-spacing: .1em; }
.dim { opacity: .75; font-size: 14px; }
#introTitle { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; animation: fadein 3s 3.5s both; }
#introTitle p { opacity: .6; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #0a0b0d66; padding: 20px; }
.modal { background: #0a0b0dcc; }
.card { background: #14161a; border: 1px solid #556; padding: 24px 32px; max-width: 560px; border-radius: 6px; }
button { font: inherit; font-size: 18px; margin: 8px; padding: 10px 28px; background: #0c0d10; color: #f3f4f6; border: 1px solid #cfd3da; border-radius: 3px; cursor: pointer; letter-spacing: .1em; }
button:hover { background: #cfd3da; color: #0c0d10; }
table { margin: 0 auto 12px; text-align: left; border-collapse: collapse; }
td { padding: 4px 12px; border-bottom: 1px solid #333; }
td:first-child { font-weight: bold; white-space: nowrap; }
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 6px #000c; }
#top { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 20px; }
#score { font-size: 44px; line-height: 1; }
#spd { text-align: right; } #barbox { width: 180px; height: 8px; background: #0006; margin: 4px 0; }
#bar { height: 100%; width: 0; background: #f3f4f6; } #bar.boost { background: #ffc48a; }
#power { text-align: center; font-size: 18px; color: #fff; min-height: 24px; }
#banner { position: fixed; top: 22%; width: 100%; text-align: center; font-size: clamp(24px, 4vw, 48px); letter-spacing: .15em; text-shadow: 0 2px 16px #000; animation: pulse 1s infinite; }
#popup { position: fixed; top: 38%; width: 100%; text-align: center; font-size: 36px; animation: rise 1.1s ease-out forwards; pointer-events: none; }
#flash { position: fixed; inset: 0; background: radial-gradient(#0000 30%, #8a0a1ccc); opacity: 0; pointer-events: none; }
#paused { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 56px; letter-spacing: .3em; background: #0a0b0d55; }
#paused p { font-size: 16px; letter-spacing: normal; opacity: .7; }
#flyTitle { position: fixed; top: 14%; width: 100%; text-align: center; font-size: clamp(24px, 4vw, 48px); letter-spacing: .2em; text-shadow: 0 2px 16px #000; pointer-events: none; opacity: 0; }
@keyframes ftitle { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 50% { opacity: .6; } }
@keyframes rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-50px); } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
#perf { position: fixed; left: 8px; bottom: 6px; font: 12px/1.2 ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 1px 4px #000; opacity: .85; pointer-events: none; }