@font-face { font-family: "Descent Pixel"; src: url('data:font/woff;base64,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') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
:root { font-family: "Descent Pixel", monospace; color: #eff6f0; background: #0b1520; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(ellipse at 50% 40%, #243b49 0%, #0b1520 75%); }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #f0d98b; outline-offset: 5px; }
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#stage { position: relative; overflow: hidden; box-shadow: 0 12px 40px #0004; border-radius: 8px; flex-shrink: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#ui { position: absolute; top: 0; left: 0; width: 540px; height: 960px; transform-origin: top left; pointer-events: none; }
.screen { position: absolute; inset: 0; text-align: center; }
.title { padding-top: 186px; }.title>.primary { margin-top: 40px; }
.eyebrow { margin: 0 0 22px; font-size: 16px; letter-spacing: 1px; color: #9cc3bd; font-weight: 400; }
h1 { font-size: 72px; line-height: 1; letter-spacing: 2px; font-weight: 400; margin: 0; text-shadow: 0 4px 0 #07151d; }
h1 span { color: #8fdfc2; }
.primary { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 36px; min-width: 228px; height: 62px; padding: 0 29px; background: #8ce0c0; color: #122d31; border: 0; border-radius: 9px; box-shadow: 0 5px 0 #3e8c78; font-size: 19px; font-weight: 400; letter-spacing: 1px; }
.primary span { font-size: 25px; font-weight: 500; }.primary:hover { background: #a3eace; }.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #3e8c78; }
.retry-icon { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; }
.keys { color: #829da5; font-size: 12px; letter-spacing: .5px; margin: 25px 0 0; }
.touch-hint { display: none; }
@media (hover: none) { .keyboard-hint { display: none; }.touch-hint { display: inline; } }
.title-best { position: absolute; top: 861px; left: 0; right: 0; color: #9cb5bb; font-size: 12px; letter-spacing: 1px; }.title-best strong { margin-left: 13px; color: #d0e3dd; }
.hud { position: absolute; top: 22px; left: 29px; right: 29px; height: 57px; display: flex; align-items: center; gap: 18px; isolation: isolate; }
.hud::before { content: ""; position: absolute; inset: -22px -19px -9px; background: #11212f; z-index: -1; }
.health { flex: 1; min-width: 90px; max-width: 164px; }.health-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.health-label span, .floor>span, .best>span { color: #aec6c7; font-size: 11px; font-weight: 400; letter-spacing: 1px; }.health-label strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.health-track { height: 9px; background: #ffffff13; border-radius: 8px; overflow: hidden; }.health-track>div { height: 100%; background: #68d6b3; border-radius: 8px; }
.floor { display: flex; flex-direction: column; margin-left: auto; }.floor>strong { font-size: 33px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }.floor>strong span { font-size: 16px; margin-left: 5px; color: #8fdfc2; }
.best { display: flex; flex-direction: column; gap: 8px; text-align: right; }.best>strong { font-size: 15px; font-variant-numeric: tabular-nums; color: #bdced0; }
.pause-button { pointer-events: auto; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid #abcac321; color: #abcac3; background: #ffffff07; }
.pause-icon { display: block; width: 20px; height: 20px; fill: currentColor; }
.effects { position: absolute; top: 123px; left: 27px; display: flex; gap: 7px; }.effects span { border: 1px solid #92d9cd33; border-radius: 4px; background: #182b38; color: #b3d8d3; font-size: 11px; padding: 6px 10px; }.effects b { color: #e7f7ef; margin-left: 4px; }
.width-effect i { display: inline-block; height: 4px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.width-effect.long i { width: 19px; background: #92d6c8; }.width-effect.short i { width: 8px; background: #dca4d3; }
.over, .pause-overlay { display: flex; align-items: center; justify-content: center; background: #0815209e; }
.result-card { width: 424px; padding: 43px 25px; background: #1b3040; border: 2px solid #314958; border-radius: 12px; box-shadow: 0 8px 0 #0a1824; }
.over .result-card { background: transparent; border: 0; box-shadow: none; }
.result-card .eyebrow { color: #8ce0c0; margin-bottom: 17px; }.result-card h2 { font-size: 16px; font-weight: 450; color: #c0d1d0; margin: 0 0 20px; }
.result-floor { display: flex; flex-direction: column; margin: 0; }.result-floor strong { font-size: 94px; line-height: 1.05; font-weight: 400; letter-spacing: -5px; }.result-floor span { font-size: 12px; color: #9cbbb9; letter-spacing: 1px; margin-top: 6px; }
.result-best { font-size: 12px; color: #a7bec2; letter-spacing: 1px; margin: 24px 0 35px; }.result-best strong { color: #e7f7ef; margin-left: 9px; }
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #111f2e; color: #b5ceca; font-size: 16px; }
.loading-dot { width: 16px; height: 16px; background: #8ce0c0; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .primary:active { transform: none; } }