*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a2e;--surface:#16213e;--accent:#6c5ce7;--accent-light:#a29bfe;--text:#fff;--text-muted:#b2bec3;--radius:20px;--font:"Segoe UI",system-ui,-apple-system,sans-serif}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font);color:var(--text);-webkit-tap-highlight-color:transparent;background:linear-gradient(160deg,#1a1a2e 0%,#2d1b69 50%,#1a1a2e 100%);min-height:100dvh}#app{min-height:100dvh}.hidden{display:none!important}.header{text-align:center;padding:1rem 1rem .5rem}.title{background:linear-gradient(90deg,#ffd43b,#ff6b6b,#da77f2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.8rem,6vw,2.8rem);font-weight:800}.subtitle{color:var(--text-muted);margin-top:.25rem;font-size:clamp(1rem,3vw,1.2rem)}.welcome{justify-content:center;align-items:center;min-height:calc(100dvh - 120px);padding:1.5rem;display:flex}.welcome-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius);text-align:center;background:#ffffff14;border:2px solid #ffffff1f;max-width:420px;padding:2rem 1.5rem}.welcome-icon{margin-bottom:1rem;font-size:4rem;animation:2s ease-in-out infinite bounce}.welcome-card h2{margin-bottom:.75rem;font-size:1.6rem}.welcome-card p{color:var(--text-muted);margin-bottom:1.5rem;font-size:1.05rem;line-height:1.5}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.btn{cursor:pointer;font-family:var(--font);border:0;border-radius:50px;font-weight:700;transition:transform .15s,box-shadow .15s}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.6;cursor:wait}.btn-primary{background:linear-gradient(135deg,var(--accent),#e056fd);color:#fff;box-shadow:0 4px 20px #6c5ce780}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 28px #6c5ce7b3}.btn-large{width:100%;padding:1rem 2.5rem;font-size:1.25rem}.game{max-width:640px;margin:0 auto;padding:0 .75rem 1.5rem}.camera-wrap{aspect-ratio:4/3;border-radius:var(--radius);background:#000;border:3px solid #ffffff26;width:100%;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}#video{object-fit:cover;width:100%;height:100%;display:block;transform:scaleX(-1)}#overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.zones{pointer-events:none;position:absolute;inset:0;transform:scaleX(-1)}.zone{background:var(--zone-color);opacity:.12;border-bottom:1px solid #ffffff14;transition:opacity .15s;position:absolute;left:0;right:0}.zone.active{opacity:.35;box-shadow:inset 0 0 30px var(--zone-color)}.sparkles{pointer-events:none;position:absolute;inset:0;overflow:hidden;transform:scaleX(-1)}.sparkle{border-radius:50%;animation:.6s ease-out forwards sparkle-pop;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 12px}@keyframes sparkle-pop{0%{opacity:1;transform:translate(-50%,-50%)scale(.3)}to{opacity:0;transform:translate(-50%,-80%)scale(1.8)}}.hand-hint{background:#00000073;justify-content:center;align-items:center;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700;animation:1.5s ease-in-out infinite pulse;display:flex;position:absolute;inset:0}@keyframes pulse{0%,to{opacity:.85}50%{opacity:1}}.controls{text-align:center;margin-top:1rem}.mode-picker{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.mode-label{color:var(--text-muted);width:100%;margin-bottom:.25rem;font-size:.95rem}.mode-btn{color:var(--text);font-family:var(--font);cursor:pointer;background:#ffffff14;border:2px solid #ffffff26;border-radius:50px;padding:.6rem 1.1rem;font-size:.95rem;font-weight:600;transition:background .15s,border-color .15s}.mode-btn.active{background:var(--accent);border-color:var(--accent-light)}.mode-btn:active{transform:scale(.96)}.instructions{color:var(--text-muted);padding:0 .5rem;font-size:.95rem;line-height:1.5}.keyboard{justify-content:center;gap:.5rem;margin-top:1rem;display:flex}.key{aspect-ratio:1;background:var(--key-color);color:#0000008c;-webkit-user-select:none;user-select:none;border-radius:12px;flex:1;justify-content:center;align-items:center;max-width:56px;font-size:.95rem;font-weight:800;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 4px #0003}.key.playing{box-shadow:0 0 0 #0003,0 0 20px var(--key-color);color:#000000b3;transform:translateY(4px)}.key-note{text-transform:uppercase}@media(width>=768px){.game{max-width:720px;padding-bottom:2rem}.mode-label{width:auto;margin-bottom:0}.key{max-width:72px;font-size:1.15rem}}