*{box-sizing:border-box;margin:0;padding:0}:root{--gold: #ffd700;--purple: #9370db;--bg: #04041a;--perfect: #00ff99;--good: #aaff00;--miss: #ff3333}html{height:100%;background:#04041a}body{height:100%;background:transparent;color:#fff;font-family:monospace,Courier New,Courier;overflow:hidden}#root{height:100%;display:flex;align-items:center;justify-content:center}.screen{display:flex;flex-direction:column;align-items:center;gap:20px;width:400px;max-width:100vw;padding:24px 20px;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a;backdrop-filter:blur(4px) saturate(1.4);-webkit-backdrop-filter:blur(4px) saturate(1.4)}.menu-screen{gap:12px}.menu-form{display:flex;flex-direction:column;gap:12px;width:100%}.name-input{background:#ffffff14;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:#fff;font-family:monospace;font-size:1.1rem;padding:12px 16px;outline:none;text-align:center;letter-spacing:.05em;transition:border-color .2s,background .2s;width:100%;box-sizing:border-box;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.name-input:focus{background:#ffffff1f;border-color:#9370dbb3;box-shadow:0 0 0 3px #9370db26}.btn-play{background:#ffd7001a;border:1px solid rgba(255,215,0,.5);border-radius:8px;color:var(--gold);cursor:pointer;font-family:monospace;font-size:1.1rem;font-weight:700;letter-spacing:.15em;padding:14px 24px;transition:all .15s;text-shadow:0 0 10px rgba(255,215,0,.4);box-shadow:0 0 20px #ffd70014,inset 0 1px #ffffff14;width:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn-play:hover{background:#ffd7002e;border-color:#ffd700cc;box-shadow:0 0 28px #ffd70040,inset 0 1px #ffffff1a;transform:translateY(-1px)}.btn-play:active{transform:translateY(1px)}.instructions{text-align:center;font-size:.75rem;color:#fff6;line-height:1.7}kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:2px 6px;font-family:monospace}.hint{color:#ffffff40;font-size:.7rem}.lobby-screen{gap:16px}.lobby-title{font-size:1.1rem;letter-spacing:.1em;color:#fff9}.room-code{color:var(--gold);font-size:1.4rem;letter-spacing:.3em;text-shadow:0 0 12px rgba(255,215,0,.5)}.lobby-hint{font-size:.7rem;color:#ffffff4d;letter-spacing:.05em}.players-list{width:100%;min-height:80px;display:flex;flex-direction:column;gap:10px;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.waiting-text{color:#ffffff4d;font-size:.8rem;text-align:center;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.7}}.player-row{display:flex;align-items:center;gap:10px;font-size:.9rem}.player-dot{color:var(--perfect);font-size:.6rem}.solo-hint{font-size:.7rem;color:#ffffff4d}.bg-video{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;opacity:.55;z-index:-1;pointer-events:none}.game-screen{position:fixed;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;box-shadow:none;border-radius:0;width:100vw;height:100vh}.game-canvas{display:block;width:100%;height:100%;border-radius:0;border:none;cursor:pointer;touch-action:none}.loading-screen{gap:28px;align-items:center;background:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.ff-crystal{width:86px;height:112px;filter:drop-shadow(0 0 10px rgba(80,160,255,.8)) drop-shadow(0 0 28px rgba(60,120,255,.4));animation:crystal-float 3s ease-in-out infinite,crystal-glow 2s ease-in-out infinite}@keyframes crystal-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes crystal-glow{0%,to{filter:drop-shadow(0 0 10px rgba(80,160,255,.7)) drop-shadow(0 0 24px rgba(60,120,255,.35))}50%{filter:drop-shadow(0 0 22px rgba(150,220,255,1)) drop-shadow(0 0 52px rgba(100,170,255,.65))}}.loading-connecting{font-size:1.4rem;letter-spacing:.5em;color:#ffffff59;animation:pulse 1.5s infinite}.countdown-num{font-size:5rem;font-weight:700;color:var(--gold);text-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,215,0,.4);letter-spacing:.05em;animation:count-pop .3s cubic-bezier(.34,1.56,.64,1);line-height:1}@keyframes count-pop{0%{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}.countdown-go{font-size:2.8rem;font-weight:700;color:var(--perfect);text-shadow:0 0 30px rgba(0,255,153,.8);letter-spacing:.15em;animation:count-pop .25s cubic-bezier(.34,1.56,.64,1)}.results-screen{width:640px;max-width:96vw;gap:16px;overflow-y:auto;max-height:100vh}.results-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.results-title{font-size:1.6rem;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,.5);letter-spacing:.2em;animation:laugh-in .4s ease-out;flex-shrink:0}@keyframes laugh-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.score-block{text-align:right}.final-score{font-size:2rem;font-weight:700;color:var(--gold);letter-spacing:.1em}.rank{font-size:.7rem;color:var(--purple);margin-top:2px;letter-spacing:.1em}.results-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}.results-col{display:flex;flex-direction:column;gap:12px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.stat{display:flex;flex-direction:column;align-items:center;padding:12px 8px;background:#ffffff0f;border-radius:8px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stat-label{font-size:.6rem;letter-spacing:.15em;color:#fff6;margin-bottom:4px}.stat-value{font-size:1.6rem;font-weight:700}.stat.perfect .stat-value{color:var(--perfect)}.stat.good .stat-value{color:var(--good)}.stat.miss .stat-value{color:var(--miss)}.stat.combo .stat-value{color:var(--gold)}.accuracy-bar-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}.accuracy-bar{width:100%;height:14px;display:flex;border-radius:7px;overflow:hidden;background:#ffffff0d}.bar-perfect{background:var(--perfect)}.bar-good{background:var(--good)}.bar-miss{background:var(--miss)}.accuracy-pct{font-size:.7rem;color:#fff6}.leaderboard{width:100%}.leaderboard h3{font-size:.7rem;letter-spacing:.2em;color:#ffffff4d;text-align:center;margin-bottom:10px}.leaderboard ol{list-style:none;display:flex;flex-direction:column;gap:6px}.leaderboard li{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-radius:6px;font-size:.8rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);counter-increment:rank;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.leaderboard li:before{content:counter(rank);color:#ffffff40;font-size:.7rem;width:16px}.leaderboard li.me{background:#ffd7001a;border:1px solid rgba(255,215,0,.3)}.leaderboard li.me .lb-name{color:var(--gold)}.lb-name{color:#ffffffb3}.lb-score{color:var(--gold);letter-spacing:.05em}.disclaimer{position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:.5rem;letter-spacing:.08em;color:#ffffff2e;pointer-events:none;z-index:10}