*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif}html,body,#root{width:100%;height:100%;overflow:hidden;background:#1a0a1e}#root{display:flex;justify-content:center;align-items:center}.game-wrapper{position:relative;width:100%;max-width:480px;height:100vh;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#1a0a2e,#2d1040 40%,#3a1850)}.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;z-index:10;pointer-events:none}.score-display{text-align:center}.score-label{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#ffc8dc80;font-weight:600}.score-value{font-size:48px;font-weight:800;color:#ff6b9d;text-shadow:0 0 20px rgba(255,107,157,.4);line-height:1}.best-display{text-align:right}.best-label{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#ffc8dc66}.best-value{font-size:22px;font-weight:700;color:#ffb464b3}canvas{display:block;width:100%;height:100%;cursor:pointer}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;background:#0a0514d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-title{font-size:42px;font-weight:900;background:linear-gradient(135deg,#ff6b9d,#ffa06b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:-.02em}.overlay-subtitle{font-size:14px;color:#ffc8dc99;margin-bottom:32px;text-align:center;line-height:1.5}.overlay-score{font-size:64px;font-weight:900;color:#ff6b9d;text-shadow:0 0 30px rgba(255,107,157,.5);margin-bottom:4px}.overlay-score-label{font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:#ffc8dc80;margin-bottom:8px}.overlay-best{font-size:18px;color:#ffb464b3;margin-bottom:32px}.new-record{font-size:14px;font-weight:700;color:gold;text-transform:uppercase;letter-spacing:.15em;margin-bottom:24px;animation:pulse 1s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.play-btn{padding:14px 48px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;border:none;border-radius:50px;background:linear-gradient(135deg,#ff6b9d,#ff8c6b);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 20px #ff6b9d66}.play-btn:hover{transform:scale(1.05);box-shadow:0 6px 30px #ff6b9d99}.play-btn:active{transform:scale(.97)}.combo-text{position:absolute;font-size:24px;font-weight:800;pointer-events:none;z-index:15;animation:comboFloat .8s ease forwards;text-shadow:0 0 10px currentColor}@keyframes comboFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.3)}}.perfect-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 70%,rgba(255,215,0,.15),transparent 60%);pointer-events:none;z-index:5;animation:flashFade .4s ease forwards}@keyframes flashFade{0%{opacity:1}to{opacity:0}}