*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;color:#e0e0e0;font-family:'Segoe UI',system-ui,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;user-select:none}
.screen{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;max-width:420px;padding:20px}
.screen.active{display:flex}
h1{font-size:2.4em;margin-bottom:8px;background:linear-gradient(135deg,#ff6b6b,#ffa94d,#ffd43b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:#888;font-size:1.1em;margin-bottom:30px}
.btn-start{background:linear-gradient(135deg,#ff6b6b,#ffa94d);border:none;color:#fff;padding:16px 48px;font-size:1.2em;border-radius:50px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-start:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(255,107,107,.4)}
.game-area{display:flex;flex-direction:column;align-items:center;gap:20px}
.timer-bar{width:100%;max-width:350px;height:10px;background:#1a1a2e;border-radius:5px;overflow:hidden}
.timer-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ffa94d);border-radius:5px;transition:width .1s linear}
.time-text{font-size:3em;font-weight:700;color:#ffa94d;font-variant-numeric:tabular-nums}
.tap-btn{width:200px;height:200px;border-radius:50%;border:none;background:radial-gradient(circle at 35% 35%,#ff8a8a,#ff4757);color:#fff;font-size:2em;font-weight:700;cursor:pointer;box-shadow:0 8px 30px rgba(255,71,87,.4);transition:transform .08s,box-shadow .08s;position:relative;outline:none}
.tap-btn:active,.tap-btn.pressed{transform:scale(.92);box-shadow:0 2px 10px rgba(255,71,87,.3)}
.tap-btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);animation:ripple .5s ease-out forwards;pointer-events:none}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(2.5);opacity:0}}
.stats-row{display:flex;gap:40px;font-size:1.2em}
.stats-row .label{color:#888;font-size:.8em}
.stats-row .value{font-size:1.8em;font-weight:700;color:#ffa94d;font-variant-numeric:tabular-nums}
.tps-live{font-size:1.1em;color:#888}
.tps-live strong{color:#ffd43b;font-size:1.3em}
/* Results */
.rating{font-size:3em;margin:10px 0}
.rating-label{font-size:1.6em;font-weight:700;margin-bottom:5px}
.result-stats{display:flex;gap:30px;margin:20px 0 30px}
.result-stat{text-align:center}
.result-stat .val{font-size:2em;font-weight:700;color:#ffa94d}
.result-stat .lbl{color:#888;font-size:.85em}
.meter{width:100%;max-width:300px;height:8px;background:#1a1a2e;border-radius:4px;overflow:hidden;margin-bottom:25px}
.meter-fill{height:100%;border-radius:4px;transition:width .6s ease-out}