*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;font-family:Arial,sans-serif;touch-action:none}canvas{display:block;width:100%;height:100%}#hud{position:fixed;z-index:5;top:12px;left:12px;color:white;background:#0008;padding:10px 14px;border-radius:12px;font-size:16px}#crosshair{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);color:white;font-size:28px;text-shadow:0 0 4px #000;pointer-events:none}#message{position:fixed;z-index:5;top:15px;right:12px;color:white;background:#0008;padding:10px;border-radius:12px;font-size:13px}#touch{position:fixed;z-index:6;inset:0;pointer-events:none}.pointer{pointer-events:auto}#joy{position:absolute;left:25px;bottom:25px;width:130px;height:130px;border-radius:50%;background:#ffffff22;border:2px solid #ffffff55;pointer-events:auto}#stick{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:#fff8}button{border:0;color:white;font-weight:bold;border-radius:50%;background:#1976d2cc;box-shadow:0 3px 12px #0007}#fire{position:absolute;right:28px;bottom:45px;width:90px;height:90px;pointer-events:auto}#jump{position:absolute;right:135px;bottom:38px;width:65px;height:65px;pointer-events:auto;background:#555c}#start{position:fixed;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#08131dcc,#0a294dcc);color:white;text-align:center}#start h1{font-size:34px;margin:0 0 8px}#start button{border-radius:14px;padding:16px 38px;font-size:18px;margin-top:18px}#start p{opacity:.8}